NW
/
ChatGPT-Next-Web
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2556 from Yidadaa/bugfix-0804 

fixup: improve auto scroll algo
This commit is contained in:
Yifei Zhang 2023-08-04 02:40:34 +08:00 committed by GitHub
parent 44e43729bf bc5ddc4541
commit 811b92d24e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/chat.tsx
View File

@ -390,7 +390,6 @@ function useScrollToBottom() {
// auto scroll
useEffect(() => {
console.log("auto scroll", autoScroll);
if (autoScroll) {
scrollDomToBottom();
}
@ -919,9 +918,15 @@ function _Chat() {
userInput,
]);
const [msgRenderIndex, setMsgRenderIndex] = useState(
renderMessages.length - CHAT_PAGE_SIZE,
const [msgRenderIndex, _setMsgRenderIndex] = useState(
Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
);
function setMsgRenderIndex(newIndex: number) {
newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
newIndex = Math.max(0, newIndex);
_setMsgRenderIndex(newIndex);
}
const messages = useMemo(() => {
const endRenderIndex = Math.min(
msgRenderIndex + 3 * CHAT_PAGE_SIZE,
@ -931,21 +936,20 @@ function _Chat() {
}, [msgRenderIndex, renderMessages]);
const onChatBodyScroll = (e: HTMLElement) => {
const EDGE_THRESHOLD = 100;
const bottomHeight = e.scrollTop + e.clientHeight;
const isTouchTopEdge = e.scrollTop <= EDGE_THRESHOLD;
const isTouchBottomEdge = bottomHeight >= e.scrollHeight - EDGE_THRESHOLD;
const edgeThreshold = e.clientHeight;
const isTouchTopEdge = e.scrollTop <= edgeThreshold;
const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
const isHitBottom = bottomHeight >= e.scrollHeight - 10;
const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
if (isTouchTopEdge) {
setMsgRenderIndex(Math.max(0, msgRenderIndex - CHAT_PAGE_SIZE));
setMsgRenderIndex(prevPageMsgIndex);
} else if (isTouchBottomEdge) {
setMsgRenderIndex(
Math.min(
msgRenderIndex + CHAT_PAGE_SIZE,
renderMessages.length - CHAT_PAGE_SIZE,
),
);
setMsgRenderIndex(nextPageMsgIndex);
}
setHitBottom(isHitBottom);