From 11edd5827ec80dc1f58264789ba0117b8b08f857 Mon Sep 17 00:00:00 2001
From: Thorsten Sommer <mail@tsommer.org>
Date: Wed, 29 May 2024 23:10:09 +0200
Subject: [PATCH] Fixed #54

---
 .../Components/Pages/About.razor              | 118 +++++++++---------
 .../Components/Pages/Home.razor               |  94 ++++++++------
 2 files changed, 116 insertions(+), 96 deletions(-)

diff --git a/app/MindWork AI Studio/Components/Pages/About.razor b/app/MindWork AI Studio/Components/Pages/About.razor
index e78590c..57b7021 100644
--- a/app/MindWork AI Studio/Components/Pages/About.razor	
+++ b/app/MindWork AI Studio/Components/Pages/About.razor	
@@ -3,60 +3,64 @@
 
 <MudText Typo="Typo.h3" Class="mb-2">About MindWork AI Studio</MudText>
 
-<MudExpansionPanels Class="mb-3">
-    <MudExpansionPanel IsInitiallyExpanded="@true">
-        <TitleContent>
-            <div class="d-flex align-center">
-                <MudIcon Icon="@Icons.Material.Filled.Layers" Size="Size.Medium" class="mr-3"/>
-                <MudText Typo="Typo.h6">Versions</MudText>
-            </div>
-        </TitleContent>
-        <ChildContent>
-            <MudText>
-                The following list shows the versions of the MindWork AI Studio, the used compilers, build time, etc.:
-            </MudText>
-            <MudList Clickable="@true">
-                <MudListItem Icon="@Icons.Material.Outlined.Chat" Text="@VersionApp"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Timer" Text="@BuildTime"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Build" Text="@VersionDotnetSdk"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@VersionDotnet"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Build" Text="@VersionRust"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Widgets" Text="@MudBlazorVersion"/>
-                <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@TauriVersion"/>
-            </MudList>
-        </ChildContent>
-    </MudExpansionPanel>
-    <MudExpansionPanel>
-        <TitleContent>
-            <div class="d-flex align-center">
-                <MudIcon Icon="@Icons.Material.Filled.AutoAwesomeMotion" Size="Size.Medium" class="mr-3"/>
-                <MudText Typo="Typo.h6">Used Open Source Projects</MudText>
-            </div>
-        </TitleContent>
-        <ChildContent>
-            <MudGrid Spacing="1">
-                <ThirdPartyComponent Name=".NET" Developer="Microsoft & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/dotnet/runtime/blob/main/LICENSE.TXT" RepositoryUrl="https://github.com/dotnet" UseCase="The C# language is used for the implementation of the user interface and the backend. To implement the user interface with C#, the Blazor technology from ASP.NET Core is used. All these technologies are integrated into the .NET SDK."/>
-                <ThirdPartyComponent Name="MudBlazor" Developer="Jonny Larsson, Meinrad Recheis & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/MudBlazor/MudBlazor/blob/dev/LICENSE" RepositoryUrl="https://github.com/MudBlazor/MudBlazor/" UseCase="Building on .NET, ASP.NET Core, and Blazor, MudBlazor is used as a library for designing and developing the user interface. It is a great project that significantly accelerates the development of advanced user interfaces with Blazor."/>
-                <ThirdPartyComponent Name="MudBlazor.Markdown" Developer="My Nihongo & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/MyNihongo/MudBlazor.Markdown/blob/main/LICENSE" RepositoryUrl="https://github.com/MyNihongo/MudBlazor.Markdown" UseCase="This component is used to render Markdown text. This is important because the LLM often responds with Markdown-formatted text, allowing us to present it in a way that is easier to read."/>
-                <ThirdPartyComponent Name="Rust" Developer="Graydon Hoare, Rust Foundation & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/rust-lang/rust?tab=readme-ov-file#license" RepositoryUrl="https://github.com/rust-lang/rust" UseCase="The .NET backend cannot be started as a desktop app. Therefore, I use a second backend in Rust, which I call runtime. With Rust as the runtime, Tauri can be used to realize a typical desktop app. Thanks to Rust, this app can be offered for Windows, macOS, and Linux desktops. Rust is a great language for developing safe and high-performance software."/>
-                <ThirdPartyComponent Name="Tauri" Developer="Daniel Thompson-Yvetot, Lucas Nogueira, Tensor, Boscop, Serge Zaitsev, George Burton & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/tauri-apps/tauri?tab=readme-ov-file#licenses" RepositoryUrl="https://github.com/tauri-apps/tauri" UseCase="Tauri is used to host the Blazor user interface. It is a great project that allows the creation of desktop applications using web technologies. I love Tauri!"/>
-                <ThirdPartyComponent Name="serde" Developer="Erick Tryzelaar, David Tolnay & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/serde-rs/serde?tab=readme-ov-file#license" RepositoryUrl="https://github.com/serde-rs/serde" UseCase="Now we have multiple systems, some developed in .NET and others in Rust. The data format JSON is responsible for translating data between both worlds (called data serialization and deserialization). Serde takes on this task in the Rust world. The counterpart in the .NET world is an integral part of .NET and is located in System.Text.Json."/>
-                <ThirdPartyComponent Name="keyring" Developer="Walther Chen, Daniel Brotsky & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/hwchen/keyring-rs?tab=readme-ov-file#license" RepositoryUrl="https://github.com/hwchen/keyring-rs" UseCase="In order to use any LLM, each user must store their so-called token for each LLM provider. This token must be kept secure, similar to a password. The safest way to do this is offered by operating systems like macOS, Windows, and Linux: They have mechanisms to store such data, if available, on special security hardware. Since this is currently not possible in .NET, we use this Rust library."/>
-                <ThirdPartyComponent Name="arboard" Developer="Artur Kovacs, Avi Weinstock, 1Password & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/1Password/arboard" RepositoryUrl="https://github.com/1Password/arboard" UseCase="To be able to use the responses of the LLM in other apps, we often use the clipboard of the respective operating system. Unfortunately, in .NET there is no solution that works with all operating systems. Therefore, I have opted for this library in Rust. This way, data transfer to other apps works on every system."/>
-                <ThirdPartyComponent Name="tokio" Developer="Alex Crichton & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/tokio-rs/tokio/blob/master/LICENSE" RepositoryUrl="https://github.com/tokio-rs/tokio" UseCase="Code in the Rust language can be specified as synchronous or asynchronous. Unlike .NET and the C# language, Rust cannot execute asynchronous code by itself. Rust requires support in the form of an executor for this. Tokio is one such executor."/>
-                <ThirdPartyComponent Name="flexi_logger" Developer="emabee & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/emabee/flexi_logger" RepositoryUrl="https://github.com/emabee/flexi_logger" UseCase="This Rust library is used to output the app's messages to the terminal. This is helpful during development and troubleshooting. This feature is initially invisible; when the app is started via the terminal, the messages become visible."/>
-            </MudGrid>
-        </ChildContent>
-    </MudExpansionPanel>
-    <MudExpansionPanel>
-        <TitleContent>
-            <div class="d-flex align-center">
-                <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Medium" class="mr-3"/>
-                <MudText Typo="Typo.h6">License: FSL-1.1-MIT</MudText>
-            </div>
-        </TitleContent>
-        <ChildContent>
-            <MudMarkdown Value="@LICENSE" OverrideHeaderTypo="@Markdown.OverrideHeaderTypo"/>
-        </ChildContent>
-    </MudExpansionPanel>
-</MudExpansionPanels>
\ No newline at end of file
+<div class="d-flex flex-column" style="height: calc(100vh - 6em);">
+    <div class="flex-auto overflow-auto">
+        <MudExpansionPanels Class="mb-3">
+            <MudExpansionPanel IsInitiallyExpanded="@true">
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.Layers" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">Versions</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+                    <MudText>
+                        The following list shows the versions of the MindWork AI Studio, the used compilers, build time, etc.:
+                    </MudText>
+                    <MudList Clickable="@true">
+                        <MudListItem Icon="@Icons.Material.Outlined.Chat" Text="@VersionApp"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Timer" Text="@BuildTime"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Build" Text="@VersionDotnetSdk"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@VersionDotnet"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Build" Text="@VersionRust"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Widgets" Text="@MudBlazorVersion"/>
+                        <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@TauriVersion"/>
+                    </MudList>
+                </ChildContent>
+            </MudExpansionPanel>
+            <MudExpansionPanel>
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.AutoAwesomeMotion" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">Used Open Source Projects</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+                    <MudGrid Spacing="1">
+                        <ThirdPartyComponent Name=".NET" Developer="Microsoft & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/dotnet/runtime/blob/main/LICENSE.TXT" RepositoryUrl="https://github.com/dotnet" UseCase="The C# language is used for the implementation of the user interface and the backend. To implement the user interface with C#, the Blazor technology from ASP.NET Core is used. All these technologies are integrated into the .NET SDK."/>
+                        <ThirdPartyComponent Name="MudBlazor" Developer="Jonny Larsson, Meinrad Recheis & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/MudBlazor/MudBlazor/blob/dev/LICENSE" RepositoryUrl="https://github.com/MudBlazor/MudBlazor/" UseCase="Building on .NET, ASP.NET Core, and Blazor, MudBlazor is used as a library for designing and developing the user interface. It is a great project that significantly accelerates the development of advanced user interfaces with Blazor."/>
+                        <ThirdPartyComponent Name="MudBlazor.Markdown" Developer="My Nihongo & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/MyNihongo/MudBlazor.Markdown/blob/main/LICENSE" RepositoryUrl="https://github.com/MyNihongo/MudBlazor.Markdown" UseCase="This component is used to render Markdown text. This is important because the LLM often responds with Markdown-formatted text, allowing us to present it in a way that is easier to read."/>
+                        <ThirdPartyComponent Name="Rust" Developer="Graydon Hoare, Rust Foundation & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/rust-lang/rust?tab=readme-ov-file#license" RepositoryUrl="https://github.com/rust-lang/rust" UseCase="The .NET backend cannot be started as a desktop app. Therefore, I use a second backend in Rust, which I call runtime. With Rust as the runtime, Tauri can be used to realize a typical desktop app. Thanks to Rust, this app can be offered for Windows, macOS, and Linux desktops. Rust is a great language for developing safe and high-performance software."/>
+                        <ThirdPartyComponent Name="Tauri" Developer="Daniel Thompson-Yvetot, Lucas Nogueira, Tensor, Boscop, Serge Zaitsev, George Burton & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/tauri-apps/tauri?tab=readme-ov-file#licenses" RepositoryUrl="https://github.com/tauri-apps/tauri" UseCase="Tauri is used to host the Blazor user interface. It is a great project that allows the creation of desktop applications using web technologies. I love Tauri!"/>
+                        <ThirdPartyComponent Name="serde" Developer="Erick Tryzelaar, David Tolnay & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/serde-rs/serde?tab=readme-ov-file#license" RepositoryUrl="https://github.com/serde-rs/serde" UseCase="Now we have multiple systems, some developed in .NET and others in Rust. The data format JSON is responsible for translating data between both worlds (called data serialization and deserialization). Serde takes on this task in the Rust world. The counterpart in the .NET world is an integral part of .NET and is located in System.Text.Json."/>
+                        <ThirdPartyComponent Name="keyring" Developer="Walther Chen, Daniel Brotsky & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/hwchen/keyring-rs?tab=readme-ov-file#license" RepositoryUrl="https://github.com/hwchen/keyring-rs" UseCase="In order to use any LLM, each user must store their so-called token for each LLM provider. This token must be kept secure, similar to a password. The safest way to do this is offered by operating systems like macOS, Windows, and Linux: They have mechanisms to store such data, if available, on special security hardware. Since this is currently not possible in .NET, we use this Rust library."/>
+                        <ThirdPartyComponent Name="arboard" Developer="Artur Kovacs, Avi Weinstock, 1Password & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/1Password/arboard" RepositoryUrl="https://github.com/1Password/arboard" UseCase="To be able to use the responses of the LLM in other apps, we often use the clipboard of the respective operating system. Unfortunately, in .NET there is no solution that works with all operating systems. Therefore, I have opted for this library in Rust. This way, data transfer to other apps works on every system."/>
+                        <ThirdPartyComponent Name="tokio" Developer="Alex Crichton & Open Source Community" LicenseName="MIT" LicenseUrl="https://github.com/tokio-rs/tokio/blob/master/LICENSE" RepositoryUrl="https://github.com/tokio-rs/tokio" UseCase="Code in the Rust language can be specified as synchronous or asynchronous. Unlike .NET and the C# language, Rust cannot execute asynchronous code by itself. Rust requires support in the form of an executor for this. Tokio is one such executor."/>
+                        <ThirdPartyComponent Name="flexi_logger" Developer="emabee & Open Source Community" LicenseName="MIT & Apache-2.0" LicenseUrl="https://github.com/emabee/flexi_logger" RepositoryUrl="https://github.com/emabee/flexi_logger" UseCase="This Rust library is used to output the app's messages to the terminal. This is helpful during development and troubleshooting. This feature is initially invisible; when the app is started via the terminal, the messages become visible."/>
+                    </MudGrid>
+                </ChildContent>
+            </MudExpansionPanel>
+            <MudExpansionPanel>
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.Verified" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">License: FSL-1.1-MIT</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+                    <MudMarkdown Value="@LICENSE" OverrideHeaderTypo="@Markdown.OverrideHeaderTypo"/>
+                </ChildContent>
+            </MudExpansionPanel>
+        </MudExpansionPanels>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/MindWork AI Studio/Components/Pages/Home.razor b/app/MindWork AI Studio/Components/Pages/Home.razor
index 392a239..c2c950b 100644
--- a/app/MindWork AI Studio/Components/Pages/Home.razor	
+++ b/app/MindWork AI Studio/Components/Pages/Home.razor	
@@ -3,44 +3,60 @@
 <MudImage Src="svg/banner.svg" />
 <MudText Typo="Typo.h3" Class="mt-2 mb-2">Let's get started</MudText>
 
