From aacd26c7db7d87953d14f3c0cf841cf422a2e027 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Mon, 26 Feb 2024 18:14:10 +0800
Subject: [PATCH 1/3] feat: bump version

---
 src-tauri/tauri.conf.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index d88194020b3..405d267ff65 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -9,7 +9,7 @@
   },
   "package": {
     "productName": "NextChat",
-    "version": "2.10.3"
+    "version": "2.11.2"
   },
   "tauri": {
     "allowlist": {

From 410a22dc634816b13848977d037506fbe2ad4957 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Tue, 27 Feb 2024 11:43:40 +0800
Subject: [PATCH 2/3] feat: auto detach scrolling

---
 app/components/chat.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 369d84c3326..ba1e94b9c68 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useCallback,
   Fragment,
+  RefObject,
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
@@ -382,11 +383,13 @@ function ChatAction(props: {
   );
 }
 
-function useScrollToBottom() {
+function useScrollToBottom(
+  scrollRef: RefObject<HTMLDivElement>,
+  detach: boolean = false,
+) {
   // for auto-scroll
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [autoScroll, setAutoScroll] = useState(true);
 
+  const [autoScroll, setAutoScroll] = useState(true);
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
@@ -399,7 +402,7 @@ function useScrollToBottom() {
 
   // auto scroll
   useEffect(() => {
-    if (autoScroll) {
+    if (autoScroll && !detach) {
       scrollDomToBottom();
     }
   });
@@ -658,7 +661,17 @@ function _Chat() {
   const [userInput, setUserInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { submitKey, shouldSubmit } = useSubmitHandler();
-  const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isScrolledToBottom = scrollRef?.current
+    ? Math.abs(
+        scrollRef.current.scrollHeight -
+          (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
+      ) <= 1
+    : false;
+  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
+    scrollRef,
+    isScrolledToBottom,
+  );
   const [hitBottom, setHitBottom] = useState(true);
   const isMobileScreen = useMobileScreen();
   const navigate = useNavigate();
@@ -1003,7 +1016,6 @@ function _Chat() {
     setHitBottom(isHitBottom);
     setAutoScroll(isHitBottom);
   };
-
   function scrollToBottom() {
     setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
     scrollDomToBottom();
@@ -1151,6 +1163,13 @@ function _Chat() {
         )}
 
         <div className={`window-header-title ${styles["chat-body-title"]}`}>
+          <p>
+            {JSON.stringify({
+              scrollHeight: scrollRef?.current?.scrollHeight,
+              scrollTop: scrollRef?.current?.scrollTop,
+              clientHeight: scrollRef?.current?.clientHeight,
+            })}
+          </p>
           <div
             className={`window-header-main-title ${styles["chat-body-main-title"]}`}
             onClickCapture={() => setIsEditingMessage(true)}

From e3b3ae97bc3edb660104ca8f414ecf021837e3a5 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Tue, 27 Feb 2024 11:49:44 +0800
Subject: [PATCH 3/3] chore: clear scroll info

---
 app/components/chat.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index ba1e94b9c68..9144f9a5f45 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -1163,13 +1163,6 @@ function _Chat() {
         )}
 
         <div className={`window-header-title ${styles["chat-body-title"]}`}>
-          <p>
-            {JSON.stringify({
-              scrollHeight: scrollRef?.current?.scrollHeight,
-              scrollTop: scrollRef?.current?.scrollTop,
-              clientHeight: scrollRef?.current?.clientHeight,
-            })}
-          </p>
           <div
             className={`window-header-main-title ${styles["chat-body-main-title"]}`}
             onClickCapture={() => setIsEditingMessage(true)}