chatbox 调整滚动到底部按钮

components/SmartChatBox/SmartChatBox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback, useState, useEffect } from "react";
 import { ArrowRightFromLine, ChevronDown } from 'lucide-react';
 import { Switch } from 'antd';
 import { MessageRenderer } from "./MessageRenderer";
@@ -35,13 +35,42 @@ function BackToLatestButton({ onClick }: { onClick: () => void }) {
 export default function SmartChatBox({ isSmartChatBoxOpen, setIsSmartChatBoxOpen, projectId, userId }: SmartChatBoxProps) {
   // 消息列表引用
   const listRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  // 检查是否滚动到底部
+  const checkIfAtBottom = useCallback(() => {
+    if (listRef.current) {
+      const { scrollHeight, scrollTop, clientHeight } = listRef.current;
+      // 考虑一个小的误差范围（10px）
+      const isBottom = scrollHeight - scrollTop - clientHeight <= 10;
+      setIsAtBottom(isBottom);
+    }
+  }, []);
+
+  // 处理滚动事件
+  const handleScroll = useCallback(() => {
+    checkIfAtBottom();
+  }, [checkIfAtBottom]);
+
+  // 监听滚动事件
+  useEffect(() => {
+    const listElement = listRef.current;
+    if (listElement) {
+      listElement.addEventListener('scroll', handleScroll);
+      return () => {
+        listElement.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [handleScroll]);
 
   // 处理消息更新时的滚动
   const handleMessagesUpdate = useCallback((shouldScroll: boolean) => {
     if (shouldScroll && listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
-  }, []);
+    // 更新底部状态
+    checkIfAtBottom();
+  }, [checkIfAtBottom]);
 
   // 使用消息管理 hook
   const [
@@ -135,7 +164,7 @@ export default function SmartChatBox({ isSmartChatBoxOpen, setIsSmartChatBoxOpen
         )}
 
         {/* Back to latest button */}
-        {isViewingHistory && (
+        {isViewingHistory && !isAtBottom && (
           <BackToLatestButton onClick={backToLatest} />
         )}
       </div>