github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-28 21:02:08 +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 */} {/* Wrap the Completion component in a container with a specific height */}
<div className={classNames('h-full', { <div
'overflow-hidden': scene !== 'chat_dashboard', className={classNames('h-full', {
'flex flex-col': scene === 'chat_dashboard' 'overflow-hidden': scene !== 'chat_dashboard',
})}> 'flex flex-col': scene === 'chat_dashboard',
})}
>
<Completion messages={history} onSubmit={handleChat} onFormatContent={formatToVisThinking} /> <Completion messages={history} onSubmit={handleChat} onFormatContent={formatToVisThinking} />
</div> </div>
</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))); setShowMessages(tempMessage.filter(item => ['view', 'human'].includes(item.role)));
}, [isChartChat, messages, onFormatContent]); }, [isChartChat, messages, onFormatContent, processMessageContent]);
useEffect(() => { useEffect(() => {
apiInterceptors(getChatFeedBackSelect()) apiInterceptors(getChatFeedBackSelect())
@ -185,7 +185,7 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
// Force scroll to bottom using multiple methods // Force scroll to bottom using multiple methods
element.scrollTop = element.scrollHeight; element.scrollTop = element.scrollHeight;
element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }); element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
// Additional force scroll for chat_dashboard // Additional force scroll for chat_dashboard
if (scene === 'chat_dashboard') { if (scene === 'chat_dashboard') {
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -194,17 +194,16 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
} }
} }
}; };
// Use multiple timeouts to ensure scrolling works even with dynamic content // Use multiple timeouts to ensure scrolling works even with dynamic content
setTimeout(scrollToBottom, 50); setTimeout(scrollToBottom, 50);
setTimeout(scrollToBottom, 200); setTimeout(scrollToBottom, 200);
setTimeout(scrollToBottom, 500); setTimeout(scrollToBottom, 500);
// Additional timeout for chat_dashboard // Additional timeout for chat_dashboard
if (scene === 'chat_dashboard') { if (scene === 'chat_dashboard') {
setTimeout(scrollToBottom, 1000); setTimeout(scrollToBottom, 1000);
} }
// Also try immediate scroll // Also try immediate scroll
scrollToBottom(); scrollToBottom();
}, [messages, showMessages, scene]); }, [messages, showMessages, scene]);
@ -212,10 +211,13 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
return ( return (
<> <>
{contextHolder} {contextHolder}
<div ref={scrollableRef} className={classNames('flex flex-1 overflow-y-auto w-full flex-col', { <div
'h-full': scene !== 'chat_dashboard', ref={scrollableRef}
'flex-1 min-h-0': scene === 'chat_dashboard' 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'> <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.length ? (
showMessages.map((content, index) => { showMessages.map((content, index) => {