Tweak pin to bottom behavior of chat panel

Author: intitni

Core/Sources/ChatGPTChatTab/ChatPanel.swift

@@ -40,12 +40,12 @@ private struct ListHeightPreferenceKey: PreferenceKey {
 
 struct ChatPanelMessages: View {
     let chat: StoreOf<Chat>
-    @State var pinnedToBottom = true
+    @State var isScrollToBottomButtonDisplayed = true
+    @State var isPinnedToBottom = true
     @Namespace var bottomID
     @Namespace var scrollSpace
     @State var scrollOffset: Double = 0
     @State var listHeight: Double = 0
-    @State var isInitialLoad = true
 
     var body: some View {
         ScrollViewReader { proxy in
@@ -67,6 +67,9 @@ struct ChatPanelMessages: View {
 
                         Spacer(minLength: 12)
                             .id(bottomID)
+                            .onAppear {
+                                proxy.scrollTo(bottomID, anchor: .bottom)
+                            }
                             .task {
                                 proxy.scrollTo(bottomID, anchor: .bottom)
                             }
@@ -93,16 +96,23 @@ struct ChatPanelMessages: View {
                 .listStyle(.plain)
                 .coordinateSpace(name: scrollSpace)
                 .onPreferenceChange(ListHeightPreferenceKey.self) { value in
-                    Task { @MainActor in
-                        listHeight = value
-                        updatePinningState()
-                    }
+                    listHeight = value
+                    updatePinningState()
                 }
                 .onPreferenceChange(ScrollViewOffsetPreferenceKey.self) { value in
-                    Task { @MainActor in
-                        scrollOffset = value
-                        updatePinningState()
+                    /// I don't know if there is a way to detect that a scroll is triggered by user
+                    let scrollUpToThreshold = listHeight > 0 // sometimes it can suddenly become 0
+                        && value > listHeight + 32 + 20 // scroll up to a threshold
+                        && value > scrollOffset // it's scroll up
+                        && value - scrollOffset < 100 // it's not some mystery jump
+                    /// Scroll up too much and the tracker is lost
+                    let checkerOutOfScope = value <= 0
+                    if checkerOutOfScope || scrollUpToThreshold {
+                        isPinnedToBottom = false
                     }
+
+                    scrollOffset = value
+                    updatePinningState()
                 }
                 .overlay(alignment: .bottom) {
                     WithViewStore(chat, observe: \.isReceivingMessage) { viewStore in
@@ -117,49 +127,82 @@ struct ChatPanelMessages: View {
                 .overlay(alignment: .bottomTrailing) {
                     scrollToBottomButton(proxy: proxy)
                 }
+                .background {
+                    PinToBottomHandler(chat: chat, pinnedToBottom: $isPinnedToBottom) {
+                        proxy.scrollTo(bottomID, anchor: .bottom)
+                    }
+                }
             }
         }
     }
 
+    @MainActor
     func updatePinningState() {
-        if scrollOffset > listHeight + 30 + 100 || scrollOffset <= 0 {
-            pinnedToBottom = false
-        } else {
-            pinnedToBottom = true
+        // where does the 32 come from?
+        withAnimation {
+            isScrollToBottomButtonDisplayed = scrollOffset > listHeight + 32 + 20
+                || scrollOffset <= 0
         }
     }
 
     @ViewBuilder
     func scrollToBottomButton(proxy: ScrollViewProxy) -> some View {
-        WithViewStore(chat, observe: \.history.last) { viewStore in
-            Button(action: {
-                withAnimation(.easeInOut(duration: 0.1)) {
-                    proxy.scrollTo(bottomID, anchor: .bottom)
+        Button(action: {
+            withAnimation(.easeInOut(duration: 0.1)) {
+                proxy.scrollTo(bottomID, anchor: .bottom)
+            }
+        }) {
+            Image(systemName: "arrow.down")
+                .padding(4)
+                .background {
+                    Circle()
+                        .fill(.thickMaterial)
+                        .shadow(color: .black.opacity(0.2), radius: 2)
                 }
-            }) {
-                Image(systemName: "arrow.down")
-                    .padding(4)
-                    .background {
-                        Circle()
-                            .fill(.thickMaterial)
-                            .shadow(color: .black.opacity(0.2), radius: 2)
-                    }
-                    .overlay {
-                        Circle().stroke(Color(nsColor: .separatorColor), lineWidth: 1)
+                .overlay {
+                    Circle().stroke(Color(nsColor: .separatorColor), lineWidth: 1)
+                }
+                .foregroundStyle(.secondary)
+                .padding(4)
+        }
+        .keyboardShortcut(.downArrow, modifiers: [.command])
+        .opacity(isScrollToBottomButtonDisplayed ? 1 : 0)
+        .buttonStyle(.plain)
+    }
+
+    struct PinToBottomHandler: View {
+        let chat: StoreOf<Chat>
+        @Binding var pinnedToBottom: Bool
+        let scrollToBottom: () -> Void
+
+        @State var isInitialLoad = true
+
+        struct PinToBottomRelatedState: Equatable {
+            var isReceivingMessage: Bool
+            var lastMessage: ChatMessage?
+        }
+
+        var body: some View {
+            WithViewStore(chat, observe: {
+                PinToBottomRelatedState(
+                    isReceivingMessage: $0.isReceivingMessage,
+                    lastMessage: $0.history.last
+                )
+            }) { viewStore in
+                EmptyView()
+                    .onChange(of: viewStore.state.isReceivingMessage) { isReceiving in
+                        if isReceiving {
+                            pinnedToBottom = true
+                        }
                     }
-                    .foregroundStyle(.secondary)
-                    .padding(4)
-            }
-            .keyboardShortcut(.downArrow, modifiers: [.command])
-            .opacity(pinnedToBottom ? 0 : 1)
-            .buttonStyle(.plain)
-            .onChange(of: viewStore.state) { _ in
-                if pinnedToBottom || isInitialLoad {
-                    if isInitialLoad {
-                        isInitialLoad = false
+                    .onChange(of: viewStore.state.lastMessage) { _ in
+                        if pinnedToBottom || isInitialLoad {
+                            if isInitialLoad {
+                                isInitialLoad = false
+                            }
+                            scrollToBottom()
+                        }
                     }
-                    proxy.scrollTo(bottomID, anchor: .bottom)
-                }
             }
         }
     }