Chore: frontend infrastructure upgrade (#16420)

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

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>
)

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)

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>
</>

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>

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>