mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-08-02 16:50:24 +00:00
426 lines
15 KiB
TypeScript
426 lines
15 KiB
TypeScript
import { ChatContext } from '@/app/chat-context';
|
|
import { apiInterceptors, getChatFeedBackSelect } from '@/client/api';
|
|
import useSummary from '@/hooks/use-summary';
|
|
import { FeedBack, IChatDialogueMessageSchema } from '@/types/chat';
|
|
import { STORAGE_INIT_MESSAGE_KET, getInitMessage } from '@/utils';
|
|
import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
|
|
import { Button, IconButton } from '@mui/joy';
|
|
import { useAsyncEffect } from 'ahooks';
|
|
import { Modal, Tooltip, message } from 'antd';
|
|
import classNames from 'classnames';
|
|
import copy from 'copy-to-clipboard';
|
|
import { cloneDeep } from 'lodash';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import MyEmpty from '../common/MyEmpty';
|
|
import CompletionInput from '../common/completion-input';
|
|
import AgentContent from './agent-content';
|
|
import ChatContent from './chat-content';
|
|
import ChatFeedback from './chat-feedback';
|
|
import { renderModelIcon } from './header/model-selector';
|
|
import MonacoEditor from './monaco-editor';
|
|
|
|
type Props = {
|
|
messages: IChatDialogueMessageSchema[];
|
|
onSubmit: (message: string, otherQueryBody?: Record<string, any>) => Promise<void>;
|
|
onFormatContent?: (content: any) => any; // Callback for extracting thinking part
|
|
};
|
|
|
|
const Completion = ({ messages, onSubmit, onFormatContent }: Props) => {
|
|
const { dbParam, currentDialogue, scene, model, refreshDialogList, chatId, agent, docId } = useContext(ChatContext);
|
|
const { t } = useTranslation();
|
|
const searchParams = useSearchParams();
|
|
|
|
const flowSelectParam = (searchParams && searchParams.get('select_param')) ?? '';
|
|
const spaceNameOriginal = (searchParams && searchParams.get('spaceNameOriginal')) ?? '';
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [jsonModalOpen, setJsonModalOpen] = useState(false);
|
|
const [showMessages, setShowMessages] = useState(messages);
|
|
const [jsonValue, setJsonValue] = useState<string>('');
|
|
const [select_param, setSelectParam] = useState<FeedBack>();
|
|
|
|
const scrollableRef = useRef<HTMLDivElement>(null);
|
|
|
|
// const incremental = useMemo(() => scene === 'chat_flow', [scene]);
|
|
const isChartChat = useMemo(() => scene === 'chat_dashboard', [scene]);
|
|
|
|
const summary = useSummary();
|
|
|
|
const selectParam = useMemo(() => {
|
|
switch (scene) {
|
|
case 'chat_agent':
|
|
return agent;
|
|
case 'chat_excel':
|
|
return currentDialogue?.select_param;
|
|
case 'chat_flow':
|
|
return flowSelectParam;
|
|
default:
|
|
return spaceNameOriginal || dbParam;
|
|
}
|
|
}, [scene, agent, currentDialogue, dbParam, spaceNameOriginal, flowSelectParam]);
|
|
|
|
const handleChat = async (content: string) => {
|
|
if (isLoading || !content.trim()) return;
|
|
if (scene === 'chat_agent' && !agent) {
|
|
message.warning(t('choice_agent_tip'));
|
|
return;
|
|
}
|
|
try {
|
|
setIsLoading(true);
|
|
|
|
// Get prompt_code from localStorage
|
|
const storedPromptCode = localStorage.getItem(`dbgpt_prompt_code_${chatId}`);
|
|
|
|
// Create data object with prompt_code if available
|
|
const submitData: Record<string, any> = {
|
|
select_param: selectParam ?? '',
|
|
// incremental,
|
|
};
|
|
|
|
// Add prompt_code if it exists
|
|
if (storedPromptCode) {
|
|
submitData.prompt_code = storedPromptCode;
|
|
|
|
// Clear prompt_code from localStorage after use
|
|
localStorage.removeItem(`dbgpt_prompt_code_${chatId}`);
|
|
}
|
|
|
|
await onSubmit(content, submitData);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Process message content - if onFormatContent is provided and this is a dashboard chat,
|
|
// we'll extract the thinking part from vis-thinking code blocks
|
|
const processMessageContent = useCallback(
|
|
(content: any) => {
|
|
if (isChartChat && onFormatContent && typeof content === 'string') {
|
|
return onFormatContent(content);
|
|
}
|
|
return content;
|
|
},
|
|
[isChartChat, onFormatContent],
|
|
);
|
|
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
|
|
const onCopyContext = async (context: any) => {
|
|
// If we have a formatting function and this is a string, apply it before copying
|
|
const contentToCopy =
|
|
isChartChat && onFormatContent && typeof context === 'string' ? onFormatContent(context) : context;
|
|
|
|
const pureStr = contentToCopy?.replace(/\trelations:.*/g, '');
|
|
const result = copy(pureStr);
|
|
if (result) {
|
|
if (pureStr) {
|
|
messageApi.open({ type: 'success', content: t('copy_success') });
|
|
} else {
|
|
messageApi.open({ type: 'warning', content: t('copy_nothing') });
|
|
}
|
|
} else {
|
|
messageApi.open({ type: 'error', content: t('copy_failed') });
|
|
}
|
|
};
|
|
|
|
const handleRetry = async () => {
|
|
if (isLoading || !docId) {
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
await summary(docId);
|
|
setIsLoading(false);
|
|
};
|
|
|
|
useAsyncEffect(async () => {
|
|
const initMessage = getInitMessage();
|
|
if (initMessage && initMessage.id === chatId) {
|
|
await handleChat(initMessage.message);
|
|
refreshDialogList();
|
|
localStorage.removeItem(STORAGE_INIT_MESSAGE_KET);
|
|
}
|
|
}, [chatId]);
|
|
|
|
useEffect(() => {
|
|
let tempMessage: IChatDialogueMessageSchema[] = messages;
|
|
if (isChartChat) {
|
|
tempMessage = cloneDeep(messages).map(item => {
|
|
if (item?.role === 'view') {
|
|
if (typeof item?.context === 'string') {
|
|
// Try to parse JSON first
|
|
try {
|
|
item.context = JSON.parse(item.context);
|
|
} catch {
|
|
// If JSON parsing fails and we have a formatting function,
|
|
// it might be a vis-thinking block, so process it
|
|
if (onFormatContent) {
|
|
item.context = processMessageContent(item.context);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
setShowMessages(tempMessage.filter(item => ['view', 'human'].includes(item.role)));
|
|
}, [isChartChat, messages, onFormatContent, processMessageContent]);
|
|
|
|
useEffect(() => {
|
|
apiInterceptors(getChatFeedBackSelect())
|
|
.then(res => {
|
|
setSelectParam(res[1] ?? {});
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
}, []);
|
|
|
|
// Track user scrolling behavior
|
|
const isUserScrollingRef = useRef(false);
|
|
const prevMessageCountRef = useRef(0);
|
|
const lastContentHeightRef = useRef(0);
|
|
const isStreamingRef = useRef(false); // Track if we're in streaming mode
|
|
const streamingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
// Initialize refs only once
|
|
useEffect(() => {
|
|
// Initialize message count tracking
|
|
if (prevMessageCountRef.current === 0) {
|
|
prevMessageCountRef.current = 0; // Will be set when first message arrives
|
|
}
|
|
}, []); // No dependencies - only run once
|
|
|
|
// Handle scroll events to detect user interaction
|
|
const handleScrollEvent = useCallback(() => {
|
|
if (scrollableRef.current) {
|
|
const scrollElement = scrollableRef.current;
|
|
const { scrollTop, scrollHeight, clientHeight } = scrollElement;
|
|
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
|
|
|
|
const wasUserScrolling = isUserScrollingRef.current;
|
|
// Always track user scroll state, even during streaming
|
|
// This allows users to stop auto-scroll by scrolling up during streaming
|
|
isUserScrollingRef.current = !isAtBottom;
|
|
|
|
// If user scrolled up during streaming, exit streaming mode to respect user intention
|
|
if (isStreamingRef.current && !isAtBottom && wasUserScrolling !== isUserScrollingRef.current) {
|
|
isStreamingRef.current = false;
|
|
// Clear streaming timeout
|
|
if (streamingTimeoutRef.current) {
|
|
clearTimeout(streamingTimeoutRef.current);
|
|
streamingTimeoutRef.current = null;
|
|
}
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// Simple and reliable scroll function
|
|
const scrollToBottom = useCallback(() => {
|
|
if (!scrollableRef.current) return;
|
|
|
|
const scrollElement = scrollableRef.current;
|
|
|
|
// Use instant scroll to avoid animation-related event conflicts
|
|
scrollElement.scrollTo({
|
|
top: scrollElement.scrollHeight,
|
|
behavior: 'instant',
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!scrollableRef.current) return;
|
|
|
|
const scrollElement = scrollableRef.current;
|
|
const currentMessageCount = showMessages.length;
|
|
const isNewMessage = currentMessageCount > prevMessageCountRef.current;
|
|
|
|
// Handle new messages - always scroll to bottom and start streaming mode
|
|
if (isNewMessage) {
|
|
// Force exit any existing streaming mode
|
|
if (streamingTimeoutRef.current) {
|
|
clearTimeout(streamingTimeoutRef.current);
|
|
}
|
|
|
|
// Enter streaming mode - disable user scroll detection
|
|
isStreamingRef.current = true;
|
|
isUserScrollingRef.current = false;
|
|
|
|
// Scroll to bottom immediately
|
|
scrollToBottom();
|
|
|
|
// Update message count but reset height tracking to let streaming content set it
|
|
prevMessageCountRef.current = currentMessageCount;
|
|
lastContentHeightRef.current = 0; // Reset to allow streaming to establish new baseline
|
|
|
|
// Exit streaming mode after no content updates for 3 seconds (increased timeout)
|
|
streamingTimeoutRef.current = setTimeout(() => {
|
|
isStreamingRef.current = false;
|
|
}, 3000); // Increased from 2000 to 3000
|
|
|
|
return;
|
|
}
|
|
|
|
// Handle streaming content updates - always scroll during streaming
|
|
if (isStreamingRef.current) {
|
|
const currentHeight = scrollElement.scrollHeight;
|
|
|
|
// Initialize baseline height or check for changes
|
|
if (lastContentHeightRef.current === 0) {
|
|
lastContentHeightRef.current = currentHeight;
|
|
// Don't return here - continue to check for immediate height differences
|
|
}
|
|
|
|
const heightDiff = currentHeight - lastContentHeightRef.current;
|
|
|
|
// Any height increase triggers scroll during streaming
|
|
if (heightDiff > 0) {
|
|
// Scroll immediately
|
|
scrollToBottom();
|
|
|
|
// Update height tracking
|
|
lastContentHeightRef.current = currentHeight;
|
|
|
|
// Reset streaming timeout - keep streaming mode active
|
|
if (streamingTimeoutRef.current) {
|
|
clearTimeout(streamingTimeoutRef.current);
|
|
}
|
|
streamingTimeoutRef.current = setTimeout(() => {
|
|
isStreamingRef.current = false;
|
|
}, 3000);
|
|
}
|
|
} else {
|
|
// Not streaming - check if user wants auto-scroll
|
|
if (!isUserScrollingRef.current) {
|
|
const currentHeight = scrollElement.scrollHeight;
|
|
const heightDiff = currentHeight - lastContentHeightRef.current;
|
|
|
|
if (heightDiff > 0) {
|
|
scrollToBottom();
|
|
lastContentHeightRef.current = currentHeight;
|
|
}
|
|
}
|
|
}
|
|
}, [showMessages, scene, scrollToBottom]);
|
|
|
|
// Add scroll event listener and cleanup
|
|
useEffect(() => {
|
|
const scrollElement = scrollableRef.current;
|
|
if (scrollElement) {
|
|
scrollElement.addEventListener('scroll', handleScrollEvent);
|
|
return () => {
|
|
scrollElement.removeEventListener('scroll', handleScrollEvent);
|
|
// Cleanup streaming timeout
|
|
if (streamingTimeoutRef.current) {
|
|
clearTimeout(streamingTimeoutRef.current);
|
|
streamingTimeoutRef.current = null;
|
|
}
|
|
};
|
|
}
|
|
}, [handleScrollEvent]);
|
|
|
|
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 className='flex items-center 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) => {
|
|
if (scene === 'chat_agent') {
|
|
return <AgentContent key={index} content={content} />;
|
|
}
|
|
return (
|
|
<ChatContent
|
|
key={index}
|
|
content={content}
|
|
isChartChat={isChartChat}
|
|
onLinkClick={() => {
|
|
setJsonModalOpen(true);
|
|
setJsonValue(JSON.stringify(content?.context, null, 2));
|
|
}}
|
|
>
|
|
{content.role === 'view' && (
|
|
<div className='flex w-full border-t border-gray-200 dark:border-theme-dark'>
|
|
{scene === 'chat_knowledge' && content.retry ? (
|
|
<Button
|
|
onClick={handleRetry}
|
|
slots={{ root: IconButton }}
|
|
slotProps={{ root: { variant: 'plain', color: 'primary' } }}
|
|
>
|
|
<RedoOutlined />
|
|
<span className='text-sm'>{t('Retry')}</span>
|
|
</Button>
|
|
) : null}
|
|
<div className='flex w-full flex-row-reverse'>
|
|
<ChatFeedback
|
|
select_param={select_param}
|
|
conv_index={Math.ceil((index + 1) / 2)}
|
|
question={
|
|
showMessages?.filter(e => e?.role === 'human' && e?.order === content.order)[0]?.context
|
|
}
|
|
knowledge_space={spaceNameOriginal || dbParam || ''}
|
|
/>
|
|
<Tooltip title={t('Copy_Btn')}>
|
|
<Button
|
|
onClick={() => onCopyContext(content?.context)}
|
|
slots={{ root: IconButton }}
|
|
slotProps={{ root: { variant: 'plain', color: 'primary' } }}
|
|
sx={{ borderRadius: 40 }}
|
|
>
|
|
<CopyOutlined />
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</ChatContent>
|
|
);
|
|
})
|
|
) : (
|
|
<MyEmpty description='Start a conversation' />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={classNames(
|
|
'relative sticky bottom-0 bg-theme-light dark:bg-theme-dark after:absolute after:-top-8 after:h-8 after:w-full after:bg-gradient-to-t after:from-theme-light after:to-transparent dark:after:from-theme-dark',
|
|
{
|
|
'cursor-not-allowed': scene === 'chat_excel' && !currentDialogue?.select_param,
|
|
},
|
|
)}
|
|
>
|
|
<div className='flex flex-wrap w-full py-2 sm:pt-6 sm:pb-10 items-center'>
|
|
{model && <div className='mr-2 flex'>{renderModelIcon(model)}</div>}
|
|
<CompletionInput loading={isLoading} onSubmit={handleChat} handleFinish={setIsLoading} />
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
title='JSON Editor'
|
|
open={jsonModalOpen}
|
|
width='60%'
|
|
cancelButtonProps={{
|
|
hidden: true,
|
|
}}
|
|
onOk={() => {
|
|
setJsonModalOpen(false);
|
|
}}
|
|
onCancel={() => {
|
|
setJsonModalOpen(false);
|
|
}}
|
|
>
|
|
<MonacoEditor className='w-full h-[500px]' language='json' value={jsonValue} />
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Completion;
|