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

Refactored inner scrolling into its own component

Browse Source
This commit is contained in:
Thorsten Sommer 2024-06-01 20:32:30 +02:00
parent 6c3412f3a6
commit fa80e5c1c0
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
7 changed files with 251 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/MindWork AI Studio/Components/Blocks/InnerScrolling.razor Normal file
View File

@ -0,0 +1,7 @@
<div class="d-flex flex-column" style="@this.Height">
<div class="flex-auto overflow-auto">
@this.ChildContent
</div>
@this.FooterContent
</div>

25
app/MindWork AI Studio/Components/Blocks/InnerScrolling.razor.cs Normal file
View File

@ -0,0 +1,25 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components.Blocks;
public partial class InnerScrolling : ComponentBase
{
/// <summary>
/// Set the height of anything above the scrolling content; usually a header.
/// What we do is calc(100vh - THIS). Means, you can use multiple measures like
/// 230px - 3em. Default is 3em.
/// </summary>
[Parameter]
public string HeaderHeight { get; set; } = "3em";
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// Optional footer content, shown after the scrolling area.
/// </summary>
[Parameter]
public RenderFragment? FooterContent { get; set; }
private string Height => $"height: calc(100vh - {this.HeaderHeight});";
}

6
app/MindWork AI Studio/Components/Pages/About.razor
View File

@ -3,8 +3,7 @@
<MudText Typo="Typo.h3" Class="mb-2">About MindWork AI Studio</MudText>
<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
<div class="flex-auto overflow-auto">
<InnerScrolling HeaderHeight="6em">
<MudExpansionPanels Class="mb-3">
<MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
<TitleContent>
@ -62,5 +61,4 @@
</ChildContent>
</MudExpansionPanel>
</MudExpansionPanels>
</div>
</div>
</InnerScrolling>

11
app/MindWork AI Studio/Components/Pages/Chat.razor
View File

@ -10,8 +10,8 @@
}
</MudSelect>
<div class="d-flex flex-column" style="height: calc(100vh - 12.3em);">
<div class="flex-auto overflow-auto">
<InnerScrolling HeaderHeight="12.3em">
<ChildContent>
@if (this.chatThread is not null)
{
foreach (var block in this.chatThread.Blocks.OrderBy(n => n.Time))
@ -19,9 +19,10 @@
<ContentBlockComponent Role="@block.Role" Type="@block.ContentType" Time="@block.Time" Content="@block.Content"/>
}
}
</div>
</ChildContent>
<FooterContent>
<MudPaper Style="flex: 0 0 auto;">
<MudTextField T="string" @ref="@this.inputField" @bind-Text="@this.userInput" Variant="Variant.Outlined" AutoGrow="@true" Lines="3" MaxLines="12" Label="@this.InputLabel" Placeholder="@this.ProviderPlaceholder" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Send" OnAdornmentClick="() => this.SendMessage()" ReadOnly="!this.IsProviderSelected || this.isStreaming" Immediate="@true" OnKeyUp="this.InputKeyEvent" UserAttributes="@USER_INPUT_ATTRIBUTES"/>
</MudPaper>
</div>
</FooterContent>
</InnerScrolling>

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

@ -4,8 +4,7 @@
<MudImage Src="svg/banner.svg" />
<MudText Typo="Typo.h3" Class="mt-2 mb-2">Let's get started</MudText>
<div class="d-flex flex-column" style="height: calc(100vh - 288px - 3em);">
<div class="flex-auto overflow-auto">
<InnerScrolling HeaderHeight="288px - 3em">
<MudExpansionPanels Class="mb-3">
<MudExpansionPanel IsInitiallyExpanded="@true" Class="border-solid border rounded-lg">
@ -68,5 +67,4 @@
</MudExpansionPanel>
</MudExpansionPanels>
</div>
</div>
</InnerScrolling>

6
app/MindWork AI Studio/Components/Pages/Settings.razor
View File

@ -2,8 +2,7 @@
<MudText Typo="Typo.h3" Class="mb-12">Settings</MudText>
<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
<div class="flex-auto overflow-auto">
<InnerScrolling HeaderHeight="6em">
<MudPaper Class="pa-3 mb-8 border-solid border rounded-lg">
<MudText Typo="Typo.h4" Class="mb-3">Configured Providers</MudText>
<MudTable Items="@this.SettingsManager.ConfigurationData.Providers" Class="border-dashed border rounded-lg">
@ -54,5 +53,4 @@
<ConfigurationOption OptionDescription="Enable spellchecking?" LabelOn="Spellchecking is enabled" LabelOff="Spellchecking is disabled" State="@(() => this.SettingsManager.ConfigurationData.EnableSpellchecking)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.EnableSpellchecking = updatedState)" OptionHelp="When enabled, spellchecking will be active in all input fields. Depending on your operating system, errors may not be visually highlighted, but right-clicking may still offer possible corrections." />
<ConfigurationSelect OptionDescription="Shortcut to send input" SelectedValue="@(() => this.SettingsManager.ConfigurationData.ShortcutSendBehavior)" Data="@ConfigurationSelectDataFactory.GetSendBehaviorData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.ShortcutSendBehavior = selectedValue)" OptionHelp="Do you want to use any shortcut to send your input?"/>
</MudPaper>
</div>
</div>
</InnerScrolling>

6
app/MindWork AI Studio/Components/Pages/Supporters.razor
View File

@ -2,8 +2,7 @@
<MudText Typo="Typo.h3" Class="mb-2">Supporters</MudText>
<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
<div class="flex-auto overflow-auto">
<InnerScrolling HeaderHeight="6em">
<div class="border-solid border-2 rounded-lg pa-3 mb-6">
<MudText Typo="Typo.h4" Class="mb-2">Our Titans</MudText>
@ -46,5 +45,4 @@
</MudItem>
</MudGrid>
</div>
</div>
</InnerScrolling>