AI-Studio/app/MindWork AI Studio/Pages/Chat.razor

@attribute [Route(Routes.CHAT)]
@using AIStudio.Settings.DataModel
@inherits MSGComponentBase

<div class="inner-scrolling-context">
    
    <MudStack Row="true" AlignItems="AlignItems.Center" Class="mb-2" StretchItems="StretchItems.Start">
        <MudText Typo="Typo.h3">
            @if (this.chatThread is not null && this.chatThread.WorkspaceId != Guid.Empty)
            {
                @(T("Chat in Workspace") + $" \"{this.currentWorkspaceName}\"")
            }
            else
            {
                @T("Disappearing Chat")
            }
        </MudText>
        
        <MudTooltip Text="@T("Show the chat options")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
            <MudIconButton Variant="Variant.Text" Icon="@Icons.Material.Filled.Settings" Color="Color.Default" OnClick="@this.OpenChatSettingsDialog"/>
        </MudTooltip>
    </MudStack>

    <ProviderSelection @bind-ProviderSettings="@this.providerSettings"/>
    @if (this.AreWorkspacesVisible)
    {
        <MudSplitter Dimension="@this.ReadSplitterPosition" DimensionChanged="this.SplitterChanged" EnableSlide="@this.AreWorkspacesVisible" EnableMargin="@false" StartContentStyle="margin-right: 1em;" BarStyle="" EndContentStyle="margin-left: 1em;">
            <StartContent>
                @if (this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR && this.SettingsManager.ConfigurationData.Workspace.IsSidebarVisible)
                {
                    // Case: Sidebar can be toggled and is currently visible
                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
                        <HeaderContent>
                            <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap" Spacing="1" Class="mb-0 ms-6 mt-2">
                                <MudText Typo="Typo.h6">
                                    @T("Your workspaces")
                                </MudText>
                                <MudTooltip Text="@T("Configure your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                                    <MudIconButton Icon="@Icons.Material.Filled.Settings" Size="Size.Medium" OnClick="async () => await this.OpenWorkspacesSettingsDialog()"/>
                                </MudTooltip>
                                <MudTooltip Text="@T("Hide your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                                    <MudIconButton Size="Size.Medium" Icon="@this.WorkspaceSidebarToggleIcon" Class="me-1" OnClick="() => this.ToggleWorkspaceSidebar()"/>
                                </MudTooltip>
                            </MudStack>
                        </HeaderContent>
                        <ChildContent>
                            <Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/>
                        </ChildContent>
                    </InnerScrolling>
                }
                else
                {
                    // Case: Sidebar is always visible
                    <InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
                        <HeaderContent>
                            <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap" Class="d-flex mb-0 ms-6 mt-2">
                                <MudText Typo="Typo.h6">
                                    @T("Your workspaces")
                                </MudText>
                                <MudSpacer/>
                                <MudTooltip Text="@T("Configure your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                                    <MudIconButton Icon="@Icons.Material.Filled.Settings" Size="Size.Medium" OnClick="async () => await this.OpenWorkspacesSettingsDialog()"/>
                                </MudTooltip>
                            </MudStack>
                        </HeaderContent>
                        <ChildContent>
                            <Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/>
                        </ChildContent>
                    </InnerScrolling>
                }
            </StartContent>
            <EndContent>
                <ChatComponent
                    @bind-ChatThread="@this.chatThread"
                    @bind-Provider="@this.providerSettings"
                    Workspaces="@this.workspaces"
                    WorkspaceName="name => this.UpdateWorkspaceName(name)"/>
            </EndContent>
        </MudSplitter>
    }
    else if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR)
    {
        // Case: Sidebar can be toggled and is currently hidden
        <MudStack Row="@true" Style="width: 100%; overflow: hidden; height: 100%; flex-grow: 1; min-height: 0;">
            <MudPaper Class="border border-solid rounded-lg mb-3 d-flex">
                <MudStack Row="false" AlignItems="AlignItems.Center" StretchItems="StretchItems.Middle" Wrap="Wrap.NoWrap">
                    <MudTooltip Text="@T("Show your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                        <MudIconButton Size="Size.Medium" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
                    </MudTooltip>
                    <MudText Typo="Typo.h6" Style="writing-mode: vertical-lr; word-spacing: 0.5em;">
                        @T("Your workspaces")
                    </MudText>
                    <MudTooltip Text="@T("Configure your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                        <MudIconButton Icon="@Icons.Material.Filled.Settings" Size="Size.Medium" OnClick="async () => await this.OpenWorkspacesSettingsDialog()"/>
                    </MudTooltip>
                </MudStack>
            </MudPaper>

            <ChatComponent
                @bind-ChatThread="@this.chatThread"
                @bind-Provider="@this.providerSettings"
                Workspaces="@this.workspaces"
                WorkspaceName="name => this.UpdateWorkspaceName(name)"/>
        </MudStack>
    }
    else
    {
        // Case: Workspaces are disabled or shown in an overlay
        <ChatComponent
            @bind-ChatThread="@this.chatThread"
            @bind-Provider="@this.providerSettings"
            Workspaces="@this.workspaces"
            WorkspaceName="name => this.UpdateWorkspaceName(name)"/>
    }

    @if (
        this.SettingsManager.ConfigurationData.Workspace.StorageBehavior != WorkspaceStorageBehavior.DISABLE_WORKSPACES
        && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_OVERLAY)
    {
        <MudDrawer @bind-Open="@this.workspaceOverlayVisible" Width="40em" Height="100%" Anchor="Anchor.Start" Variant="DrawerVariant.Temporary" Elevation="1">
            <MudDrawerHeader>
                <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.Start" Wrap="Wrap.NoWrap" Style="width: 100%;">
                    <MudText Typo="Typo.h6" Class="mr-3">
                        @T("Your workspaces")
                    </MudText>
                    
                    <MudTooltip Text="@T("Configure your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                        <MudIconButton Icon="@Icons.Material.Filled.Settings" Size="Size.Medium" OnClick="async () => await this.OpenWorkspacesSettingsDialog()"/>
                    </MudTooltip>
                    <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Error" Size="Size.Medium" OnClick="() => this.ToggleWorkspacesOverlay()"/>
                </MudStack>
            </MudDrawerHeader>
            <MudDrawerContainer Class="ml-6">
                <Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/>
            </MudDrawerContainer>
        </MudDrawer>
    }
</div>