yt-chat-components 2.0.5 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

package/src/YtChatView/chatWidget/chatWindow/index.tsx

@@ -214,6 +214,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
   const messageContainerRef = useRef<HTMLDivElement>(null);
   const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
+  const isUserScrolledUpRef = useRef(false);
 
   useImperativeHandle(ref, () => ({
     handleCallButtonClick:handleCallButtonClick
@@ -234,6 +235,10 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
     }
   };
 
+  useEffect(() => {
+    isUserScrolledUpRef.current = isUserScrolledUp;
+  }, [isUserScrolledUp]);
+
   /**
    * 监听用户滚动标志，一旦出现滚动事件就会执行判断
    * 若处于底部且之前激活向上滚动，则使向上滚动标志失效
@@ -245,37 +250,43 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
 
     const handleScroll = () => {
       const { scrollTop, scrollHeight, clientHeight } = container;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight <= 10; // <= 更稳妥
-      console.log("与底部距离===", scrollHeight - scrollTop - clientHeight)
-      console.log("此前是否向上滚动", isUserScrolledUp)
-      if (!isAtBottom && !isUserScrolledUp) {
-        setIsUserScrolledUp(true);
-      } else if (isAtBottom && isUserScrolledUp) {
-        setIsUserScrolledUp(false);
+      const isAtBottom = scrollHeight - scrollTop - clientHeight <= 10;
+
+      if (!isAtBottom) {
+        // 用户向上滚动了，标记为“已干预”
+        if (!isUserScrolledUpRef.current) {
+          setIsUserScrolledUp(true);
+        }
+      } else {
+        // 只有在底部时才允许重置“已干预”状态
+        if (isUserScrolledUpRef.current) {
+          setIsUserScrolledUp(false);
+        }
       }
     };
 
     container.addEventListener('scroll', handleScroll);
     return () => container.removeEventListener('scroll', handleScroll);
-  }, [isUserScrolledUp]);
+    // ✅ 依赖为空，靠 useRef 获取最新状态
+  }, []);
 
 
   /**
    * 判断是否需要滚动到底部
    * */
-  const judgeToScrollEnd = (isForce) => {
+  const judgeToScrollEnd = (isForce = false) => {
     const container = messageContainerRef.current;
     if (!container) return;
 
-    const { scrollTop, scrollHeight, clientHeight } = container;
-      const isCurrentlyAtBottom = scrollHeight - scrollTop - clientHeight < 120; //
     if (isForce) {
-      container.scrollTop = scrollHeight;
-      // setIsUserScrolledUp(false); // 强制滚动后认为用户在底部
+      setIsUserScrolledUp(false);
+      container.scrollTop = container.scrollHeight;
       return;
     }
-    if (isCurrentlyAtBottom) {
-      container.scrollTop = scrollHeight;
+
+    // 👉 核心改进：只要用户没有主动向上滚动，就自动滚动到底
+    if (!isUserScrolledUpRef.current) {
+      container.scrollTop = container.scrollHeight;
     }
   };
 
@@ -366,7 +377,7 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
     // console.log(`--- event = ${event}, content_ns = ${content_ns}, content_id = ${content_id}, data = `, data)
-
+    setTimeout(() => judgeToScrollEnd(), 0)
     if (event == 'add_message' && data['sender'] == 'Machine') {
       getHistoryList();
     }
@@ -413,10 +424,6 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
           updateMessageItem({updateSrc: "3", chunk, loadingMessage: loading_message || ''})
         }
       }
-      
-      if (lastMessage.current) {
-        setTimeout(()=>judgeToScrollEnd(),100)
-      }
     }
     else if (event == 't_token') {
       let { chunk, id, r_id, ns, name, icon, loading_message } = data
@@ -430,10 +437,6 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({
       }else {
         updateMessageItem({updateSrc: "4", chunk, status:null, isThinkChunk:true, loadingMessage: loading_message || ''})
       }
-
-      if (lastMessage.current) {
-        setTimeout(()=>judgeToScrollEnd(),100)
-      }
     }
     else if (event == 'status') {
       // 更新状态