Joel 1a1bfd4048
feat: last run frontend (#21369)
The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>
2025-06-24 09:10:30 +08:00

175 lines
6.1 KiB
TypeScript

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiArrowRightSLine,
RiDeleteBinLine,
RiFileList3Line,
RiLoader2Line,
// RiErrorWarningFill,
} from '@remixicon/react'
// import Button from '@/app/components/base/button'
import ActionButton from '@/app/components/base/action-button'
import Tooltip from '@/app/components/base/tooltip'
import BlockIcon from '@/app/components/workflow/block-icon'
import {
BubbleX,
Env,
} from '@/app/components/base/icons/src/vender/line/others'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import type { currentVarType } from './panel'
import { VarInInspectType } from '@/types/workflow'
import type { NodeWithVar, VarInInspect } from '@/types/workflow'
import cn from '@/utils/classnames'
import { useToolIcon } from '../hooks'
type Props = {
nodeData?: NodeWithVar
currentVar?: currentVarType
varType: VarInInspectType
varList: VarInInspect[]
handleSelect: (state: any) => void
handleView?: () => void
handleClear?: () => void
}
const Group = ({
nodeData,
currentVar,
varType,
varList,
handleSelect,
handleView,
handleClear,
}: Props) => {
const { t } = useTranslation()
const [isCollapsed, setIsCollapsed] = useState(false)
const toolIcon = useToolIcon(nodeData?.nodePayload as any)
const isEnv = varType === VarInInspectType.environment
const isChatVar = varType === VarInInspectType.conversation
const isSystem = varType === VarInInspectType.system
const visibleVarList = isEnv ? varList : varList.filter(v => v.visible)
const handleSelectVar = (varItem: any, type?: string) => {
if (type === VarInInspectType.environment) {
handleSelect({
nodeId: VarInInspectType.environment,
title: VarInInspectType.environment,
nodeType: VarInInspectType.environment,
var: {
...varItem,
type: VarInInspectType.environment,
...(varItem.value_type === 'secret' ? { value: '******************' } : {}),
},
})
return
}
if (type === VarInInspectType.conversation) {
handleSelect({
nodeId: VarInInspectType.conversation,
nodeType: VarInInspectType.conversation,
title: VarInInspectType.conversation,
var: {
...varItem,
type: VarInInspectType.conversation,
},
})
return
}
if (type === VarInInspectType.system) {
handleSelect({
nodeId: VarInInspectType.system,
nodeType: VarInInspectType.system,
title: VarInInspectType.system,
var: {
...varItem,
type: VarInInspectType.system,
},
})
return
}
if (!nodeData) return
handleSelect({
nodeId: nodeData.nodeId,
nodeType: nodeData.nodeType,
title: nodeData.title,
var: varItem,
})
}
return (
<div className='p-0.5'>
{/* node item */}
<div className='group flex h-6 items-center gap-0.5'>
<div className='h-3 w-3 shrink-0'>
{nodeData?.isSingRunRunning && (
<RiLoader2Line className='h-3 w-3 animate-spin text-text-accent' />
)}
{(!nodeData || !nodeData.isSingRunRunning) && visibleVarList.length > 0 && (
<RiArrowRightSLine className={cn('h-3 w-3 text-text-tertiary', !isCollapsed && 'rotate-90')} onClick={() => setIsCollapsed(!isCollapsed)} />
)}
</div>
<div className='flex grow cursor-pointer items-center gap-1' onClick={() => setIsCollapsed(!isCollapsed)}>
{nodeData && (
<>
<BlockIcon
className='shrink-0'
type={nodeData.nodeType}
toolIcon={toolIcon || ''}
size='xs'
/>
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>{nodeData.title}</div>
</>
)}
{!nodeData && (
<div className='system-xs-medium-uppercase truncate text-text-tertiary'>
{isEnv && t('workflow.debug.variableInspect.envNode')}
{isChatVar && t('workflow.debug.variableInspect.chatNode')}
{isSystem && t('workflow.debug.variableInspect.systemNode')}
</div>
)}
</div>
{nodeData && !nodeData.isSingRunRunning && (
<div className='hidden shrink-0 items-center group-hover:flex'>
<Tooltip popupContent={t('workflow.debug.variableInspect.view')}>
<ActionButton onClick={handleView}>
<RiFileList3Line className='h-4 w-4' />
</ActionButton>
</Tooltip>
<Tooltip popupContent={t('workflow.debug.variableInspect.clearNode')}>
<ActionButton onClick={handleClear}>
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</Tooltip>
</div>
)}
</div>
{/* var item list */}
{!isCollapsed && !nodeData?.isSingRunRunning && (
<div className='px-0.5'>
{visibleVarList.length > 0 && visibleVarList.map(varItem => (
<div
key={varItem.id}
className={cn(
'relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover',
varItem.id === currentVar?.var?.id && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
)}
onClick={() => handleSelectVar(varItem, varType)}
>
{isEnv && <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />}
{isChatVar && <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />}
{(isSystem || nodeData) && <Variable02 className={cn('h-4 w-4 shrink-0 text-text-accent', ['error_type', 'error_message'].includes(varItem.name) && 'text-text-warning')} />}
<div className='system-sm-medium grow truncate text-text-secondary'>{varItem.name}</div>
<div className='system-xs-regular shrink-0 text-text-tertiary'>{varItem.value_type}</div>
</div>
))}
</div>
)}
</div>
)
}
export default Group