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

feat(web): add workflow runtime info

Browse Source
This commit is contained in:
zhaoying
2026-01-26 15:46:28 +08:00
parent 988a41f5e4
commit 2eff6b2e9d
8 changed files with 286 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/components/Chat/ChatContent.tsx
View File

@@ -8,6 +8,7 @@ import { type FC, useRef, useEffect } from 'react'
import clsx from 'clsx'
import Markdown from '@/components/Markdown'
import type { ChatContentProps } from './types'
import { Spin } from 'antd'
/**
* 聊天内容显示组件
@@ -21,7 +22,8 @@ const ChatContent: FC<ChatContentProps> = ({
empty,
labelPosition = 'bottom',
labelFormat,
errorDesc
errorDesc,
renderRuntime
}) => {
// 滚动容器引用，用于控制自动滚动到底部
const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
@@ -45,8 +47,8 @@ const ChatContent: FC<ChatContentProps> = ({
'rb:left-0 rb:text-left': item.role === 'assistant', // 助手消息左对齐
})}>
{/* 流式加载时且内容为空则不显示 */}
{streamLoading && item.content === ''
? null
{streamLoading && item.content === '' && !renderRuntime
? <Spin />
: <>
{/* 顶部标签（如时间戳、用户名等） */}
{labelPosition === 'top' &&
@@ -55,16 +57,17 @@ const ChatContent: FC<ChatContentProps> = ({
</div>
}
{/* 消息气泡框 */}
<div className={clsx('rb:border rb:text-left rb:rounded-lg rb:mt-1.5 rb:leading-4.5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-[520px] rb:wrap-break-word', contentClassNames, {
<div className={clsx('rb:border rb:text-left rb:rounded-lg rb:mt-1.5 rb:leading-4.5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-130 rb:wrap-break-word', contentClassNames, {
// 错误消息样式（内容为null且非助手消息）
'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': errorDesc && item.role === 'assistant' && item.content === null,
'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': errorDesc && item.role === 'assistant' && item.content === null && !renderRuntime,
// 助手消息样式
'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': item.role === 'user',
// 用户消息样式
'rb:bg-[#FFFFFF] rb:border-[#EBEBEB]': item.role === 'assistant' && (item.content || item.content === ''),
'rb:bg-[#FFFFFF] rb:border-[#EBEBEB]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
})}>
{item.subContent && renderRuntime && renderRuntime(item, index)}
{/* 使用Markdown组件渲染消息内容 */}
<Markdown content={item.content ?? errorDesc ?? ''} />
<Markdown content={renderRuntime ? item.content ?? '' : item.content ?? errorDesc ?? ''} />
</div>
{/* 底部标签（如时间戳、用户名等） */}
{labelPosition === 'bottom' &&

5
web/src/components/Chat/types.ts
View File

@@ -19,7 +19,9 @@ export interface ChatItem {
/** 消息内容 */
content?: string | null;
/** 创建时间 */
created_at?: number | string
created_at?: number | string;
status?: string;
subContent?: Record<string, any>[]
}
/**
@@ -81,4 +83,5 @@ export interface ChatContentProps {
/** 标签格式化函数 */
labelFormat: (item: ChatItem) => any;
errorDesc?: string;
renderRuntime?: (item: ChatItem, index: number) => ReactNode;
}

16
web/src/components/Markdown/CodeBlock.tsx
View File

@@ -6,6 +6,9 @@ import CopyBtn from './CopyBtn';
type ICodeBlockProps = {
value: string;
needCopy?: boolean;
size?: 'small' | 'default';
showLineNumbers?: boolean;
}
// enum languageType {
@@ -16,6 +19,9 @@ type ICodeBlockProps = {
const CodeBlock: FC<ICodeBlockProps> = ({
value,
needCopy = true,
size = 'default',
showLineNumbers = false
}) => {
return (
@@ -23,24 +29,26 @@ const CodeBlock: FC<ICodeBlockProps> = ({
<SyntaxHighlighter
style={atelierHeathLight}
customStyle={{
padding: '16px 20px 16px 24px',
padding: '8px 12px 8px 12px',
backgroundColor: '#F0F3F8',
borderRadius: 8,
fontSize: size === 'small' ? 12 : 14,
wordBreak: 'break-all'
}}
language="json"
showLineNumbers={false}
showLineNumbers={showLineNumbers}
PreTag="div"
>
{value}
</SyntaxHighlighter>
<CopyBtn
{needCopy && <CopyBtn
value={value}
style={{
position: 'absolute',
top: 20,
right: 20,
}}
/>
/>}
</div>
)
}

4
web/src/i18n/en.ts
View File

@@ -1982,6 +1982,10 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
arrange: 'Arrange',
redo: 'Redo',
undo: 'Undo',
input: 'Input',
output: 'Output',
error: 'Error Message',
},
emotionEngine: {
emotionEngineConfig: 'Emotion Engine Configuration',

4
web/src/i18n/zh.ts
View File

@@ -2076,6 +2076,10 @@ export const zh = {
arrange: '整理',
redo: '重做',
undo: '撤销',
input: '输入',
output: '输出',
error: '错误信息',
},
emotionEngine: {
emotionEngineConfig: '情感引擎配置',

14
web/src/utils/stream.ts
View File

@@ -123,6 +123,20 @@ export const handleSSE = async (url: string, data: any, onMessage?: (data: SSEMe
let response = await makeSSERequest(url, data, token || '', config);
switch (response.status) {
case 500:
case 502:
const errorData = await response.json();
errorData.error || i18n.t('common.serviceUpgrading');
message.warning(errorData.error || i18n.t('common.serviceUpgrading'));
break
case 400:
const error = await response.json();
message.warning(errorData.error);
throw error || 'Bad Request';
case 504:
const errorJson = await response.json();
message.warning(errorJson.error || i18n.t('common.serverError'));
break
case 401:
if (url?.includes('/public')) {
return message.warning(i18n.t('common.publicApiCannotRefreshToken'));

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

@@ -1,8 +1,9 @@
import { forwardRef, useImperativeHandle, useState, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import clsx from 'clsx'
import { Input, Form, App } from 'antd'
import { Space, Button } from 'antd'
import { Input, Form, App, Space, Button, Collapse } from 'antd'
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@ant-design/icons'
import CodeBlock from '@/components/Markdown/CodeBlock'
import ChatIcon from '@/assets/images/application/chat.png'
import RbDrawer from '@/components/RbDrawer';
@@ -13,8 +14,11 @@ import ChatContent from '@/components/Chat/ChatContent'
import type { ChatItem } from '@/components/Chat/types'
import ChatSendIcon from '@/assets/images/application/chatSend.svg'
import dayjs from 'dayjs'
import type { ChatRef, VariableConfigModalRef, StartVariableItem, GraphRef } from '../../types'
import type { ChatRef, VariableConfigModalRef, GraphRef } from '../../types'
import { type SSEMessage } from '@/utils/stream'
import type { Variable } from '../Properties/VariableList/types'
import styles from './chat.module.css'
import Markdown from '@/components/Markdown'
const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
const { t } = useTranslation()
@@ -24,7 +28,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
const [open, setOpen] = useState(false)
const [loading, setLoading] = useState(false)
const [chatList, setChatList] = useState<ChatItem[]>([])
const [variables, setVariables] = useState<StartVariableItem[]>([])
const [variables, setVariables] = useState<Variable[]>([])
const [streamLoading, setStreamLoading] = useState(false)
const [conversationId, setConversationId] = useState<string | null>(null)
@@ -39,7 +43,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
if (startNodes.length) {
const curVariables = startNodes[0].config.variables?.defaultValue
curVariables.forEach((vo: StartVariableItem) => {
curVariables.forEach((vo: Variable) => {
if (typeof vo.default !== 'undefined') {
vo.value = vo.default
}
@@ -60,7 +64,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
const handleEditVariables = () => {
variableConfigModalRef.current?.handleOpen(variables)
}
const handleSave = (values: StartVariableItem[]) => {
const handleSave = (values: Variable[]) => {
setVariables([...values])
}
const handleSend = () => {
@@ -97,13 +101,28 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
role: 'assistant',
content: '',
created_at: Date.now(),
subContent: [],
}])
const handleStreamMessage = (data: SSEMessage[]) => {
setStreamLoading(false)
data.forEach(item => {
const { chunk, conversation_id } = item.data as { chunk: string; conversation_id: string | null; };
const { chunk, conversation_id, node_id, input, output, error, elapsed_time, status } = item.data as {
chunk: string;
conversation_id: string | null;
node_id: string;
node_name?: string;
input?: any;
output?: any;
elapsed_time?: string;
error?: any;
state: Record<string, any>;
status?: 'completed' | 'failed'
};
const node = graphRef.current?.getNodes().find(n => n.id === node_id);
const { name, icon } = node?.getData() || {}
console.log('node', node?.getData())
switch(item.event) {
case 'message':
@@ -119,6 +138,66 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
return newList
})
break
case 'node_start':
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,
icon,
content: {},
}
} else {
newSubContent.push({
id: node_id,
node_id: node_id,
node_name: name,
icon,
content: {},
})
}
newList[lastIndex] = {
...newList[lastIndex],
subContent: newSubContent
}
}
return newList
})
break
case 'node_end':
case 'node_error':
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
})
break
case 'workflow_end':
setChatList(prev => {
const newList = [...prev]
@@ -126,6 +205,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
if (lastIndex >= 0) {
newList[lastIndex] = {
...newList[lastIndex],
status,
content: newList[lastIndex].content === '' ? null : newList[lastIndex].content
}
}
@@ -142,14 +222,31 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
}
form.setFieldValue('message', undefined)
setStreamLoading(true)
draftRun(appId, {
message: message,
variables: params,
stream: true,
conversation_id: conversationId
}, handleStreamMessage)
.catch((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)
})
}
// 暴露给父组件的方法
@@ -158,6 +255,11 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
handleClose
}));
const getStatus = (status?: string) => {
return status === 'completed' ? 'rb:text-[#369F21]' : status === 'failed' ? 'rb:text-[#FF5D34]' : 'rb:text-[#5B6167]'
}
console.log('chatList', chatList)
return (
<RbDrawer
title={<div className="rb:flex rb:items-center rb:gap-2.5">
@@ -173,10 +275,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
onClose={handleClose}
>
<ChatContent
classNames={{
'rb:mx-[16px] rb:pt-[24px] rb:h-[calc(100%-76px)]': true,
}}
classNames="rb:mx-[16px] rb:pt-[24px] rb:h-[calc(100%-76px)]"
contentClassNames="rb:max-w-[400px]!'"
empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
data={chatList}
@@ -184,6 +283,87 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
labelPosition="bottom"
labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
errorDesc={t('application.ReplyException')}
renderRuntime={(item, index) => {
return (
<div key={index} className="rb:w-100 rb:mb-2">
<Collapse
className={styles[item.status || 'default']}
items={[{
key: 0,
label: <div className={getStatus(item.status)}>
{item.status === 'completed' ? <CheckCircleFilled className="rb:mr-1" /> : item.status === 'failed' ? <CloseCircleFilled className="rb:mr-1" /> : <LoadingOutlined className="rb:mr-1" />}
{t('application.workflow')}
</div>,
className: styles.collapseItem,
children: (
Array.isArray(item.subContent)
? <Space size={8} direction="vertical" className="rb:w-full!">
{item.subContent?.map(vo => (
<Collapse
key={vo.node_id}
items={[{
key: vo.node_id,
label: <div className={clsx("rb:flex rb:justify-between rb:items-center", getStatus(vo.status))}>
<div className="rb:flex rb:items-center rb:gap-1 rb:flex-1">
{vo.icon && <img src={vo.icon} className="rb:size-4" />}
<div className="rb:wrap-break-word rb:line-clamp-1">{vo.node_name || vo.node_id}</div>
</div>
<span>
{typeof vo.elapsed_time == 'number' && <>{vo.elapsed_time?.toFixed(3)}ms</>}
{vo.status === 'completed' ? <CheckCircleFilled className="rb:ml-1" /> : vo.status === 'failed' ? <CloseCircleFilled className="rb:ml-1" /> : <LoadingOutlined className="rb:ml-1" />}
</span>
</div>,
className: styles.collapseItem,
children: (
<Space size={8} direction="vertical" className="rb:w-full!">
{vo.status === 'failed' &&
<div className={clsx("rb:bg-[#F0F3F8] rb:rounded-md", getStatus(vo.status))}>
<div className="rb:py-2 rb:px-3 rb:flex rb:justify-between rb:items-center rb:text-[12px]">
{t(`workflow.error`)}
<Button
className="rb:py-0! rb:px-1! rb:text-[12px]!"
size="small"
>{t('common.copy')}</Button>
</div>
<div className="rb:pb-2 rb:px-3 rb:max-h-40 rb:overflow-auto">
<Markdown content={vo.content?.error || ''} />
</div>
</div>
}
{['input', 'output'].map(key => (
<div key={key} className="rb:bg-[#F0F3F8] rb:rounded-md">
<div className="rb:py-2 rb:px-3 rb:flex rb:justify-between rb:items-center rb:text-[12px]">
{t(`workflow.${key}`)}
<Button
className="rb:py-0! rb:px-1! rb:text-[12px]!"
size="small"
>{t('common.copy')}</Button>
</div>
<div className="rb:max-h-40 rb:overflow-auto">
<CodeBlock
size="small"
value={typeof vo.content === 'object' && vo.content?.[key] ? JSON.stringify(vo.content[key], null, 2) : '{}'}
needCopy={false}
showLineNumbers={true}
/>
</div>
</div>
))}
</Space>
)
}]}
/>
))}
</Space>
: <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 ", getStatus('failed'))}>
<Markdown content={item.subContent || ''} />
</div>
)
}]}
/>
</div>
)
}}
/>
<div className="rb:flex rb:items-center rb:gap-2.5 rb:p-4">
<Form form={form} style={{width: 'calc(100% - 54px)'}}>

45
web/src/views/Workflow/components/Chat/chat.module.css Normal file
View File

@@ -0,0 +1,45 @@
.completed {
background-color: rgba(54, 159, 33, 0.06);
border-color: rgba(54, 159, 33, 0.25);
border-radius: 8px;
}
.failed {
background-color: rgba(255, 138, 76, 0.08);
border-color: rgba(255, 138, 76, 0.20);
border-radius: 8px;
}
.default {
background-color: rgba(91, 97, 103, 0.08);
border-color: rgba(91, 97, 103, 0.30);
border-radius: 8px;
}
.collapse-item {
font-size: 12px;
line-height: 16px;
}
.collapse-item:global(.ant-collapse-item>.ant-collapse-header) {
padding: 8px 12px;
}
.collapse-item:global(.ant-collapse-item>.ant-collapse-header .ant-collapse-expand-icon) {
height: 16px;
}
.completed:global(.ant-collapse .ant-collapse-content),
.failed:global(.ant-collapse .ant-collapse-content) {
background-color: transparent;
border-top: none;
}
:global(.ant-collapse .ant-collapse-content>.ant-collapse-content-box) {
padding-top: 0;
}
.collapse-item :global(.ant-collapse) {
/* background-color: #F0F3F8; */
background-color: #FBFDFF;
border-radius: 6px;
}
.collapse-item :global(.ant-collapse>.ant-collapse-item:last-child),
.collapse-item :global(.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header) {
border-radius: 0 0 6px 6px;
}
.collapse-item :global(.ant-collapse .ant-collapse-content>.ant-collapse-content-box) {
padding: 0 4px 4px 4px;
}