github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-07-31 15:47:05 +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
className={classNames('flex flex-col overflow-hidden', {
'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':
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 overflow-hidden':
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 */}
<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} />
</div>
</div>

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

@ -178,15 +178,44 @@ const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
}, []);
useEffect(() => {
setTimeout(() => {
scrollableRef.current?.scrollTo(0, scrollableRef.current.scrollHeight);
}, 50);
}, [messages]);
// Scroll to bottom when messages change
const scrollToBottom = () => {
if (scrollableRef.current) {
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 (
<>
{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'>
{showMessages.length ? (
showMessages.map((content, index) => {