Extension of the chat template (#521)

Co-authored-by: Thorsten Sommer <[email protected]>
Co-authored-by: Thorsten Sommer <[email protected]>

Author: peerschuett

app/MindWork AI Studio/Assistants/I18N/allTexts.lua

@@ -1414,6 +1414,9 @@ UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::CHATCOMPONENT::T636393754"] = "Move the c
 -- Show your workspaces
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::CHATCOMPONENT::T733672375"] = "Show your workspaces"
 
+-- Create template from current chat
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::CHATTEMPLATESELECTION::T1112722156"] = "Create template from current chat"
+
 -- Start a new chat with a chat template
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::CHATTEMPLATESELECTION::T1333844707"] = "Start a new chat with a chat template"
 
@@ -2197,18 +2200,30 @@ UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T1847791252"] = "Update"
 -- The chat template name must not exceed 40 characters.
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T204496403"] = "The chat template name must not exceed 40 characters."
 
+-- Profile Usage
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2147062613"] = "Profile Usage"
+
 -- 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.
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2292424657"] = "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."
 
 -- Role
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2418769465"] = "Role"
 
+-- What predefined user input do you want to use?
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2501284417"] = "What predefined user input do you want to use?"
+
 -- Tell the AI your system prompt.
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2552381261"] = "Tell the AI your system prompt."
 
 -- No, prohibit profile use for this template
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2579080722"] = "No, prohibit profile use for this template"
 
+-- 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.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2579208700"] = "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."
+
+-- Predefined User Input
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2607897066"] = "Predefined User Input"
+
 -- Entry
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T2629823795"] = "Entry"
 
@@ -2263,6 +2278,9 @@ UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T3893704289"] = "Message
 -- Use the default system prompt
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T4051106111"] = "Use the default system prompt"
 
+-- Tell the AI your predefined user input.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T4052406705"] = "Tell the AI your predefined user input."
+
 -- 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.
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::CHATTEMPLATEDIALOG::T4199560726"] = "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."
 

app/MindWork AI Studio/Chat/ChatThread.cs

@@ -100,11 +100,11 @@ public string PrepareSystemPrompt(SettingsManager settingsManager, ChatThread ch
             systemPromptTextWithChatTemplate = chatThread.SystemPrompt;
         else
         {
-            if(!Guid.TryParse(chatThread.SelectedChatTemplate, out var chatTeamplateId))
+            if(!Guid.TryParse(chatThread.SelectedChatTemplate, out var chatTemplateId))
                 systemPromptTextWithChatTemplate = chatThread.SystemPrompt;
             else
             {
-                if(chatThread.SelectedChatTemplate == ChatTemplate.NO_CHAT_TEMPLATE.Id || chatTeamplateId == Guid.Empty)
+                if(chatThread.SelectedChatTemplate == ChatTemplate.NO_CHAT_TEMPLATE.Id || chatTemplateId == Guid.Empty)
                     systemPromptTextWithChatTemplate = chatThread.SystemPrompt;
                 else
                 {
@@ -121,6 +121,11 @@ public string PrepareSystemPrompt(SettingsManager settingsManager, ChatThread ch
             }
         }
 
+        // We need a way to save the changed system prompt in our chat thread.
+        // Otherwise, the chat thread will always tell us that it is using the
+        // default system prompt:
+        chatThread = chatThread with { SystemPrompt = systemPromptTextWithChatTemplate };
+        
         logger.LogInformation(logMessage);
 
         //

app/MindWork AI Studio/Chat/ContentBlock.cs

@@ -30,12 +30,12 @@ public class ContentBlock
     /// </summary>
     public bool HideFromUser { get; init; }
 
-    public ContentBlock DeepClone() => new()
+    public ContentBlock DeepClone(bool changeHideState = false, bool hideFromUser = true) => new()
     {
         Time = this.Time,
         ContentType = this.ContentType,
         Content = this.Content?.DeepClone(),
         Role = this.Role,
-        HideFromUser = this.HideFromUser,
+        HideFromUser = changeHideState ? hideFromUser : this.HideFromUser,
     };
 }

app/MindWork AI Studio/Components/ChatComponent.razor

@@ -81,7 +81,8 @@
                 </MudTooltip>
             }
 
-            <ChatTemplateSelection CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
+            <ChatTemplateSelection CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
+            
             @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_AUTOMATICALLY)
             {
                 <MudTooltip Text="@T("Delete this chat & start a new one.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">

app/MindWork AI Studio/Components/ChatComponent.razor.cs

@@ -80,6 +80,7 @@ protected override async Task OnInitializedAsync()
 
         // Get the preselected chat template:
         this.currentChatTemplate = this.SettingsManager.GetPreselectedChatTemplate(Tools.Components.CHAT);
+        this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
 
         //
         // Check for deferred messages of the kind 'SEND_TO_CHAT',
@@ -272,7 +273,7 @@ private string InputLabel
         }
     }
 
