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

@using AIStudio.Chat
@using MudBlazor.Extensions
@inherits MSGComponentBase
@inject ISnackbar Snackbar

<MudDialog>
    <DialogContent>

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

        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
            @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"
            />

            <MudTextField
                T="string"
                @bind-Text="@this.DataSystemPrompt"
                Validation="@this.ValidateSystemPrompt"
                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"
                AutoGrow="@true"
                MaxLines="12"
                Class="mb-3"
                UserAttributes="@SPELLCHECK_ATTRIBUTES"
                HelperText="@T("Tell the AI your system prompt.")"
            />
            
            <MudSwitch @bind-Value="allowProfileUsage" Color="Color.Primary" Class="mb-3" Label="@T("Allow the use of profiles together with this chat template?")" ThumbIcon="@Icons.Material.Filled.Person4" ThumbIconColor="Color.Default"/>
            
            <MudText Typo="Typo.h6" Class="mb-3">
                @T("Example Exchanges")
            </MudText>
            
            <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                @T("Add example exchanges (user prompt followed by assistant response) 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 FixedHeader="true" Items="@AdditionalMessages" RowEditPreview="BackupItem" RowEditCancel="ResetItemToOriginalValues" RowEditCommit="ItemHasBeenCommitted" CanCancelEdit="true" CommitEditTooltip="@T("Commit Changes")" Elevation="10" Outlined="true" Class="mt-3 mb-6">
                <ColGroup>
                    <col style="width: 20%;" />
                    <col style="width: 65%;" />
                    <col style="width: 15%;" />
                </ColGroup>
                <HeaderContent>
                    <MudTh>Role</MudTh>
                    <MudTh>Entry</MudTh>
                    <MudTh Style="text-align:center">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 Icon="@Icons.Material.Filled.Add"
                                       Color="Color.Primary"
                                       Size="Size.Small"
                                       OnClick="@(() => AddNewMessageBelow(context))"
                                       Variant="Variant.Filled"/>
                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                       Color="Color.Error"
                                       Size="Size.Small"
                                       OnClick="@(() => RemoveMessage(context))"
                                       Variant="Variant.Filled"/>
                    </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 Label="Your message" AutoGrow="true" @bind-Value="context.Content.As<ContentText>()!.Text" Required />
                    </MudTd>
                </RowEditingTemplate>
                <PagerContent>
                    <MudTablePager RowsPerPageString="Messages per page"  PageSizeOptions="[10,20,50,100]"/>
                </PagerContent>
            </MudTable>
        </MudForm>
        
        <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="AddNewMessageToEnd" StartIcon="@Icons.Material.Filled.Add" Class="mb-3">@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>