admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/components/workflow/run/agent-log/agent-log-item.tsx
View File

@@ -54,33 +54,33 @@ const AgentLogItem = ({
}, [status])
return (
<div className='bg-background-default border-[0.5px] border-components-panel-border rounded-[10px]'>
<div className='rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default'>
<div
className={cn(
'flex items-center pl-1.5 pt-2 pr-3 pb-2 cursor-pointer',
'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
expanded && 'pb-1',
)}
onClick={() => setExpanded(!expanded)}
>
{
expanded
? <RiArrowRightSLine className='shrink-0 w-4 h-4 rotate-90 text-text-quaternary' />
: <RiArrowRightSLine className='shrink-0 w-4 h-4 text-text-quaternary' />
? <RiArrowRightSLine className='h-4 w-4 shrink-0 rotate-90 text-text-quaternary' />
: <RiArrowRightSLine className='h-4 w-4 shrink-0 text-text-quaternary' />
}
<BlockIcon
className='shrink-0 mr-1.5'
className='mr-1.5 shrink-0'
type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
toolIcon={toolIcon}
/>
<div
className='grow system-sm-semibold-uppercase text-text-secondary truncate'
className='system-sm-semibold-uppercase grow truncate text-text-secondary'
title={label}
>
{label}
</div>
{
metadata?.elapsed_time && (
<div className='shrink-0 mr-2 system-xs-regular text-text-tertiary'>{metadata?.elapsed_time?.toFixed(3)}s</div>
<div className='system-xs-regular mr-2 shrink-0 text-text-tertiary'>{metadata?.elapsed_time?.toFixed(3)}s</div>
)
}
<NodeStatusIcon status={mergeStatus} />
@@ -91,16 +91,16 @@ const AgentLogItem = ({
{
!!children?.length && (
<Button
className='flex items-center justify-between mb-1 w-full'
className='mb-1 flex w-full items-center justify-between'
variant='tertiary'
onClick={() => onShowAgentOrToolLog(item)}
>
<div className='flex items-center'>
<RiListView className='mr-1 w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiListView className='mr-1 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
{`${children.length} Action Logs`}
</div>
<div className='flex'>
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
</div>
</Button>
)

8
web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
View File

@@ -30,19 +30,19 @@ const AgentLogNavMore = ({
>
<PortalToFollowElemTrigger>
<Button
className='w-6 h-6'
className='h-6 w-6'
variant='ghost-accent'
>
<RiMoreLine className='w-4 h-4' />
<RiMoreLine className='h-4 w-4' />
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-1 w-[136px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
<div className='w-[136px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
{
options.map(option => (
<div
key={option.id}
className='flex items-center px-2 h-8 rounded-lg system-md-regular text-text-secondary hover:bg-state-base-hover cursor-pointer'
className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover'
onClick={() => {
onShowAgentOrToolLog(option as AgentLogItemWithChildren)
setOpen(false)

14
web/app/components/workflow/run/agent-log/agent-log-nav.tsx
View File

@@ -19,7 +19,7 @@ const AgentLogNav = ({
const end = agentOrToolLogItemStack.at(-1)
return (
<div className='flex items-center p-1 pr-3 h-8 bg-components-panel-bg'>
<div className='flex h-8 items-center bg-components-panel-bg p-1 pr-3'>
<Button
className='shrink-0 px-[5px]'
size='small'
@@ -28,10 +28,10 @@ const AgentLogNav = ({
onShowAgentOrToolLog()
}}
>
<RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
<RiArrowLeftLine className='mr-1 h-3.5 w-3.5' />
AGENT
</Button>
<div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
{
agentOrToolLogItemStackLength > 1
? (
@@ -45,7 +45,7 @@ const AgentLogNav = ({
</Button>
)
: (
<div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
<div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
{t('workflow.nodes.agent.strategy.label')}
</div>
)
@@ -53,7 +53,7 @@ const AgentLogNav = ({
{
!!mid.length && (
<>
<div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
<AgentLogNavMore
options={mid}
onShowAgentOrToolLog={onShowAgentOrToolLog}
@@ -64,8 +64,8 @@ const AgentLogNav = ({
{
!!end && agentOrToolLogItemStackLength > 1 && (
<>
<div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
<div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
<div className='system-xs-regular mx-0.5 shrink-0 text-divider-deep'>/</div>
<div className='system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary'>
{end.label}
</div>
</>

12
web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
View File

@@ -19,27 +19,27 @@ const AgentLogTrigger = ({
return (
<div
className='bg-components-button-tertiary-bg rounded-[10px] cursor-pointer'
className='cursor-pointer rounded-[10px] bg-components-button-tertiary-bg'
onClick={() => {
onShowAgentOrToolLog({ id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
}}
>
<div className='flex items-center px-3 pt-2 system-2xs-medium-uppercase text-text-tertiary'>
<div className='system-2xs-medium-uppercase flex items-center px-3 pt-2 text-text-tertiary'>
{t('workflow.nodes.agent.strategy.label')}
</div>
<div className='flex items-center pl-3 pt-1 pr-2 pb-1.5'>
<div className='flex items-center pb-1.5 pl-3 pr-2 pt-1'>
{
agentStrategy && (
<div className='grow system-xs-medium text-text-secondary'>
<div className='system-xs-medium grow text-text-secondary'>
{agentStrategy}
</div>
)
}
<div
className='shrink-0 flex items-center px-[1px] system-xs-regular-uppercase text-text-tertiary cursor-pointer'
className='system-xs-regular-uppercase flex shrink-0 cursor-pointer items-center px-[1px] text-text-tertiary'
>
{t('runLog.detail')}
<RiArrowRightLine className='ml-0.5 w-3.5 h-3.5' />
<RiArrowRightLine className='ml-0.5 h-3.5 w-3.5' />
</div>
</div>
</div>

10
web/app/components/workflow/run/agent-log/agent-result-panel.tsx
View File

@@ -19,13 +19,13 @@ const AgentResultPanel = ({
const list = agentOrToolLogListMap[top.id]
return (
<div className='bg-background-section overflow-y-auto'>
<div className='overflow-y-auto bg-background-section'>
<AgentLogNav
agentOrToolLogItemStack={agentOrToolLogItemStack}
onShowAgentOrToolLog={onShowAgentOrToolLog}
/>
{
<div className='p-2 space-y-1'>
<div className='space-y-1 p-2'>
{
list.map(item => (
<AgentLogItem
@@ -39,14 +39,14 @@ const AgentResultPanel = ({
}
{
top.hasCircle && (
<div className='flex items-center mt-1 rounded-xl px-3 pr-2 border border-components-panel-border bg-components-panel-bg-blur shadow-md'>
<div className='mt-1 flex items-center rounded-xl border border-components-panel-border bg-components-panel-bg-blur px-3 pr-2 shadow-md'>
<div
className='absolute inset-0 opacity-[0.4] rounded-xl'
className='absolute inset-0 rounded-xl opacity-[0.4]'
style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)',
}}
></div>
<RiAlertFill className='mr-1.5 w-4 h-4 text-text-warning-secondary' />
<RiAlertFill className='mr-1.5 h-4 w-4 text-text-warning-secondary' />
<div className='system-xs-medium text-text-primary'>
{t('runLog.circularInvocationTip')}
</div>

12
web/app/components/workflow/run/index.tsx
View File

@@ -103,13 +103,13 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
}, [loading])
return (
<div className='grow relative flex flex-col'>
<div className='relative flex grow flex-col'>
{/* tab */}
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-subtle'>
<div className='flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4'>
{!hideResult && (
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
'system-sm-semibold-uppercase mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
currentTab === 'RESULT' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('RESULT')}
@@ -117,21 +117,21 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
)}
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
'system-sm-semibold-uppercase mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
currentTab === 'DETAIL' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('DETAIL')}
>{t('runLog.detail')}</div>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
'system-sm-semibold-uppercase mr-6 cursor-pointer border-b-2 border-transparent py-3 text-text-tertiary',
currentTab === 'TRACING' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
)}
onClick={() => switchTab('TRACING')}
>{t('runLog.tracing')}</div>
</div>
{/* panel detail */}
<div ref={ref} className={cn('relative grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl')}>
<div ref={ref} className={cn('relative h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg')}>
{loading && (
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
<Loading />

8
web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
View File

@@ -39,17 +39,17 @@ const IterationLogTrigger = ({
}
return (
<Button
className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
className='flex w-full cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-components-button-tertiary-bg-hover px-3 py-2 hover:bg-components-button-tertiary-bg-hover'
onClick={handleOnShowIterationDetail}
>
<Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
<Iteration className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<div className='system-sm-medium flex-1 text-left text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
<>
{t('workflow.nodes.iteration.comma')}
{t('workflow.nodes.iteration.error', { count: getErrorCount(nodeInfo.details) })}
</>
)}</div>
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
</Button>
)
}

30
web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
View File

@@ -48,10 +48,10 @@ const IterationResultPanel: FC<Props> = ({
const hasDurationMap = iterDurationMap && Object.keys(iterDurationMap).length !== 0
if (hasFailed)
return <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
return <RiErrorWarningLine className='h-4 w-4 text-text-destructive' />
if (isRunning)
return <RiLoader2Line className='w-3.5 h-3.5 text-primary-600 animate-spin' />
return <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-primary-600' />
return (
<>
@@ -62,8 +62,8 @@ const IterationResultPanel: FC<Props> = ({
)}
<RiArrowRightSLine
className={cn(
'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
expandedIterations[index] && 'transform rotate-90',
'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
expandedIterations[index] && 'rotate-90',
)}
/>
</>
@@ -73,40 +73,40 @@ const IterationResultPanel: FC<Props> = ({
return (
<div className='bg-components-panel-bg'>
<div
className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
className='flex h-8 cursor-pointer items-center border-b-[0.5px] border-b-divider-regular px-4 text-text-accent-secondary'
onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
onBack()
}}
>
<RiArrowLeftLine className='mr-1 w-4 h-4' />
<RiArrowLeftLine className='mr-1 h-4 w-4' />
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
</div>
{/* List */}
<div className='p-2 bg-components-panel-bg'>
<div className='bg-components-panel-bg p-2'>
{list.map((iteration, index) => (
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
<div
className={cn(
'flex items-center justify-between w-full px-3 cursor-pointer',
expandedIterations[index] ? 'pt-3 pb-2' : 'py-3',
'flex w-full cursor-pointer items-center justify-between px-3',
expandedIterations[index] ? 'pb-2 pt-3' : 'py-3',
'rounded-xl text-left',
)}
onClick={() => toggleIteration(index)}
>
<div className={cn('flex items-center gap-2 flex-grow')}>
<div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
<Iteration className='w-3 h-3 text-text-primary-on-surface' />
<div className={cn('flex grow items-center gap-2')}>
<div className='flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500'>
<Iteration className='h-3 w-3 text-text-primary-on-surface' />
</div>
<span className='system-sm-semibold-uppercase text-text-primary grow'>
<span className='system-sm-semibold-uppercase grow text-text-primary'>
{t(`${i18nPrefix}.iteration`)} {index + 1}
</span>
{iterationStatusShow(index, iteration, iterDurationMap)}
</div>
</div>
{expandedIterations[index] && <div
className="grow h-px bg-divider-subtle"
className="h-px grow bg-divider-subtle"
></div>}
<div className={cn(
'overflow-hidden transition-all duration-200',

8
web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
View File

@@ -39,17 +39,17 @@ const LoopLogTrigger = ({
}
return (
<Button
className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
className='flex w-full cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-components-button-tertiary-bg-hover px-3 py-2 hover:bg-components-button-tertiary-bg-hover'
onClick={handleOnShowLoopDetail}
>
<Loop className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.loop.loop', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.loop_length) })}{getErrorCount(nodeInfo.details) > 0 && (
<Loop className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
<div className='system-sm-medium flex-1 text-left text-components-button-tertiary-text'>{t('workflow.nodes.loop.loop', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.loop_length) })}{getErrorCount(nodeInfo.details) > 0 && (
<>
{t('workflow.nodes.loop.comma')}
{t('workflow.nodes.loop.error', { count: getErrorCount(nodeInfo.details) })}
</>
)}</div>
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
</Button>
)
}

30
web/app/components/workflow/run/loop-log/loop-result-panel.tsx
View File

@@ -50,10 +50,10 @@ const LoopResultPanel: FC<Props> = ({
const hasDurationMap = loopDurationMap && Object.keys(loopDurationMap).length !== 0
if (hasFailed)
return <RiErrorWarningLine className='w-4 h-4 text-text-destructive' />
return <RiErrorWarningLine className='h-4 w-4 text-text-destructive' />
if (isRunning)
return <RiLoader2Line className='w-3.5 h-3.5 text-primary-600 animate-spin' />
return <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-primary-600' />
return (
<>
@@ -64,8 +64,8 @@ const LoopResultPanel: FC<Props> = ({
)}
<RiArrowRightSLine
className={cn(
'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
expandedLoops[index] && 'transform rotate-90',
'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
expandedLoops[index] && 'rotate-90',
)}
/>
</>
@@ -75,40 +75,40 @@ const LoopResultPanel: FC<Props> = ({
return (
<div className='bg-components-panel-bg'>
<div
className='flex items-center px-4 h-8 text-text-accent-secondary cursor-pointer border-b-[0.5px] border-b-divider-regular'
className='flex h-8 cursor-pointer items-center border-b-[0.5px] border-b-divider-regular px-4 text-text-accent-secondary'
onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
onBack()
}}
>
<RiArrowLeftLine className='mr-1 w-4 h-4' />
<RiArrowLeftLine className='mr-1 h-4 w-4' />
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
</div>
{/* List */}
<div className='p-2 bg-components-panel-bg'>
<div className='bg-components-panel-bg p-2'>
{list.map((loop, index) => (
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
<div
className={cn(
'flex items-center justify-between w-full px-3 cursor-pointer',
expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
'flex w-full cursor-pointer items-center justify-between px-3',
expandedLoops[index] ? 'pb-2 pt-3' : 'py-3',
'rounded-xl text-left',
)}
onClick={() => toggleLoop(index)}
>
<div className={cn('flex items-center gap-2 flex-grow')}>
<div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
<Loop className='w-3 h-3 text-text-primary-on-surface' />
<div className={cn('flex grow items-center gap-2')}>
<div className='flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500'>
<Loop className='h-3 w-3 text-text-primary-on-surface' />
</div>
<span className='system-sm-semibold-uppercase text-text-primary grow'>
<span className='system-sm-semibold-uppercase grow text-text-primary'>
{t(`${i18nPrefix}.loop`)} {index + 1}
</span>
{loopStatusShow(index, loop, loopDurationMap)}
</div>
</div>
{expandedLoops[index] && <div
className="grow h-px bg-divider-subtle"
className="h-px grow bg-divider-subtle"
></div>}
<div className={cn(
'overflow-hidden transition-all duration-200',

36
web/app/components/workflow/run/loop-result-panel.tsx
View File

@@ -40,46 +40,46 @@ const LoopResultPanel: FC<Props> = ({
const main = (
<>
<div className={cn(!noWrap && 'shrink-0 ', 'px-4 pt-3')}>
<div className='shrink-0 flex justify-between items-center h-8'>
<div className='system-xl-semibold text-text-primary truncate'>
<div className='flex h-8 shrink-0 items-center justify-between'>
<div className='system-xl-semibold truncate text-text-primary'>
{t(`${i18nPrefix}.testRunLoop`)}
</div>
<div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='ml-2 shrink-0 cursor-pointer p-1' onClick={onHide}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
<div className='flex items-center py-2 space-x-1 text-text-accent-secondary cursor-pointer' onClick={onBack}>
<ArrowNarrowLeft className='w-4 h-4' />
<div className='flex cursor-pointer items-center space-x-1 py-2 text-text-accent-secondary' onClick={onBack}>
<ArrowNarrowLeft className='h-4 w-4' />
<div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
</div>
</div>
{/* List */}
<div className={cn(!noWrap ? 'flex-grow overflow-auto' : 'max-h-full', 'p-2 bg-components-panel-bg')}>
<div className={cn(!noWrap ? 'grow overflow-auto' : 'max-h-full', 'bg-components-panel-bg p-2')}>
{list.map((loop, index) => (
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl bg-background-section-burn border-none')}>
<div key={index} className={cn('mb-1 overflow-hidden rounded-xl border-none bg-background-section-burn')}>
<div
className={cn(
'flex items-center justify-between w-full px-3 cursor-pointer',
expandedLoops[index] ? 'pt-3 pb-2' : 'py-3',
'flex w-full cursor-pointer items-center justify-between px-3',
expandedLoops[index] ? 'pb-2 pt-3' : 'py-3',
'rounded-xl text-left',
)}
onClick={() => toggleLoop(index)}
>
<div className={cn('flex items-center gap-2 flex-grow')}>
<div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
<Loop className='w-3 h-3 text-text-primary-on-surface' />
<div className={cn('flex grow items-center gap-2')}>
<div className='flex h-4 w-4 shrink-0 items-center justify-center rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500'>
<Loop className='h-3 w-3 text-text-primary-on-surface' />
</div>
<span className='system-sm-semibold-uppercase text-text-primary grow'>
<span className='system-sm-semibold-uppercase grow text-text-primary'>
{t(`${i18nPrefix}.loop`)} {index + 1}
</span>
<RiArrowRightSLine className={cn(
'w-4 h-4 text-text-tertiary transition-transform duration-200 flex-shrink-0',
expandedLoops[index] && 'transform rotate-90',
'h-4 w-4 shrink-0 text-text-tertiary transition-transform duration-200',
expandedLoops[index] && 'rotate-90',
)} />
</div>
</div>
{expandedLoops[index] && <div
className="grow h-px bg-divider-subtle"
className="h-px grow bg-divider-subtle"
></div>}
<div className={cn(
'overflow-hidden transition-all duration-200',
@@ -113,7 +113,7 @@ const LoopResultPanel: FC<Props> = ({
}}
onClick={handleNotBubble}
>
<div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
<div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
{main}
</div>
</div >

38
web/app/components/workflow/run/meta.tsx
View File

@@ -27,13 +27,13 @@ const MetaData: FC<Props> = ({
return (
<div className='relative'>
<div className='h-6 py-1 text-text-tertiary system-xs-medium-uppercase'>{t('runLog.meta.title')}</div>
<div className='system-xs-medium-uppercase h-6 py-1 text-text-tertiary'>{t('runLog.meta.title')}</div>
<div className='py-1'>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.status')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.status')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-16 h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-16 rounded-sm bg-text-quaternary'/>
)}
{status === 'succeeded' && (
<span>SUCCESS</span>
@@ -53,10 +53,10 @@ const MetaData: FC<Props> = ({
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.executor')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.executor')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-[88px] h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-[88px] rounded-sm bg-text-quaternary'/>
)}
{status !== 'running' && (
<span>{executor || 'N/A'}</span>
@@ -64,10 +64,10 @@ const MetaData: FC<Props> = ({
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.startTime')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.startTime')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-[72px] rounded-sm bg-text-quaternary'/>
)}
{status !== 'running' && (
<span>{startTime ? formatTime(startTime, t('appLog.dateTimeFormat') as string) : '-'}</span>
@@ -75,10 +75,10 @@ const MetaData: FC<Props> = ({
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.time')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.time')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-[72px] rounded-sm bg-text-quaternary'/>
)}
{status !== 'running' && (
<span>{time ? `${time.toFixed(3)}s` : '-'}</span>
@@ -86,10 +86,10 @@ const MetaData: FC<Props> = ({
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.tokens')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.tokens')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-[48px] h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-[48px] rounded-sm bg-text-quaternary'/>
)}
{status !== 'running' && (
<span>{`${tokens || 0} Tokens`}</span>
@@ -98,10 +98,10 @@ const MetaData: FC<Props> = ({
</div>
{showSteps && (
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.steps')}</div>
<div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
<div className='system-xs-regular w-[104px] shrink-0 truncate px-2 py-1.5 text-text-tertiary'>{t('runLog.meta.steps')}</div>
<div className='system-xs-regular grow px-2 py-1.5 text-text-secondary'>
{status === 'running' && (
<div className='my-1 w-[24px] h-2 rounded-sm bg-text-quaternary'/>
<div className='my-1 h-2 w-[24px] rounded-sm bg-text-quaternary'/>
)}
{status !== 'running' && (
<span>{steps}</span>

24
web/app/components/workflow/run/node.tsx
View File

@@ -92,10 +92,10 @@ const NodePanel: FC<Props> = ({
return (
<div className={cn('px-2 py-1', className)}>
<div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadow-xs hover:shadow-md'>
<div className='group rounded-[10px] border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md'>
<div
className={cn(
'flex items-center pl-1 pr-3 cursor-pointer',
'flex cursor-pointer items-center pl-1 pr-3',
hideInfo ? 'py-2 pl-2' : 'py-1.5',
!collapseState && (hideInfo ? '!pb-1' : '!pb-1.5'),
)}
@@ -104,35 +104,35 @@ const NodePanel: FC<Props> = ({
{!hideProcessDetail && (
<RiArrowRightSLine
className={cn(
'shrink-0 w-4 h-4 mr-1 text-text-quaternary transition-all group-hover:text-text-tertiary',
'mr-1 h-4 w-4 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
!collapseState && 'rotate-90',
)}
/>
)}
<BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
<BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('mr-2 shrink-0', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
<div className={cn(
'grow text-text-secondary system-xs-semibold-uppercase truncate',
'system-xs-semibold-uppercase grow truncate text-text-secondary',
hideInfo && '!text-xs',
)} title={nodeInfo.title}>{nodeInfo.title}</div>
{nodeInfo.status !== 'running' && !hideInfo && (
<div className='shrink-0 text-text-tertiary system-xs-regular'>{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}{`${getTime(nodeInfo.elapsed_time || 0)}`}</div>
<div className='system-xs-regular shrink-0 text-text-tertiary'>{nodeInfo.execution_metadata?.total_tokens ? `${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens · ` : ''}{`${getTime(nodeInfo.elapsed_time || 0)}`}</div>
)}
{nodeInfo.status === 'succeeded' && (
<RiCheckboxCircleFill className='shrink-0 ml-2 w-3.5 h-3.5 text-text-success' />
<RiCheckboxCircleFill className='ml-2 h-3.5 w-3.5 shrink-0 text-text-success' />
)}
{nodeInfo.status === 'failed' && (
<RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-text-warning' />
<RiErrorWarningLine className='ml-2 h-3.5 w-3.5 shrink-0 text-text-warning' />
)}
{nodeInfo.status === 'stopped' && (
<RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
)}
{nodeInfo.status === 'exception' && (
<RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
<RiAlertFill className={cn('ml-2 h-4 w-4 shrink-0 text-text-warning-secondary', inMessage && 'h-3.5 w-3.5')} />
)}
{nodeInfo.status === 'running' && (
<div className='shrink-0 flex items-center text-text-accent text-[13px] leading-[16px] font-medium'>
<div className='flex shrink-0 items-center text-[13px] font-medium leading-[16px] text-text-accent'>
<span className='mr-2 text-xs font-normal'>Running</span>
<RiLoader2Line className='w-3.5 h-3.5 animate-spin' />
<RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
</div>
)}
</div>

2
web/app/components/workflow/run/output-panel.tsx
View File

@@ -56,7 +56,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
return (
<div className='p-2'>
{isRunning && (
<div className='pt-4 pl-[26px]'>
<div className='pl-[26px] pt-4'>
<LoadingAnim type='text' />
</div>
)}

4
web/app/components/workflow/run/result-panel.tsx
View File

@@ -111,7 +111,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
)
}
</div>
<div className='px-4 py-2 flex flex-col gap-2'>
<div className='flex flex-col gap-2 px-4 py-2'>
<CodeEditor
readOnly
title={<div>{t('workflow.common.input').toLocaleUpperCase()}</div>}
@@ -140,7 +140,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
)}
</div>
<div className='px-4 py-2'>
<div className='h-[0.5px] divider-subtle' />
<div className='divider-subtle h-[0.5px]' />
</div>
<div className='px-4 py-2'>
<MetaData

10
web/app/components/workflow/run/result-text.tsx
View File

@@ -7,7 +7,7 @@ import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { FileList } from '@/app/components/base/file-uploader'
interface ResultTextProps {
type ResultTextProps = {
isRunning?: boolean
outputs?: any
error?: string
@@ -26,7 +26,7 @@ const ResultText: FC<ResultTextProps> = ({
return (
<div className='bg-background-section-burn'>
{isRunning && !outputs && (
<div className='pt-4 pl-[26px]'>
<div className='pl-[26px] pt-4'>
<LoadingAnim type='text' />
</div>
)}
@@ -38,8 +38,8 @@ const ResultText: FC<ResultTextProps> = ({
</div>
)}
{!isRunning && !outputs && !error && !allFiles?.length && (
<div className='mt-[120px] px-4 py-2 flex flex-col items-center text-[13px] leading-[18px] text-gray-500'>
<ImageIndentLeft className='w-6 h-6 text-gray-400' />
<div className='mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500'>
<ImageIndentLeft className='h-6 w-6 text-gray-400' />
<div className='mr-2'>{t('runLog.resultEmpty.title')}</div>
<div>
{t('runLog.resultEmpty.tipLeft')}
@@ -56,7 +56,7 @@ const ResultText: FC<ResultTextProps> = ({
</div>
)}
{!!allFiles?.length && allFiles.map(item => (
<div key={item.varName} className='px-4 py-2 flex flex-col gap-1 system-xs-regular'>
<div key={item.varName} className='system-xs-regular flex flex-col gap-1 px-4 py-2'>
<div className='py-1 text-text-tertiary '>{item.varName}</div>
<FileList
files={item.list}

6
web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
View File

@@ -25,15 +25,15 @@ const RetryLogTrigger = ({
return (
<Button
className='flex items-center justify-between mb-1 w-full'
className='mb-1 flex w-full items-center justify-between'
variant='tertiary'
onClick={handleShowRetryResultList}
>
<div className='flex items-center'>
<RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiRestartFill className='mr-0.5 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
{t('workflow.nodes.common.retry.retries', { num: retryDetail?.length })}
</div>
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
<RiArrowRightSLine className='h-4 w-4 shrink-0 text-components-button-tertiary-text' />
</Button>
)
}

4
web/app/components/workflow/run/retry-log/retry-result-panel.tsx
View File

@@ -23,14 +23,14 @@ const RetryResultPanel: FC<Props> = ({
return (
<div>
<div
className='flex items-center px-4 h-8 text-text-accent-secondary bg-components-panel-bg system-sm-medium cursor-pointer'
className='system-sm-medium flex h-8 cursor-pointer items-center bg-components-panel-bg px-4 text-text-accent-secondary'
onClick={(e) => {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
onBack()
}}
>
<RiArrowLeftLine className='mr-1 w-4 h-4' />
<RiArrowLeftLine className='mr-1 h-4 w-4' />
{t('workflow.singleRun.back')}
</div>
<TracingPanel

4
web/app/components/workflow/run/status-container.tsx
View File

@@ -17,7 +17,7 @@ const StatusContainer: FC<Props> = ({
return (
<div
className={cn(
'relative px-3 py-2.5 rounded-lg border system-xs-regular break-all',
'system-xs-regular relative break-all rounded-lg border px-3 py-2.5',
status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] text-text-success',
status === 'succeeded' && theme === Theme.light && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)]',
status === 'succeeded' && theme === Theme.dark && 'shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.12),inset_0_1px_3px_0_rgba(0,0,0,0.4),inset_0_2px_24px_0_rgba(23,178,106,0.25),0_1px_2px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(24, 24, 27, 0.95)]',
@@ -39,7 +39,7 @@ const StatusContainer: FC<Props> = ({
)}
>
<div className={cn(
'absolute top-0 left-0 w-[65%] h-[50px] bg-no-repeat',
'absolute left-0 top-0 h-[50px] w-[65%] bg-no-repeat',
theme === Theme.light && 'bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]',
theme === Theme.dark && 'bg-[url(~@/app/components/workflow/run/assets/highlight-dark.svg)]',
)}></div>

20
web/app/components/workflow/run/status.tsx
View File

@@ -26,13 +26,13 @@ const StatusPanel: FC<ResultProps> = ({
<StatusContainer status={status}>
<div className='flex'>
<div className={cn(
'flex-[33%] max-w-[120px]',
'max-w-[120px] flex-[33%]',
status === 'partial-succeeded' && 'min-w-[140px]',
)}>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.status')}</div>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.status')}</div>
<div
className={cn(
'flex items-center gap-1 system-xs-semibold-uppercase',
'system-xs-semibold-uppercase flex items-center gap-1',
status === 'succeeded' && 'text-util-colors-green-green-600',
status === 'partial-succeeded' && 'text-util-colors-green-green-600',
status === 'failed' && 'text-util-colors-red-red-600',
@@ -78,11 +78,11 @@ const StatusPanel: FC<ResultProps> = ({
)}
</div>
</div>
<div className='flex-[33%] max-w-[152px]'>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
<div className='max-w-[152px] flex-[33%]'>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.time')}</div>
<div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
{status === 'running' && (
<div className='w-16 h-2 rounded-sm bg-text-quaternary' />
<div className='h-2 w-16 rounded-sm bg-text-quaternary' />
)}
{status !== 'running' && (
<span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
@@ -90,10 +90,10 @@ const StatusPanel: FC<ResultProps> = ({
</div>
</div>
<div className='flex-[33%]'>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('runLog.resultPanel.tokens')}</div>
<div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
{status === 'running' && (
<div className='w-20 h-2 rounded-sm bg-text-quaternary' />
<div className='h-2 w-20 rounded-sm bg-text-quaternary' />
)}
{status !== 'running' && (
<span>{`${tokens || 0} Tokens`}</span>

16
web/app/components/workflow/run/tracing-panel.tsx
View File

@@ -102,12 +102,12 @@ const TracingPanel: FC<TracingPanelProps> = ({
return (
<div
key={node.id}
className="ml-4 mb-2 relative"
className="relative mb-2 ml-4"
data-parallel-id={node.id}
onMouseEnter={() => handleParallelMouseEnter(node.id)}
onMouseLeave={handleParallelMouseLeave}
>
<div className="flex items-center mb-1">
<div className="mb-1 flex items-center">
<button
onClick={() => toggleCollapse(node.id)}
className={cn(
@@ -115,19 +115,19 @@ const TracingPanel: FC<TracingPanelProps> = ({
isHovered ? 'rounded border-components-button-primary-border bg-components-button-primary-bg text-text-primary-on-surface' : 'text-text-secondary hover:text-text-primary',
)}
>
{isHovered ? <RiArrowDownSLine className="w-3 h-3" /> : <RiMenu4Line className="w-3 h-3 text-text-tertiary" />}
{isHovered ? <RiArrowDownSLine className="h-3 w-3" /> : <RiMenu4Line className="h-3 w-3 text-text-tertiary" />}
</button>
<div className="system-xs-semibold-uppercase text-text-secondary flex items-center">
<div className="system-xs-semibold-uppercase flex items-center text-text-secondary">
<span>{parallelDetail.parallelTitle}</span>
</div>
<div
className="mx-2 grow h-px bg-divider-subtle"
className="mx-2 h-px grow bg-divider-subtle"
style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
></div>
</div>
<div className={`pl-2 relative ${isCollapsed ? 'hidden' : ''}`}>
<div className={`relative pl-2 ${isCollapsed ? 'hidden' : ''}`}>
<div className={cn(
'absolute top-0 bottom-0 left-[5px] w-[2px]',
'absolute bottom-0 left-[5px] top-0 w-[2px]',
isHovered ? 'bg-text-accent-secondary' : 'bg-divider-subtle',
)}></div>
{parallelDetail.children!.map(renderNode)}
@@ -139,7 +139,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
const isHovered = hoveredParallel === node.id
return (
<div key={node.id}>
<div className={cn('pl-4 -mb-1.5 system-2xs-medium-uppercase', isHovered ? 'text-text-tertiary' : 'text-text-quaternary')}>
<div className={cn('system-2xs-medium-uppercase -mb-1.5 pl-4', isHovered ? 'text-text-tertiary' : 'text-text-quaternary')}>
{node?.parallelDetail?.branchTitle}
</div>
<NodePanel