mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-19 03:25:54 +08:00
new style of workflow process
This commit is contained in:
JzoNg
parent
a6999b5d02
commit
16acdc9be4
@ -307,7 +307,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
|
||||
<div className={`flex ${contentClassName}`}>
|
||||
<div className='grow w-0'>
|
||||
{siteInfo && siteInfo.show_workflow_steps && workflowProcessData && (
|
||||
<WorkflowProcessItem grayBg hideInfo data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} />
|
||||
<WorkflowProcessItem grayBg data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} />
|
||||
)}
|
||||
{workflowProcessData && !isError && (
|
||||
<ResultTab data={workflowProcessData} content={content} currentTab={currentTab} onCurrentTabChange={setCurrentTab} />
|
||||
|
||||
@ -13,7 +13,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='grow relative flex flex-col py-3'>
|
||||
<div className='grow relative flex flex-col pt-3'>
|
||||
<span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onClose}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</span>
|
||||
|
||||
@ -140,7 +140,6 @@ const Answer: FC<AnswerProps> = ({
|
||||
<WorkflowProcess
|
||||
data={workflowProcess}
|
||||
item={item}
|
||||
hideInfo
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
/>
|
||||
)
|
||||
@ -151,7 +150,6 @@ const Answer: FC<AnswerProps> = ({
|
||||
<WorkflowProcess
|
||||
data={workflowProcess}
|
||||
item={item}
|
||||
hideInfo
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -20,17 +20,13 @@ import { useStore as useAppStore } from '@/app/components/app/store'
|
||||
type WorkflowProcessProps = {
|
||||
data: WorkflowProcess
|
||||
item?: ChatItem
|
||||
grayBg?: boolean
|
||||
expand?: boolean
|
||||
hideInfo?: boolean
|
||||
hideProcessDetail?: boolean
|
||||
}
|
||||
const WorkflowProcessItem = ({
|
||||
data,
|
||||
item,
|
||||
grayBg,
|
||||
expand = false,
|
||||
hideInfo = false,
|
||||
hideProcessDetail = false,
|
||||
}: WorkflowProcessProps) => {
|
||||
const { t } = useTranslation()
|
||||
@ -40,6 +36,8 @@ const WorkflowProcessItem = ({
|
||||
const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
|
||||
|
||||
const background = useMemo(() => {
|
||||
if (collapse)
|
||||
return 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)'
|
||||
if (running && !collapse)
|
||||
return 'linear-gradient(180deg, #E1E4EA 0%, #EAECF0 100%)'
|
||||
|
||||
@ -67,41 +65,36 @@ const WorkflowProcessItem = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-2 rounded-xl border-[0.5px] border-components-panel-border',
|
||||
collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
|
||||
collapse && (!grayBg ? 'bg-components-panel-bg' : 'bg-background-section-burn'),
|
||||
hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
|
||||
'-mx-1 px-2.5 rounded-xl border-[0.5px]',
|
||||
collapse ? 'py-[7px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-components-panel-border-subtle',
|
||||
)}
|
||||
style={{
|
||||
background,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center h-[18px] cursor-pointer',
|
||||
hideInfo && 'px-[6px]',
|
||||
)}
|
||||
className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5')}
|
||||
onClick={() => setCollapse(!collapse)}
|
||||
>
|
||||
{
|
||||
running && (
|
||||
<RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-text-accent animate-spin' />
|
||||
<RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 text-text-tertiary' />
|
||||
)
|
||||
}
|
||||
{
|
||||
succeeded && (
|
||||
<CheckCircle className='shrink-0 mr-1 w-3 h-3 text-text-success' />
|
||||
<CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
|
||||
)
|
||||
}
|
||||
{
|
||||
failed && (
|
||||
<RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-text-destructive' />
|
||||
<RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
|
||||
)
|
||||
}
|
||||
<div className='grow text-xs font-medium text-text-secondary'>
|
||||
<div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
|
||||
{t('workflow.common.workflowProcess')}
|
||||
</div>
|
||||
<RiArrowRightSLine className={`'ml-1 w-3 h-3 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
|
||||
<RiArrowRightSLine className={`'ml-1 w-4 h-4 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
|
||||
</div>
|
||||
{
|
||||
!collapse && (
|
||||
@ -111,7 +104,7 @@ const WorkflowProcessItem = ({
|
||||
<div key={node.id} className='mb-1 last-of-type:mb-0'>
|
||||
<NodePanel
|
||||
nodeInfo={node}
|
||||
hideInfo={hideInfo}
|
||||
inMessage
|
||||
hideProcessDetail={hideProcessDetail}
|
||||
onShowIterationDetail={showIterationDetail}
|
||||
/>
|
||||
|
||||
@ -39,7 +39,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
|
||||
className={cn('relative flex flex-col pt-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
|
||||
style={{
|
||||
width: fixedWidth ? width : 480,
|
||||
...(!fixedWidth
|
||||
|
||||
@ -12,6 +12,7 @@ import CodeEditor from '../editor/code-editor'
|
||||
import { CodeLanguage } from '../../../code/types'
|
||||
import TextEditor from '../editor/text-editor'
|
||||
import Select from '@/app/components/base/select'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
|
||||
import { Resolution } from '@/types/app'
|
||||
@ -100,9 +101,7 @@ const FormItem: FC<Props> = ({
|
||||
<div className='grow'>
|
||||
{
|
||||
type === InputVarType.textInput && (
|
||||
<input
|
||||
className="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-8 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
|
||||
type="text"
|
||||
<Input
|
||||
value={value || ''}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={t('appDebug.variableConig.inputPlaceholder')!}
|
||||
|
||||
@ -29,7 +29,7 @@ const UserInput = () => {
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className={cn('relative bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
|
||||
<div className={cn('sticky top-0 bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
|
||||
<div className='px-4 pt-3 pb-4'>
|
||||
{variables.map((variable, index) => (
|
||||
<div
|
||||
|
||||
@ -19,7 +19,7 @@ const Record = () => {
|
||||
|
||||
return (
|
||||
<div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-components-panel-border shadow-xl bg-components-panel-bg'>
|
||||
<div className='flex items-center justify-between p-4 pb-1 text-text-primary system-xl-semibold'>
|
||||
<div className='flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
|
||||
{`Test Run#${historyWorkflowData?.sequence_number}`}
|
||||
</div>
|
||||
<Run
|
||||
|
||||
@ -197,7 +197,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
|
||||
>{t('runLog.tracing')}</div>
|
||||
</div>
|
||||
{/* panel detal */}
|
||||
<div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
|
||||
<div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
|
||||
{loading && (
|
||||
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
|
||||
<Loading />
|
||||
|
||||
@ -3,24 +3,25 @@ import { useTranslation } from 'react-i18next'
|
||||
import type { FC } from 'react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import {
|
||||
RiAlertFill,
|
||||
RiArrowRightSLine,
|
||||
RiCheckboxCircleLine,
|
||||
RiErrorWarningLine,
|
||||
RiCheckboxCircleFill,
|
||||
RiErrorWarningFill,
|
||||
RiLoader2Line,
|
||||
} from '@remixicon/react'
|
||||
import BlockIcon from '../block-icon'
|
||||
import { BlockEnum } from '../types'
|
||||
import Split from '../nodes/_base/components/split'
|
||||
import cn from '@/utils/classnames'
|
||||
import StatusContainer from '@/app/components/workflow/run/status-container'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
|
||||
import type { NodeTracing } from '@/types/workflow'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
nodeInfo: NodeTracing
|
||||
hideInfo?: boolean
|
||||
inMessage?: boolean
|
||||
hideProcessDetail?: boolean
|
||||
onShowIterationDetail?: (detail: NodeTracing[][]) => void
|
||||
notShowIterationNav?: boolean
|
||||
@ -30,7 +31,7 @@ type Props = {
|
||||
const NodePanel: FC<Props> = ({
|
||||
className,
|
||||
nodeInfo,
|
||||
hideInfo = false,
|
||||
inMessage = false,
|
||||
hideProcessDetail,
|
||||
onShowIterationDetail,
|
||||
notShowIterationNav,
|
||||
@ -72,65 +73,64 @@ const NodePanel: FC<Props> = ({
|
||||
onShowIterationDetail?.(nodeInfo.details || [])
|
||||
}
|
||||
return (
|
||||
<div className={cn('px-4 py-1', className, hideInfo && '!p-0')}>
|
||||
<div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
|
||||
<div className={cn('px-2', inMessage && '!p-0', className)}>
|
||||
<div className={cn(
|
||||
'group transition-all bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border radius-lg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
|
||||
!collapseState && 'hover:bg-components-panel-on-panel-item-bg',
|
||||
)}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center pl-[6px] pr-3 cursor-pointer',
|
||||
hideInfo ? 'py-2' : 'py-3',
|
||||
!collapseState && (hideInfo ? '!pb-1' : '!pb-2'),
|
||||
'flex items-center py-2 pl-[6px] pr-3 cursor-pointer',
|
||||
inMessage && 'py-1.5 pl-[4px] pr-2',
|
||||
!collapseState && 'pb-1',
|
||||
)}
|
||||
onClick={() => setCollapseState(!collapseState)}
|
||||
>
|
||||
{!hideProcessDetail && (
|
||||
<RiArrowRightSLine
|
||||
className={cn(
|
||||
'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
|
||||
'shrink-0 w-4 h-4 text-text-quaternary transition-all group-hover:text-text-tertiary',
|
||||
!collapseState && 'rotate-90',
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<BlockIcon size={hideInfo ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', hideInfo && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
|
||||
<BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
|
||||
<div className={cn(
|
||||
'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
|
||||
hideInfo && '!text-xs',
|
||||
'grow text-text-secondary system-sm-semibold-uppercase truncate',
|
||||
inMessage && '!system-xs-semibold-uppercase',
|
||||
)} title={nodeInfo.title}>{nodeInfo.title}</div>
|
||||
{nodeInfo.status !== 'running' && !hideInfo && (
|
||||
<div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
|
||||
{nodeInfo.status !== 'running' && !inMessage && (
|
||||
<div className='shrink-0 text-text-tertiary system-xs-regular'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
|
||||
)}
|
||||
{nodeInfo.status === 'succeeded' && (
|
||||
<RiCheckboxCircleLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
|
||||
<RiCheckboxCircleFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-success', inMessage && 'w-3.5 h-3.5')} />
|
||||
)}
|
||||
{nodeInfo.status === 'failed' && (
|
||||
<RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
|
||||
<RiErrorWarningFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-destructive', inMessage && 'w-3.5 h-3.5')} />
|
||||
)}
|
||||
{nodeInfo.status === 'stopped' && (
|
||||
<AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
|
||||
<RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
|
||||
)}
|
||||
{nodeInfo.status === 'running' && (
|
||||
<div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
|
||||
<span className='mr-2 text-xs font-normal'>Running</span>
|
||||
<RiLoader2Line className='w-3.5 h-3.5 animate-spin' />
|
||||
</div>
|
||||
<RiLoader2Line className={cn('shrink-0 ml-2 w-4 h-4 text-text-accent', inMessage && 'w-3.5 h-3.5')} />
|
||||
)}
|
||||
</div>
|
||||
{!collapseState && !hideProcessDetail && (
|
||||
<div className='pb-2'>
|
||||
<div className='px-1 pb-1'>
|
||||
{/* The nav to the iteration detail */}
|
||||
{isIterationNode && !notShowIterationNav && (
|
||||
<div className='mt-2 mb-1 !px-2'>
|
||||
<div
|
||||
className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer'
|
||||
className='flex items-center h-[34px] justify-between px-3 bg-background-section-burn border-[0.5px] border-components-panel-border rounded-lg cursor-pointer'
|
||||
onClick={handleOnShowIterationDetail}>
|
||||
<div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length })}</div>
|
||||
<div className='system-sm-medium text-text-secondary'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length })}</div>
|
||||
{justShowIterationNavArrow
|
||||
? (
|
||||
<RiArrowRightSLine className='w-3.5 h-3.5 text-gray-500' />
|
||||
<RiArrowRightSLine className='w-3.5 h-3.5 text-text-tertiary' />
|
||||
)
|
||||
: (
|
||||
<div className='flex items-center space-x-1 text-[#155EEF]'>
|
||||
<div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
|
||||
<div className='flex items-center space-x-1 text-text-accent'>
|
||||
<div className='system-sm-regular '>{t('workflow.common.viewDetailInTracingPanel')}</div>
|
||||
<RiArrowRightSLine className='w-3.5 h-3.5' />
|
||||
</div>
|
||||
)}
|
||||
@ -138,16 +138,20 @@ const NodePanel: FC<Props> = ({
|
||||
<Split className='mt-2' />
|
||||
</div>
|
||||
)}
|
||||
<div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
|
||||
<div className={cn('mb-1')}>
|
||||
{nodeInfo.status === 'stopped' && (
|
||||
<div className='px-3 py-[10px] bg-[#fffaeb] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#dc6803] shadow-xs'>{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div>
|
||||
<StatusContainer status='stopped'>
|
||||
{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}
|
||||
</StatusContainer>
|
||||
)}
|
||||
{nodeInfo.status === 'failed' && (
|
||||
<div className='px-3 py-[10px] bg-[#fef3f2] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{nodeInfo.error}</div>
|
||||
<StatusContainer status='failed'>
|
||||
{nodeInfo.error}
|
||||
</StatusContainer>
|
||||
)}
|
||||
</div>
|
||||
{nodeInfo.inputs && (
|
||||
<div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
|
||||
<div className={cn('mb-1')}>
|
||||
<CodeEditor
|
||||
readOnly
|
||||
title={<div>{t('workflow.common.input').toLocaleUpperCase()}</div>}
|
||||
@ -158,7 +162,7 @@ const NodePanel: FC<Props> = ({
|
||||
</div>
|
||||
)}
|
||||
{nodeInfo.process_data && (
|
||||
<div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
|
||||
<div className={cn('mb-1')}>
|
||||
<CodeEditor
|
||||
readOnly
|
||||
title={<div>{t('workflow.common.processData').toLocaleUpperCase()}</div>}
|
||||
@ -169,7 +173,7 @@ const NodePanel: FC<Props> = ({
|
||||
</div>
|
||||
)}
|
||||
{nodeInfo.outputs && (
|
||||
<div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
|
||||
<div>
|
||||
<CodeEditor
|
||||
readOnly
|
||||
title={<div>{t('workflow.common.output').toLocaleUpperCase()}</div>}
|
||||
|
||||
@ -62,7 +62,7 @@ const StatusPanel: FC<ResultProps> = ({
|
||||
</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'>
|
||||
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
|
||||
{status === 'running' && (
|
||||
<div className='w-16 h-2 rounded-sm bg-text-quaternary' />
|
||||
)}
|
||||
@ -73,7 +73,7 @@ const StatusPanel: FC<ResultProps> = ({
|
||||
</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'>
|
||||
<div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
|
||||
{status === 'running' && (
|
||||
<div className='w-20 h-2 rounded-sm bg-text-quaternary' />
|
||||
)}
|
||||
|
||||
@ -10,7 +10,7 @@ type TracingPanelProps = {
|
||||
|
||||
const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) => {
|
||||
return (
|
||||
<div className='bg-background-section-burn py-2'>
|
||||
<div className='bg-background-section-burn py-2 space-y-1'>
|
||||
{list.map(node => (
|
||||
<NodePanel
|
||||
key={node.id}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user