Added update system to the app (#13)

2026-10-13 19:53:47 +00:00 · 2024-06-30 15:26:28 +02:00
1 parent 50a03e6c9d
commit d6e80a4563
@@ -13,8 +13,9 @@ public partial class Changelog
    
    public static readonly Log[] LOGS = 
    [
+        new (156, "v0.6.0, build 156 (2024-06-30 12:49 UTC)", "v0.6.0.md"),
+        new (155, "v0.5.2, build 155 (2024-06-25 18:07 UTC)", "v0.5.2.md"),
        new (154, "v0.5.1, build 154 (2024-06-25 15:35 UTC)", "v0.5.1.md"),
-        new (154, "v0.5.2, build 154 (2024-06-25 15:35 UTC)", "v0.5.2.md"),
        new (149, "v0.5.0, build 149 (2024-06-02 18:51 UTC)", "v0.5.0.md"),
        new (138, "v0.4.0, build 138 (2024-05-26 13:26 UTC)", "v0.4.0.md"),
        new (120, "v0.3.0, build 120 (2024-05-18 21:57 UTC)", "v0.3.0.md"),
@@ -1,3 +1,5 @@
+@inherits AIStudio.Tools.MSGComponentBase
+
 <div class="d-flex flex-column" style="@this.Height">
    <div class="flex-auto overflow-auto">
        @this.ChildContent
@@ -1,12 +1,15 @@
+using AIStudio.Components.Layout;
+using AIStudio.Tools;
+
 using Microsoft.AspNetCore.Components;

 namespace AIStudio.Components.Blocks;

-public partial class InnerScrolling : ComponentBase
+public partial class InnerScrolling : MSGComponentBase
 {
    /// <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
+    /// What we do is calc(100vh - HeaderHeight). Means, you can use multiple measures like
    /// 230px - 3em. Default is 3em.
    /// </summary>
    [Parameter]
@@ -21,5 +24,34 @@ public partial class InnerScrolling : ComponentBase
    [Parameter]
    public RenderFragment? FooterContent { get; set; }
    
-    private string Height => $"height: calc(100vh - {this.HeaderHeight});";
+    [CascadingParameter]
+    private MainLayout MainLayout { get; set; } = null!;
+
+    #region Overrides of ComponentBase
+
+    protected override async Task OnInitializedAsync()
+    {
+        this.ApplyFilters([], [ Event.STATE_HAS_CHANGED ]);
+        await base.OnInitializedAsync();
+    }
+
+    #endregion
+
+    #region Overrides of MSGComponentBase
+
+    public override Task ProcessMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data) where T : default
+    {
+        switch (triggeredEvent)
+        {
+            case Event.STATE_HAS_CHANGED:
+                this.StateHasChanged();
+                break;
+        }
+        
+        return Task.CompletedTask;
+    }
+
+    #endregion
+
+    private string Height => $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight});";
 }
