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("Store chat templates.")
        </MudJustifiedText>

        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
            @T("Are you always using the same prompts and want a way of automatically using them?")
        </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" Label="@T("Allow using profiles together with this chat template?")"/>
            
            <MudText> What should you know about the additional messages? TODO</MudText>
            
            <MudTable FixedHeader="true" Items="@AdditionalMessages" RowEditPreview="BackupItem" RowEditCancel="ResetItemToOriginalValues" RowEditCommit="ItemHasBeenCommitted" CanCancelEdit="true" CommitEditTooltip="@T("Commit Changes")" Elevation="10" Outlined="true" >
                <ToolBarContent>
                    <MudText Typo="Typo.h6">Additional messages</MudText>
                </ToolBarContent>
                <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</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.ToName()</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="[20,50,100]"/>
                </PagerContent>
            </MudTable>
        </MudForm>
        
        <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="AddNewMessageToEnd" StartIcon="@Icons.Material.Filled.Add">@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>