GithubProxy/ChatGPT-Next-Web
1
0
Fork 1
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-05-23 22:20:23 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat: auto scroll to bottom when MCP response

Browse Source
This commit is contained in:
Kadxy 2025-01-09 20:02:27 +08:00
parent 7d51bfd42e
commit b410ec399c
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/chat.tsx
View File

@ -421,12 +421,11 @@ export function ChatAction(props: {
function useScrollToBottom(
scrollRef: RefObject<HTMLDivElement>,
detach: boolean = false,
messages: ChatMessage[],
) {
// for auto-scroll
const [autoScroll, setAutoScroll] = useState(true);
function scrollDomToBottom() {
const scrollDomToBottom = useCallback(() => {
const dom = scrollRef.current;
if (dom) {
requestAnimationFrame(() => {
@ -434,7 +433,7 @@ function useScrollToBottom(
dom.scrollTo(0, dom.scrollHeight);
});
}
}
}, [scrollRef]);
// auto scroll
useEffect(() => {
@ -443,6 +442,15 @@ function useScrollToBottom(
}
});
// auto scroll when messages length changes
const lastMessagesLength = useRef(messages.length);
useEffect(() => {
if (messages.length > lastMessagesLength.current && !detach) {
scrollDomToBottom();
}
lastMessagesLength.current = messages.length;
}, [messages.length, detach, scrollDomToBottom]);
return {
scrollRef,
autoScroll,
@ -978,6 +986,7 @@ function _Chat() {
const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
scrollRef,
(isScrolledToBottom || isAttachWithTop) && !isTyping,
session.messages,
);
const [hitBottom, setHitBottom] = useState(true);
const isMobileScreen = useMobileScreen();