@@ -0,0 +1,17 @@
+namespace AIStudio.Components.CommonDialogs;
+
+public static class DialogOptions
+{
+    public static readonly MudBlazor.DialogOptions FULLSCREEN = new()
+    {
+        CloseOnEscapeKey = true,
+        FullWidth = true, MaxWidth = MaxWidth.Medium,
+    };
+    
+    public static readonly MudBlazor.DialogOptions FULLSCREEN_NO_HEADER = new()
+    {
+        NoHeader = true,
+        CloseOnEscapeKey = true,
+        FullWidth = true, MaxWidth = MaxWidth.Medium,
+    };
+}
@@ -0,0 +1,14 @@
+@using AIStudio.Tools
+<MudDialog>
+    <DialogContent>
+        <MudText Typo="Typo.h4" Class="d-inline-flex align-center">
+            <MudIcon Icon="@Icons.Material.Filled.Update" Size="Size.Large" Class="mr-3"/>
+            Update from v@(META_DATA.Version) to v@(this.UpdateResponse.NewVersion)
+        </MudText>
+        <MudMarkdown Value="@this.UpdateResponse.Changelog" OverrideHeaderTypo="@Markdown.OverrideHeaderTypo"/>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="@this.Cancel" Variant="Variant.Filled">Install later</MudButton>
+        <MudButton OnClick="@this.Confirm" Variant="Variant.Filled" Color="Color.Info">Install now</MudButton>
+    </DialogActions>
+</MudDialog>
@@ -0,0 +1,26 @@
+using System.Reflection;
+
+using AIStudio.Tools;
+
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Components.CommonDialogs;
+
+/// <summary>
+/// The update dialog that is used to inform the user about an available update.
+/// </summary>
+public partial class UpdateDialog : ComponentBase
+{
+    private static readonly Assembly ASSEMBLY = Assembly.GetExecutingAssembly();
+    private static readonly MetaDataAttribute META_DATA = ASSEMBLY.GetCustomAttribute<MetaDataAttribute>()!;
+    
+    [CascadingParameter]
+    private MudDialogInstance MudDialog { get; set; } = null!;
+    
+    [Parameter]
+    public UpdateResponse UpdateResponse { get; set; }
+    
+    private void Cancel() => this.MudDialog.Cancel();
+    
+    private void Confirm() => this.MudDialog.Close(DialogResult.Ok(true));
+}
@@ -21,4 +21,13 @@ public static class ConfigurationSelectDataFactory
        yield return new("Modifier key + enter is sending the input", SendBehavior.MODIFER_ENTER_IS_SENDING);
        yield return new("Enter is sending the input", SendBehavior.ENTER_IS_SENDING);
    }
+    
+    public static IEnumerable<ConfigurationSelectData<UpdateBehavior>> GetUpdateBehaviorData()
+    {
+        yield return new("No automatic update checks", UpdateBehavior.NO_CHECK);
+        yield return new("Once at startup", UpdateBehavior.ONCE_STARTUP);
+        yield return new("Check every hour", UpdateBehavior.HOURLY);
+        yield return new("Check every day", UpdateBehavior.DAILY);
+        yield return new ("Check every week", UpdateBehavior.WEEKLY);
+    }
 }
@@ -2,31 +2,57 @@

 <MudPaper Height="calc(100vh);" Elevation="0">
    <MudLayout>
-        <MudDrawerContainer Class="mud-height-full absolute">
-            <MudDrawer Elevation="0" Variant="@DrawerVariant.Mini" OpenMiniOnHover="@true" Color="Color.Default">
-                <MudNavMenu>
-                    <MudTooltip Text="Home" Placement="Placement.Right">
-                        <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
-                    </MudTooltip>
-                    <MudTooltip Text="Chats" Placement="Placement.Right">
-                        <MudNavLink Href="/chat" Icon="@Icons.Material.Filled.Chat">Chats</MudNavLink>
-                    </MudTooltip>
-                    <MudTooltip Text="Supporters" Placement="Placement.Right">
-                        <MudNavLink Href="/supporters" Icon="@Icons.Material.Filled.Favorite" IconColor="Color.Error">Supporters</MudNavLink>
-                    </MudTooltip>
-                    <MudTooltip Text="About" Placement="Placement.Right">
-                        <MudNavLink Href="/about" Icon="@Icons.Material.Filled.Info">About</MudNavLink>
-                    </MudTooltip>
-                    <MudTooltip Text="Settings" Placement="Placement.Right">
-                        <MudNavLink Href="/settings" Icon="@Icons.Material.Filled.Settings">Settings</MudNavLink>
-                    </MudTooltip>
-                </MudNavMenu>
-            </MudDrawer>
-        </MudDrawerContainer>
+        @if (!this.performingUpdate)
+        {
+            <MudDrawerContainer Class="mud-height-full absolute">
+                <MudDrawer Elevation="0" Variant="@DrawerVariant.Mini" OpenMiniOnHover="@true" Color="Color.Default">
+                    <MudNavMenu>
+                        <MudTooltip Text="Home" Placement="Placement.Right">
+                            <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
+                        </MudTooltip>
+                        <MudTooltip Text="Chats" Placement="Placement.Right">
+                            <MudNavLink Href="/chat" Icon="@Icons.Material.Filled.Chat">Chats</MudNavLink>
+                        </MudTooltip>
+                        <MudTooltip Text="Supporters" Placement="Placement.Right">
+                            <MudNavLink Href="/supporters" Icon="@Icons.Material.Filled.Favorite" IconColor="Color.Error">Supporters</MudNavLink>
+                        </MudTooltip>
+                        <MudTooltip Text="About" Placement="Placement.Right">
+                            <MudNavLink Href="/about" Icon="@Icons.Material.Filled.Info">About</MudNavLink>
+                        </MudTooltip>
+                        <MudTooltip Text="Settings" Placement="Placement.Right">
+                            <MudNavLink Href="/settings" Icon="@Icons.Material.Filled.Settings">Settings</MudNavLink>
+                        </MudTooltip>
+                    </MudNavMenu>
+                </MudDrawer>
+            </MudDrawerContainer>
+        }

        <MudMainContent Class="mud-height-full pt-1">
            <MudContainer Fixed="@true" Class="mud-height-full" Style="margin-left: 5em; width: calc(100% - 5em);">
