AI-Studio/app/MindWork AI Studio/Dialogs/Settings/SettingsDialogChatTemplate.razor

@using AIStudio.Tools.PluginSystem
@inherits SettingsDialogBase

<MudDialog ContentClass="dialog-content-aligned" ActionsClass="dialog-actions-aligned">
    <TitleContent>
        <MudText Typo="Typo.h6" Class="d-flex align-center">
            <MudIcon Icon="@AppIcons.CHAT_TEMPLATE" Class="mr-2" />
            @TA("Your Chat Templates")
        </MudText>
    </TitleContent>
    <DialogContent>
        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
            @TA("Customize your AI experience with chat templates. Whether you want to experiment with prompt engineering, simply use a custom system prompt in the standard chat interface, or create a specialized assistant, our templates give you full control. Similar to common AI companies' playgrounds, you can define your own system prompts and leverage assistant prompts for providers that support them.")
        </MudJustifiedText>

        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
            @TA("Note: This advanced feature is designed for users familiar with prompt engineering concepts. Furthermore, you have to make sure yourself that your chosen provider supports the use of assistant prompts.")
        </MudJustifiedText>
    
        <MudTable Items="@this.SettingsManager.ConfigurationData.ChatTemplates" Hover="@true" Class="border-dashed border rounded-lg">
            <ColGroup>
                <col style="width: 3em;"/>
                <col/>
                <col style="width: 16em;"/>
            </ColGroup>
            <HeaderContent>
                <MudTh>#</MudTh>
                <MudTh>@T("Chat Template Name")</MudTh>
                <MudTh>@T("Actions")</MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd>@context.Num</MudTd>
                <MudTd>@context.Name</MudTd>
                <MudTd>
                    @if (context.IsEnterpriseConfiguration)
                    {
                        <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
                            <MudTooltip Text="@TA("This template is managed by your organization.")">
                                <MudIconButton Color="Color.Info" Icon="@AppIcons.ORGANIZATION" Disabled="true"/>
                            </MudTooltip>
                            <MudTooltip Text="@T("View")">
                                <MudIconButton Color="Color.Info" Icon="@AppIcons.PREVIEW" OnClick="@(() => this.ViewChatTemplate(context))"/>
                            </MudTooltip>
                        </MudStack>
                    }
                    else
                    {
                        <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
                            <MudTooltip Text="@T("Edit")">
                                <MudIconButton Color="Color.Info" Icon="@AppIcons.EDIT" OnClick="@(() => this.EditChatTemplate(context))"/>
                            </MudTooltip>
                            @if (context.FileAttachments.Count == 0)
                            {
                                <AdminExportButton OnClick="@(() => this.ExportChatTemplateWithSharedAttachmentPaths(context))" />
                            }
                            else if (this.SettingsManager.ConfigurationData.App.ShowAdminSettings)
                            {
                                <MudTooltip Text="@T("Export configuration")">
                                    <MudMenu Icon="@AppIcons.EXPORT_CONFIGURATION" Color="Color.Info" Variant="Variant.Text">
                                        <MudMenuItem Icon="@AppIcons.LINK" OnClick="@(() => this.ExportChatTemplateWithSharedAttachmentPaths(context))">
                                            @T("Use shared attachment paths")
                                        </MudMenuItem>
                                        <MudMenuItem Icon="@AppIcons.FOLDER" Disabled="@this.isPluginDirectoryDialogOpen" OnClick="@(() => this.ExportChatTemplateWithPackagedAttachments(context))">
                                            @T("Copy attachments into plugin")
                                        </MudMenuItem>
                                    </MudMenu>
                                </MudTooltip>
                            }
                            <MudTooltip Text="@T("Delete")">
                                <MudIconButton Color="Color.Error" Icon="@AppIcons.DELETE" OnClick="@(() => this.DeleteChatTemplate(context))"/>
                            </MudTooltip>
                        </MudStack>
                    }
                </MudTd>
            </RowTemplate>
        </MudTable>

        @if(this.SettingsManager.ConfigurationData.ChatTemplates.Count == 0)
        {
            <MudText Typo="Typo.h6" Class="mt-3">
                @T("No chat templates configured yet.")
            </MudText>
        }
    </DialogContent>
    <DialogActions>
        @* In the footer, adding and importing stay in reach however long the table grows: *@
        <MudStack Row="true" Wrap="Wrap.Wrap">
            <MudButton Variant="Variant.Filled" Color="@Color.Primary" StartIcon="@AppIcons.ADD" OnClick="@this.AddChatTemplate">
                @T("Add Chat Template")
            </MudButton>
            <LockableButton Text="@T("Import Chat Template")" IsLocked="@(() => !this.SettingsManager.ConfigurationData.App.CanImportConfigurationSnippet(PluginConfigurationObjectType.CHAT_TEMPLATE))" Icon="@AppIcons.IMPORT" OnClickAsync="@this.ImportChatTemplate" ButtonVariant="Variant.Outlined" NoMargin="true" />
        </MudStack>
        <MudSpacer/>
        <MudButton OnClick="@this.Close" Variant="Variant.Filled">
            @T("Close")
        </MudButton>
    </DialogActions>
</MudDialog>