-    private bool CanThreadBeSaved => this.ChatThread is not null && this.ChatThread.Blocks.Count > 0;
+    private bool CanThreadBeSaved => this.ChatThread is not null && this.ChatThread.Blocks.Any(b => !b.HideFromUser);
 
     private string TooltipAddChatToWorkspace => string.Format(T("Start new chat in workspace '{0}'"), this.currentWorkspaceName);
 
@@ -326,6 +327,7 @@ private async Task ProfileWasChanged(Profile profile)
     private async Task ChatTemplateWasChanged(ChatTemplate chatTemplate)
     {
         this.currentChatTemplate = chatTemplate;
+        this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
         if(this.ChatThread is null)
             return;
 
@@ -675,6 +677,8 @@ private async Task StartNewChat(bool useSameWorkspace = false, bool deletePrevio
             };
         }
 
+        this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
+        
         // Now, we have to reset the data source options as well:
         this.ApplyStandardDataSourceOptions();
 

app/MindWork AI Studio/Components/ChatTemplateSelection.razor

@@ -18,6 +18,8 @@
         <ChildContent>
             <MudMenuItem Icon="@Icons.Material.Filled.Settings" Label="@T("Manage your templates")" OnClick="async () => await this.OpenSettingsDialog()" />
             <MudDivider/>
+            <MudMenuItem Icon="@Icons.Material.Filled.AddComment" Label="@T("Create template from current chat")" OnClick="async () => await this.CreateNewChatTemplateFromChat()" Disabled="@(!this.CanChatThreadBeUsedForTemplate)"/>
+            <MudDivider/>
             @foreach (var chatTemplate in this.SettingsManager.ConfigurationData.ChatTemplates.GetAllChatTemplates())
             {
                 <MudMenuItem Icon="@Icons.Material.Filled.RateReview" OnClick="async () => await this.SelectionChanged(chatTemplate)">

app/MindWork AI Studio/Components/ChatTemplateSelection.razor.cs

@@ -1,3 +1,4 @@
+using AIStudio.Chat;
 using AIStudio.Dialogs.Settings;
 using AIStudio.Settings;
 
@@ -11,6 +12,12 @@ public partial class ChatTemplateSelection : MSGComponentBase
     [Parameter]
     public ChatTemplate CurrentChatTemplate { get; set; } = ChatTemplate.NO_CHAT_TEMPLATE;
 
+    [Parameter]
+    public bool CanChatThreadBeUsedForTemplate { get; set; }
+    
+    [Parameter]
+    public ChatThread? CurrentChatThread { get; set; }
+    
     [Parameter]
     public EventCallback<ChatTemplate> CurrentChatTemplateChanged { get; set; }
 
@@ -36,4 +43,14 @@ private async Task OpenSettingsDialog()
         var dialogParameters = new DialogParameters();
         await this.DialogService.ShowAsync<SettingsDialogChatTemplate>(T("Open Chat Template Options"), dialogParameters, DialogOptions.FULLSCREEN);
     }
+    
+    private async Task CreateNewChatTemplateFromChat()
+    {
+        var dialogParameters = new DialogParameters<SettingsDialogChatTemplate>
+        {
+            { x => x.CreateTemplateFromExistingChatThread, true },
+            { x => x.ExistingChatThread, this.CurrentChatThread }
+        };
+        await this.DialogService.ShowAsync<SettingsDialogChatTemplate>(T("Open Chat Template Options"), dialogParameters, DialogOptions.FULLSCREEN);
+    }
 }

app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor

