643 lines
21 KiB
TypeScript
643 lines
21 KiB
TypeScript
import { type FC, useState, useRef, useEffect, useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { App, Flex, Dropdown, type MenuProps, Divider, Form, Space } from 'antd'
|
|
import { SettingOutlined } from '@ant-design/icons'
|
|
import clsx from 'clsx'
|
|
import dayjs from 'dayjs'
|
|
|
|
import ChatIcon from '@/assets/images/application/chat.png'
|
|
|
|
import VariableConfigModal from '@/views/Workflow/components/Chat/VariableConfigModal'
|
|
import { draftRun } from '@/api/application';
|
|
|
|
import Empty from '@/components/Empty'
|
|
import Chat from '@/components/Chat'
|
|
import AudioRecorder from '@/components/AudioRecorder'
|
|
import RbCard from '@/components/RbCard/Card'
|
|
import UploadFiles from '@/views/Conversation/components/FileUpload'
|
|
import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
|
|
import Runtime from '@/views/Workflow/components/Chat/Runtime';
|
|
import { nodeLibrary } from '@/views/Workflow/constant'
|
|
// import ButtonCheckbox from '@/components/ButtonCheckbox';
|
|
|
|
// import MemoryFunctionIcon from '@/assets/images/conversation/memoryFunction.svg'
|
|
// import OnlineIcon from '@/assets/images/conversation/online.svg'
|
|
// import OnlineCheckedIcon from '@/assets/images/conversation/onlineChecked.svg'
|
|
// import MemoryFunctionCheckedIcon from '@/assets/images/conversation/memoryFunctionChecked.svg'
|
|
|
|
import type { ChatItem } from '@/components/Chat/types'
|
|
import type { VariableConfigModalRef, WorkflowConfig } from '@/views/Workflow/types'
|
|
import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
|
|
import type { TestChatProps } from './type';
|
|
import type { UploadFileListModalRef } from '@/views/Conversation/types'
|
|
import type { SSEMessage } from '@/utils/stream'
|
|
|
|
const formatParams = (message: string, conversation_id: string | null, files: any[] = [], variables: Record<string, any>) => {
|
|
return {
|
|
message,
|
|
conversation_id,
|
|
stream: true,
|
|
files: files.map(file => {
|
|
if (file.url) {
|
|
return file
|
|
} else {
|
|
return {
|
|
type: file.type,
|
|
transfer_method: 'local_file',
|
|
upload_file_id: file.response.data.file_id
|
|
}
|
|
}
|
|
}),
|
|
variables: Object.keys(variables).length > 0 ? variables : undefined
|
|
}
|
|
}
|
|
|
|
interface NodeData {
|
|
content: string;
|
|
conversation_id: string | null;
|
|
cycle_id: string;
|
|
cycle_idx: number;
|
|
node_id: string;
|
|
node_name?: string;
|
|
node_type?: string;
|
|
input?: any;
|
|
output?: any;
|
|
elapsed_time?: string;
|
|
error?: any;
|
|
state: Record<string, any>;
|
|
status?: 'completed' | 'failed'
|
|
}
|
|
|
|
interface FormData {
|
|
files: any[];
|
|
variables: Variable[]
|
|
}
|
|
const TestChat: FC<TestChatProps> = ({
|
|
application,
|
|
config
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const { message: messageApi } = App.useApp()
|
|
const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
|
|
const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
|
|
|
|
const [loading, setLoading] = useState(false) // Send button loading state
|
|
const [chatList, setChatList] = useState<ChatItem[]>([]) // Chat message history
|
|
const [streamLoading, setStreamLoading] = useState(false) // SSE streaming state
|
|
const [conversationId, setConversationId] = useState<string | null>(null) // Current conversation ID
|
|
const [message, setMessage] = useState<string | undefined>(undefined) // Current input message
|
|
const [form] = Form.useForm<FormData>()
|
|
const queryValues = Form.useWatch([], form)
|
|
|
|
useEffect(() => {
|
|
getVariables()
|
|
}, [application, config])
|
|
|
|
const getVariables = () => {
|
|
if (!application || !config) return
|
|
|
|
let initVariables: Variable[] = []
|
|
|
|
switch (application.type) {
|
|
case 'workflow':
|
|
const { nodes } = config as WorkflowConfig;
|
|
const startNodes = nodes.filter(vo => vo.type === 'start')
|
|
if (startNodes.length) {
|
|
const curVariables = startNodes[0].config.variables as Variable[]
|
|
|
|
curVariables.forEach((vo) => {
|
|
if (typeof vo.default !== 'undefined') {
|
|
vo.value = vo.default
|
|
}
|
|
const lastVo = curVariables.find(item => item.name === vo.name)
|
|
if (lastVo?.value) {
|
|
vo.value = lastVo.value
|
|
}
|
|
})
|
|
initVariables = curVariables
|
|
}
|
|
break
|
|
case 'agent':
|
|
initVariables = config.variables as Variable[]
|
|
break
|
|
}
|
|
|
|
form.setFieldValue('variables', [...initVariables])
|
|
}
|
|
|
|
/**
|
|
* Opens the variable configuration modal
|
|
*/
|
|
const handleEditVariables = () => {
|
|
variableConfigModalRef.current?.handleOpen(queryValues.variables)
|
|
}
|
|
/**
|
|
* Saves updated variable values from the modal
|
|
*/
|
|
const handleSave = (values: Variable[]) => {
|
|
form.setFieldValue('variables', [...values])
|
|
}
|
|
/**
|
|
* Handles file upload from local device
|
|
*/
|
|
const fileChange = (file?: any) => {
|
|
form.setFieldValue('files', [...(queryValues.files || []), file])
|
|
}
|
|
const handleRecordingComplete = async (file: any) => {
|
|
form.setFieldValue('files', [...(queryValues.files || []), file])
|
|
}
|
|
|
|
/**
|
|
* Handles dropdown menu actions for file upload
|
|
*/
|
|
const handleShowUpload: MenuProps['onClick'] = ({ key }) => {
|
|
switch(key) {
|
|
case 'define':
|
|
uploadFileListModalRef.current?.handleOpen()
|
|
break
|
|
}
|
|
}
|
|
/**
|
|
* Adds files from remote URL modal
|
|
*/
|
|
const addFileList = (list?: any[]) => {
|
|
if (!list || list.length <= 0) return
|
|
form.setFieldValue('files', [...(queryValues.files || []), ...(list || [])])
|
|
}
|
|
/**
|
|
* Updates the entire file list (used when removing files)
|
|
*/
|
|
const updateFileList = (list?: any[]) => {
|
|
form.setFieldValue('files', [...list || []])
|
|
}
|
|
const isNeedVariableConfig = useMemo(() => {
|
|
return queryValues?.variables.some(vo => vo.required && (vo.value === null || vo.value === undefined || vo.value === ''))
|
|
}, [queryValues?.variables])
|
|
|
|
const addUserMessage = (message: string, files: any[]) => {
|
|
const newUserMessage: ChatItem = {
|
|
role: 'user',
|
|
content: message,
|
|
created_at: Date.now(),
|
|
files
|
|
};
|
|
setChatList(prev => [...prev, newUserMessage])
|
|
}
|
|
const addAssistantMessage = () => {
|
|
const { type } = application || {}
|
|
setChatList(prev => [...prev, {
|
|
role: 'assistant',
|
|
content: '',
|
|
created_at: Date.now(),
|
|
subContent: type === 'workflow' ? [] : undefined,
|
|
}])
|
|
}
|
|
|
|
const updateAssistantMessage = (content: string) => {
|
|
setChatList(prev => {
|
|
let newList = [...prev]
|
|
const lastMsg = newList[newList.length - 1]
|
|
if (lastMsg.role === 'assistant') {
|
|
lastMsg.content += content
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
const updateErrorAssistantMessage = (message_length: number) => {
|
|
if (message_length > 0) return
|
|
setChatList(prev => {
|
|
let newList = [...prev]
|
|
const lastMsg = newList[newList.length - 1]
|
|
if (lastMsg.role === 'assistant') {
|
|
lastMsg.content = null
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
const handleSend = () => {
|
|
if (loading || !application || !message || !message?.trim()) return
|
|
// Validate required variables before sending
|
|
const { variables, files } = queryValues;
|
|
let isCanSend = true
|
|
const params: Record<string, any> = {}
|
|
if (variables && variables.length > 0) {
|
|
const needRequired: string[] = []
|
|
variables.forEach(vo => {
|
|
params[vo.name] = vo.value
|
|
|
|
if (vo.required && (params[vo.name] === null || params[vo.name] === undefined || params[vo.name] === '')) {
|
|
isCanSend = false
|
|
needRequired.push(vo.name)
|
|
}
|
|
})
|
|
|
|
if (needRequired.length) {
|
|
messageApi.error(`${needRequired.join(',')} ${t('workflow.variableRequired')}`)
|
|
}
|
|
}
|
|
if (!isCanSend) {
|
|
setLoading(false)
|
|
return
|
|
}
|
|
addUserMessage(message, files)
|
|
setMessage(undefined)
|
|
form.setFieldValue('files', [])
|
|
addAssistantMessage()
|
|
setStreamLoading(true)
|
|
setLoading(true)
|
|
|
|
draftRun(
|
|
application.id,
|
|
formatParams(message, conversationId, files, params),
|
|
handleStreamMessage
|
|
)
|
|
.catch(() => {
|
|
setLoading(false)
|
|
})
|
|
.finally(() => {
|
|
setLoading(false)
|
|
setStreamLoading(false)
|
|
})
|
|
}
|
|
const handleStreamMessage = (data: SSEMessage[]) => {
|
|
data.map(item => {
|
|
const { conversation_id, content, message_length } = item.data as { conversation_id: string, content: string, message_length: number };
|
|
|
|
switch (item.event) {
|
|
case 'start':
|
|
if (conversation_id && conversationId !== conversation_id) {
|
|
setConversationId(conversation_id);
|
|
}
|
|
break
|
|
case 'message':
|
|
updateAssistantMessage(content)
|
|
if (conversation_id && conversationId !== conversation_id) {
|
|
setConversationId(conversation_id);
|
|
}
|
|
break;
|
|
case 'end':
|
|
updateErrorAssistantMessage(message_length)
|
|
setStreamLoading(false)
|
|
break;
|
|
}
|
|
})
|
|
};
|
|
|
|
const handleWorkflowSend = () => {
|
|
if (loading || !application || !message || !message?.trim()) return
|
|
|
|
// Validate required variables before sending
|
|
const { variables, files } = queryValues;
|
|
let isCanSend = true
|
|
const params: Record<string, any> = {}
|
|
if (variables.length > 0) {
|
|
const needRequired: string[] = []
|
|
variables.forEach(vo => {
|
|
params[vo.name] = vo.value ?? vo.defaultValue
|
|
|
|
if (vo.required && (params[vo.name] === null || params[vo.name] === undefined || params[vo.name] === '')) {
|
|
isCanSend = false
|
|
needRequired.push(vo.name)
|
|
}
|
|
})
|
|
|
|
if (needRequired.length) {
|
|
messageApi.error(`${needRequired.join(',')} ${t('workflow.variableRequired')}`)
|
|
}
|
|
}
|
|
if (!isCanSend) {
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
addUserMessage(message, files)
|
|
addAssistantMessage()
|
|
form.setFieldsValue({
|
|
files: [],
|
|
})
|
|
|
|
setMessage(undefined)
|
|
setStreamLoading(true)
|
|
draftRun(
|
|
application.id,
|
|
formatParams(message, conversationId, files, params),
|
|
handleWorkflowStreamMessage
|
|
)
|
|
.catch((error) => {
|
|
console.log('draftRun error', error)
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
status: 'failed',
|
|
content: null,
|
|
subContent: error.error
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
}).finally(() => {
|
|
setLoading(false)
|
|
setStreamLoading(false)
|
|
})
|
|
}
|
|
const handleWorkflowStreamMessage = (data: SSEMessage[]) => {
|
|
data.forEach(item => {
|
|
const { content, conversation_id } = item.data as NodeData;
|
|
|
|
switch (item.event) {
|
|
// Append streaming text chunks to assistant message
|
|
case 'message':
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
content: newList[lastIndex].content + content
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
break
|
|
// Track node execution start
|
|
case 'node_start':
|
|
addWorkflowNodeStartMessage(item.data as NodeData)
|
|
break
|
|
// Update node with execution results or errors
|
|
case 'node_end':
|
|
case 'node_error':
|
|
updateWorkflowNodeEndMessage(item.data as NodeData)
|
|
break
|
|
// Update node with subContent
|
|
case 'cycle_item':
|
|
updateWorkflowCycleMessage(item.data as NodeData)
|
|
break
|
|
// Mark workflow as complete
|
|
case 'workflow_end':
|
|
updateWorkflowEndMessage(item.data as NodeData)
|
|
setStreamLoading(false)
|
|
setLoading(false)
|
|
break
|
|
}
|
|
|
|
if (conversation_id && conversationId !== conversation_id) {
|
|
setConversationId(conversation_id)
|
|
}
|
|
})
|
|
}
|
|
const addWorkflowNodeStartMessage = (data: NodeData) => {
|
|
const { node_id } = data;
|
|
const { nodes } = config as WorkflowConfig
|
|
|
|
const node = nodes.find(n => n.id === node_id);
|
|
const { name, type } = node || {}
|
|
const icon = nodeLibrary.flatMap(g => g.nodes).find(n => n.type === type)?.icon
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
const newSubContent = newList[lastIndex].subContent || []
|
|
const filterIndex = newSubContent.findIndex(vo => vo.id === node_id)
|
|
if (filterIndex > -1) {
|
|
newSubContent[filterIndex] = {
|
|
...newSubContent[filterIndex],
|
|
node_id: node_id,
|
|
node_name: name,
|
|
node_type: type,
|
|
icon,
|
|
content: {},
|
|
}
|
|
} else {
|
|
newSubContent.push({
|
|
id: node_id,
|
|
node_id: node_id,
|
|
node_name: name,
|
|
node_type: type,
|
|
icon,
|
|
content: {},
|
|
})
|
|
}
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
subContent: newSubContent
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
const updateWorkflowNodeEndMessage = (data: NodeData) => {
|
|
const { node_id, input, output, error, elapsed_time, status } = data;
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
const newSubContent = newList[lastIndex].subContent || []
|
|
const filterIndex = newSubContent.findIndex(vo => vo.node_id === node_id)
|
|
if (filterIndex > -1 && newSubContent[filterIndex].content) {
|
|
newSubContent[filterIndex] = {
|
|
...newSubContent[filterIndex],
|
|
content: {
|
|
input,
|
|
output,
|
|
error,
|
|
},
|
|
status: status || 'completed',
|
|
elapsed_time
|
|
}
|
|
}
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
subContent: newSubContent
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
const updateWorkflowCycleMessage = (data: NodeData) => {
|
|
const { node_id, cycle_id, cycle_idx, input, output, error, elapsed_time, status } = data;
|
|
const { nodes } = config as WorkflowConfig
|
|
|
|
const node = nodes.find(n => n.id === node_id);
|
|
const { name, type } = node || {}
|
|
const icon = nodeLibrary.flatMap(g => g.nodes).find(n => n.type === type)?.icon
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
const newSubContent = newList[lastIndex].subContent || []
|
|
const filterIndex = newSubContent.findIndex(vo => vo.id === cycle_id)
|
|
if (filterIndex > -1) {
|
|
const items = newSubContent[filterIndex].subContent || []
|
|
items.push({
|
|
cycle_id,
|
|
cycle_idx,
|
|
node_id,
|
|
node_name: name,
|
|
node_type: type,
|
|
icon,
|
|
content: {
|
|
cycle_idx,
|
|
input,
|
|
output,
|
|
error,
|
|
},
|
|
status: status || 'completed',
|
|
elapsed_time
|
|
})
|
|
newSubContent[filterIndex] = {
|
|
...newSubContent[filterIndex],
|
|
subContent: [...items]
|
|
}
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
subContent: newSubContent
|
|
}
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
const updateWorkflowEndMessage = (data: NodeData) => {
|
|
const { error, status } = data as {
|
|
content: string;
|
|
conversation_id: string | null;
|
|
cycle_id: string;
|
|
cycle_idx: number;
|
|
node_id: string;
|
|
node_name?: string;
|
|
node_type?: string;
|
|
input?: any;
|
|
output?: any;
|
|
elapsed_time?: string;
|
|
error?: any;
|
|
state: Record<string, any>;
|
|
status?: 'completed' | 'failed'
|
|
};
|
|
setChatList(prev => {
|
|
const newList = [...prev]
|
|
const lastIndex = newList.length - 1
|
|
if (lastIndex >= 0) {
|
|
newList[lastIndex] = {
|
|
...newList[lastIndex],
|
|
status,
|
|
error,
|
|
content: newList[lastIndex].content === '' ? null : newList[lastIndex].content,
|
|
}
|
|
}
|
|
return newList
|
|
})
|
|
}
|
|
|
|
console.log('queryValues', queryValues)
|
|
return (
|
|
<div className="rb:w-250 rb:p-3 rb:mx-auto">
|
|
<RbCard
|
|
title={t('application.test')}
|
|
headerClassName="rb:min-h-[56px]!"
|
|
className="rb:h-[calc(100vh-88px)]!"
|
|
bodyClassName="rb:h-[calc(100%-56px)]! rb:overflow-y-auto rb:px-3! rb:py-0!"
|
|
>
|
|
<Chat
|
|
empty={<Empty url={ChatIcon} title={t('application.testChatEmpty')} isNeedSubTitle={false} size={[240, 200]} />}
|
|
contentClassName={clsx(`rb:mx-[16px] rb:pt-[24px]`, {
|
|
'rb:h-[calc(100%-140px)]': !queryValues?.files?.length,
|
|
'rb:h-[calc(100%-208px)]': !!queryValues?.files?.length,
|
|
})}
|
|
data={chatList}
|
|
streamLoading={streamLoading}
|
|
loading={loading}
|
|
onChange={setMessage}
|
|
onSend={application?.type === 'workflow' ? handleWorkflowSend : handleSend}
|
|
fileList={queryValues?.files || []}
|
|
fileChange={updateFileList}
|
|
labelFormat={(item) => item.role === 'user' ? t('application.you') : dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
|
|
errorDesc={t('application.ReplyException')}
|
|
renderRuntime={application?.type === 'workflow' ? (item, index) => {
|
|
return <Runtime item={item} index={index} />
|
|
} : undefined}
|
|
>
|
|
<Form form={form}>
|
|
<Flex justify="space-between" className="rb:flex-1">
|
|
<Space size={8} align="center">
|
|
<Form.Item name="files" noStyle>
|
|
<Dropdown
|
|
menu={{
|
|
items: [
|
|
{ key: 'define', label: t('memoryConversation.addRemoteFile') },
|
|
{
|
|
key: 'upload', label: (
|
|
<UploadFiles
|
|
onChange={fileChange}
|
|
/>
|
|
)
|
|
},
|
|
],
|
|
onClick: handleShowUpload
|
|
}}
|
|
>
|
|
<Flex align="center" justify="center" className="rb:size-7 rb:cursor-pointer rb:rounded-[14px] rb:border rb:border-[#EBEBEB] rb:hover:bg-[#F6F6F6]">
|
|
<div
|
|
className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')]"
|
|
></div>
|
|
</Flex>
|
|
</Dropdown>
|
|
</Form.Item>
|
|
{/* <Form.Item name="web_search" valuePropName="checked" className="rb:mb-0!">
|
|
<ButtonCheckbox
|
|
icon={OnlineIcon}
|
|
checkedIcon={OnlineCheckedIcon}
|
|
>
|
|
{t(`memoryConversation.web_search`)}
|
|
</ButtonCheckbox>
|
|
</Form.Item>
|
|
<Tooltip title={t(`memoryConversation.memory`)}></Tooltip>
|
|
<Form.Item name="memory" valuePropName="checked" className="rb:mb-0!">
|
|
<ButtonCheckbox
|
|
icon={MemoryFunctionIcon}
|
|
checkedIcon={MemoryFunctionCheckedIcon}
|
|
cicle={true}
|
|
>
|
|
</ButtonCheckbox>
|
|
</Form.Item> */}
|
|
<Form.Item name="variables" className="rb:mb-0!" hidden={!queryValues?.variables?.length}>
|
|
<div
|
|
className={clsx("rb:flex rb:items-center rb:border rb:rounded-lg rb:px-2 rb:text-[12px] rb:h-6 rb:cursor-pointer rb:hover:bg-[#F0F3F8] rb:text-[#212332]", {
|
|
'rb:border-[#FF5D34] rb:text-[#FF5D34]': isNeedVariableConfig,
|
|
'rb:border-[#DFE4ED]': !isNeedVariableConfig,
|
|
})}
|
|
onClick={handleEditVariables}
|
|
>
|
|
<SettingOutlined className="rb:mr-1" />
|
|
{t(`memoryConversation.variableConfig`)}
|
|
</div>
|
|
</Form.Item>
|
|
</Space>
|
|
<Space size={8} align="center">
|
|
<AudioRecorder
|
|
onRecordingComplete={handleRecordingComplete}
|
|
/>
|
|
<Divider type="vertical" className="rb:ml-0! rb:mr-2!" />
|
|
</Space>
|
|
</Flex>
|
|
</Form>
|
|
</Chat>
|
|
|
|
<VariableConfigModal
|
|
ref={variableConfigModalRef}
|
|
refresh={handleSave}
|
|
/>
|
|
|
|
<UploadFileListModal
|
|
ref={uploadFileListModalRef}
|
|
refresh={addFileList}
|
|
/>
|
|
</RbCard>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TestChat
|