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

@using AIStudio.Chat
@using AIStudio.Settings.DataModel
@inherits MSGComponentBase

<MudDialog>
    <DialogContent>
        @* A drop anywhere in this dialog belongs to the dialog, not to the page behind it: *@
        @* The name for the drop state is given although nobody uses it: the messages of this dialog
           are listed in a table, whose rows would otherwise ask for the same name. *@
        <PathDropZone IsArea="@true" Context="isDropTarget">
        <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"
                ReadOnly="@this.IsReadOnly"
                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.")"
                ReadOnly="@this.IsReadOnly"
            />

            <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                @T("Are you unsure which system prompt to use? You might start with the default system prompt that AI Studio uses for all chats.")
            </MudJustifiedText>
            <MudButton Class="mb-3" Color="Color.Default" OnClick="@this.UseDefaultSystemPrompt" StartIcon="@Icons.Material.Filled.ListAlt" Variant="Variant.Filled" Disabled="@this.IsReadOnly">
                @T("Use the default system prompt")
            </MudButton>
            <ReadFileContent Text="@T("Load system prompt from file")" @bind-FileContent="@this.DataSystemPrompt" EnableDragDrop="true" Disabled="@this.IsReadOnly"/>

            <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                @T("Predefined User Input")
            </MudText>
            <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                @T("You might want to predefine a first message that will be copied into the user prompt, when you use this chat template. This message could for example be a blueprint for a structured message that this chat template is defined to work with.")
            </MudJustifiedText>
            <MudTextField
                T="string"
                @bind-Text="@this.PredefinedUserPrompt"
                AdornmentIcon="@Icons.Material.Filled.ListAlt"
                Adornment="Adornment.Start"
                Immediate="@true"
                Label="@T("What predefined user input do you want to use?")"
                Variant="Variant.Outlined"
                Lines="4"
                MaxLines="12"
                AutoGrow="@true"
                Class="mb-3"
                UserAttributes="@SPELLCHECK_ATTRIBUTES"
                HelperText="@T("Tell the AI your predefined user input.")"
                ReadOnly="@this.IsReadOnly"
            />
            <ReadFileContent Text="@T("Load predefined user input from file")" @bind-FileContent="@this.PredefinedUserPrompt" EnableDragDrop="true" Disabled="@this.IsReadOnly"/>

            <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                @T("File Attachments")
            </MudText>
            <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                @T("You can attach files that will be automatically included when using this chat template. These files will be added to the first message sent in any chat using this template.")
            </MudJustifiedText>
            <AttachDocuments
                Name="ChatTemplateFileAttachments"
                @bind-DocumentPaths="@this.fileAttachments"
                UseSmallForm="false"
                ValidateMediaFileTypes="false"
                Disabled="@this.IsReadOnly"
            />

            <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                @T("Profile Usage")
            </MudText>
            <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                @T("Using some chat templates in tandem with profiles might cause issues. Therefore, you might prohibit the usage of profiles here.")
            </MudJustifiedText>
            <MudTextSwitch @bind-Value="@this.AllowProfileUsage" Color="Color.Primary" Label="@T("Allow the use of profiles together with this chat template?")" LabelOn="@T("Yes, allow profiles when using this template")" LabelOff="@T("No, prohibit profile use for this template")" Disabled="@this.IsReadOnly" />

            <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                @T("Tools")
            </MudText>
            <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                @T("A chat template may decide which tools a chat starts with. Without such a decision, those chats start with the tools you chose as your default in the chat options. Deciding and then picking nothing is a different statement: such chats start with no tool at all, no matter what your default says.")
            </MudJustifiedText>
            <MudTextSwitch @bind-Value="@this.preselectTools" Color="Color.Primary" Label="@T("Does this chat template preselect tools?")" LabelOn="@T("Yes, this template decides which tools a chat starts with")" LabelOff="@T("No, chats keep the tools from your chat options")" Disabled="@this.IsReadOnly"/>
            @if (this.preselectTools)
            {
                <MudPaper Class="pa-3 mb-8 mt-3 border-dashed border rounded-lg">
                    <ToolSelectionField Component="Components.CHAT" SelectedToolIds="@this.selectedToolIds" SelectedToolIdsChanged="@this.SetSelectedToolIds" ReadOnly="@this.IsReadOnly" Label="@T("Preselected tools")" Help="@T("The selection stays changeable in the chat, and every tool still has to meet the confidence requirements of the provider in use.")"/>
                </MudPaper>
            }

            @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
            {
                <MudText Typo="Typo.h6" Class="mb-3 mt-6">
                    @T("Data Sources")
                </MudText>
                <MudJustifiedText Class="mb-3" Typo="Typo.body1">
                    @T("The same goes for your data. A chat template may bring its own data source options, which includes leaving the choice of sources to the AI. Without them, those chats start with the data source options from your chat options.")
                </MudJustifiedText>
                <MudTextSwitch @bind-Value="@this.preselectDataSources" Color="Color.Primary" Label="@T("Does this chat template preselect data sources?")" LabelOn="@T("Yes, this template decides which data a chat starts with")" LabelOff="@T("No, chats keep the data source options from your chat options")" Disabled="@this.IsReadOnly"/>
                @if (this.preselectDataSources)
                {
                    <DataSourceSelection SelectionMode="DataSourceSelectionMode.CONFIGURATION_MODE" AutoSaveAppSettings="@false" ConfiguresChatDefaults="@false" ReadOnly="@this.IsReadOnly" @bind-DataSourceOptions="@this.templateDataSourceOptions" ConfigurationHeaderMessage="@T("A chat started with this template begins with these data sources and options. All of it stays changeable in the chat itself.")"/>
                }
            }

            <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 Items="@this.dataExampleConversation" FixedHeader="true" Hover="true" Class="mt-3 mb-3" CanCancelEdit="true" CancelEditTooltip="@T("Cancel")" CommitEditTooltip="@T("Commit Changes")" Outlined="true" RowEditCancel="@this.ResetItem" RowEditPreview="@this.BackupItem" EditTrigger="TableEditTrigger.RowClick" IsEditRowSwitchingBlocked="false" RowEditCommit="@this.CommitInlineEdit">
                <ColGroup>
                    <col style="width: 10em;" />
                    <col/>
                    <col style="width: 10em;" />
                </ColGroup>
                <HeaderContent>
                    <MudTh>@T("Role")</MudTh>
                    <MudTh>@T("Entry")</MudTh>
                    <MudTh>@T("Actions")</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd>
                        @context.Role.ToChatTemplateName()
                    </MudTd>
                    <MudTd>
                        @switch(context.Content)
                        {
                            case ContentText textContent:
                                <MudTextField AutoGrow="true" Value="@textContent.Text" Placeholder="@T("Enter a message")" ReadOnly="true" Variant="Variant.Text" Validation="@this.ValidateExampleTextMessage"/>
                                break;

                            case ContentImage { SourceType: ContentImageSource.URL or ContentImageSource.LOCAL_PATH } imageContent:
                                <MudImage Src="@imageContent.Source" Alt="@T("Image content")" Fluid="true" />
                                break;

                            default:
                                @T("Unsupported content type")
                                break;
                        }
                    </MudTd>
                    <MudTd>
                        @if (!this.isInlineEditOnGoing && !this.IsReadOnly)
                        {
                            <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
                                <MudTooltip Text="@T("Add a new message below")">
                                    <MudIconButton Color="Color.Primary" Icon="@Icons.Material.Filled.Add" OnClick="@(() => this.AddMessageBelow(context))"/>
                                </MudTooltip>
                                <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.RemoveMessage(context))"/>
                            </MudStack>
                        }
                    </MudTd>
                </RowTemplate>
                <RowEditingTemplate>
                    <MudTd>
                        @if (this.IsReadOnly)
                        {
                            @context.Role.ToChatTemplateName()
                        }
                        else
                        {
                            <MudSelect Label="@T("Role")" @bind-Value="@context.Role" Required="true">
                                @foreach (var role in ChatRoles.ChatTemplateRoles())
                                {
                                    <MudSelectItem Value="@role">
                                        @role.ToChatTemplateName()
                                    </MudSelectItem>
                                }
                            </MudSelect>
                        }
                    </MudTd>
                    <MudTd>
                        @switch(context.Content)
                        {
                            case ContentText textContent:
                                <MudTextField AutoGrow="true" @bind-Value="@textContent.Text" Label="@T("The message")" Required="true" Immediate="true" Placeholder="@T("Enter a message")" ReadOnly="@this.IsReadOnly"/>
                                break;

                            default:
                                <MudText Typo="Typo.body2">
                                    @T("Only text content is supported in the editing mode yet.")
                                </MudText>
                                break;
                        }
                    </MudTd>
                </RowEditingTemplate>
                <PagerContent>
                    <MudTablePager PageSizeOptions="[10,20,50,100]" RowsPerPageString="@T("Messages per page")" />
                </PagerContent>
            </MudTable>
        </MudForm>

        @if (!this.isInlineEditOnGoing && !this.IsReadOnly)
        {
            <MudButton Class="mb-6" Color="Color.Primary" OnClick="@this.AddMessageToEnd" StartIcon="@Icons.Material.Filled.Add" Variant="Variant.Filled">
                @T("Add a message")
            </MudButton>
        }

        <Issues IssuesData="@this.dataIssues"/>
        </PathDropZone>
    </DialogContent>
    <DialogActions>
        @if (this.IsReadOnly)
        {
            <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
                @T("Close")
            </MudButton>
        }
        else
        {
            <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
                @T("Cancel")
            </MudButton>

            @if (!this.isInlineEditOnGoing)
            {
                <MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
                    @if (this.IsEditing)
                    {
                        @T("Update")
                    }
                    else
                    {
                        @T("Add")
                    }
                </MudButton>
            }
        }
    </DialogActions>
</MudDialog>