github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-28 04:44:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): Fix auto-scroll issue in chat dashboard

Browse Source
This commit is contained in:
WangzJi 2025-06-26 13:46:53 +08:00
parent af9d631076
commit 8cb0e1ecf0
No known key found for this signature in database
GPG Key ID: C237805F3F8E1CB6
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/chat/chat-container.tsx
View File

@ -226,10 +226,12 @@ const ChatContainer = () => {
})}
>
{/* Wrap the Completion component in a container with a specific height */}
<div className={classNames('h-full', {
'overflow-hidden': scene !== 'chat_dashboard',
'flex flex-col': scene === 'chat_dashboard'
})}>
<div
className={classNames('h-full', {
'overflow-hidden': scene !== 'chat_dashboard',
'flex flex-col': scene === 'chat_dashboard',
})}
>
<Completion messages={history} onSubmit={handleChat} onFormatContent={formatToVisThinking} />
</div>
</div>

20
web/components/chat/completion.tsx
View File

@ -165,7 +165,7 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
});
}
setShowMessages(tempMessage.filter(item => ['view', 'human'].includes(item.role)));
}, [isChartChat, messages, onFormatContent]);
}, [isChartChat, messages, onFormatContent, processMessageContent]);
useEffect(() => {
apiInterceptors(getChatFeedBackSelect())
@ -185,7 +185,7 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
// Force scroll to bottom using multiple methods
element.scrollTop = element.scrollHeight;
element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
// Additional force scroll for chat_dashboard
if (scene === 'chat_dashboard') {
requestAnimationFrame(() => {
@ -194,17 +194,16 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
}
}
};
// Use multiple timeouts to ensure scrolling works even with dynamic content
setTimeout(scrollToBottom, 50);
setTimeout(scrollToBottom, 200);
setTimeout(scrollToBottom, 500);
// Additional timeout for chat_dashboard
if (scene === 'chat_dashboard') {
setTimeout(scrollToBottom, 1000);
}
// Also try immediate scroll
scrollToBottom();
}, [messages, showMessages, scene]);
@ -212,10 +211,13 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
return (
<>
{contextHolder}
<div ref={scrollableRef} className={classNames('flex flex-1 overflow-y-auto w-full flex-col', {
'h-full': scene !== 'chat_dashboard',
'flex-1 min-h-0': scene === 'chat_dashboard'
})}>
<div
ref={scrollableRef}
className={classNames('flex flex-1 overflow-y-auto w-full flex-col', {
'h-full': scene !== 'chat_dashboard',
'flex-1 min-h-0': scene === 'chat_dashboard',
})}
>
<div className='flex items-center flex-1 flex-col text-sm leading-6 text-slate-900 dark:text-slate-300 sm:text-base sm:leading-7'>
{showMessages.length ? (
showMessages.map((content, index) => {