feat: 优化一些滚动判断逻辑，更加平滑的滚动 (#171)

package.json

@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^17.8.1",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^13.0.0",
     "@types/chroma-js": "^2.4.4",
     "@types/glob": "^8.1.0",
     "@types/lodash-es": "^4.17.12",

src/ProChat/components/ScrollAnchor/index.tsx

@@ -4,8 +4,6 @@ import { useInView } from 'react-intersection-observer';
 import { useStore } from '@/ProChat/store';
 import { chatSelectors } from '../../store/selectors';
 
-import { useAtBottom } from './useAtBottom';
-
 const ChatScrollAnchor = memo(({ target }: { target: React.RefObject<HTMLDivElement> }) => {
   const trackVisibility = useStore((s) => !!s.chatLoadingId);
   const str = useStore(chatSelectors.currentChats);
@@ -21,18 +19,12 @@ const ChatScrollAnchor = memo(({ target }: { target: React.RefObject<HTMLDivElem
 
   // 获取上方列表的实例化 ref，会传入给 useAtBottom 用于判断当前是否在滚动
   const current = useMemo(() => {
-    if (target.current && target.current.scrollHeight > target.current.clientHeight) {
+    if (target.current) {
       return target.current;
     }
     return document.body;
   }, [isWindowAvailable]);
 
-  const { ref, entry, inView } = useInView({
-    delay: 100,
-    rootMargin: '0px 0px -150px 0px',
-    trackVisibility,
-  });
-
   const [scrollOffset, setScrollOffset] = useState(0);
 
   useEffect(() => {
@@ -42,15 +34,22 @@ const ChatScrollAnchor = memo(({ target }: { target: React.RefObject<HTMLDivElem
     }
   }, [isWindowAvailable]);
 
-  const isAtBottom = useAtBottom(scrollOffset, current);
+  const { ref, entry, inView } = useInView({
+    root: target.current,
+    delay: 100,
+    rootMargin: `0px 0px ${scrollOffset}px 0px`,
+    trackVisibility,
+  });
 
   useEffect(() => {
-    if (isAtBottom && trackVisibility && !inView) {
-      entry?.target.scrollIntoView({
-        block: 'start',
+    if (trackVisibility && inView) {
+      current?.scrollTo({
+        behavior: 'smooth',
+        left: 0,
+        top: current?.scrollHeight || 99999,
       });
     }
-  }, [inView, entry, isAtBottom, trackVisibility, str]);
+  }, [inView, entry, trackVisibility, str]);
 
   return <div ref={ref} style={{ height: 1, width: '100%' }} />;
 });

src/ProChat/container/App.tsx

@@ -142,7 +142,7 @@ const App = memo<ConversationProps>(
                 markdownProps={markdownProps}
                 renderErrorMessages={renderErrorMessages}
               />
-              <ChatScrollAnchor target={ref} />
+              {ref?.current && <ChatScrollAnchor target={ref} />}
             </div>
             {isRender ? (
               <BackBottom

src/ProChat/demos/error.tsx

@@ -15,10 +15,12 @@ export default () => {
   const chatRef2 = useRef<ProChatInstance>();
 
   useEffect(() => {
-    setTimeout(() => {
-      chatRef1.current.sendMessage('Hello!');
-      chatRef2.current.sendMessage('Hello!');
-    }, 500);
+    if (chatRef1?.current && chatRef2?.current) {
+      setTimeout(async () => {
+        await chatRef1.current?.sendMessage('Hello!');
+        await chatRef2.current?.sendMessage('Hello!');
+      }, 500);
+    }
   }, []);
 
   return (