-                @this.Body
+                @if (!this.performingUpdate && this.IsUpdateAlertVisible)
+                {
+                    <MudAlert NoIcon="@true" Severity="Severity.Info" Variant="Variant.Filled" ShowCloseIcon="@true" Dense="@true" CloseIconClicked="() => this.DismissUpdate()" Class="mt-2 mb-2">
+                        <div class="d-inline-flex align-center">
+                            <MudIcon Icon="@Icons.Material.Filled.Update" Size="Size.Medium" Class="mr-3"/>
+                            An update to version @this.updateToVersion is available.
+                            <MudButton Variant="Variant.Filled" Color="Color.Dark" Size="Size.Small" Class="ml-3" OnClick="() => this.ShowUpdateDialog()">
+                                Show details
+                            </MudButton>
+                        </div>
+                    </MudAlert>
+                }
+
+                @if (!this.performingUpdate)
+                {
+                    <CascadingValue Value="@this" IsFixed="true">
+                        @this.Body
+                    </CascadingValue>
+                }
+
+                <MudOverlay Visible="@this.performingUpdate" DarkBackground="@true" LockScroll="@true">
+                    <MudText Typo="Typo.h3">Please wait for the update to complete...</MudText>
+                    <MudProgressLinear Color="Color.Primary" Indeterminate="@true" Size="Size.Large" Rounded="@true"/>
+                </MudOverlay>
            </MudContainer>
        </MudMainContent>
    </MudLayout>
@@ -1,12 +1,37 @@
+using AIStudio.Components.CommonDialogs;
 using AIStudio.Settings;
+using AIStudio.Tools;
+
 using Microsoft.AspNetCore.Components;

+using DialogOptions = AIStudio.Components.CommonDialogs.DialogOptions;
+
 namespace AIStudio.Components.Layout;

-public partial class MainLayout : LayoutComponentBase
+public partial class MainLayout : LayoutComponentBase, IMessageBusReceiver
 {
    [Inject]
-    private IJSRuntime JsRuntime { get; set; } = null!;
+    private IJSRuntime JsRuntime { get; init; } = null!;
+    
+    [Inject]
+    private SettingsManager SettingsManager { get; init; } = null!;
+    
+    [Inject]
+    private MessageBus MessageBus { get; init; } = null!;
+    
+    [Inject]
+    public IDialogService DialogService { get; init; } = null!;
+    
+    [Inject]
+    public Rust Rust { get; init; } = null!;
+
+    public string AdditionalHeight { get; private set; } = "0em";
+    
+    private bool isUpdateAvailable;
+    private bool performingUpdate;
+    private bool userDismissedUpdate;
+    private string updateToVersion = string.Empty;
+    private UpdateResponse? currentUpdateResponse;
    
    #region Overrides of ComponentBase

@@ -23,8 +48,98 @@ public partial class MainLayout : LayoutComponentBase
        SettingsManager.ConfigDirectory = configDir;
        SettingsManager.DataDirectory = dataDir;
        
+        // Ensure that all settings are loaded:
+        await this.SettingsManager.LoadSettings();
+        
+        // Register this component with the message bus:
+        this.MessageBus.RegisterComponent(this);
+        this.MessageBus.ApplyFilters(this, [], [ Event.UPDATE_AVAILABLE, Event.USER_SEARCH_FOR_UPDATE ]);
+        
+        // Set the js runtime for the update service:
+        UpdateService.SetJsRuntime(this.JsRuntime);
+        
        await base.OnInitializedAsync();
    }

    #endregion
