@attribute [Route(Routes.SETTINGS)]
@using AIStudio.Provider
@using AIStudio.Settings
@using AIStudio.Settings.DataModel
@using AIStudio.Components.Settings
@using Host = AIStudio.Provider.SelfHosted.Host

<MudText Typo="Typo.h3" Class="mb-12">Settings</MudText>

<InnerScrolling HeaderHeight="10em">
    <MudExpansionPanels Class="mb-3" MultiExpansion="@false">
        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="Configure Providers">
            <MudText Typo="Typo.h4" Class="mb-3">Configured Providers</MudText>
            <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                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.ConfigurationData.Providers" Hover="@true" Class="border-dashed border rounded-lg">
                <ColGroup>
                    <col style="width: 3em;"/>
                    <col style="width: 12em;"/>
                    <col style="width: 12em;"/>
                    <col/>
                    <col style="width: 34em;"/>
                </ColGroup>
                <HeaderContent>
                    <MudTh>#</MudTh>
                    <MudTh>Instance Name</MudTh>
                    <MudTh>Provider</MudTh>
                    <MudTh>Model</MudTh>
                    <MudTh Style="text-align: left;">Actions</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd>@context.Num</MudTd>
                    <MudTd>@context.InstanceName</MudTd>
                    <MudTd>@context.UsedLLMProvider</MudTd>
                    <MudTd>
                        @if (context.UsedLLMProvider is not LLMProviders.SELF_HOSTED)
                        {
                            @this.GetLLMProviderModelName(context)
                        }
                        else if (context.UsedLLMProvider is LLMProviders.SELF_HOSTED && context.Host is not Host.LLAMACPP)
                        {
                            @this.GetLLMProviderModelName(context)
                        }
                        else
                        {
                            @("as selected by provider")
                        }
                    </MudTd>
                    <MudTd Style="text-align: left;">
                        <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.OpenInBrowser" Class="ma-2" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())">
                            Open Dashboard
                        </MudButton>
                        <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.Edit" Class="ma-2" OnClick="() => this.EditLLMProvider(context)">
                            Edit
                        </MudButton>
                        <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" Class="ma-2" OnClick="() => this.DeleteLLMProvider(context)">
                            Delete
                        </MudButton>
                    </MudTd>
                </RowTemplate>
            </MudTable>

            @if(this.SettingsManager.ConfigurationData.Providers.Count == 0)
            {
                <MudText Typo="Typo.h6" Class="mt-3">No providers configured yet.</MudText>
            }

            <MudButton Variant="Variant.Filled" Color="@Color.Primary" StartIcon="@Icons.Material.Filled.AddRoad" Class="mt-3 mb-6" OnClick="@this.AddLLMProvider">
                Add Provider
            </MudButton>
            
            <MudText Typo="Typo.h4" Class="mb-3">LLM Provider Confidence</MudText>
            <MudJustifiedText Class="mb-3">
                Do you want to always be able to recognize how trustworthy your LLM providers are? This way,
                you keep control over which provider you send your data to. You have two options for this:
                Either you choose a common schema, or you configure the trust levels for each LLM provider yourself.
            </MudJustifiedText>
            
            <ConfigurationOption OptionDescription="Do you want to enforce an app-wide minimum confidence level?" LabelOn="Yes, enforce a minimum confidence level" LabelOff="No, do not enforce a minimum confidence level" State="@(() => this.SettingsManager.ConfigurationData.LLMProviders.EnforceGlobalMinimumConfidence)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.LLMProviders.EnforceGlobalMinimumConfidence = updatedState)" OptionHelp="When enabled, you can enforce a minimum confidence level for all LLM providers. This way, you can ensure that only trustworthy providers are used."/>
            @if(this.SettingsManager.ConfigurationData.LLMProviders.EnforceGlobalMinimumConfidence)
            {
                <ConfigurationMinConfidenceSelection RestrictToGlobalMinimumConfidence="@false" SelectedValue="@(() => this.SettingsManager.ConfigurationData.LLMProviders.GlobalMinimumConfidence)" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.LLMProviders.GlobalMinimumConfidence = selectedValue)"/>
            }
            
            <ConfigurationOption OptionDescription="Show provider's confidence level?" LabelOn="Yes, show me the confidence level" LabelOff="No, please hide the confidence level" State="@(() => this.SettingsManager.ConfigurationData.LLMProviders.ShowProviderConfidence)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.LLMProviders.ShowProviderConfidence = updatedState)" OptionHelp="When enabled, we show you the confidence level for the selected provider in the app. This helps you assess where you are sending your data at any time. Example: are you currently working with sensitive data? Then choose a particularly trustworthy provider, etc."/>
            @if (this.SettingsManager.ConfigurationData.LLMProviders.ShowProviderConfidence)
            {
                <ConfigurationSelect OptionDescription="Select a confidence scheme" SelectedValue="@(() => this.SettingsManager.ConfigurationData.LLMProviders.ConfidenceScheme)" Data="@ConfigurationSelectDataFactory.GetConfidenceSchemesData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.LLMProviders.ConfidenceScheme = selectedValue)" OptionHelp="Choose the scheme that best suits you and your life. Do you trust any western provider? Or only providers from the USA or exclusively European providers? Then choose the appropriate scheme. Alternatively, you can assign the confidence levels to each provider yourself."/>
                @if (this.SettingsManager.ConfigurationData.LLMProviders.ConfidenceScheme is ConfidenceSchemes.CUSTOM)
                {
                    <MudTable Items="@(Enum.GetValues<LLMProviders>().Where(x => x is not LLMProviders.NONE))" Hover="@true" Class="border-dashed border rounded-lg">
                        <ColGroup>
                            <col style="width: 12em;"/>
                            <col/>
                            <col style="width: 22em;"/>
                        </ColGroup>
                        <HeaderContent>
                            <MudTh>LLM Provider</MudTh>
                            <MudTh>Description</MudTh>
                            <MudTh>Confidence Level</MudTh>
                        </HeaderContent>
                        <RowTemplate>
                            <MudTd Style="vertical-align: top;">
                                @context.ToName()
                            </MudTd>
                            <MudTd>
                                <MudMarkdown Value="@context.GetConfidence(this.SettingsManager).Description"/>
                            </MudTd>
                            <MudTd Style="vertical-align: top;">
                                <MudMenu StartIcon="@Icons.Material.Filled.Security" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" Label="@this.GetCurrentConfidenceLevelName(context)" Variant="Variant.Filled" Style="@this.SetCurrentConfidenceLevelColorStyle(context)">
                                    @foreach (var confidenceLevel in Enum.GetValues<ConfidenceLevel>().OrderBy(n => n))
                                    {
                                        if(confidenceLevel is ConfidenceLevel.NONE or ConfidenceLevel.UNKNOWN)
                                            continue;

                                        <MudMenuItem OnClick="@(async () => await this.ChangeCustomConfidenceLevel(context, confidenceLevel))">
                                            @confidenceLevel.GetName()
                                        </MudMenuItem>
                                    }
                                </MudMenu>
                            </MudTd>
                        </RowTemplate>
                    </MudTable>
                }
            }

        </ExpansionPanel>

        @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
        {
            <ExpansionPanel HeaderIcon="@Icons.Material.Filled.IntegrationInstructions" HeaderText="Configure Embeddings">
                <PreviewPrototype/>
                <MudText Typo="Typo.h4" Class="mb-3">
                    Configured Embeddings
                </MudText>
                <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                    Embeddings are a way to represent words, sentences, entire documents, or even images and videos as digital
                    fingerprints. Just like each person has a unique fingerprint, embedding models create unique digital patterns
                    that capture the meaning and characteristics of the content they analyze. When two things are similar in meaning
                    or content, their digital fingerprints will look very similar. For example, the fingerprints for 'happy' and
                    'joyful' would be more alike than those for 'happy' and 'sad'.
                </MudJustifiedText>

                <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                    This helps AI Studio understand and compare things in a way that's similar to how humans do. When you're working on
                    something, AI Studio can automatically identify related documents and data by comparing their digital fingerprints.
                    For instance, if you're writing about customer service, AI Studio can instantly find other documents in your data that
                    discuss similar topics or experiences, even if they use different words.
                </MudJustifiedText>
                <MudTable Items="@this.SettingsManager.ConfigurationData.EmbeddingProviders" Hover="@true" Class="border-dashed border rounded-lg">
                    <ColGroup>
                        <col style="width: 3em;"/>
                        <col style="width: 12em;"/>
                        <col style="width: 12em;"/>
                        <col/>
                        <col style="width: 40em;"/>
                    </ColGroup>
                    <HeaderContent>
                        <MudTh>#</MudTh>
                        <MudTh>Name</MudTh>
                        <MudTh>Provider</MudTh>
                        <MudTh>Model</MudTh>
                        <MudTh Style="text-align: left;">Actions</MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd>@context.Num</MudTd>
                        <MudTd>@context.Name</MudTd>
                        <MudTd>@context.UsedLLMProvider</MudTd>
                        <MudTd>@this.GetEmbeddingProviderModelName(context)</MudTd>
                        
                        <MudTd Style="text-align: left;">
                            <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.OpenInBrowser" Class="ma-2" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())">
                                Open Dashboard
                            </MudButton>
                            <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.Edit" Class="ma-2" OnClick="() => this.EditEmbeddingProvider(context)">
                                Edit
                            </MudButton>
                            <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete" Class="ma-2" OnClick="() => this.DeleteEmbeddingProvider(context)">
                                Delete
                            </MudButton>
                        </MudTd>
                    </RowTemplate>
                </MudTable>

                @if (this.SettingsManager.ConfigurationData.EmbeddingProviders.Count == 0)
                {
                    <MudText Typo="Typo.h6" Class="mt-3">No embeddings configured yet.</MudText>
                }

                <MudButton Variant="Variant.Filled" Color="@Color.Primary" StartIcon="@Icons.Material.Filled.AddRoad" Class="mt-3 mb-6" OnClick="@this.AddEmbeddingProvider">
                    Add Embedding
                </MudButton>
            </ExpansionPanel>
        }

        <SettingsPanelProfiles AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelApp AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelChat AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelWorkspaces AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelIconFinder AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelTranslation AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelCoding AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelERIServer AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelTextSummarizer AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelAgenda AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelGrammarSpelling AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelRewrite AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelWritingEMails AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelJobPostings AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelLegalCheck AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelSynonyms AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelMyTasks AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelAssistantBias AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
        <SettingsPanelAgentContentCleaner AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
    </MudExpansionPanels>
</InnerScrolling>