MindWorkAI/AI-Studio
MindWorkAI/AI-Studio
1
0
Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2025-08-21 04:12:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add inline editing state to ChatTemplateDialog

Browse Source
This commit is contained in:
Thorsten Sommer 2025-05-24 18:25:36 +02:00
parent 9c5647176d
commit 15e3c56875
Signed by untrusted user who does not match committer: tsommer
GPG Key ID: 371BBA77A02C0108
2 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor
View File

@ -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.") @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> </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> <ColGroup>
<col style="width: 10em;" /> <col style="width: 10em;" />
<col/> <col/>
@ -100,9 +100,16 @@
break; break;
} }
</MudTd> </MudTd>
<MudTd style="text-align: center"> <MudTd>
<MudIconButton Color="Color.Primary" Icon="@Icons.Material.Filled.Add" OnClick="@(() => AddNewMessageBelow(context))" /> @if (!this.isInlineEditOnGoing)
<MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => RemoveMessage(context))" /> {
<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> </MudTd>
</RowTemplate> </RowTemplate>
<RowEditingTemplate> <RowEditingTemplate>
@ -130,15 +137,19 @@
<MudButton OnClick="@this.Cancel" Variant="Variant.Filled"> <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
@T("Cancel") @T("Cancel")
</MudButton> </MudButton>
<MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
@if(this.IsEditing) @if (!this.isInlineEditOnGoing)
{ {
@T("Update") <MudButton OnClick="@this.Store" Variant="Variant.Filled" Color="Color.Primary">
} @if (this.IsEditing)
else {
{ @T("Update")
@T("Add") }
} else
</MudButton> {
@T("Add")
}
</MudButton>
}
</DialogActions> </DialogActions>
</MudDialog> </MudDialog>

12
app/MindWork AI Studio/Dialogs/ChatTemplateDialog.razor.cs
View File

@ -60,6 +60,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
private bool dataIsValid; private bool dataIsValid;
private string[] dataIssues = []; private string[] dataIssues = [];
private string dataEditingPreviousName = string.Empty; private string dataEditingPreviousName = string.Empty;
private bool isInlineEditOnGoing;
private ContentBlock messageEntryBeforeEdit; private ContentBlock messageEntryBeforeEdit;
private readonly IEnumerable<ChatRole> availableRoles = ChatRoles.ChatTemplateRoles().ToArray(); private readonly IEnumerable<ChatRole> availableRoles = ChatRoles.ChatTemplateRoles().ToArray();
@ -128,13 +129,13 @@ public partial class ChatTemplateDialog : MSGComponentBase
private void BackupItem(object element) private void BackupItem(object element)
{ {
this.messageEntryBeforeEdit = new ContentBlock this.messageEntryBeforeEdit = new ContentBlock
this.isInlineEditOnGoing = true;
{ {
Role = ((ContentBlock)element).Role, Role = ((ContentBlock)element).Role,
Content = ((ContentBlock)element).Content, Content = ((ContentBlock)element).Content,
}; };
} }
private void ResetItemToOriginalValues(object element)
{ {
((ContentBlock)element).Role = this.messageEntryBeforeEdit.Role; ((ContentBlock)element).Role = this.messageEntryBeforeEdit.Role;
((ContentBlock)element).Content = this.messageEntryBeforeEdit.Content; ((ContentBlock)element).Content = this.messageEntryBeforeEdit.Content;
@ -143,6 +144,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
#region Overrides of ComponentBase #region Overrides of ComponentBase
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
private void ResetItem(object? element)
{ {
// Configure the spellchecking for the instance name input: // Configure the spellchecking for the instance name input:
this.SettingsManager.InjectSpellchecking(SPELLCHECK_ATTRIBUTES); this.SettingsManager.InjectSpellchecking(SPELLCHECK_ATTRIBUTES);
@ -152,6 +154,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
// When editing, we need to load the data: // When editing, we need to load the data:
if(this.IsEditing) if(this.IsEditing)
this.isInlineEditOnGoing = false;
{ {
this.dataEditingPreviousName = this.DataName.ToLowerInvariant(); this.dataEditingPreviousName = this.DataName.ToLowerInvariant();
} }
@ -160,6 +163,7 @@ public partial class ChatTemplateDialog : MSGComponentBase
} }
protected override async Task OnAfterRenderAsync(bool firstRender) protected override async Task OnAfterRenderAsync(bool firstRender)
private void CommitInlineEdit(object? element)
{ {
// Reset the validation when not editing and on the first render. // 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. // 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(); this.form.ResetValidation();
await base.OnAfterRenderAsync(firstRender); await base.OnAfterRenderAsync(firstRender);
this.isInlineEditOnGoing = false;
this.StateHasChanged();
} }
#endregion #endregion
@ -179,6 +185,10 @@ public partial class ChatTemplateDialog : MSGComponentBase
if (!this.dataIsValid) if (!this.dataIsValid)
return; 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. // Use the data model to store the chat template.
// We just return this data to the parent component: // We just return this data to the parent component:
var addedChatTemplateSettings = this.CreateChatTemplateSettings(); var addedChatTemplateSettings = this.CreateChatTemplateSettings();