MindWorkAI/AI-Studio
MindWorkAI/AI-Studio
1
0
Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2025-04-29 01:19:47 +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 @using AIStudio.Chat
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3"> <MudText Typo="Typo.h3" Class="mb-2 mr-3">
@(this.Title) @(this.Title)
</MudText> </MudText>
<InnerScrolling HeaderHeight="6em"> <InnerScrolling>
<ChildContent> <ChildContent>
<MudForm @ref="@(this.form)" @bind-IsValid="@(this.inputIsValid)" @bind-Errors="@(this.inputIssues)" FieldChanged="@this.TriggerFormChange" Class="pr-2"> <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"> <MudText Typo="Typo.body1" Align="Align.Justify" Class="mb-6">
@ -129,3 +131,4 @@
</MudStack> </MudStack>
</FooterContent> </FooterContent>
</InnerScrolling> </InnerScrolling>
</div>

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

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

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

@ -1,23 +1,23 @@
@inherits MSGComponentBase @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) @if (this.HeaderContent is not null)
{ {
<div> <div>
@this.HeaderContent @this.HeaderContent
</div> </div>
} }
<div class="flex-auto overflow-auto"> <div class="flex-auto overflow-auto mb-3">
@this.ChildContent @this.ChildContent
<div @ref="@this.AnchorAfterChildContent"> <div style="max-height: 0.1em;" @ref="@this.AnchorAfterChildContent">
&nbsp; &nbsp;
</div> </div>
</div> </div>
@if (this.FooterContent is not null) @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 @this.FooterContent
</MudPaper> </MudPaper>
} }

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

@ -9,14 +9,6 @@ public partial class InnerScrolling : MSGComponentBase
[Parameter] [Parameter]
public bool FillEntireHorizontalSpace { get; set; } 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] [Parameter]
public RenderFragment? HeaderContent { get; set; } 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 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"; private string Classes => this.FillEntireHorizontalSpace ? $"{this.Class} d-flex flex-column flex-grow-1" : $"{this.Class} d-flex flex-column";
public async Task ScrollToBottom() public async Task ScrollToBottom()

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

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

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

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

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

@ -2,6 +2,8 @@
@using AIStudio.Settings.DataModel @using AIStudio.Settings.DataModel
@inherits MSGComponentBase @inherits MSGComponentBase
<div class="inner-scrolling-context">
<MudText Typo="Typo.h3" Class="mb-2 mr-3"> <MudText Typo="Typo.h3" Class="mb-2 mr-3">
@if (this.chatThread is not null && this.chatThread.WorkspaceId != Guid.Empty) @if (this.chatThread is not null && this.chatThread.WorkspaceId != Guid.Empty)
{ {
@ -20,7 +22,7 @@
<StartContent> <StartContent>
@if (this.AreWorkspacesHidden) @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"> <MudTooltip Text="Show your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/> <MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
</MudTooltip> </MudTooltip>
@ -32,7 +34,7 @@
{ {
@if (this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR && this.SettingsManager.ConfigurationData.Workspace.IsSidebarVisible) @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> <HeaderContent>
<MudTooltip Text="Hide your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT"> <MudTooltip Text="Hide your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/> <MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
@ -45,7 +47,7 @@
} }
else 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> <ChildContent>
<Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/> <Workspaces @ref="this.workspaces" @bind-CurrentChatThread="@this.chatThread"/>
</ChildContent> </ChildContent>
@ -55,20 +57,18 @@
} }
</StartContent> </StartContent>
<EndContent> <EndContent>
<ChatComponent <ChatComponent
@bind-ChatThread="@this.chatThread" @bind-ChatThread="@this.chatThread"
@bind-Provider="@this.providerSettings" @bind-Provider="@this.providerSettings"
Workspaces="@this.workspaces" Workspaces="@this.workspaces"
WorkspaceName="name => this.currentWorkspaceName = name"/> WorkspaceName="name => this.currentWorkspaceName = name"/>
</EndContent> </EndContent>
</MudSplitter> </MudSplitter>
} }
else if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_SIDEBAR) 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;"> <MudStack Row="@true" Style="width: 100%; overflow: hidden; height: 100%; flex-grow: 1; min-height: 0;">
<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"> <MudTooltip Text="Show your workspaces" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
<MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/> <MudIconButton Size="Size.Large" Icon="@this.WorkspaceSidebarToggleIcon" OnClick="() => this.ToggleWorkspaceSidebar()"/>
</MudTooltip> </MudTooltip>
@ -108,3 +108,4 @@ else
</MudDrawerContainer> </MudDrawerContainer>
</MudDrawer> </MudDrawer>
} }
</div>

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

@ -1,9 +1,10 @@
@attribute [Route(Routes.HOME)] @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> <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"> <MudExpansionPanels Class="mb-3" MultiExpansion="@false">
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.MenuBook" HeaderText="Introduction" IsExpanded="@true"> <ExpansionPanel HeaderIcon="@Icons.Material.Filled.MenuBook" HeaderText="Introduction" IsExpanded="@true">
@ -38,3 +39,4 @@
</MudExpansionPanels> </MudExpansionPanels>
</InnerScrolling> </InnerScrolling>
</div>

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

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

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

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

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

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

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

@ -210,6 +210,6 @@
"type": "Project" "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 { .mud-navmenu .mud-tooltip-root {
display: initial !important; 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.