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

Merge branch 'develop' into feature/ui_upgrade_zy

Browse Source
This commit is contained in:
zhaoying
2026-03-20 11:49:00 +08:00
parent 69c001bf84 9d8c26b999
commit b1b53f6b1d
286 changed files with 23406 additions and 5328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
web/src/views/Workflow/components/Chat/Chat.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-06 21:10:56
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-04 18:51:48
* @Last Modified time: 2026-03-20 11:25:51
*/
/**
* Workflow Chat Component
@@ -21,50 +21,59 @@
*
* @component
*/
import { forwardRef, useImperativeHandle, useState, useRef } from 'react'
import { forwardRef, useImperativeHandle, useState, useRef, useEffect, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { App, Space, Button, Flex, Dropdown, type MenuProps, Divider } from 'antd'
import { App, Flex } from 'antd'
import ChatIcon from '@/assets/images/application/chat.png'
import RbDrawer from '@/components/RbDrawer';
import VariableConfigModal from './VariableConfigModal'
import { draftRun } from '@/api/application';
import Empty from '@/components/Empty'
import ChatContent from '@/components/Chat/ChatContent'
import type { ChatItem } from '@/components/Chat/types'
import dayjs from 'dayjs'
import type { ChatRef, VariableConfigModalRef, GraphRef } from '../../types'
import type { ChatRef, GraphRef, WorkflowConfig } from '../../types'
import { type SSEMessage } from '@/utils/stream'
import type { Variable } from '../Properties/VariableList/types'
import ChatInput from '@/components/Chat/ChatInput'
import UploadFiles from '@/views/Conversation/components/FileUpload'
import AudioRecorder from '@/components/AudioRecorder'
import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
import type { UploadFileListModalRef } from '@/views/Conversation/types'
import ChatToolbar from '@/components/Chat/ChatToolbar'
import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
import Runtime from './Runtime';
import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null }>(({ appId, graphRef, data }, ref) => {
const { t } = useTranslation()
const { message: messageApi } = App.useApp()
const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
// State management
const [open, setOpen] = useState(false) // Drawer visibility
const [loading, setLoading] = useState(false) // Send button loading state
const [chatList, setChatList] = useState<ChatItem[]>([]) // Chat message history
const [variables, setVariables] = useState<Variable[]>([]) // Workflow input variables
const [streamLoading, setStreamLoading] = useState(false) // SSE streaming state
const [conversationId, setConversationId] = useState<string | null>(null) // Current conversation ID
const [fileList, setFileList] = useState<any[]>([]) // Uploaded files
const [message, setMessage] = useState<string | undefined>(undefined) // Current input message
const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
const toolbarRef = useRef<ChatToolbarRef>(null)
const toolbarCallbackRef = useCallback((node: ChatToolbarRef | null) => {
(toolbarRef as React.MutableRefObject<ChatToolbarRef | null>).current = node
}, [])
const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false)
const [chatList, setChatList] = useState<ChatItem[]>([])
const [variables, setVariables] = useState<Variable[]>([])
const [streamLoading, setStreamLoading] = useState(false)
const [conversationId, setConversationId] = useState<string | null>(null)
const [fileList, setFileList] = useState<any[]>([])
const [message, setMessage] = useState<string | undefined>(undefined)
const [features, setFeatures] = useState<FeaturesConfigForm>({} as FeaturesConfigForm)
/**
* Opens the chat drawer and loads workflow variables from the start node
*/
const handleOpen = () => {
setOpen(true)
getVariables()
}
useEffect(() => {
if (data?.features && open) setFeatures(data.features)
}, [open, data?.features])
useEffect(() => {
if (open && graphRef.current && toolbarRef.current) {
getVariables()
}
}, [open])
/**
* Extracts variables from the workflow's start node and merges with previous values
*/
@@ -84,7 +93,9 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
vo.value = lastVo.value
}
})
setVariables(curVariables)
console.log('curVariables', curVariables)
setVariables([...curVariables])
toolbarRef.current?.setVariables([...curVariables])
}
}
/**
@@ -96,22 +107,12 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
setVariables([])
setConversationId(null)
setMessage(undefined)
toolbarRef.current?.setFiles([])
toolbarRef.current?.setVariables([])
setFileList([])
setLoading(false)
setStreamLoading(false)
}
/**
* Opens the variable configuration modal
*/
const handleEditVariables = () => {
variableConfigModalRef.current?.handleOpen(variables)
}
/**
* Saves updated variable values from the modal
*/
const handleSave = (values: Variable[]) => {
setVariables([...values])
}
/**
* Sends a message to execute the workflow
*
@@ -150,10 +151,14 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
setLoading(true)
const message = msg
const files = toolbarRef.current?.getFiles() || []
setChatList(prev => [...prev, {
role: 'user',
content: message,
created_at: Date.now(),
meta_data: {
files
},
}])
setChatList(prev => [...prev, {
role: 'assistant',
@@ -338,13 +343,14 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
}
setMessage(undefined)
toolbarRef.current?.setFiles([])
setFileList([])
const data = {
message: message,
variables: params,
stream: true,
conversation_id: conversationId,
files: fileList.map(file => {
files: files.map(file => {
if (file.url) {
return file
} else {
@@ -359,7 +365,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
setStreamLoading(true)
draftRun(appId, data, handleStreamMessage)
.catch((error) => {
console.log('draftRun error', error)
const errorInfo = JSON.parse(error.message)
setChatList(prev => {
const newList = [...prev]
const lastIndex = newList.length - 1
@@ -368,7 +374,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
...newList[lastIndex],
status: 'failed',
content: null,
subContent: error.error
subContent: errorInfo.error
}
}
return newList
@@ -379,65 +385,20 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
})
}
/**
* Updates the current input message
*/
const handleMessageChange = (message: string) => {
setMessage(message)
}
/**
* Handles file upload from local device
*/
const fileChange = (file?: any) => {
setFileList([...fileList, file])
}
const handleRecordingComplete = async (file: any) => {
setFileList([...fileList, {
response: { data: file },
thumbUrl: file.url,
type: file.type
}])
}
/**
* 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
setFileList([...fileList, ...(list || [])])
}
/**
* Updates the entire file list (used when removing files)
*/
const updateFileList = (list?: any[]) => {
setFileList([...list || []])
toolbarRef.current?.setFiles([...list || []])
}
// Expose methods to parent component via ref
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
console.log('fileList', fileList)
return (
<RbDrawer
title={<Flex align="center" gap={10}>
{t('workflow.run')}
{variables.length > 0 && <Space>
<Button size="small" onClick={handleEditVariables}>{t('application.variable')}</Button>
</Space>}
</Flex>}
classNames={{
body: 'rb:p-0!'
@@ -466,48 +427,16 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
fileChange={updateFileList}
fileList={fileList}
onSend={handleSend}
onChange={handleMessageChange}
onChange={(msg) => setMessage(msg)}
>
<Flex justify="space-between" className="rb:flex-1">
<Flex gap={8} align="center">
<Dropdown
menu={{
items: [
{ key: 'define', label: t('memoryConversation.addRemoteFile') },
{
key: 'upload', label: (
<UploadFiles
onChange={fileChange}
/>
)
},
],
onClick: handleShowUpload
}}
>
<div
className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
></div>
</Dropdown>
</Flex>
<Flex align="center">
<AudioRecorder onRecordingComplete={handleRecordingComplete} />
<Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
</Flex>
</Flex>
<ChatToolbar
ref={toolbarCallbackRef}
features={features}
onFilesChange={setFileList}
onVariablesChange={setVariables}
/>
</ChatInput>
</Flex>
<VariableConfigModal
ref={variableConfigModalRef}
refresh={handleSave}
variables={variables}
/>
<UploadFileListModal
ref={uploadFileListModalRef}
refresh={addFileList}
/>
</RbDrawer>
)
})

13
web/src/views/Workflow/components/Chat/Runtime.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-24 17:57:08
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-28 16:48:09
* @Last Modified time: 2026-03-12 13:39:24
*/
/*
* Runtime Component
@@ -225,12 +225,13 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
</div>
)
: <>
{item.error
? <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 ", getStatus('failed'))}>
{item.error &&
<div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 rb:mb-2 rb:-mt-4", getStatus('failed'))}>
<Markdown content={item.error} />
</div>
: renderChild(item.subContent)
}</>
</div>
}
{renderChild(item.subContent)}
</>
)
}]}
/>

1
web/src/views/Workflow/components/Chat/VariableConfigModal.tsx
View File

@@ -8,7 +8,6 @@ import RbModal from '@/components/RbModal'
interface VariableEditModalProps {
refresh: (values: Variable[]) => void;
variables: Variable[]
}
const VariableConfigModal = forwardRef<VariableConfigModalRef, VariableEditModalProps>(({