-<MudExpansionPanels Class="mb-3">
-    
-    <MudExpansionPanel IsInitiallyExpanded="@true">
-        <TitleContent>
-            <div class="d-flex align-center">
-                <MudIcon Icon="@Icons.Material.Filled.MenuBook" Size="Size.Medium" class="mr-3"/>
-                <MudText Typo="Typo.h6">Introduction</MudText>
-            </div>
-        </TitleContent>
-        <ChildContent>
-            <MudText Typo="Typo.h5" Class="mb-3">
-                Welcome to MindWork AI Studio!
-            </MudText>
-            <MudText Typo="Typo.body1" Class="mb-3" Style="text-align: justify; hyphens: auto;">
-                Thank you for considering MindWork AI Studio for your AI needs. This app is designed to help you harness
-                the power of Large Language Models (LLMs). Please note that this app doesn't come with an integrated
-                LLM. Instead, you will need to bring an API key from a suitable provider.
-            </MudText>
-            <MudText Typo="Typo.body1" Class="mb-3">
-                Here's what makes MindWork AI Studio stand out:
-            </MudText>
-            <MudTextList Icon="@Icons.Material.Filled.CheckCircle" Clickable="@true" Items="@ITEMS" Class="mb-3"/>
-            <MudText Typo="Typo.body1" Class="mb-3">
-                We hope you enjoy using MindWork AI Studio to bring your AI projects to life!
-            </MudText>
-        </ChildContent>
-    </MudExpansionPanel>
+<div class="d-flex flex-column" style="height: calc(100vh - 288px - 3em);">
+    <div class="flex-auto overflow-auto">
+        <MudExpansionPanels Class="mb-3">
 
