From 15e3c56875914a7f38e67a578dc5d299c1168cb5 Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <SommerEngineering@users.noreply.github.com>
Date: Sat, 24 May 2025 18:25:36 +0200
Subject: [PATCH] Add inline editing state to ChatTemplateDialog

---
 .../Dialogs/ChatTemplateDialog.razor          | 39 ++++++++++++-------
 .../Dialogs/ChatTemplateDialog.razor.cs       | 12 +++++-
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor b/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor
index 7091e35a..d26e1a98 100644
--- a/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor	
+++ b/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor	
@@ -69,7 +69,7 @@
                 @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">
+            <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/>
@@ -100,9 +100,16 @@
                                 break;
                         }
                     </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>
+                        @if (!this.isInlineEditOnGoing)
+                        {
+                            <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>
@@ -130,15 +137,19 @@
         <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>
+        
+        @if (!this.isInlineEditOnGoing)
+        {
+            <MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
+                @if (this.IsEditing)
+                {
+                    @T("Update")
+                }
+                else
+                {
+                    @T("Add")
+                }
+            </MudButton>
+        }
     </DialogActions>
 </MudDialog>
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor.cs b/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor.cs
index 1216be34..e9ae9a98 100644
--- a/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor.cs	
+++ b/app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor.cs	
@@ -60,6 +60,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
     private bool dataIsValid;
     private string[] dataIssues = [];
     private string dataEditingPreviousName = string.Empty;
+    private bool isInlineEditOnGoing;
 
     private ContentBlock messageEntryBeforeEdit;
     private readonly IEnumerable<ChatRole> availableRoles = ChatRoles.ChatTemplateRoles().ToArray();
@@ -128,13 +129,13 @@ public partial class ChatTemplateDialog : MSGComponentBase
     private void BackupItem(object element)
     {
         this.messageEntryBeforeEdit = new ContentBlock
+        this.isInlineEditOnGoing = true;
         {
             Role = ((ContentBlock)element).Role,
             Content = ((ContentBlock)element).Content,
         };
     }
 
-    private void ResetItemToOriginalValues(object element)
     {
         ((ContentBlock)element).Role = this.messageEntryBeforeEdit.Role;
         ((ContentBlock)element).Content = this.messageEntryBeforeEdit.Content;
@@ -143,6 +144,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
     #region Overrides of ComponentBase
 
     protected override async Task OnInitializedAsync()
+    private void ResetItem(object? element)
     {
         // Configure the spellchecking for the instance name input:
         this.SettingsManager.InjectSpellchecking(SPELLCHECK_ATTRIBUTES);
@@ -152,6 +154,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
         
         // When editing, we need to load the data:
         if(this.IsEditing)
+        this.isInlineEditOnGoing = false;
         {
             this.dataEditingPreviousName = this.DataName.ToLowerInvariant();
         }
@@ -160,6 +163,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
+    private void CommitInlineEdit(object? element)
     {
         // Reset the validation when not editing and on the first render.
         // We don't want to show validation errors when the user opens the dialog.
@@ -167,6 +171,8 @@ public partial class ChatTemplateDialog : MSGComponentBase
             this.form.ResetValidation();
         
         await base.OnAfterRenderAsync(firstRender);
+        this.isInlineEditOnGoing = false;
+        this.StateHasChanged();
     }
 
     #endregion
@@ -179,6 +185,10 @@ public partial class ChatTemplateDialog : MSGComponentBase
         if (!this.dataIsValid)
             return;
         
+        // When an inline edit is ongoing, we cannot store the data:
+        if (this.isInlineEditOnGoing)
+            return;
+        
         // Use the data model to store the chat template.
         // We just return this data to the parent component:
         var addedChatTemplateSettings = this.CreateChatTemplateSettings();