github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-07 19:34:04 +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 11:55:38 +08:00
parent e797808efd
commit af9d631076
No known key found for this signature in database
GPG Key ID: C237805F3F8E1CB6
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -219,14 +219,17 @@ const ChatContainer = () => {
)} )}
<div <div
className={classNames('flex flex-col overflow-hidden', { className={classNames('flex flex-col', {
'w-full h-1/2 md:h-full md:w-1/4 border-t md:border-t-0 md:border-l dark:border-gray-800': 'w-full h-1/2 md:h-full md:w-1/4 border-t md:border-t-0 md:border-l dark:border-gray-800 overflow-hidden':
scene === 'chat_dashboard', scene === 'chat_dashboard',
'w-full h-full px-4 lg:px-8': scene !== 'chat_dashboard', 'w-full h-full px-4 lg:px-8 overflow-hidden': scene !== 'chat_dashboard',
})} })}
> >
{/* Wrap the Completion component in a container with a specific height */} {/* Wrap the Completion component in a container with a specific height */}
<div className='h-full overflow-hidden'> <div className={classNames('h-full', {
'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>

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

@ -178,15 +178,44 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setTimeout(() => { // Scroll to bottom when messages change
scrollableRef.current?.scrollTo(0, scrollableRef.current.scrollHeight); const scrollToBottom = () => {
}, 50); if (scrollableRef.current) {
}, [messages]); const element = scrollableRef.current;
// 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(() => {
element.scrollTop = element.scrollHeight;
});
}
}
};
// 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]);
return ( return (
<> <>
{contextHolder} {contextHolder}
<div ref={scrollableRef} className='flex flex-1 overflow-y-auto h-full w-full flex-col'> <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'> <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) => {