+
+    #region Implementation of IMessageBusReceiver
+
+    public async Task ProcessMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data)
+    {
+        switch (triggeredEvent)
+        {
+            case Event.USER_SEARCH_FOR_UPDATE:
+                this.userDismissedUpdate = false;
+                break;
+            
+            case Event.UPDATE_AVAILABLE:
+                if (data is UpdateResponse updateResponse)
+                {
+                    this.currentUpdateResponse = updateResponse;
+                    this.isUpdateAvailable = updateResponse.UpdateIsAvailable;
+                    this.updateToVersion = updateResponse.NewVersion;
+                    
+                    await this.InvokeAsync(this.StateHasChanged);
+                    await this.SendMessage<bool>(Event.STATE_HAS_CHANGED);
+                }
+                
+                break;
+        }
+    }
+
+    #endregion
+
+    private async Task DismissUpdate()
+    {
+        this.userDismissedUpdate = true;
+        this.AdditionalHeight = "0em";
+        
+        await this.SendMessage<bool>(Event.STATE_HAS_CHANGED);
+    }
+    
+    private bool IsUpdateAlertVisible
+    {
+        get
+        {
+            var state = this.isUpdateAvailable && !this.userDismissedUpdate;
+            this.AdditionalHeight = state ? "3em" : "0em";
+            
+            return state;
+        }
+    }
+
+    private async Task ShowUpdateDialog()
+    {
+        if(this.currentUpdateResponse is null)
+            return;
+        
+        //
+        // Replace the fir line with `# Changelog`:
+        //
+        var changelog = this.currentUpdateResponse.Value.Changelog;
+        if (!string.IsNullOrWhiteSpace(changelog))
+        {
+            var lines = changelog.Split('\n');
+            if (lines.Length > 0)
+                lines[0] = "# Changelog";
+            
+            changelog = string.Join('\n', lines);
+        }
+        
+        var updatedResponse = this.currentUpdateResponse.Value with { Changelog = changelog };
+        var dialogParameters = new DialogParameters<UpdateDialog>
+        {
+            { x => x.UpdateResponse, updatedResponse }
+        };
+
+        var dialogReference = await this.DialogService.ShowAsync<UpdateDialog>("Update", dialogParameters, DialogOptions.FULLSCREEN_NO_HEADER);
+        var dialogResult = await dialogReference.Result;
+        if (dialogResult.Canceled)
+            return;
+        
+        this.performingUpdate = true;
+        this.StateHasChanged();
+        await this.Rust.InstallUpdate(this.JsRuntime);
+    }
 }
@@ -18,6 +18,9 @@
                <MudListItem Icon="@Icons.Material.Outlined.Widgets" Text="@MudBlazorVersion"/>
                <MudListItem Icon="@Icons.Material.Outlined.Memory" Text="@TauriVersion"/>
            </MudList>
+            <MudButton Variant="Variant.Filled" Color="Color.Info" StartIcon="@Icons.Material.Filled.Update" OnClick="() => this.CheckForUpdate()">
+                Check for updates
+            </MudButton>
        </ExpansionPanel>
        
        <ExpansionPanel HeaderIcon="@Icons.Material.Filled.EventNote" HeaderText="Changelog">
@@ -1,11 +1,16 @@
 using System.Reflection;

