Improved the dialog for moving chats into workspaces (#796)

app/MindWork AI Studio/Dialogs/DialogOptions.cs

@@ -7,6 +7,12 @@ public static class DialogOptions
         CloseOnEscapeKey = true,
         FullWidth = true, MaxWidth = MaxWidth.Medium,
     };
+
+    public static readonly MudBlazor.DialogOptions FULLSCREEN_MANUAL_ESCAPE = new()
+    {
+        CloseOnEscapeKey = false,
+        FullWidth = true, MaxWidth = MaxWidth.Medium,
+    };
     
     public static readonly MudBlazor.DialogOptions FULLSCREEN_NO_HEADER = new()
     {

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

@@ -31,6 +31,9 @@ public partial class SingleInputDialog : MSGComponentBase
     [Parameter]
     public string EmptyInputErrorMessage { get; set; } = string.Empty;
 
+    [Parameter]
+    public Func<string?, string?>? AdditionalValidation { get; set; }
+
     private static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
 
     private MudForm form = null!;
@@ -52,8 +55,8 @@ public partial class SingleInputDialog : MSGComponentBase
     {
         if (!this.AllowEmptyInput && string.IsNullOrWhiteSpace(value))
             return string.IsNullOrWhiteSpace(this.EmptyInputErrorMessage) ? T("Please enter a value.") : this.EmptyInputErrorMessage;
-        
-        return null;
+
+        return this.AdditionalValidation?.Invoke(value);
     }
     
     private void Cancel() => this.MudDialog.Cancel();

app/MindWork AI Studio/Dialogs/WorkspaceSelectionDialog.razor

@@ -5,18 +5,57 @@
             @this.Message
         </MudText>
         <MudList T="Guid" @bind-SelectedValue="@this.selectedWorkspace">
-            @foreach (var (workspaceName, workspaceId) in this.workspaces)
+            @foreach (var workspace in this.workspaces)
             {
-                <MudListItem Text="@workspaceName" Icon="@Icons.Material.Filled.Description" Value="@workspaceId" />
+                <MudListItem Text="@workspace.Name" Icon="@Icons.Material.Filled.Description" Value="@workspace.WorkspaceId" />
             }
         </MudList>
     </DialogContent>
     <DialogActions>
-        <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
-            @T("Cancel")
-        </MudButton>
-        <MudButton OnClick="@this.Confirm" Variant="Variant.Filled" Color="Color.Info">
-            @this.ConfirmText
-        </MudButton>
+        <MudStack Style="width: 100%;" Spacing="2">
+            <MudDivider/>
+
+            @if (this.showCreateWorkspaceForm)
+            {
+                <MudForm @ref="this.createWorkspaceForm">
+                    <MudTextField T="string"
+                                  @ref="@this.newWorkspaceNameField"
+                                  @bind-Text="@this.newWorkspaceName"
+                                  Variant="Variant.Outlined"
+                                  AutoGrow="@false"
+                                  Lines="1"
+                                  Label="@T("Workspace name")"
+                                  AutoFocus="@true"
+                                  Immediate="@true"
+                                  Disabled="@this.isCreatingWorkspace"
+                                  OnKeyDown="@this.HandleNewWorkspaceNameKeyDown"
+                                  Validation="@this.ValidateNewWorkspaceName" />
+                </MudForm>
+            }
+            else
+            {
+                <MudButton StartIcon="@Icons.Material.Filled.LibraryAdd" Variant="Variant.Filled" OnClick="@this.ShowCreateWorkspaceForm">
+                    @T("Create new workspace")
+                </MudButton>
+            }
+
+            <MudStack Row="@true" Justify="Justify.FlexEnd" AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap" Spacing="2">
+                <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">
+                    @T("Cancel")
+                </MudButton>
+                @if (this.showCreateWorkspaceForm)
+                {
+                    <MudButton OnClick="@this.CreateWorkspaceAsync" Variant="Variant.Filled" Color="Color.Info" Disabled="@this.isCreatingWorkspace">
+                        @T("Add workspace")
+                    </MudButton>
+                }
+                else
+                {
+                    <MudButton OnClick="@this.Confirm" Variant="Variant.Filled" Color="Color.Info" Disabled="@(this.selectedWorkspace == Guid.Empty)">
+                        @this.ConfirmText
+                    </MudButton>
+                }
+            </MudStack>
+        </MudStack>
     </DialogActions>
 </MudDialog>

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

@@ -1,14 +1,20 @@
 using AIStudio.Components;
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 
 namespace AIStudio.Dialogs;
 
 public partial class WorkspaceSelectionDialog : MSGComponentBase
 {
+    private readonly record struct WorkspaceSelectionItem(Guid WorkspaceId, string Name);
+
     [CascadingParameter]
     private IMudDialogInstance MudDialog { get; set; } = null!;
 
+    [Inject]
+    private IJSRuntime JsRuntime { get; init; } = null!;
+
     [Parameter]
     public string Message { get; set; } = string.Empty;
     
@@ -18,8 +24,18 @@ public partial class WorkspaceSelectionDialog : MSGComponentBase
     [Parameter]
     public string ConfirmText { get; set; } = "OK";
     
-    private readonly Dictionary<string, Guid> workspaces = new();
+    private readonly List<WorkspaceSelectionItem> workspaces = [];
+    private readonly string escapeHandlerId = $"workspace-selection-dialog-{Guid.NewGuid():N}";
+    private MudForm? createWorkspaceForm;
+    private MudTextField<string>? newWorkspaceNameField;
+    private DotNetObjectReference<WorkspaceSelectionDialog>? dotNetReference;
     private Guid selectedWorkspace;
+    private string newWorkspaceName = string.Empty;
+    private bool isCreatingWorkspace;
+    private bool showCreateWorkspaceForm;
+    private bool shouldFocusNewWorkspaceName;
+    private string? createWorkspaceError;
+    private string? createWorkspaceErrorName;
 
     #region Overrides of ComponentBase
 
@@ -29,15 +45,156 @@ public partial class WorkspaceSelectionDialog : MSGComponentBase
 
         var snapshot = await WorkspaceBehaviour.GetOrLoadWorkspaceTreeShellAsync();
         foreach (var workspace in snapshot.Workspaces)
-            this.workspaces[workspace.Name] = workspace.WorkspaceId;
+            this.workspaces.Add(new(workspace.WorkspaceId, workspace.Name));
 
         this.StateHasChanged();
         await base.OnInitializedAsync();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            this.dotNetReference = DotNetObjectReference.Create(this);
+            await this.JsRuntime.InvokeVoidAsync("registerEscapeHandler", this.escapeHandlerId, this.dotNetReference);
+        }
+
+        if (this.shouldFocusNewWorkspaceName && this.newWorkspaceNameField is not null)
+        {
+            this.shouldFocusNewWorkspaceName = false;
+            await this.newWorkspaceNameField.FocusAsync();
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     #endregion
 
-    private void Cancel() => this.MudDialog.Cancel();
+    private string? ValidateNewWorkspaceName(string? workspaceName)
+    {
+        var normalizedWorkspaceName = WorkspaceBehaviour.NormalizeWorkspaceName(workspaceName ?? string.Empty);
+        if (string.IsNullOrWhiteSpace(normalizedWorkspaceName))
+            return T("Please enter a workspace name.");
+
+        if (this.IsWorkspaceNameExisting(normalizedWorkspaceName))
+            return T("There is already a workspace with this name. Please choose a different name.");
+
+        if (this.createWorkspaceError is not null && string.Equals(this.createWorkspaceErrorName, normalizedWorkspaceName, StringComparison.OrdinalIgnoreCase))
+            return this.createWorkspaceError;
+
+        return null;
+    }
+
+    private bool IsWorkspaceNameExisting(string normalizedWorkspaceName)
+    {
+        return this.workspaces.Any(workspace =>
+            string.Equals(WorkspaceBehaviour.NormalizeWorkspaceName(workspace.Name), normalizedWorkspaceName, StringComparison.OrdinalIgnoreCase));
+    }
+
+    private async Task HandleNewWorkspaceNameKeyDown(KeyboardEventArgs keyEvent)
+    {
+        var key = keyEvent.Key.ToLowerInvariant();
+        var code = keyEvent.Code.ToLowerInvariant();
+        if (key is not "enter" && code is not "enter" and not "numpadenter")
+            return;
+
+        if (keyEvent is { AltKey: true } or { CtrlKey: true } or { MetaKey: true })
+            return;
+
+        await this.CreateWorkspaceAsync();
+    }
+
+    private void ShowCreateWorkspaceForm()
+    {
+        this.createWorkspaceError = null;
+        this.createWorkspaceErrorName = null;
+        this.newWorkspaceName = string.Empty;
+        this.showCreateWorkspaceForm = true;
+        this.shouldFocusNewWorkspaceName = true;
+    }
+
+    private async Task CreateWorkspaceAsync()
+    {
+        if (this.createWorkspaceForm is null)
+            return;
+
+        this.createWorkspaceError = null;
+        this.createWorkspaceErrorName = null;
+        await this.createWorkspaceForm.Validate();
+        if (!this.createWorkspaceForm.IsValid)
+            return;
+
+        this.isCreatingWorkspace = true;
+        try
+        {
+            var result = await WorkspaceBehaviour.TryCreateWorkspaceAsync(this.newWorkspaceName);
+            if (!result.Success)
+            {
+                this.createWorkspaceError = T("There is already a workspace with this name. Please choose a different name.");
+                this.createWorkspaceErrorName = WorkspaceBehaviour.NormalizeWorkspaceName(this.newWorkspaceName);
+                await this.createWorkspaceForm.Validate();
+                return;
+            }
+
+            this.workspaces.Add(new(result.Workspace.WorkspaceId, result.Workspace.Name));
+            this.selectedWorkspace = result.Workspace.WorkspaceId;
+            this.newWorkspaceName = string.Empty;
+            this.createWorkspaceForm?.ResetValidation();
+            this.showCreateWorkspaceForm = false;
+            await this.SendMessage(Event.WORKSPACE_CREATED, result.Workspace.WorkspaceId);
+        }
+        finally
+        {
+            this.isCreatingWorkspace = false;
+        }
+    }
+
+    private void Cancel()
+    {
+        if (!this.showCreateWorkspaceForm)
+        {
+            this.MudDialog.Cancel();
+            return;
+        }
+
+        this.createWorkspaceError = null;
+        this.createWorkspaceErrorName = null;
+        this.newWorkspaceName = string.Empty;
+        this.createWorkspaceForm?.ResetValidation();
+        this.showCreateWorkspaceForm = false;
+        this.shouldFocusNewWorkspaceName = false;
+    }
+
+    [JSInvokable]
+    public async Task HandleEscapeKeyAsync()
+    {
+        await this.InvokeAsync(() =>
+        {
+            this.Cancel();
+            this.StateHasChanged();
+        });
+    }
     
     private void Confirm() => this.MudDialog.Close(DialogResult.Ok(this.selectedWorkspace));
+
+    #region Overrides of MSGComponentBase
+
+    protected override void DisposeResources()
+    {
+        try
+        {
+            _ = this.JsRuntime.InvokeVoidAsync("unregisterEscapeHandler", this.escapeHandlerId).AsTask();
+        }
+        catch
+        {
+            // Ignore JS cleanup errors while the dialog is being disposed.
+        }
+
+        this.dotNetReference?.Dispose();
+        this.dotNetReference = null;
+
+        base.DisposeResources();
+    }
+
+    #endregion
 }