diff --git a/components/SmartChatBox/SmartChatBox.tsx b/components/SmartChatBox/SmartChatBox.tsx index cb0cfd4..e486930 100644 --- a/components/SmartChatBox/SmartChatBox.tsx +++ b/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(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 && ( )}