@myun/gimi-chat 0.7.3 → 0.7.5

package/dist/hooks/useScroll.js

@@ -26,8 +26,23 @@ var useScroll = function useScroll(containerRef) {
     scrollTimeout: 0,
     interactionTimer: null,
     lastScrollTop: 0,
-    isUserInteracting: false
+    isUserInteracting: false,
+    wasAtBottom: true,
+    lastWheelAt: 0
   }).current;
+  var scrollBottomNow = React.useCallback(function () {
+    var tries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+    var count = 0;
+    var tick = function tick() {
+      var container = containerRef.current;
+      if (!container) return;
+      container.scrollTop = container.scrollHeight;
+      count += 1;
+      if (count < tries) requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+    setTimeout(tick, 0);
+  }, [containerRef]);
 
   // 标记用户交互状态
   var markUserInteraction = React.useCallback(function (isInteracting) {
@@ -50,18 +65,8 @@ var useScroll = function useScroll(containerRef) {
 
   // 基础滚动到底部
   var scrollBottom = React.useCallback(function () {
-    var container = containerRef.current;
-    if (container) {
-      // 使用 requestAnimationFrame 确保在浏览器渲染前执行，
-      // 并且如果一次不行，尝试在下一帧再做一次，以应对复杂的布局变化
-      var doScroll = function doScroll() {
-        container.scrollTop = container.scrollHeight;
-      };
-      requestAnimationFrame(doScroll);
-      // 双重保证
-      setTimeout(doScroll, 0);
-    }
-  }, [containerRef.current]);
+    scrollBottomNow(2);
+  }, [scrollBottomNow]);
 
   // 智能滚动到底部（只在非用户交互时执行）
   var throttledScrollToBottom = React.useCallback(throttle(function () {
@@ -78,15 +83,24 @@ var useScroll = function useScroll(containerRef) {
       markUserInteraction(false); // 重置为用户非交互状态
 
       if (animate) {
-        container.scrollTo({
-          top: container.scrollHeight,
-          behavior: 'smooth'
-        });
+        var smoothScroll = function smoothScroll() {
+          var current = containerRef.current;
+          if (!current) return;
+          current.scrollTo({
+            top: current.scrollHeight,
+            behavior: 'smooth'
+          });
+        };
+        smoothScroll();
+        setTimeout(smoothScroll, 120);
+        setTimeout(function () {
+          if (!refs.isUserInteracting) scrollBottomNow(3);
+        }, 420);
       } else {
         scrollBottom();
       }
     }
-  }, [containerRef.current, markUserInteraction, scrollBottom]);
+  }, [containerRef.current, markUserInteraction, refs, scrollBottom, scrollBottomNow]);
 
   // 更新滚动位置
   var updateScrollHeight = React.useCallback(function () {
@@ -99,16 +113,22 @@ var useScroll = function useScroll(containerRef) {
       setCurrentPosition(position);
     }
   }, [containerRef.current]);
-
-  // 滚轮事件处理 - 检测用户向上滚动意图
   var handleWheel = React.useCallback(throttle(function (e) {
-    // 向上滚动时立即停止自动滚动
-    if (e.deltaY < 0) {
+    var container = containerRef.current;
+    if (!container) return;
+    refs.lastWheelAt = Date.now();
+    var scrollTop = container.scrollTop,
+      scrollHeight = container.scrollHeight,
+      clientHeight = container.clientHeight;
+    var canScroll = scrollHeight - clientHeight > 1;
+    if (!canScroll) return;
+    var position = Math.max(0, scrollHeight - clientHeight - scrollTop);
+    if (e.deltaY < -2) {
       markUserInteraction(true);
+    } else if (e.deltaY > 2 && position <= bottomPosition) {
+      markUserInteraction(false);
     }
-  }, 100), [markUserInteraction]);
-
-  // 滚动事件处理
+  }, 100), [containerRef.current, bottomPosition, markUserInteraction, refs]);
   var handleScroll = React.useCallback(throttle(function () {
     if (!containerRef.current) return;
     var _containerRef$current2 = containerRef.current,
@@ -118,26 +138,24 @@ var useScroll = function useScroll(containerRef) {
     var position = Math.max(0, scrollHeight - clientHeight - scrollTop);
     setCurrentPosition(position);
     setIsScrolling(true);
-
-    // 检测滚动方向
+    refs.wasAtBottom = position <= bottomPosition * 2;
     var scrollDelta = scrollTop - refs.lastScrollTop;
     if (Math.abs(scrollDelta) > 2) {
       if (scrollDelta < 0) {
-        // 向上滚动：用户可能在看历史消息
-        markUserInteraction(true);
-      } else if (position <= 5) {
-        // 向下滚动到底部：恢复自动滚动
+        var now = Date.now();
+        if (refs.isUserInteracting || now - refs.lastWheelAt < 600) {
+          markUserInteraction(true);
+        }
+      } else if (scrollDelta > 0 && position <= bottomPosition) {
         markUserInteraction(false);
       }
       refs.lastScrollTop = scrollTop;
     }
-
-    // 设置滚动结束状态
     if (refs.scrollTimeout) clearTimeout(refs.scrollTimeout);
     refs.scrollTimeout = setTimeout(function () {
       setIsScrolling(false);
     }, 200);
-  }, 150), [containerRef.current, markUserInteraction]);
+  }, 150), [containerRef.current, bottomPosition, markUserInteraction]);
 
   // 事件监听器
   React.useEffect(function () {
@@ -169,15 +187,8 @@ var useScroll = function useScroll(containerRef) {
         scrollHeight = container.scrollHeight,
         clientHeight = container.clientHeight;
       var distanceToBottom = scrollHeight - clientHeight - scrollTop;
-
-      // 如果之前就在底部附近，则在新内容加入时保持在底部
-      // 注意：这里的判定逻辑需要考虑到新内容可能还没撑开高度
-      // 所以我们直接尝试在下一帧滚动
-      if (distanceToBottom <= bottomPosition * 5) {
-        // 稍微放宽判定范围，因为新内容可能已经改变了 scrollHeight
-        requestAnimationFrame(function () {
-          container.scrollTop = container.scrollHeight;
-        });
+      if (refs.wasAtBottom || distanceToBottom <= bottomPosition * 5) {
+        scrollBottomNow(4);
       }
     });
     observer.observe(container, {
@@ -188,7 +199,7 @@ var useScroll = function useScroll(containerRef) {
     return function () {
       return observer.disconnect();
     };
-  }, [containerRef.current, bottomPosition]);
+  }, [containerRef.current, bottomPosition, refs, scrollBottomNow]);
   return [throttledScrollToBottom, scrollBottomForce, currentPosition, scrollBottom, updateScrollHeight, isScrolling, isUserScroll];
 };
 export default useScroll;

package/dist/types/react-virtuoso.d.ts

@@ -0,0 +1,13 @@
+declare module 'react-virtuoso' {
+    import * as React from 'react';
+
+    export interface VirtuosoProps<TData = any> extends React.HTMLAttributes<HTMLDivElement> {
+        data?: TData[];
+        customScrollParent?: HTMLElement | null;
+        itemContent?: (index: number, data: TData) => React.ReactNode;
+        startReached?: () => void;
+        style?: React.CSSProperties;
+    }
+
+    export const Virtuoso: React.ComponentType<VirtuosoProps<any>>;
+}