@@ -56,19 +56,42 @@
                 @T("Use the default system prompt")
             </MudButton>
 
-            <MudJustifiedText Class="mt-6" Typo="Typo.body1">
+            <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.")"
+            />
+            
+            <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")" />
 
             <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;" />

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

@@ -35,6 +35,12 @@ public partial class ChatTemplateDialog : MSGComponentBase
     [Parameter]
     public string DataSystemPrompt { get; set; } = string.Empty;
 
+    /// <summary>
+    /// What is the predefined user prompt?
+    /// </summary>
+    [Parameter]
+    public string PredefinedUserPrompt { get; set; } = string.Empty;
+    
     /// <summary>
     /// Should the dialog be in editing mode?
     /// </summary>
@@ -47,6 +53,12 @@ public partial class ChatTemplateDialog : MSGComponentBase
     [Parameter] 
     public bool AllowProfileUsage { get; set; } = true;
 
+    [Parameter] 
+    public bool CreateFromExistingChatThread { get; set; }
+    
+    [Parameter] 
+    public ChatThread? ExistingChatThread { get; set; }
+    
     [Inject]
     private ILogger<ChatTemplateDialog> Logger { get; init; } = null!;
 
@@ -84,6 +96,13 @@ protected override async Task OnInitializedAsync()
             this.dataEditingPreviousName = this.DataName.ToLowerInvariant();
             this.dataExampleConversation = this.ExampleConversation.Select(n => n.DeepClone()).ToList();
         }
+
+        if (this.CreateFromExistingChatThread && this.ExistingChatThread is not null)
+        {
+            this.DataSystemPrompt = this.ExistingChatThread.SystemPrompt;
+            this.dataExampleConversation = this.ExistingChatThread.Blocks.Select(n => n.DeepClone(true)).ToList();
+            this.DataName = this.ExistingChatThread.Name;
+        }
 
         await base.OnInitializedAsync();
     }
@@ -107,6 +126,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         Name = this.DataName,
         SystemPrompt = this.DataSystemPrompt,
+        PredefinedUserPrompt = this.PredefinedUserPrompt,
         ExampleConversation = this.dataExampleConversation,
         AllowProfileUsage = this.AllowProfileUsage,
     };

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

@@ -1,16 +1,42 @@
+using AIStudio.Chat;
 using AIStudio.Settings;
+using Microsoft.AspNetCore.Components;
 
 namespace AIStudio.Dialogs.Settings;
 
 public partial class SettingsDialogChatTemplate : SettingsDialogBase
 {
+    [Parameter] 
+    public bool CreateTemplateFromExistingChatThread { get; set; }
+    
+    [Parameter]
+    public ChatThread? ExistingChatThread { get; set; }
+    
+    #region Overrides of ComponentBase
+
+    /// <inheritdoc />
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        if (this.CreateTemplateFromExistingChatThread) 
+            await this.AddChatTemplate();
+    }
+
+    #endregion
+    
     private async Task AddChatTemplate()
     {
         var dialogParameters = new DialogParameters<ChatTemplateDialog>
         {
             { x => x.IsEditing, false },
         };
-        
+
+        if (this.CreateTemplateFromExistingChatThread)
+        {
+            dialogParameters.Add(x => x.CreateFromExistingChatThread, this.CreateTemplateFromExistingChatThread);
+            dialogParameters.Add(x => x.ExistingChatThread, this.ExistingChatThread);
+        }
+
         var dialogReference = await this.DialogService.ShowAsync<ChatTemplateDialog>(T("Add Chat Template"), dialogParameters, DialogOptions.FULLSCREEN);
         var dialogResult = await dialogReference.Result;
         if (dialogResult is null || dialogResult.Canceled)
@@ -33,6 +59,7 @@ private async Task EditChatTemplate(ChatTemplate chatTemplate)
             { x => x.DataId, chatTemplate.Id },
             { x => x.DataName, chatTemplate.Name },
             { x => x.DataSystemPrompt, chatTemplate.SystemPrompt },
+            { x => x.PredefinedUserPrompt, chatTemplate.PredefinedUserPrompt },
             { x => x.IsEditing, true },
             { x => x.ExampleConversation, chatTemplate.ExampleConversation },
             { x => x.AllowProfileUsage, chatTemplate.AllowProfileUsage },