From dc268da596ecf2771353bf56fdac8c48365c73ba Mon Sep 17 00:00:00 2001
From: Shinji-Li <1349021570@qq.com>
Date: Mon, 15 Jan 2024 18:06:22 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=9E?=
 =?UTF-8?q?=E5=88=B0=E6=9C=80=E4=B8=8B=E6=96=B9=E6=8C=89=E9=92=AE=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98=20(#36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :bug: fix: slove backtoBottom not work

* :lipstick: fix: change padding styles
---
 src/BackBottom/index.tsx | 23 +++++++++++++++++------
 src/ChatItem/style.ts    |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/BackBottom/index.tsx b/src/BackBottom/index.tsx
index 18d549a7..5ac9fd16 100644
--- a/src/BackBottom/index.tsx
+++ b/src/BackBottom/index.tsx
@@ -27,12 +27,22 @@ const BackBottom = memo<BackBottomProps>(
     const [visible, setVisible] = useState<boolean>(false);
     const { styles, cx } = useStyles(visible);
     const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
+
+    const [isWindowAvailable, setIsWindowAvailable] = useState(false);
+
+    useEffect(() => {
+      // 检查window对象是否已经可用
+      if (typeof window !== 'undefined') {
+        setIsWindowAvailable(true);
+      }
+    }, []);
+
     const current = useMemo(() => {
       if (target.current && target.current.scrollHeight > target.current.clientHeight) {
         return target.current;
       }
       return document.body;
-    }, []);
+    }, [isWindowAvailable]);
 
     const scrollHeight = current?.scrollHeight || 0;
     const clientHeight = current?.clientHeight || 0;
@@ -42,12 +52,13 @@ const BackBottom = memo<BackBottomProps>(
 
     useEffect(() => {
       if (typeof window === 'undefined') return;
-      const scroll = (e: any) => {
+      if (typeof current === 'undefined') return;
+      const scroll = () => {
         timeRef.current = window.setTimeout(() => {
           setVisible(current?.scrollTop + clientHeight + visibilityHeight < scrollHeight);
           setScroll({
-            top: e?.scrollTop,
-            left: e?.scrollLeft,
+            top: current?.scrollTop,
+            left: current?.scrollLeft,
           });
         }, 60);
       };
@@ -60,13 +71,13 @@ const BackBottom = memo<BackBottomProps>(
         }
         current?.removeEventListener?.('scroll', scroll);
       };
-    }, []);
+    }, [current]);
 
     useEffect(() => {
       if (scroll?.top) {
         setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);
       }
-    }, [scrollHeight, scroll, visibilityHeight]);
+    }, [scrollHeight, scroll, visibilityHeight, current]);
 
     const scrollToBottom: MouseEventHandler<HTMLDivElement> = (e) => {
       (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });
diff --git a/src/ChatItem/style.ts b/src/ChatItem/style.ts
index 1f2f414f..333810f7 100644
--- a/src/ChatItem/style.ts
+++ b/src/ChatItem/style.ts
@@ -83,7 +83,7 @@ export const useStyles = createStyles(
           position: relative;
           width: 100%;
           max-width: 100vw;
-          padding: 12px 16px;
+          padding: 16px;
           content-visibility: auto;
           contain-intrinsic-size: 100px;
           time {