+using AIStudio.Tools;
+
 using Microsoft.AspNetCore.Components;

 namespace AIStudio.Components.Pages;

 public partial class About : ComponentBase
 {
+    [Inject]
+    private MessageBus MessageBus { get; init; } = null!;
+    
    private static readonly Assembly ASSEMBLY = Assembly.GetExecutingAssembly();
    private static readonly MetaDataAttribute META_DATA = ASSEMBLY.GetCustomAttribute<MetaDataAttribute>()!;

@@ -135,4 +140,9 @@ public partial class About : ComponentBase
        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
        SOFTWARE.
        """;
+    
+    private async Task CheckForUpdate()
+    {
+        await this.MessageBus.SendMessage<bool>(this, Event.USER_SEARCH_FOR_UPDATE);
+    }
 }
@@ -37,9 +37,6 @@ public partial class Chat : ComponentBase

    protected override async Task OnInitializedAsync()
    {
-        // Ensure that the settings are loaded:
-        await this.SettingsManager.LoadSettings();
-        
        // Configure the spellchecking for the user input:
        this.SettingsManager.InjectSpellchecking(USER_INPUT_ATTRIBUTES);
        
@@ -52,5 +52,6 @@
        <ConfigurationOption OptionDescription="Save energy?" LabelOn="Energy saving is enabled" LabelOff="Energy saving is disabled" State="@(() => this.SettingsManager.ConfigurationData.IsSavingEnergy)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.IsSavingEnergy = updatedState)" OptionHelp="When enabled, streamed content from the AI is updated once every third second. When disabled, streamed content will be updated as soon as it is available."/>
        <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?"/>
+        <ConfigurationSelect OptionDescription="Check for updates" SelectedValue="@(() => this.SettingsManager.ConfigurationData.UpdateBehavior)" Data="@ConfigurationSelectDataFactory.GetUpdateBehaviorData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.UpdateBehavior = selectedValue)" OptionHelp="How often should we check for app updates?"/>
    </MudPaper>
 </InnerScrolling>
@@ -3,6 +3,8 @@ using AIStudio.Provider;
 using AIStudio.Settings;
 using Microsoft.AspNetCore.Components;

+using DialogOptions = AIStudio.Components.CommonDialogs.DialogOptions;
+
 // ReSharper disable ClassNeverInstantiated.Global

 namespace AIStudio.Components.Pages;
@@ -18,22 +20,6 @@ public partial class Settings : ComponentBase
    [Inject]
    public IJSRuntime JsRuntime { get; init; } = null!;

-    private static readonly DialogOptions DIALOG_OPTIONS = new()
-    {
-        CloseOnEscapeKey = true,
-        FullWidth = true, MaxWidth = MaxWidth.Medium,
-    };
-
-    #region Overrides of ComponentBase
-
-    protected override async Task OnInitializedAsync()
-    {
-        await this.SettingsManager.LoadSettings();
-        await base.OnInitializedAsync();
-    }
-
-    #endregion
-
    #region Provider related

    private async Task AddProvider()
@@ -43,7 +29,7 @@ public partial class Settings : ComponentBase
            { x => x.IsEditing, false },
        };
        
-        var dialogReference = await this.DialogService.ShowAsync<ProviderDialog>("Add Provider", dialogParameters, DIALOG_OPTIONS);
+        var dialogReference = await this.DialogService.ShowAsync<ProviderDialog>("Add Provider", dialogParameters, DialogOptions.FULLSCREEN);
        var dialogResult = await dialogReference.Result;
        if (dialogResult.Canceled)
            return;
@@ -67,7 +53,7 @@ public partial class Settings : ComponentBase
            { x => x.IsEditing, true },
        };

-        var dialogReference = await this.DialogService.ShowAsync<ProviderDialog>("Edit Provider", dialogParameters, DIALOG_OPTIONS);
+        var dialogReference = await this.DialogService.ShowAsync<ProviderDialog>("Edit Provider", dialogParameters, DialogOptions.FULLSCREEN);
        var dialogResult = await dialogReference.Result;
        if (dialogResult.Canceled)
            return;
@@ -90,7 +76,7 @@ public partial class Settings : ComponentBase
            { "Message", $"Are you sure you want to delete the provider '{provider.InstanceName}'?" },
        };
        
-        var dialogReference = await this.DialogService.ShowAsync<ConfirmDialog>("Delete Provider", dialogParameters, DIALOG_OPTIONS);
+        var dialogReference = await this.DialogService.ShowAsync<ConfirmDialog>("Delete Provider", dialogParameters, DialogOptions.FULLSCREEN);
        var dialogResult = await dialogReference.Result;
        if (dialogResult.Canceled)
            return;