Improved chat page by scrolling to the bottom after loading (#87)

app/MindWork AI Studio/Pages/Chat.razor

@@ -16,7 +16,7 @@
 </MudText>
 
 <ProviderSelection @bind-ProviderSettings="@this.providerSettings"/>
-<InnerScrolling HeaderHeight="12.3em">
+<InnerScrolling @ref="@this.scrollingArea" HeaderHeight="12.3em">
     <ChildContent>
         @if (this.chatThread is not null)
         {

app/MindWork AI Studio/Pages/Chat.razor.cs

@@ -29,6 +29,8 @@ public partial class Chat : MSGComponentBase, IAsyncDisposable
     
     [Inject]
     public IDialogService DialogService { get; set; } = null!;
+    
+    private InnerScrolling scrollingArea = null!;
 
     private const Placement TOOLBAR_TOOLTIP_PLACEMENT = Placement.Bottom;
     private static readonly Dictionary<string, object?> USER_INPUT_ATTRIBUTES = new();
@@ -42,6 +44,7 @@ public partial class Chat : MSGComponentBase, IAsyncDisposable
     private Guid currentWorkspaceId = Guid.Empty;
     private bool workspacesVisible;
     private Workspaces? workspaces;
+    private bool mustScrollToBottomAfterRender;
     
     // Unfortunately, we need the input field reference to clear it after sending a message.
     // This is necessary because we have to handle the key events ourselves. Otherwise,
@@ -83,6 +86,17 @@ public partial class Chat : MSGComponentBase, IAsyncDisposable
         await base.OnInitializedAsync();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if(this.mustScrollToBottomAfterRender)
+        {
+            await this.scrollingArea.ScrollToBottom();
+            this.mustScrollToBottomAfterRender = false;
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     #endregion
 
     private bool IsProviderSelected => this.providerSettings.UsedProvider != Providers.NONE;
@@ -372,6 +386,11 @@ public partial class Chat : MSGComponentBase, IAsyncDisposable
         this.currentWorkspaceName = this.chatThread is null ? string.Empty : await this.workspaces.LoadWorkspaceName(this.chatThread.WorkspaceId);
         
         await this.inputField.Clear();
+        if (this.SettingsManager.ConfigurationData.Chat.ShowLatestMessageAfterLoading)
+        {
+            this.mustScrollToBottomAfterRender = true;
+            this.StateHasChanged();
+        }
     }
 
     private void ResetState()

app/MindWork AI Studio/Pages/Settings.razor

@@ -77,6 +77,7 @@
         
         <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Chat" HeaderText="Chat Options">
             <ConfigurationSelect OptionDescription="Shortcut to send input" SelectedValue="@(() => this.SettingsManager.ConfigurationData.Chat.ShortcutSendBehavior)" Data="@ConfigurationSelectDataFactory.GetSendBehaviorData()" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.Chat.ShortcutSendBehavior = selectedValue)" OptionHelp="Do you want to use any shortcut to send your input?"/>
+            <ConfigurationOption OptionDescription="Show the latest message after loading?" LabelOn="Latest message is shown, after loading a chat" LabelOff="First (oldest) message is shown, after loading a chat" State="@(() => this.SettingsManager.ConfigurationData.Chat.ShowLatestMessageAfterLoading)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.Chat.ShowLatestMessageAfterLoading = updatedState)" OptionHelp="When enabled, the latest message is shown after loading a chat. When disabled, the first (oldest) message is shown."/>
             <ConfigurationOption OptionDescription="Preselect chat options?" LabelOn="Chat options are preselected" LabelOff="No chat options are preselected" State="@(() => this.SettingsManager.ConfigurationData.Chat.PreselectOptions)" StateUpdate="@(updatedState => this.SettingsManager.ConfigurationData.Chat.PreselectOptions = updatedState)" OptionHelp="When enabled, you can preselect chat options. This is might be useful when you prefer a specific provider."/>
             <ConfigurationProviderSelection Data="@this.availableProviders" Disabled="@(() => !this.SettingsManager.ConfigurationData.Chat.PreselectOptions)" SelectedValue="@(() => this.SettingsManager.ConfigurationData.Chat.PreselectedProvider)" SelectionUpdate="@(selectedValue => this.SettingsManager.ConfigurationData.Chat.PreselectedProvider = selectedValue)"/>
         </ExpansionPanel>