feat(web): workflow run time ui
This commit is contained in:
zhaoying
@@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-02 15:15:11
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-02-02 15:15:11
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-04-07 14:04:33
|
||||
*/
|
||||
/**
|
||||
* CodeBlock Component
|
||||
@@ -27,6 +27,7 @@ type ICodeBlockProps = {
|
||||
needCopy?: boolean;
|
||||
size?: 'small' | 'default';
|
||||
showLineNumbers?: boolean;
|
||||
background?: string;
|
||||
}
|
||||
|
||||
/** Code block component for displaying formatted code with optional copy functionality */
|
||||
@@ -34,7 +35,8 @@ const CodeBlock: FC<ICodeBlockProps> = ({
|
||||
value,
|
||||
needCopy = true,
|
||||
size = 'default',
|
||||
showLineNumbers = false
|
||||
showLineNumbers = false,
|
||||
background = '#F0F3F8'
|
||||
}) => {
|
||||
|
||||
return (
|
||||
@@ -43,7 +45,7 @@ const CodeBlock: FC<ICodeBlockProps> = ({
|
||||
style={atelierHeathLight}
|
||||
customStyle={{
|
||||
padding: '8px 12px 8px 12px',
|
||||
backgroundColor: '#F0F3F8',
|
||||
backgroundColor: background,
|
||||
borderRadius: 8,
|
||||
fontSize: size === 'small' ? 12 : 14,
|
||||
wordBreak: 'break-all'
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: ZhaoYing
|
||||
* @Date: 2026-02-24 17:57:08
|
||||
* @Last Modified by: ZhaoYing
|
||||
* @Last Modified time: 2026-03-12 13:39:24
|
||||
* @Last Modified time: 2026-04-07 14:05:50
|
||||
*/
|
||||
/*
|
||||
* Runtime Component
|
||||
@@ -18,13 +18,15 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import clsx from 'clsx'
|
||||
import { Space, Button, Collapse, Flex } from 'antd'
|
||||
import { App, Button, Collapse, Flex } from 'antd'
|
||||
import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined, RightOutlined, ArrowLeftOutlined } from '@ant-design/icons'
|
||||
import copy from 'copy-to-clipboard'
|
||||
|
||||
import styles from './chat.module.css'
|
||||
import type { ChatItem } from '@/components/Chat/types'
|
||||
import Markdown from '@/components/Markdown'
|
||||
import CodeBlock from '@/components/Markdown/CodeBlock'
|
||||
import RbAlert from '@/components/RbAlert'
|
||||
|
||||
/**
|
||||
* Runtime component props
|
||||
@@ -36,10 +38,12 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
index
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { message } = App.useApp()
|
||||
// Stores the currently selected detail view (for nested loop/iteration exploration)
|
||||
const [detail, setDetail] = useState<any>(null)
|
||||
// Tracks whether the current detail view is for a loop (true) or iteration (false)
|
||||
const [loop, setLoop] = useState<boolean | null>(null)
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
/**
|
||||
* Handles navigation into nested loop/iteration details
|
||||
@@ -57,7 +61,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
* @returns Tailwind CSS class for appropriate color
|
||||
*/
|
||||
const getStatus = (status?: string) => {
|
||||
return status === 'completed' ? 'rb:text-[#369F21]' : status === 'failed' ? 'rb:text-[#FF5D34]' : 'rb:text-[#5B6167]'
|
||||
return status === 'completed' ? 'rb:text-[#369F21]!' : status === 'failed' ? 'rb:text-[#FF5D34]!' : 'rb:text-[#5B6167]!'
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -76,7 +80,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
|
||||
|
||||
return (
|
||||
<Space size={8} direction="vertical" className="rb:w-full!">
|
||||
<Flex gap={8} vertical>
|
||||
{Object.entries(groupedByCycle).map(([cycleIdx, items]: [string, any]) => {
|
||||
return (
|
||||
<Collapse
|
||||
@@ -92,7 +96,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Space>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -103,7 +107,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
*/
|
||||
const renderChild = (list: any) => {
|
||||
if (Array.isArray(list)) {
|
||||
return <Space size={8} direction="vertical" className="rb:w-full!">
|
||||
return <Flex gap={8} vertical>
|
||||
{list?.map(vo => {
|
||||
const isLoop = vo.node_type === 'loop';
|
||||
// Render cycle variables for loop nodes without node_name
|
||||
@@ -114,6 +118,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
<Button
|
||||
className="rb:py-0! rb:px-1! rb:text-[12px]!"
|
||||
size="small"
|
||||
onClick={() => handleCopy(typeof vo.content === 'object' && vo.content?.input ? JSON.stringify(vo.content.input, null, 2) : '{}')}
|
||||
>{t('common.copy')}</Button>
|
||||
</div>
|
||||
<div className="rb:max-h-40 rb:overflow-auto">
|
||||
@@ -133,35 +138,44 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
return (
|
||||
<Collapse
|
||||
key={vo.node_id}
|
||||
bordered={false}
|
||||
className="rb:bg-[#F6F6F6]"
|
||||
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 && <div className={`rb:size-4 rb:bg-cover ${vo.icon}`} />}
|
||||
<div className="rb:wrap-break-word rb:line-clamp-1">{vo.node_name}</div>
|
||||
</div>
|
||||
<span>
|
||||
label: <div className={clsx("rb:flex rb:justify-between rb:items-center")}>
|
||||
<Flex gap={6} align="center" className="rb:flex-1!">
|
||||
{vo.icon && <div className={`rb:size-6 rb:bg-cover ${vo.icon}`} />}
|
||||
<div className="rb:wrap-break-word rb:line-clamp-1 rb:font-medium">{vo.node_name}</div>
|
||||
</Flex>
|
||||
<Flex align="center" gap={8} className="rb:text-[12px]">
|
||||
{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>
|
||||
{vo.status === 'completed'
|
||||
? <CheckCircleFilled className={`rb:mr-1 ${getStatus(vo.status)}`} />
|
||||
: vo.status === 'failed'
|
||||
? <CloseCircleFilled className={`rb:mr-1 ${getStatus(vo.status)}`} />
|
||||
: <LoadingOutlined className={`rb:mr-1 ${getStatus(vo.status)}`} />
|
||||
}
|
||||
</Flex>
|
||||
</div>,
|
||||
className: styles.collapseItem,
|
||||
children: (
|
||||
<Space size={8} direction="vertical" className="rb:w-full!">
|
||||
<Flex gap={8} vertical>
|
||||
{/* Display error message for failed nodes */}
|
||||
{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">
|
||||
|
||||
{item.error &&
|
||||
<RbAlert color="orange" className="rb:pb-0!">
|
||||
<Flex vertical className="rb:w-full!">
|
||||
<Flex align="center" justify="space-between">
|
||||
{t(`workflow.error`)}
|
||||
<Button
|
||||
className="rb:py-0! rb:px-1! rb:text-[12px]!"
|
||||
size="small"
|
||||
onClick={() => handleCopy(vo.content?.error || '')}
|
||||
>{t('common.copy')}</Button>
|
||||
</Flex>
|
||||
<Markdown content={vo.content?.error || ''} />
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</RbAlert>
|
||||
}
|
||||
{/* Display navigation to nested cycles if subContent exists */}
|
||||
{vo.subContent?.length > 0 && (
|
||||
@@ -172,12 +186,13 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
)}
|
||||
{/* Display input and output data as JSON code blocks */}
|
||||
{['input', 'output'].map(key => (
|
||||
<div key={key} className="rb:bg-[#F0F3F8] rb:rounded-md">
|
||||
<div key={key} className="rb:bg-[#EBEBEB] rb:rounded-lg">
|
||||
<div className="rb:py-2 rb:px-3 rb:flex rb:justify-between rb:items-center rb:text-[12px]">
|
||||
{isLoop ? t(`workflow.runtime.${key}_cycle_vars`) : t(`workflow.${key}`)}
|
||||
<Button
|
||||
className="rb:py-0! rb:px-1! rb:text-[12px]!"
|
||||
size="small"
|
||||
onClick={() => handleCopy(typeof vo.content === 'object' && vo.content?.[key] ? JSON.stringify(vo.content[key], null, 2) : '{}')}
|
||||
>{t('common.copy')}</Button>
|
||||
</div>
|
||||
<div className="rb:max-h-40 rb:overflow-auto">
|
||||
@@ -186,55 +201,80 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
|
||||
value={typeof vo.content === 'object' && vo.content?.[key] ? JSON.stringify(vo.content[key], null, 2) : '{}'}
|
||||
needCopy={false}
|
||||
showLineNumbers={true}
|
||||
background="#EBEBEB"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Space>
|
||||
</Flex>
|
||||
)
|
||||
}]}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Space>
|
||||
</Flex>
|
||||
}
|
||||
return <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 ", getStatus('failed'))}>
|
||||
<Markdown content={list || ''} />
|
||||
</div>
|
||||
}
|
||||
|
||||
/** Copy value to clipboard and show success message */
|
||||
const handleCopy = (value: string) => {
|
||||
copy(value)
|
||||
message.success(t('common.copySuccess'))
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={index} className="rb:min-w-100 rb:max-w-full 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: (
|
||||
detail
|
||||
? (
|
||||
<div className="rb:bg-[#FBFDFF] rb:rounded-md">
|
||||
<Button type="link" icon={<ArrowLeftOutlined />} onClick={() => setDetail(null)} className="rb:px-0! rb:text-[12px]!">
|
||||
{t('common.return')}
|
||||
</Button>
|
||||
{renderDetailChild(detail.subContent)}
|
||||
</div>
|
||||
)
|
||||
: <>
|
||||
{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
|
||||
key={index}
|
||||
className={clsx("rb:mb-4 rb-border rb:rounded-xl rb:px-4 rb:pt-3 rb:bg-white rb:max-w-full", {
|
||||
'rb:hover:bg-[#F6F6F6] rb:w-64': !expanded
|
||||
})}
|
||||
>
|
||||
<Flex align="center" justify="space-between" className="rb:font-medium rb:pb-3!">
|
||||
<span className="rb:font-medium rb:leading-5">
|
||||
{item.status === 'completed'
|
||||
? <CheckCircleFilled className={`rb:mr-1 ${getStatus(item.status)}`} />
|
||||
: item.status === 'failed'
|
||||
? <CloseCircleFilled className={`rb:mr-1 ${getStatus(item.status)}`} />
|
||||
: <LoadingOutlined className={`rb:mr-1 ${getStatus(item.status)}`} />
|
||||
}
|
||||
{t('application.workflow')}
|
||||
</span>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
className={clsx("rb:size-6.5 rb:cursor-pointer rb-border rb:rounded-lg", {
|
||||
'rb:hover:bg-[#F6F6F6]!': expanded
|
||||
})}
|
||||
onClick={() => { setExpanded(v => !v); setDetail(null) }}
|
||||
>
|
||||
<div
|
||||
className={clsx("rb:size-4 rb:bg-cover", {
|
||||
'rb:bg-[url("@/assets/images/conversation/compress.svg")]': expanded,
|
||||
'rb:bg-[url("@/assets/images/conversation/expand.svg")]': !expanded
|
||||
})}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
{expanded && (
|
||||
detail
|
||||
? (
|
||||
<div className="rb:bg-[#FBFDFF] rb:rounded-md rb:mb-4">
|
||||
<Button type="link" icon={<ArrowLeftOutlined />} onClick={() => setDetail(null)} className="rb:px-0! rb:text-[12px]!">
|
||||
{t('common.return')}
|
||||
</Button>
|
||||
{renderDetailChild(detail.subContent)}
|
||||
</div>
|
||||
)
|
||||
}]}
|
||||
/>
|
||||
: <div className="rb:mb-4">
|
||||
{item.error &&
|
||||
<RbAlert color="orange" className="rb:pb-0! rb:mb-2!"><Markdown content={item.error} /></RbAlert>
|
||||
}
|
||||
{renderChild(item.subContent)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
line-height: 16px;
|
||||
}
|
||||
.collapse-item:global(.ant-collapse-item>.ant-collapse-header) {
|
||||
padding: 8px 12px;
|
||||
padding: 8px 16px 8px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.collapse-item:global(.ant-collapse-item>.ant-collapse-header .ant-collapse-expand-icon) {
|
||||
height: 16px;
|
||||
@@ -45,4 +47,7 @@
|
||||
}
|
||||
.collapse-item :global(.ant-collapse .ant-collapse-content>.ant-collapse-content-box) {
|
||||
padding: 0 4px 4px 4px;
|
||||
}
|
||||
:global(.ant-collapse-borderless)>.collapse-item:global(.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box) {
|
||||
padding: 0 12px 12px 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user