AI-Studio/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor

@using AIStudio.Chat
@inherits MSGComponentBase

<MudDialog>
    <DialogContent>
        <MudJustifiedText Class="mb-3" Typo="Typo.body1">
            @T("Create your custom chat template to tailor the LLM's behavior for specific tasks or domains. Define a custom system prompt and provide an example conversation to design an AI experience perfectly suited to your requirements.")
        </MudJustifiedText>

        <MudJustifiedText Class="mb-3" Typo="Typo.body1">
            @T("The name of the chat template is mandatory. Each chat template must have a unique name.")
        </MudJustifiedText>
        
        <MudForm @ref="@this.form" @bind-IsValid="@this.dataIsValid" @bind-Errors="@this.dataIssues">
            @* ReSharper disable once CSharpWarnings::CS8974 *@
            <MudTextField
                T="string"
                @bind-Text="@this.DataName"
                Label="@T("Chat Template Name")"
                Class="mb-3"
                Immediate="@true"
                MaxLength="40"
                Counter="40"
                Adornment="Adornment.Start"
                AdornmentIcon="@Icons.Material.Filled.Badge"
                AdornmentColor="Color.Info"
                Validation="@this.ValidateName"
                Variant="Variant.Outlined"
                UserAttributes="@SPELLCHECK_ATTRIBUTES"
            />
            
            <MudText Typo="Typo.h6" Class="mb-3 mt-3">
                @T("System Prompt")
            </MudText>

            <MudTextField
                T="string"
                @bind-Text="@this.DataSystemPrompt"
                AdornmentIcon="@Icons.Material.Filled.ListAlt"
                Adornment="Adornment.Start"
                Immediate="@true"
                Label="@T("What system prompt do you want to use?")"
                Variant="Variant.Outlined"
                Lines="6"
                MaxLines="12"
                AutoGrow="@true"
                Class="mb-3"
                UserAttributes="@SPELLCHECK_ATTRIBUTES"
                HelperText="@T("Tell the AI your system prompt.")"
            />
            
            <MudTooltip Text="@T("Are you unsure which system prompt to use? You can simply start with the default system prompt that AI Studio uses for all chats.")">
                <MudButton Class="mb-3" Color="Color.Primary" OnClick="@this.UseDefaultSystemPrompt" Size="Size.Small" StartIcon="@Icons.Material.Filled.ListAlt" Variant="Variant.Filled">@T("Use the default system prompt")</MudButton>
            </MudTooltip>
            
            <MudTooltip Text="@T("Using some chat templates in tandem with profiles might cause issues. Therefore, you can preliminarily block the usage of profiles here.")">
                <MudSwitch @bind-Value="@this.AllowProfileUsage" Class="mb-3" Color="Color.Primary" Label="@T("Allow the use of profiles together with this chat template?")" ThumbIcon="@Icons.Material.Filled.Person4" ThumbIconColor="Color.Default" />
            </MudTooltip>
            
            <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                @T("Example Conversation")
            </MudText>
            
            <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                @T("Add messages of an example conversation (user prompt followed by assistant prompt) to demonstrate the desired interaction pattern. These examples help the AI understand your expectations by showing it the correct format, style, and content of responses before it receives actual user inputs.")
            </MudJustifiedText>
            
            <MudTable CanCancelEdit="true" Class="mt-3 mb-6" CommitEditTooltip="@T("Commit Changes")" Elevation="10" FixedHeader="true" Items="@ExampleConversation" Outlined="true" RowEditCancel="@this.ResetItemToOriginalValues" RowEditPreview="@this.BackupItem">
                <ColGroup>
                    <col style="width: 16em;" />
                    <col/>
                    <col style="width: 16em;" />
                </ColGroup>
                <HeaderContent>
                    <MudTh>@T("Role")</MudTh>
                    <MudTh>@T("Entry")</MudTh>
                    <MudTh Style="text-align:center">@T("Actions")</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd DataLabel="@T("Role")">@context.Role.ToChatTemplateName()</MudTd>
                    <MudTd DataLabel="@T("Message")">
                        @(context.Content is ContentText textContent ? textContent.Text : context.Content?.ToString())
                    </MudTd>
                    <MudTd style="text-align: center">
                        <MudIconButton Color="Color.Primary" Icon="@Icons.Material.Filled.Add" OnClick="@(() => AddNewMessageBelow(context))" />
                        <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => RemoveMessage(context))" />
                    </MudTd>
                </RowTemplate>
                <RowEditingTemplate>
                    <MudTd DataLabel="Role">
                        <MudSelect Label="Role" @bind-Value="context.Role" Required>
                            @foreach (var role in availableRoles)
                            {
                                <MudSelectItem Value="@role">@role.ToChatTemplateName()</MudSelectItem>
                            }
                        </MudSelect>
                    </MudTd>
                    <MudTd DataLabel="Message">
                        <MudTextField AutoGrow="true" @bind-Value="context.Content.As<ContentText>()!.Text" Label="@T("Your message")" Required />
                    </MudTd>
                </RowEditingTemplate>
                <PagerContent>
                    <MudTablePager PageSizeOptions="[10,20,50,100]" RowsPerPageString="@T("Messages per page")" />
                </PagerContent>
            </MudTable>
        </MudForm>
        
        <MudButton Class="mb-3" Color="Color.Primary" OnClick="@this.AddNewMessageToEnd" StartIcon="@Icons.Material.Filled.Add" Variant="Variant.Filled">@T("Add additional message")</MudButton>
        
        <Issues IssuesData="@this.dataIssues"/>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
            @T("Cancel")
        </MudButton>
        <MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
            @if(this.IsEditing)
            {
                @T("Update")
            }
            else
            {
                @T("Add")
            }
        </MudButton>
    </DialogActions>
</MudDialog>