adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize: 1. stream request optimize; 2. replace Chat component

Browse Source
This commit is contained in:
zhaoying
2025-12-16 11:31:19 +08:00
parent af2b8531e9
commit d27ed6c419
10 changed files with 545 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

515
web/src/views/ApplicationConfig/components/Chat.tsx
View File

@@ -1,46 +1,125 @@
import { type FC, useRef, useEffect, useState } from 'react';
import { type FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx'
import { Input, Form } from 'antd'
import ChatIcon from '@/assets/images/application/chat.png'
import ChatSendIcon from '@/assets/images/application/chatSend.svg'
import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
import type { ChatItem, ChatData, Config } from '../types'
import type { ChatData, Config } from '../types'
import { runCompare, draftRun } from '@/api/application'
import Empty from '@/components/Empty'
import Markdown from '@/components/Markdown'
import ChatContent from '@/components/Chat/ChatContent'
import type { ChatItem } from '@/components/Chat/types'
import { type SSEMessage } from '@/utils/stream'
interface ChatProps {
chatList: ChatData[];
data: Config;
updateChatList: (list: ChatData[]) => void;
updateChatList: React.Dispatch<React.SetStateAction<ChatData[]>>;
handleSave: (flag?: boolean) => Promise<any>;
source?: 'cluster' | 'agent';
source?: 'multi_agent' | 'agent';
}
const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, source = 'agent' }) => {
const { t } = useTranslation();
const [form] = Form.useForm<{ message: string }>()
const scrollContainerRefs = useRef<(HTMLDivElement | null)[]>([])
const [loading, setLoading] = useState(false)
const [isCluster, setIsCluster] = useState(source === 'cluster')
const [isCluster, setIsCluster] = useState(source === 'multi_agent')
const [conversationId, setConversationId] = useState<string | null>(null)
const [compareLoading, setCompareLoading] = useState(false)
// 当聊天列表更新时，自动滚动到底部
useEffect(() => {
// 延迟一下，确保DOM已经更新
setTimeout(() => {
scrollContainerRefs.current.forEach(container => {
if (container) {
container.scrollTop = container.scrollHeight;
}
});
}, 0);
}, [chatList]);
useEffect(() => {
setIsCluster(source === 'cluster')
setIsCluster(source === 'multi_agent')
}, [source])
const addUserMessage = (message: string) => {
const newUserMessage: ChatItem = {
role: 'user',
content: message,
created_at: Date.now(),
};
updateChatList(prev => prev.map(item => ({
...item,
list: [...(item.list || []), newUserMessage]
})))
}
const addAssistantMessage = () => {
const assistantMessage: ChatItem = {
role: 'assistant',
content: '',
created_at: Date.now(),
};
if (isCluster) {
updateChatList(prev => prev.map(item => ({
...item,
list: [...(item.list || []), assistantMessage]
})))
} else {
const assistantMessages: Record<string, ChatItem> = {}
chatList.forEach(item => {
assistantMessages[item.model_config_id as string] = assistantMessage
})
updateChatList(prev => prev.map(item => ({
...item,
list: [...(item.list || []), assistantMessages[item.model_config_id as string]]
})))
}
}
const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string) => {
if (!content || !model_config_id) return
updateChatList(prev => {
const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
if (targetIndex !== -1) {
const modelChatList = [...prev]
const curModelChat = modelChatList[targetIndex]
const curChatMsgList = curModelChat.list || []
const lastMsg = curChatMsgList[curChatMsgList.length - 1]
if (lastMsg.role === 'assistant') {
modelChatList[targetIndex] = {
...modelChatList[targetIndex],
conversation_id: conversation_id,
list: [
...curChatMsgList.slice(0, curChatMsgList.length - 1),
{
...lastMsg,
content: lastMsg.content + content
}
]
}
}
return [...modelChatList]
}
return prev;
})
}
const updateErrorAssistantMessage = (message_length: number, model_config_id?: string) => {
if (message_length > 0 || !model_config_id) return
updateChatList(prev => {
const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
if (targetIndex > -1) {
const modelChatList = [...prev]
const curModelChat = modelChatList[targetIndex]
const curChatMsgList = curModelChat.list || []
const lastMsg = curChatMsgList[curChatMsgList.length - 1]
if (lastMsg.role === 'assistant') {
modelChatList[targetIndex] = {
...modelChatList[targetIndex],
list: [
...curChatMsgList.slice(0, curChatMsgList.length - 1),
{
...lastMsg,
content: null
}
]
}
}
return [...modelChatList]
}
return prev
})
}
const handleSend = () => {
if (loading) return
setLoading(true)
@@ -48,182 +127,47 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
handleSave(false)
.then(() => {
const message = form.getFieldValue('message')
if (!message || message.trim() === '') return
const newUserMessage: ChatItem = {
role: 'question',
content: message,
time: Date.now(),
};
updateChatList((prev: ChatData[]) => {
return prev.map(item => ({
...item,
list: [
...(item.list || []),
newUserMessage
]
}))
})
if (!message?.trim()) return
addUserMessage(message)
form.setFieldsValue({ message: undefined })
// 添加空的助手消息用于流式更新
const assistantMessages: Record<string, ChatItem> = {};
if (isCluster) {
const assistantMessage: ChatItem = {
role: 'answer',
content: '',
time: Date.now(),
};
assistantMessages['cluster'] = assistantMessage;
updateChatList((prev: ChatData[]) => prev.map(item => ({
...item,
list: [...(item.list || []), assistantMessage]
})))
} else {
chatList.forEach(item => {
const assistantMessage: ChatItem = {
role: 'answer',
content: '',
time: Date.now(),
};
assistantMessages[item.model_config_id] = assistantMessage;
});
updateChatList((prev: ChatData[]) => prev.map(item => ({
...item,
list: [...(item.list || []), assistantMessages[item.model_config_id]]
})))
}
addAssistantMessage()
const handleStreamMessage = (data: string) => {
const handleStreamMessage = (data: SSEMessage[]) => {
setCompareLoading(false)
try {
const lines = data.split('\n');
let currentEvent = '';
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
if (line.startsWith('event:')) {
currentEvent = line.substring(6).trim();
} else if (line.startsWith('data:') && (!isCluster && currentEvent === 'model_message')) {
const jsonData = line.substring(5).trim();
const parsed = JSON.parse(jsonData);
if (parsed.content && parsed.model_config_id) {
const targetIndex = chatList.findIndex(item => item.model_config_id === parsed.model_config_id);
if (targetIndex !== -1) {
updateChatList((prev: ChatData[]) => prev.map((item, index) => {
if (index === targetIndex) {
return {
...item,
conversation_id: parsed.conversation_id,
list: item.list?.map((msg, msgIndex) => {
if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
return { ...msg, content: msg.content + parsed.content };
}
return msg;
}) || []
};
}
return item;
}))
}
}
} else if (line.startsWith('data:') && (isCluster && currentEvent === 'message')) {
const jsonData = line.substring(5).trim();
const parsed = JSON.parse(jsonData);
if (parsed.content) {
updateChatList((prev: ChatData[]) => prev.map((item, index) => {
if (index === 0) {
return {
...item,
list: item.list?.map((msg, msgIndex) => {
if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
return { ...msg, content: (msg.content || '') + parsed.content };
}
return msg;
}) || []
};
}
return item;
}))
}
if (parsed.conversation_id) {
setConversationId(parsed.conversation_id);
}
} else if (line.startsWith('data:') && (!isCluster && currentEvent === 'model_end')) {
const jsonData = line.substring(5).trim();
const parsed = JSON.parse(jsonData);
if (parsed.message_length === 0 && parsed.model_config_id) {
const targetIndex = chatList.findIndex(item => item.model_config_id === parsed.model_config_id);
if (targetIndex !== -1) {
updateChatList((prev: ChatData[]) => prev.map((item, index) => {
if (index === targetIndex) {
return {
...item,
list: item.list?.map((msg, msgIndex) => {
if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
return { ...msg, content: null };
}
return msg;
}) || []
};
}
return item;
}))
}
}
} else if (line.startsWith('data:') && (isCluster && currentEvent === 'model_end')) {
const jsonData = line.substring(5).trim();
const parsed = JSON.parse(jsonData);
if (parsed.message_length === 0) {
updateChatList((prev: ChatData[]) => prev.map((item, index) => {
if (index === 0) {
return {
...item,
list: item.list?.map((msg, msgIndex) => {
if (msgIndex === item.list!.length - 1 && msg.role === 'answer') {
return { ...msg, content: null };
}
return msg;
}) || []
};
}
return item;
}))
}
if (parsed.conversation_id) {
setConversationId(parsed.conversation_id);
}
} else if (currentEvent === 'compare_end') {
data.map(item => {
const { model_config_id, conversation_id, content, message_length } = item.data as { model_config_id: string; conversation_id: string; content: string; message_length: number };
switch(item.event) {
case 'model_message':
updateAssistantMessage(content, model_config_id, conversation_id)
break;
case 'model_end':
updateErrorAssistantMessage(message_length, model_config_id)
break;
case 'compare_end':
setLoading(false);
}
break;
}
} catch (e) {
console.error('Parse stream data error:', e);
}
})
};
setTimeout(() => {
if (isCluster) {
draftRun(data.app_id, { message, conversation_id: conversationId, stream: true }, handleStreamMessage)
.finally(() => setLoading(false))
} else {
runCompare(data.app_id, {
message,
models: chatList.map(item => ({
model_config_id: item.model_config_id,
label: item.label,
model_parameters: item.model_parameters,
conversation_id: item.conversation_id
})),
variables: {},
"parallel": true,
"stream": true,
"timeout": 60,
}, handleStreamMessage)
.finally(() => setLoading(false));
}
runCompare(data.app_id, {
message,
models: chatList.map(item => ({
model_config_id: item.model_config_id,
label: item.label,
model_parameters: item.model_parameters,
conversation_id: item.conversation_id
})),
variables: {},
"parallel": true,
"stream": true,
"timeout": 60,
}, handleStreamMessage)
.finally(() => setLoading(false));
}, 0)
})
.catch(() => {
@@ -231,6 +175,131 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
setCompareLoading(false)
})
}
const addClusterAssistantMessage = () => {
const assistantMessage: ChatItem = {
role: 'assistant',
content: '',
created_at: Date.now(),
};
updateChatList(prev => prev.map(item => ({
...item,
list: [...(item.list || []), assistantMessage]
})))
}
const updateClusterAssistantMessage = (content?: string) => {
if (!content) return
updateChatList(prev => {
const modelChatList = [...prev]
const curModelChat = modelChatList[0]
const curChatMsgList = curModelChat.list || []
const lastMsg = curChatMsgList[curChatMsgList.length - 1]
if (lastMsg.role === 'assistant') {
modelChatList[0] = {
...modelChatList[0],
list: [
...curChatMsgList.slice(0, curChatMsgList.length - 1),
{
...lastMsg,
content: lastMsg.content + content
}
]
}
}
return [...modelChatList]
})
updateChatList((prev: ChatData[]) => prev.map((item, index) => {
if (index === 0) {
return {
...item,
list: item.list?.map((msg, msgIndex) => {
if (msgIndex === item.list!.length - 1 && msg.role === 'assistant') {
return { ...msg, content: (msg.content || '') + content };
}
return msg;
}) || []
};
}
return item;
}))
}
const updateClusterErrorAssistantMessage = (message_length: number) => {
if (message_length > 0) return
updateChatList(prev => {
const modelChatList = [...prev]
const curModelChat = modelChatList[0]
const curChatMsgList = curModelChat.list || []
const lastMsg = curChatMsgList[curChatMsgList.length - 1]
if (lastMsg.role === 'assistant') {
modelChatList[0] = {
...modelChatList[0],
list: [
...curChatMsgList.slice(0, curChatMsgList.length - 1),
{
...lastMsg,
content: null
}
]
}
}
return [...modelChatList]
})
}
const handleClusterSend = () => {
if (loading) return
setLoading(true)
setCompareLoading(true)
handleSave(false)
.then(() => {
const message = form.getFieldValue('message')
if (!message || message.trim() === '') return
addUserMessage(message)
form.setFieldsValue({ message: undefined })
addClusterAssistantMessage()
const handleStreamMessage = (data: SSEMessage[]) => {
setCompareLoading(false)
data.map(item => {
const { conversation_id, content, message_length } = item.data as { conversation_id: string, content: string, message_length: number };
switch(item.event) {
case 'message':
updateClusterAssistantMessage(content)
if (conversation_id && conversationId !== conversation_id) {
setConversationId(conversation_id);
}
break;
case 'model_end':
updateClusterErrorAssistantMessage(message_length)
break;
case 'compare_end':
setLoading(false);
break;
}
})
};
setTimeout(() => {
draftRun(
data.app_id,
{
message,
conversation_id: conversationId,
stream: true
},
handleStreamMessage
)
.finally(() => setLoading(false))
}, 0)
})
.catch(() => {
setLoading(false)
setCompareLoading(false)
})
}
const handleDelete = (index: number) => {
updateChatList(chatList.filter((_, voIndex) => voIndex !== index))
}
@@ -258,69 +327,55 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
<div className={clsx(
"rb:grid rb:bg-[#F0F3F8] rb:text-center rb:flex-[0_0_auto]",
{
'rb:rounded-tr-[12px]': index === chatList.length - 1,
'rb:rounded-tl-[12px]': index === 0,
'rb:rounded-tr-xl': index === chatList.length - 1,
'rb:rounded-tl-xl': index === 0,
}
)}>
<div className='rb:relative rb:p-[10px_12px] rb:overflow-hidden'>
<div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:w-[calc(100%-24px)]">{chat.label}</div>
<div
className="rb:w-[16px] rb:h-[16px] rb:cursor-pointer rb:absolute rb:top-[12px] rb:right-[12px] rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]"
className="rb:w-4 rb:h-4 rb:cursor-pointer rb:absolute rb:top-3 rb:right-3 rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]"
onClick={() => handleDelete(index)}
></div>
</div>
</div>
}
{!chat.list || chat.list.length === 0
? <Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} className="rb:h-full" size={[240, 200]} />
: (
<div ref={el => scrollContainerRefs.current[index] = el} className={clsx(`rb:relative rb:overflow-y-auto rb:overflow-x-hidden`, {
'rb:h-[calc(100vh-186px)]': isCluster,
'rb:h-[calc(100vh-286px)]': !isCluster,
})}>
{chat.list?.map((vo, voIndex) => {
if (compareLoading && voIndex === chat.list?.length - 1) {
return null
}
return (
<div key={voIndex} className={clsx("rb:relative rb:mt-[24px]", {
'rb:right-[16px] rb:text-right': vo.role === 'question',
'rb:left-[16px] rb:text-left': vo.role !== 'question',
})}>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-[16px] rb:font-regular">{vo.role === 'question' ? 'You' : chat.label}</div>
<div className={clsx('rb:border rb:text-left rb:rounded-[8px] rb:mt-[6px] rb:leading-[18px] rb:p-[10px_12px_2px_12px] rb:inline-block', {
'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': vo.role !== 'question' && vo.content === null,
'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': vo.role === 'question' && vo.content,
'rb:bg-[#ffffff] rb:border-[rgba(235,235,235,1)]': vo.role !== 'question' && (vo.content || vo.content === ''),
'rb:max-w-[400px]': chatList.length === 1,
'rb:max-w-[260px]': chatList.length === 2,
'rb:max-w-[150px]': chatList.length === 3,
'rb:max-w-[108px]': chatList.length === 4,
})}>
<Markdown content={vo.content === null ? t('application.ReplyException') : vo.content} />
</div>
</div>
)
})}
</div>
)
}
<ChatContent
classNames={{
'rb:mx-[16px] rb:pt-[24px]': true,
'rb:h-[calc(100vh-186px)]': isCluster,
'rb:h-[calc(100vh-286px)]': !isCluster,
}}
contentClassNames={{
'rb:max-w-[400px]!': chatList.length === 1,
'rb:max-w-[260px]!': chatList.length === 2,
'rb:max-w-[150px]!': chatList.length === 3,
'rb:max-w-[108px]!': chatList.length === 4,
}}
empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
data={chat.list || []}
streamLoading={compareLoading}
labelPosition="top"
labelFormat={(item) => item.role === 'user' ? 'You' : chat.label}
errorDesc={t('application.ReplyException')}
/>
</div>
))}
</div>
<div className="rb:flex rb:items-center rb:gap-[10px] rb:p-[16px]">
<div className="rb:flex rb:items-center rb:gap-2.5 rb:p-4">
<Form form={form} style={{width: 'calc(100% - 54px)'}}>
<Form.Item name="message" className="rb:mb-[0]!">
<Form.Item name="message" className="rb:mb-0!">
<Input
className="rb:h-[44px] rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]"
className="rb:h-11 rb:shadow-[0px_2px_8px_0px_rgba(33,35,50,0.1)]"
placeholder={t('application.chatPlaceholder')}
onPressEnter={handleSend}
onPressEnter={isCluster ? handleClusterSend : handleSend}
/>
</Form.Item>
</Form>
<img src={ChatSendIcon} className={clsx("rb:w-[44px] rb:h-[44px] rb:cursor-pointer", {
<img src={ChatSendIcon} className={clsx("rb:w-11 rb:h-11 rb:cursor-pointer", {
'rb:opacity-50': loading,
})} onClick={handleSend} />
})} onClick={isCluster ? handleClusterSend : handleSend} />
</div>
</>
}