-    <MudExpansionPanel>
-        <TitleContent>
-            <div class="d-flex align-center">
-                <MudIcon Icon="@Icons.Material.Filled.RocketLaunch" Size="Size.Medium" class="mr-3"/>
-                <MudText Typo="Typo.h6">Quick Start Guide</MudText>
-            </div>
-        </TitleContent>
-        <ChildContent>
+            <MudExpansionPanel IsInitiallyExpanded="@true">
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.MenuBook" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">Introduction</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+                    <MudText Typo="Typo.h5" Class="mb-3">
+                        Welcome to MindWork AI Studio!
+                    </MudText>
+                    <MudText Typo="Typo.body1" Class="mb-3" Style="text-align: justify; hyphens: auto;">
+                        Thank you for considering MindWork AI Studio for your AI needs. This app is designed to help you harness
+                        the power of Large Language Models (LLMs). Please note that this app doesn't come with an integrated
+                        LLM. Instead, you will need to bring an API key from a suitable provider.
+                    </MudText>
+                    <MudText Typo="Typo.body1" Class="mb-3">
+                        Here's what makes MindWork AI Studio stand out:
+                    </MudText>
+                    <MudTextList Icon="@Icons.Material.Filled.CheckCircle" Clickable="@true" Items="@ITEMS" Class="mb-3"/>
+                    <MudText Typo="Typo.body1" Class="mb-3">
+                        We hope you enjoy using MindWork AI Studio to bring your AI projects to life!
+                    </MudText>
+                </ChildContent>
+            </MudExpansionPanel>
 
-        </ChildContent>
-    </MudExpansionPanel>
-    
-</MudExpansionPanels>
\ No newline at end of file
+            <MudExpansionPanel>
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.Lightbulb" Color="Color.Warning" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">Our vision</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+
+                </ChildContent>
+            </MudExpansionPanel>
+
+            <MudExpansionPanel>
+                <TitleContent>
+                    <div class="d-flex align-center">
+                        <MudIcon Icon="@Icons.Material.Filled.RocketLaunch" Size="Size.Medium" class="mr-3"/>
+                        <MudText Typo="Typo.h6">Quick Start Guide</MudText>
+                    </div>
+                </TitleContent>
+                <ChildContent>
+
+                </ChildContent>
+            </MudExpansionPanel>
+
+        </MudExpansionPanels>
+    </div>
+</div>
\ No newline at end of file