MindWorkAI/AI-Studio
MindWorkAI/AI-Studio
1
0
Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2025-02-05 11:49:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved the inner content scrolling to use the entire space available (#263)

Browse Source
This commit is contained in:
Thorsten Sommer 2025-01-21 13:40:47 +01:00 committed by GitHub
parent f50e041640
commit 14caf550ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 509 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/MindWork AI Studio/Assistants/AssistantBase.razor
View File

@ -1,10 +1,12 @@
@using AIStudio.Chat
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3">
@(this.Title)
</MudText>
<InnerScrolling HeaderHeight="6em">
<InnerScrolling>
<ChildContent>
<MudForm @ref="@(this.form)" @bind-IsValid="@(this.inputIsValid)" @bind-Errors="@(this.inputIssues)" FieldChanged="@this.TriggerFormChange" Class="pr-2">
<MudText Typo="Typo.body1" Align="Align.Justify" Class="mb-6">
@ -129,3 +131,4 @@
</MudStack>
</FooterContent>
</InnerScrolling>
</div>

2
app/MindWork AI Studio/Components/ChatComponent.razor
View File

@ -3,7 +3,7 @@
@inherits MSGComponentBase
<InnerScrolling FillEntireHorizontalSpace="@true" @ref="@this.scrollingArea" HeaderHeight="12.3em" MinWidth="36em">
<InnerScrolling FillEntireHorizontalSpace="@true" @ref="@this.scrollingArea" MinWidth="36em" Style="height: 100%">
<ChildContent>
@if (this.ChatThread is not null)
{

6
app/MindWork AI Studio/Components/InnerScrolling.razor
View File

@ -7,17 +7,17 @@
@this.HeaderContent
</div>
}
<div class="flex-auto overflow-auto">
<div class="flex-auto overflow-auto mb-3">
@this.ChildContent
<div @ref="@this.AnchorAfterChildContent">
<div style="max-height: 0.1em;" @ref="@this.AnchorAfterChildContent">
&nbsp;
</div>
</div>
@if (this.FooterContent is not null)
{
<MudPaper Class="pa-3 border-solid border rounded-lg">
<MudPaper Class="pa-3 mb-3 border-solid border rounded-lg">
@this.FooterContent
</MudPaper>
}

15
app/MindWork AI Studio/Components/InnerScrolling.razor.cs
View File

@ -9,14 +9,6 @@ public partial class InnerScrolling : MSGComponentBase
[Parameter]
public bool FillEntireHorizontalSpace { get; set; }
/// <summary>
/// Set the height of anything above the scrolling content; usually a header.
/// What we do is calc(100vh - HeaderHeight). Means, you can use multiple measures like
/// 230px - 3em. Default is 3em.
/// </summary>
[Parameter]
public string HeaderHeight { get; set; } = "3em";
[Parameter]
public RenderFragment? HeaderContent { get; set; }
@ -35,6 +27,9 @@ public partial class InnerScrolling : MSGComponentBase
[Parameter]
public string? MinWidth { get; set; }
[Parameter]
public string Style { get; set; } = string.Empty;
[CascadingParameter]
private MainLayout MainLayout { get; set; } = null!;
@ -76,10 +71,12 @@ public partial class InnerScrolling : MSGComponentBase
private string MinWidthStyle => string.IsNullOrWhiteSpace(this.MinWidth) ? string.Empty : $"min-width: {this.MinWidth}; ";
private string Styles => this.FillEntireHorizontalSpace ? $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); overflow-x: auto; min-width: 0; {this.MinWidthStyle}" : $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); flex-shrink: 0; {this.MinWidthStyle}";
private string TerminatedStyles => string.IsNullOrWhiteSpace(this.Style) ? string.Empty : $"{this.Style}; ";
private string Classes => this.FillEntireHorizontalSpace ? $"{this.Class} d-flex flex-column flex-grow-1" : $"{this.Class} d-flex flex-column";
private string Styles => $"flex-grow: 1; overflow: hidden; {this.TerminatedStyles}{this.MinWidthStyle}";
public async Task ScrollToBottom()
{
await this.AnchorAfterChildContent.ScrollIntoViewAsync(this.JsRuntime);

4
app/MindWork AI Studio/Pages/About.razor
View File

@ -1,8 +1,9 @@
@attribute [Route(Routes.ABOUT)]
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2">About MindWork AI Studio</MudText>
<InnerScrolling HeaderHeight="6em">
<InnerScrolling>
<MudExpansionPanels Class="mb-3" MultiExpansion="@false">
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="Versions" IsExpanded="@true">
<MudText>
@ -62,3 +63,4 @@
</ExpansionPanel>
</MudExpansionPanels>
</InnerScrolling>
</div>

4
app/MindWork AI Studio/Pages/Assistants.razor
View File

@ -1,11 +1,12 @@
@using AIStudio.Settings.DataModel
@attribute [Route(Routes.ASSISTANTS)]
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3">
Assistants
</MudText>
<InnerScrolling HeaderHeight="6em">
<InnerScrolling>
<MudText Typo="Typo.h4" Class="mb-2 mr-3">
General
@ -49,3 +50,4 @@
</MudStack>
</InnerScrolling>
</div>

31
app/MindWork AI Studio/Pages/Chat.razor
View File

@ -2,6 +2,8 @@
@using AIStudio.Settings.DataModel
@inherits MSGComponentBase
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3">
@if (this.chatThread is not null && this.chatThread.WorkspaceId != Guid.Empty)
{
@ -18,21 +20,10 @@
{
<MudSplitter Dimension="@this.ReadSplitterPosition" DimensionChanged="this.SplitterChanged" EnableSlide="@this.AreWorkspacesVisible" EnableMargin="@false" StartContentStyle="margin-right: 1em;" BarStyle="" EndContentStyle="margin-left: 1em;">
<StartContent>
@if (this.AreWorkspacesHidden)
{
<MudPaper Class="border border-solid rounded-lg">
<MudTooltip Text="Show your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
</MudTooltip>
</MudPaper>
}
@if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES)
{
@if ((this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR && this.SettingsManager.ConfigurationData.Workspace.IsSidebarVisible) || this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.SIDEBAR_ALWAYS_VISIBLE)
{
@if (this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR && this.SettingsManager.ConfigurationData.Workspace.IsSidebarVisible)
{
<InnerScrolling HeaderHeight="12.3em" FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg" MinWidth="26em">
// Case: Sidebar can be toggled and is currently visible
<InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
<HeaderContent>
<MudTooltip Text="Hide your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
@ -45,30 +36,28 @@
}
else
{
<InnerScrolling HeaderHeight="12.3em" FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg" MinWidth="26em">
// Case: Sidebar is always visible
<InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg mb-3" MinWidth="26em">
<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.currentWorkspaceName = name"/>
</EndContent>
</MudSplitter>
}
else if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR)
{
<MudStack Row="@true" Style="width: 100%; overflow: hidden;">
<MudPaper Class="border border-solid rounded-lg">
// 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">
<MudTooltip Text="Show your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
</MudTooltip>
@ -83,6 +72,7 @@ else if(this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not
}
else
{
// Case: Workspaces are disabled or shown in an overlay
<ChatComponent
@bind-ChatThread="@this.chatThread"
@bind-Provider="@this.providerSettings"
@ -108,3 +98,4 @@ else
</MudDrawerContainer>
</MudDrawer>
}
</div>

6
app/MindWork AI Studio/Pages/Home.razor
View File

@ -1,9 +1,10 @@
@attribute [Route(Routes.HOME)]
<MudImage Src="svg/banner.svg" />
<div class="inner-scrolling-context">
<MudImage Src="svg/banner.svg" Style="max-height: 16em; width: 100%; object-fit: cover;" />
<MudText Typo="Typo.h3" Class="mt-2 mb-2">Let's get started</MudText>
<InnerScrolling HeaderHeight="288px - 8em">
<InnerScrolling>
<MudExpansionPanels Class="mb-3" MultiExpansion="@false">
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.MenuBook" HeaderText="Introduction" IsExpanded="@true">
@ -38,3 +39,4 @@
</MudExpansionPanels>
</InnerScrolling>
</div>

4
app/MindWork AI Studio/Pages/Settings.razor
View File

@ -1,9 +1,10 @@
@attribute [Route(Routes.SETTINGS)]
@using AIStudio.Components.Settings
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-12">Settings</MudText>
<InnerScrolling HeaderHeight="10em">
<InnerScrolling>
<MudExpansionPanels Class="mb-3" MultiExpansion="@false">
<SettingsPanelProviders @bind-AvailableLLMProviders="@this.availableLLMProviders" />
<SettingsPanelEmbeddings AvailableLLMProvidersFunc="() => this.availableLLMProviders" @bind-AvailableEmbeddingProviders="@this.availableEmbeddingProviders" />
@ -29,3 +30,4 @@
<SettingsPanelAgentContentCleaner AvailableLLMProvidersFunc="() => this.availableLLMProviders" />
</MudExpansionPanels>
</InnerScrolling>
</div>

4
app/MindWork AI Studio/Pages/Supporters.razor
View File

@ -1,8 +1,9 @@
@attribute [Route(Routes.SUPPORTERS)]
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2">Supporters</MudText>
<InnerScrolling HeaderHeight="6em">
<InnerScrolling>
<div class="border-solid border-2 rounded-lg pa-3 mb-6">
<MudText Typo="Typo.h4" Class="mb-2">Our Titans</MudText>
@ -61,3 +62,4 @@
</MudGrid>
</InnerScrolling>
</div>

4
app/MindWork AI Studio/Pages/Writer.razor
View File

@ -1,6 +1,7 @@
@attribute [Route(Routes.WRITER)]
@inherits MSGComponentBase
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3">
Writer
</MudText>
@ -8,7 +9,7 @@
<PreviewExperimental/>
<ProviderSelection @bind-ProviderSettings="@this.providerSettings"/>
<InnerScrolling HeaderHeight="12.3em">
<InnerScrolling>
<ChildContent>
<MudTextField
@ref="@this.textField"
@ -55,3 +56,4 @@
UserAttributes="@USER_INPUT_ATTRIBUTES"/>
</FooterContent>
</InnerScrolling>
</div>

2
app/MindWork AI Studio/packages.lock.json
View File

@ -210,6 +210,6 @@
"type": "Project"
}
},
"net8.0/osx-x64": {}
"net8.0/osx-arm64": {}
}
}

20
app/MindWork AI Studio/wwwroot/app.css
View File

@ -71,7 +71,25 @@
text-decoration-thickness: 2px;
}
/* Fixed for MudBlazor, tooltips inside of navmenu */
/* Fix for MudBlazor, tooltips inside of navmenu */
.mud-navmenu .mud-tooltip-root {
display: initial !important;
}
/* Context div for inner scrolling component */
.inner-scrolling-context {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Fixed MudSplitter inside context div for inner scrolling component */
.inner-scrolling-context > .mud-splitter {
flex-grow: 1;
overflow: hidden;
}
/* Fixed the slider part of MudSplitter inside context div for inner scrolling component */
.inner-scrolling-context > .mud-splitter > .mud-slider > .mud-slider-container {
padding-bottom: 12px;
}

2
app/MindWork AI Studio/wwwroot/changelog/v0.9.27.md Normal file
View File

@ -0,0 +1,2 @@
# v0.9.27, build 202 (2025-01-xx xx:xx UTC)
- Improved the inner content scrolling to use the entire space available.