smarter scroll

Author: Madzionator

src/MaIN.InferPage/Components/Pages/Home.razor

@@ -82,7 +82,7 @@
                                 {
                                     <div class="reasoning-row">
                                         <span class="brain-toggle" title="@(conversation.ShowReason ? "Hide reasoning" : "Show reasoning")"
-                                              @onclick="@(() => { _preserveScroll = true; conversation.ShowReason = !conversation.ShowReason; })">
+                                              @onclick="@(() => ToggleReasoning(conversation))">
                                             <FluentIcon Value="@(new Icons.Regular.Size24.Brain())"
                                                         Style="@($"fill: {(conversation.ShowReason ? "var(--accent-base-color)" : "var(--neutral-foreground-hint)")};")"/>
                                         </span>
@@ -213,15 +213,14 @@
         {
             var theme = await JS.InvokeAsync<string>("themeManager.load");
             _accentColor = (theme == "dark" || theme == "system-dark") ? "#00ffcc" : "#00cca3";
-            StateHasChanged();
-        }
-        else if (!_preserveScroll)
-        {
+            await JS.InvokeVoidAsync("scrollManager.attachScrollListener", "messages-container");
             await JS.InvokeVoidAsync("scrollManager.restoreScrollPosition", "messages-container");
+            StateHasChanged();
         }
-        else
+        else if (_preserveScroll)
         {
             _preserveScroll = false;
+            await JS.InvokeVoidAsync("scrollManager.restoreScrollPosition", "messages-container");
         }
     }
 
@@ -346,9 +345,12 @@
             Chat.ModelId = Utils.Model!;
             Chat.Visual = Utils.Visual;
 
+            bool wasAtBottom = await JS.InvokeAsync<bool>("scrollManager.isAtBottom", "messages-container");
+
             StateHasChanged();
 
-            bool wasAtBottom = await JS.InvokeAsync<bool>("scrollManager.isAtBottom", "messages-container");
+            if (wasAtBottom)
+                await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", "messages-container");
 
             var request = ctx!.WithMessage(msg);
             if (attachments.Count != 0)
@@ -379,7 +381,7 @@
                 await InvokeAsync(StateHasChanged);
                 if (wasAtBottom)
                 {
-                    await InvokeAsync(async () => await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", cancellationToken, _bottomElement));
+                    await InvokeAsync(async () => await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", "messages-container"));
                 }
             }, cancellationToken: cancellationToken);
 
@@ -388,10 +390,11 @@
             var currentChat = await ctx.GetCurrentChat();
             Chat.Messages.Add(currentChat.Messages.Last());
 
+            await JS.InvokeVoidAsync("scrollManager.saveScrollPosition", "messages-container");
+            _preserveScroll = true;
             RebuildMessagesWithFiles();
             _incomingReasoning = null;
             _incomingMessage = null;
-            await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", _bottomElement);
         }
         catch (OperationCanceledException)
         {
@@ -475,6 +478,13 @@
             : MessageType.CloudLLM;
     }
 
+    private async Task ToggleReasoning(MessageExt conversation)
+    {
+        await JS.InvokeVoidAsync("scrollManager.saveScrollPosition", "messages-container");
+        _preserveScroll = true;
+        conversation.ShowReason = !conversation.ShowReason;
+    }
+
     private void RebuildMessagesWithFiles()
     {
         var existingFilesMap = Messages
@@ -485,7 +495,7 @@
         {
             Message = x,
             AttachedFiles = existingFilesMap.TryGetValue(x, out var files) ? files : new List<string>(),
-            ShowReason = x.Tokens.Any(t => t.Type == TokenType.Reason)
+            ShowReason = false
         }).ToList();
     }
 

src/MaIN.InferPage/wwwroot/scroll.js

@@ -1,16 +1,25 @@
 window.scrollManager = {
-    isUserScrolling: false,
+    userScrolledUp: false,
+    isProgrammaticScroll: false,
+    _savedScrollTop: null,
 
     saveScrollPosition: (containerId) => {
         const container = document.getElementById(containerId);
         if (!container) return;
-        sessionStorage.setItem("scrollTop", container.scrollTop);
+        window.scrollManager._savedScrollTop = container.scrollTop;
+        container.style.overflowY = 'hidden';
     },
 
     restoreScrollPosition: (containerId) => {
         const container = document.getElementById(containerId);
         if (!container) return;
-        container.scrollTop = 9999;
+        if (window.scrollManager._savedScrollTop !== null) {
+            container.scrollTop = window.scrollManager._savedScrollTop;
+            window.scrollManager._savedScrollTop = null;
+        } else {
+            container.scrollTop = container.scrollHeight;
+        }
+        container.style.overflowY = '';
     },
 
     isAtBottom: (containerId) => {
@@ -19,24 +28,35 @@ window.scrollManager = {
         return container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
     },
 
-    scrollToBottomSmooth: (bottomElement) => {
-        if (!bottomElement) return;
-        if (!window.scrollManager.isUserScrolling) {
-            bottomElement.scrollIntoView({ behavior: 'smooth' });
-        }
+    scrollToBottomSmooth: (containerId) => {
+        if (window.scrollManager.userScrolledUp) return;
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        window.scrollManager.isProgrammaticScroll = true;
+        container.scrollTop = container.scrollHeight;
+        window.scrollManager.isProgrammaticScroll = false;
     },
 
     attachScrollListener: (containerId) => {
         const container = document.getElementById(containerId);
         if (!container) return;
 
+        container.addEventListener("wheel", (e) => {
+            if (e.deltaY < 0) {
+                window.scrollManager.userScrolledUp = true;
+            }
+        });
+
+        container.addEventListener("touchmove", () => {
+            window.scrollManager.userScrolledUp = true;
+        });
+
         container.addEventListener("scroll", () => {
-            window.scrollManager.isUserScrolling =
-                container.scrollHeight - container.scrollTop > container.clientHeight + 50;
+            if (window.scrollManager.isProgrammaticScroll) return;
+            const atBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
+            if (atBottom) {
+                window.scrollManager.userScrolledUp = false;
+            }
         });
     }
 };
-
-document.addEventListener("DOMContentLoaded", () => {
-    window.scrollManager.attachScrollListener("bottom");
-});