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

Improved the inner content scrolling to use the entire space available

Browse Source
This commit is contained in:
Thorsten Sommer 2025-01-14 20:31:58 +01:00
parent ebe00812e2
commit 1c2fc04065
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
14 changed files with 509 additions and 483 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">
<ChildContent>
@if (this.ChatThread is not null)
{

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

@ -1,23 +1,23 @@
@inherits MSGComponentBase
<div class="@this.Classes" style="@this.Styles">
<div class="@this.Classes" style="flex-grow: 1; overflow: hidden;">
@if (this.HeaderContent is not null)
{
<div>
@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>
}

10
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; }
@ -76,8 +68,6 @@ 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 Classes => this.FillEntireHorizontalSpace ? $"{this.Class} d-flex flex-column flex-grow-1" : $"{this.Class} d-flex flex-column";
public async Task ScrollToBottom()

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>

15
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)
{
@ -20,7 +22,7 @@
<StartContent>
@if (this.AreWorkspacesHidden)
{
<MudPaper Class="border border-solid rounded-lg">
<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>
@ -32,7 +34,7 @@
{
@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">
<InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg" MinWidth="26em">
<HeaderContent>
<MudTooltip Text="Hide your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
@ -45,7 +47,7 @@
}
else
{
<InnerScrolling HeaderHeight="12.3em" FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg" MinWidth="26em">
<InnerScrolling FillEntireHorizontalSpace="@true" Class="border border-solid rounded-lg" MinWidth="26em">
<ChildContent>
<Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/>
</ChildContent>
@ -55,20 +57,18 @@
}
</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">
<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>
@ -108,3 +108,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: 22em; 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": {}
}
}

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

@ -75,3 +75,21 @@
.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.