AuthorBuddy/Components/Pages/Settings.razor

@page "/settings"
@attribute [Authorize]
@inject ISettingsService SettingsService
@inject IThemeService ThemeService
@inject IOllamaService OllamaService
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime
@inject IProjectService ProjectService
@inject ILocalizationService Loc

<PageTitle>@Loc["page.title.settings"] - Author Buddy</PageTitle>

<div class="settings-page">

    <div class="settings-section">
        <h3 class="settings-section-title">@Loc["settings.section.user"]</h3>
        <div class="form-group">
            <label for="userSelect">@Loc["settings.user.label.active"]</label>
            <select id="userSelect" value="@selectedUserId" @onchange="SwitchUser">
                @foreach (var u in users)
                {
                    <option value="@u.Id">@u.Name (@(u.Role == AuthorBuddy.Web.Data.UserRole.Administrator ? Loc["settings.user.role.admin"] : Loc["settings.user.role.author"]))</option>
                }
            </select>
        </div>
        <div class="form-group">
            <label for="newUserName">@Loc["settings.user.label.new"]</label>
            <div style="display: flex; gap: 8px;">
                <input id="newUserName" @bind="newUserName" placeholder="@Loc["settings.user.placeholder.name"]" style="flex: 1;" />
                <button class="btn btn-secondary" @onclick="AddUser">@Loc["settings.user.button.add"]</button>
            </div>
        </div>
    </div>

    <div class="settings-section" style="margin-bottom:16px;">
        <button class="btn btn-secondary" @onclick='() => Navigation.NavigateTo("/setup-2fa")'>@Loc["settings.user.link.2fa"]</button>
    </div>

    <div class="settings-context">
        @if (currentProjectName != null)
        {
            <span class="settings-badge settings-badge-project">@Loc["settings.context.project"]: @currentProjectName</span>
        }
        else
        {
            <span class="settings-badge settings-badge-user">@Loc["settings.context.user"]</span>
        }
    </div>

    <div class="settings-layout">

        <div class="settings-column" >
            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.models"]</h3>
                <div class="form-group">
                    <label for="ragModel">@Loc["settings.models.label.rag"]</label>
                    <select id="ragModel" @bind="ragModel">
                        @if (availableModels.Count == 0)
                        {
                            <option value="">@Loc["settings.models.empty"]</option>
                        }
                        @foreach (var m in availableModels)
                        {
                            <option value="@m.Name">@m.Name</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label for="styleModel">@Loc["settings.models.label.style"]</label>
                    <select id="styleModel" @bind="styleModel">
                        @if (availableModels.Count == 0)
                        {
                            <option value="">@Loc["settings.models.empty"]</option>
                        }
                        @foreach (var m in availableModels)
                        {
                            <option value="@m.Name">@m.Name</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label for="spellingModel">@Loc["settings.models.label.spellcheck"]</label>
                    <select id="spellingModel" @bind="spellingModel">
                        @if (availableModels.Count == 0)
                        {
                            <option value="">@Loc["settings.models.empty"]</option>
                        }
                        @foreach (var m in availableModels)
                        {
                            <option value="@m.Name">@m.Name</option>
                        }
                    </select>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.ollama_server"]</h3>
                <div class="form-group">
                    <label for="ollamaUrl">@Loc["settings.ollama.label.url"]</label>
                    <input id="ollamaUrl" @bind="ollamaUrl" placeholder="http://localhost:11434" />
                    <div class="form-hint">@Loc["settings.ollama.hint.url"]</div>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.appearance"]</h3>
                <div class="form-group">
                    <label for="themeSelect">@Loc["settings.appearance.label.theme"]</label>
                    <select id="themeSelect" @bind="selectedTheme">
                        <option value="light">@Loc["settings.appearance.theme.light"]</option>
                        <option value="dark">@Loc["settings.appearance.theme.dark"]</option>
                        <option value="w95">W95 @Loc["settings.appearance.theme.retro"]</option>
                    </select>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.language"]</h3>
                <div class="form-group">
                    <label for="languageSelect">@Loc["settings.language.label"]</label>
                    <select id="languageSelect" @bind="selectedLanguage">
                        <option value="de">Deutsch</option>
                        <option value="en">English</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="settings-column" >
            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.editor_prompt"]</h3>
                <div class="form-group">
                    <textarea id="lektorPrompt" @bind="lektorPrompt" rows="6"></textarea>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.factcheck_template"]</h3>
                <div class="form-group">
                    <textarea id="factCheckTemplate" @bind="factCheckTemplate" rows="6"></textarea>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.spellcheck_prompt"]</h3>
                <div class="form-group">
                    <textarea id="spellingPrompt" @bind="spellingPrompt" rows="6"></textarea>
                </div>
            </div>
        </div>

        <div class="settings-column" >
            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.advocatus_diaboli"]</h3>
                <div class="form-group">
                    <textarea id="advocatusDiaboliPrompt" @bind="advocatusDiaboliPrompt" rows="6"></textarea>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.hook_finder"]</h3>
                <div class="form-group">
                    <textarea id="hookFinderPrompt" @bind="hookFinderPrompt" rows="6"></textarea>
                </div>
            </div>

            <div class="settings-section">
                <h3 class="settings-section-title">@Loc["settings.section.eli5"]</h3>
                <div class="form-group">
                    <textarea id="eli5Prompt" @bind="eli5Prompt" rows="6"></textarea>
                </div>
            </div>
        </div>

    </div>

    <div class="settings-actions">
        <button class="btn btn-primary" @onclick="SaveSettings">@Loc["settings.button.save"]</button>
        @if (!string.IsNullOrEmpty(statusMessage))
        {
            <span class="settings-status">@statusMessage</span>
        }
    </div>

</div>

@code {
    private string ragModel = "llama3.2";
    private string styleModel = "llama3.2";
    private string spellingModel = "phi3:mini";
    private string selectedTheme = "light";
    private string ollamaUrl = "http://localhost:11434";
    private string lektorPrompt = string.Empty;
    private string factCheckTemplate = string.Empty;
    private string spellingPrompt = string.Empty;
    private string advocatusDiaboliPrompt = string.Empty;
    private string hookFinderPrompt = string.Empty;
    private string eli5Prompt = string.Empty;
    private string selectedLanguage = "de";
    private string newProjectName = string.Empty;
    private string newUserName = string.Empty;
    private string statusMessage = string.Empty;
    private List<LLM_Model> availableModels = new();
    private List<UserEntity> users = new();
    private int selectedUserId;
    private string? currentProjectName;

    protected override async Task OnInitializedAsync()
    {
        users = await SettingsService.GetUsersAsync();
        var current = await SettingsService.GetCurrentUserAsync();
        selectedUserId = current.Id;

        var pid = SettingsService.CurrentProjectId;
        if (pid != null)
        {
            var project = await ProjectService.GetProjectAsync(pid.Value);
            currentProjectName = project?.Name;
        }

        await LoadUserSettings();

        try
        {
            var models = await OllamaService.GetLocalModelsAsync();
            availableModels = models.ToList();
        }
        catch
        {
            availableModels = new();
        }
    }

    private async Task LoadUserSettings()
    {
        ragModel = await SettingsService.GetRagModelAsync() ?? "llama3.2";
        styleModel = await SettingsService.GetStyleModelAsync() ?? "llama3.2";
        spellingModel = await SettingsService.GetSpellingModelAsync() ?? "phi3:mini";
        selectedTheme = await SettingsService.GetThemeAsync() ?? "light";
        ollamaUrl = await SettingsService.GetOllamaUrlAsync() ?? "http://localhost:11434";
        lektorPrompt = await SettingsService.GetLektorSystemPromptAsync() ?? string.Empty;
        factCheckTemplate = await SettingsService.GetFactCheckTemplateAsync() ?? string.Empty;
        spellingPrompt = await SettingsService.GetSpellingPromptAsync() ?? string.Empty;
        advocatusDiaboliPrompt = await SettingsService.GetAdvocatusDiaboliPromptAsync() ?? string.Empty;
        hookFinderPrompt = await SettingsService.GetHookFinderPromptAsync() ?? string.Empty;
        eli5Prompt = await SettingsService.GetEli5PromptAsync() ?? string.Empty;
        selectedLanguage = await SettingsService.GetLanguageAsync() ?? "de";
    }

    private async Task SwitchUser(ChangeEventArgs e)
    {
        var userId = int.Parse(e.Value?.ToString() ?? "0");
        selectedUserId = userId;
        SettingsService.SetCurrentUser(userId);
        await SettingsService.InitializeAsync();
        await LoadUserSettings();
    }

    private async Task AddUser()
    {
        if (string.IsNullOrWhiteSpace(newUserName)) return;

        var user = await SettingsService.CreateUserAsync(newUserName);
        users.Add(user);
        newUserName = string.Empty;
        statusMessage = string.Format(Loc["settings.status.user_created"], user.Name);
    }

    private async Task SaveSettings()
    {
        await SettingsService.SaveOllamaUrlAsync(ollamaUrl);
        OllamaService.Reconfigure(ollamaUrl);

        if (!string.IsNullOrWhiteSpace(ragModel))
        {
            var ok = await OllamaService.TestEmbeddingAsync(ragModel);
            if (!ok)
            {
                statusMessage = selectedLanguage == "en"
                    ? $"Model '{ragModel}' does not support embeddings. RAG model not saved."
                    : $"Modell '{ragModel}' unterstützt keine Embeddings. RAG-Modell nicht gespeichert.";
                return;
            }
        }
        await SettingsService.SaveRagModelAsync(ragModel);
        await SettingsService.SaveStyleModelAsync(styleModel);
        await SettingsService.SaveSpellingModelAsync(spellingModel);
        await SettingsService.SaveThemeAsync(selectedTheme);
        await SettingsService.SaveLektorSystemPromptAsync(lektorPrompt);
        await SettingsService.SaveFactCheckTemplateAsync(factCheckTemplate);
        await SettingsService.SaveSpellingPromptAsync(spellingPrompt);
        await SettingsService.SaveAdvocatusDiaboliPromptAsync(advocatusDiaboliPrompt);
        await SettingsService.SaveHookFinderPromptAsync(hookFinderPrompt);
        await SettingsService.SaveEli5PromptAsync(eli5Prompt);
        await SettingsService.SaveLanguageAsync(selectedLanguage);

        if (selectedLanguage != Loc.CurrentLanguage)
            await Loc.SetLanguageAsync(selectedLanguage);

        statusMessage = Loc["settings.status.saved"];
        await ThemeService.ApplyTheme(selectedTheme);
    }
}