AI-Studio/app/MindWork AI Studio/Components/Workspaces.razor

@inherits MSGComponentBase
@if (this.isInitialLoading)
{
    <MudStack Class="ma-3" Spacing="1">
        <MudSkeleton Width="40%" Height="30px"/>
        @for (var i = 0; i < 10; i++)
        {
            <MudSkeleton Width="95%" Height="26px"/>
        }
    </MudStack>
}
else
{
    @if (this.SearchVisible)
    {
        <MudStack Class="mx-3 mt-2 mb-1" Spacing="1" Style="position: sticky; top: 0; z-index: 2; background-color: var(--mud-palette-background);">
            <MudStack Row="@true" AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap" Spacing="1">
                <MudTextField T="string"
                              Text="@this.searchText"
                              TextChanged="@this.OnSearchTextChanged"
                              Placeholder="@T("Search chats")"
                              Variant="Variant.Outlined"
                              Margin="Margin.Dense"
                              Immediate="@true"
                              Adornment="Adornment.Start"
                              AdornmentIcon="@Icons.Material.Filled.Search"/>
                <MudTooltip Text="@T("Clear search")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.Clear" Size="Size.Medium" Color="Color.Inherit" Disabled="@(string.IsNullOrWhiteSpace(this.searchText))" OnClick="@this.ClearSearchAsync"/>
                </MudTooltip>
            </MudStack>

            <MudStack Row="@true" AlignItems="AlignItems.Center" Wrap="Wrap.NoWrap" Spacing="1">
                <MudSwitch T="bool" Value="@this.includeThreadContents" ValueChanged="@this.IncludeThreadContentsChanged" Color="Color.Primary">
                    @T("Search chat contents")
                </MudSwitch>
                @if (this.isSearchRunning)
                {
                    <MudProgressCircular Size="Size.Small" Indeterminate="@true"/>
                }
            </MudStack>
        </MudStack>
    }

    <MudTreeView T="ITreeItem" Items="@this.treeItems" SelectionMode="SelectionMode.SingleSelection" Hover="@true" ExpandOnClick="@true" Class="ma-3">
        <ItemTemplate Context="item">
            @switch (item.Value)
            {
                case TreeDivider:
                    <li style="min-height: 1em;">
                        <MudDivider Style="margin-top: 1em; width: 90%; border-width: 3pt;"/>
                    </li>
                    break;

                case TreeItemData treeItem:
                    @if (treeItem.Type is TreeItemType.LOADING)
                    {
                        <MudTreeViewItem T="ITreeItem" Icon="@this.GetTreeItemIcon(treeItem)" Value="@item.Value" Expanded="@item.Expanded" CanExpand="@false" Items="@(treeItem.Children!)">
                            <BodyContent>
                                <MudSkeleton Width="85%" Height="22px"/>
                            </BodyContent>
                        </MudTreeViewItem>
                    }
                    else if (treeItem.Type is TreeItemType.CHAT)
                    {
                        <MudTreeViewItem T="ITreeItem" Icon="@this.GetTreeItemIcon(treeItem)" Value="@item.Value" Expanded="@item.Expanded" CanExpand="@treeItem.Expandable" Items="@(treeItem.Children!)" OnClick="@(() => this.LoadChatAsync(treeItem.Path, true))">
                            <BodyContent>
                                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
                                    <MudText Style="justify-self: start;">
                                        @if (string.IsNullOrWhiteSpace(treeItem.Text))
                                        {
                                            @T("Empty chat")
                                        }
                                        else
                                        {
                                            @treeItem.ShortenedText
                                        }
                                    </MudText>
                                    <div style="justify-self: end;">

                                        <MudTooltip Text="@T("Move to workspace")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                            <MudIconButton Icon="@Icons.Material.Filled.MoveToInbox" Size="Size.Medium" Color="Color.Inherit" Disabled="@this.IsChatTreeItemBusy(treeItem)" OnClick="@(() => this.MoveChatAsync(treeItem.Path))"/>
                                        </MudTooltip>

                                        <MudTooltip Text="@T("Rename")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                            <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Medium" Color="Color.Inherit" Disabled="@this.IsChatTreeItemBusy(treeItem)" OnClick="@(() => this.RenameChatAsync(treeItem.Path))"/>
                                        </MudTooltip>

                                        <MudTooltip Text="@T("Delete")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                            <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Color="Color.Error" Disabled="@this.IsChatTreeItemBusy(treeItem)" OnClick="@(() => this.DeleteChatAsync(treeItem.Path))"/>
                                        </MudTooltip>
                                    </div>
                                </div>
                            </BodyContent>
                        </MudTreeViewItem>
                    }
                    else if (treeItem.Type is TreeItemType.WORKSPACE)
                    {
                        <MudTreeViewItem T="ITreeItem" Icon="@this.GetTreeItemIcon(treeItem)" Value="@item.Value" Expanded="@item.Expanded" CanExpand="@treeItem.Expandable" Items="@(treeItem.Children!)" OnClick="@(() => this.OnWorkspaceClicked(treeItem))">
                            <BodyContent>
                                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
                                    <MudText Style="justify-self: start;">
                                        @treeItem.Text
                                    </MudText>
                                    @if (!this.HasSearchQuery)
                                    {
                                        <div style="justify-self: end;">
                                            <MudTooltip Text="@this.GetAddChatToWorkspaceTooltip(treeItem.Text)" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                                <MudIconButton Icon="@Icons.Material.Filled.AddComment" Size="Size.Medium" Color="Color.Inherit" OnClick="@(() => this.AddChatAsync(treeItem.Path))"/>
                                            </MudTooltip>

                                            <MudTooltip Text="@T("Rename")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                                <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Medium" Color="Color.Inherit" OnClick="@(() => this.RenameWorkspaceAsync(treeItem.Path))"/>
                                            </MudTooltip>

                                            <MudTooltip Text="@T("Delete")" Placement="@WORKSPACE_ITEM_TOOLTIP_PLACEMENT">
                                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Color="Color.Error" OnClick="@(() => this.DeleteWorkspaceAsync(treeItem.Path))"/>
                                            </MudTooltip>
                                        </div>
                                    }
                                </div>
                            </BodyContent>
                        </MudTreeViewItem>
                    }
                    else
                    {
                        <MudTreeViewItem T="ITreeItem" Icon="@this.GetTreeItemIcon(treeItem)" Value="@item.Value" Expanded="@item.Expanded" CanExpand="@treeItem.Expandable" Items="@(treeItem.Children!)">
                            <BodyContent>
                                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
                                    <MudText Style="justify-self: start;">
                                        @treeItem.Text
                                    </MudText>
                                </div>
                            </BodyContent>
                        </MudTreeViewItem>
                    }
                    break;

                case TreeButton treeButton:
                    <li>
                        <div class="mud-treeview-item-content" style="background-color: unset;">
                            <div class="mud-treeview-item-arrow"></div>
                            <MudButton StartIcon="@treeButton.Icon" Variant="Variant.Filled" OnClick="@treeButton.Action">
                                @treeButton.Text
                            </MudButton>
                        </div>
                    </li>
                    break;
            }
        </ItemTemplate>
    </MudTreeView>
}