From 2ed145c3aa7630eb75a93b832caebf1ce38bd34f Mon Sep 17 00:00:00 2001
From: alanchen <40684202+chenliang15405@users.noreply.github.com>
Date: Wed, 25 Jun 2025 01:22:10 +0800
Subject: [PATCH] fix(web): optimize chat message auto scroll (#2792)
---
.../src/dbgpt_app/static/web/404.html | 2 +-
.../src/dbgpt_app/static/web/404/index.html | 2 +-
.../construct/prompt/add.json | 0
.../construct/prompt/edit.json | 0
.../_buildManifest.js | 2 +-
.../_ssgManifest.js | 0
.../static/chunks/7249-32200b049f303da1.js | 1 -
.../static/chunks/7249-616a2b6aaccef449.js | 1 +
...3f82def.js => webpack-3b739a8c1c211d06.js} | 2 +-
.../src/dbgpt_app/static/web/chat/index.html | 2 +-
.../static/web/construct/agent/index.html | 2 +-
.../components/create-app-modal/index.html | 2 +-
.../extra/components/AwelLayout/index.html | 2 +-
.../app/extra/components/NativeApp/index.html | 2 +-
.../components/RecommendQuestions/index.html | 2 +-
.../auto-plan/DetailsCard/index.html | 2 +-
.../auto-plan/PromptSelect/index.html | 2 +-
.../auto-plan/ResourceContent/index.html | 2 +-
.../auto-plan/ResourceContentV2/index.html | 2 +-
.../auto-plan/ResourcesCard/index.html | 2 +-
.../auto-plan/ResourcesCardV2/index.html | 2 +-
.../app/extra/components/auto-plan/index.html | 2 +-
.../web/construct/app/extra/config/index.html | 2 +-
.../static/web/construct/app/extra/index.html | 2 +-
.../static/web/construct/app/index.html | 2 +-
.../static/web/construct/database/index.html | 2 +-
.../static/web/construct/dbgpts/index.html | 2 +-
.../web/construct/flow/canvas/index.html | 2 +-
.../static/web/construct/flow/index.html | 2 +-
.../web/construct/flow/libro/index.html | 2 +-
.../dbgpt_app/static/web/construct/index.html | 2 +-
.../web/construct/knowledge/chunk/index.html | 2 +-
.../static/web/construct/knowledge/index.html | 2 +-
.../static/web/construct/models/index.html | 2 +-
.../web/construct/prompt/add/index.html | 2 +-
.../web/construct/prompt/edit/index.html | 2 +-
.../static/web/construct/prompt/index.html | 2 +-
.../static/web/evaluation/index.html | 2 +-
.../src/dbgpt_app/static/web/index.html | 2 +-
.../static/web/knowledge/graph/index.html | 2 +-
.../chat/components/ChatDialog/index.html | 2 +-
.../mobile/chat/components/Content/index.html | 2 +-
.../chat/components/DislikeDrawer/index.html | 2 +-
.../chat/components/Feedback/index.html | 2 +-
.../mobile/chat/components/Header/index.html | 2 +-
.../chat/components/InputContainer/index.html | 2 +-
.../chat/components/ModelSelector/index.html | 2 +-
.../chat/components/OptionIcon/index.html | 2 +-
.../chat/components/Resource/index.html | 2 +-
.../chat/components/Thermometer/index.html | 2 +-
.../static/web/mobile/chat/index.html | 2 +-
.../chat/ChatContentContainer.tsx | 46 +++++++++++++------
52 files changed, 80 insertions(+), 60 deletions(-)
rename packages/dbgpt-app/src/dbgpt_app/static/web/_next/data/{qNx0Z132fDk03kQmLel82 => N4ngWEEZkBTQTiMOWB1Gg}/construct/prompt/add.json (100%)
rename packages/dbgpt-app/src/dbgpt_app/static/web/_next/data/{qNx0Z132fDk03kQmLel82 => N4ngWEEZkBTQTiMOWB1Gg}/construct/prompt/edit.json (100%)
rename packages/dbgpt-app/src/dbgpt_app/static/web/_next/static/{qNx0Z132fDk03kQmLel82 => N4ngWEEZkBTQTiMOWB1Gg}/_buildManifest.js (99%)
rename packages/dbgpt-app/src/dbgpt_app/static/web/_next/static/{qNx0Z132fDk03kQmLel82 => N4ngWEEZkBTQTiMOWB1Gg}/_ssgManifest.js (100%)
delete mode 100644 packages/dbgpt-app/src/dbgpt_app/static/web/_next/static/chunks/7249-32200b049f303da1.js
create mode 100644 packages/dbgpt-app/src/dbgpt_app/static/web/_next/static/chunks/7249-616a2b6aaccef449.js
rename packages/dbgpt-app/src/dbgpt_app/static/web/_next/static/chunks/{webpack-ce9c0b6903f82def.js => webpack-3b739a8c1c211d06.js} (98%)
diff --git a/packages/dbgpt-app/src/dbgpt_app/static/web/404.html b/packages/dbgpt-app/src/dbgpt_app/static/web/404.html
index 9805d2c76..4a20b4680 100644
--- a/packages/dbgpt-app/src/dbgpt_app/static/web/404.html
+++ b/packages/dbgpt-app/src/dbgpt_app/static/web/404.html
@@ -1 +1 @@
-=f&&Object.keys(h.O).every(function(e){return h.O[e](t[r])})?t.splice(r--,1):(b=!1,f0&&e[d-1][2]>f;d--)e[d]=e[d-1];e[d]=[t,a,f];return}for(var n=1/0,d=0;d=f&&Object.keys(h.O).every(function(e){return h.O[e](t[r])})?t.splice(r--,1):(b=!1,f) => {
const [isAtTop, setIsAtTop] = useState(true);
const [isAtBottom, setIsAtBottom] = useState(false);
const { history } = useContext(ChatContentContext);
+ const allowAutoScroll = useRef(true);
useImperativeHandle(ref, () => {
return scrollRef.current;
@@ -26,7 +27,14 @@ const ChatContentContainer = ({}, ref: React.ForwardedRef) => {
const scrollTop = container.scrollTop;
const scrollHeight = container.scrollHeight;
const clientHeight = container.clientHeight;
- const buffer = 20; // Small buffer for better UX
+ const buffer = 20;
+
+ // Check Scroll direction
+ const lastScrollTop = Number(container?.dataset?.lastScrollTop) || 0;
+ const direction = scrollTop > lastScrollTop ? 'down' : 'up';
+ container.dataset.lastScrollTop = String(scrollTop);
+ // only allow auto scroll when user is near bottom
+ allowAutoScroll.current = direction === 'down';
// Check if we're at the top
setIsAtTop(scrollTop <= buffer);
@@ -61,22 +69,34 @@ const ChatContentContainer = ({}, ref: React.ForwardedRef) => {
};
}, []);
- useEffect(() => {
- if (!scrollRef.current) return;
+ const scrollToBottomSmooth = useCallback(() => {
+ if (!scrollRef.current || !allowAutoScroll.current) return;
const container = scrollRef.current;
const { scrollTop, scrollHeight, clientHeight } = container;
- // dynamic calculate need scroll buffer
- const buffer = Math.max(50, container.clientHeight * 0.2);
- // auto scroll to bottom when new message is added
- const isBottomPos = scrollTop + clientHeight >= scrollHeight - buffer;
- if (isBottomPos) {
- container.scrollTo({
- top: scrollHeight - clientHeight,
- behavior: 'smooth',
- });
+ // 只有当用户接近底部时才自动滚动
+ const buffer = Math.max(50, clientHeight * 0.1);
+ const isNearBottom = scrollTop + clientHeight >= scrollHeight - buffer;
+
+ if (!isNearBottom) {
+ return;
}
+ // use requestAnimationFrame to smooth scroll
+ const frameId = requestAnimationFrame(() => {
+ // 直接设置scrollTop来实现快速滚动，不使用平滑滚动以避免卡顿
+ // container.scrollTop = container.scrollHeight;
+ container.scrollTo({
+ top: container.scrollHeight,
+ behavior: 'auto',
+ });
+ });
+ return () => cancelAnimationFrame(frameId);
+ }, []);
+
+ useEffect(() => {
+ // 监听 history 变化和最后一条消息的 context 变化
+ scrollToBottomSmooth();
}, [history, history[history.length - 1]?.context]);
const scrollToTop = () => {