mirror of
https://github.com/langgenius/dify.git
synced 2026-02-13 07:01:23 -05:00
302 lines
12 KiB
TypeScript
302 lines
12 KiB
TypeScript
import copy from 'copy-to-clipboard'
|
|
import {
|
|
memo,
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ActionButton from '@/app/components/base/action-button'
|
|
import Button from '@/app/components/base/button'
|
|
import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
|
|
import Loading from '@/app/components/base/loading'
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
import { submitHumanInputForm } from '@/service/workflow'
|
|
import { cn } from '@/utils/classnames'
|
|
import Toast from '../../base/toast'
|
|
import {
|
|
useWorkflowInteractions,
|
|
} from '../hooks'
|
|
import ResultPanel from '../run/result-panel'
|
|
import ResultText from '../run/result-text'
|
|
import TracingPanel from '../run/tracing-panel'
|
|
import { useStore } from '../store'
|
|
import {
|
|
WorkflowRunningStatus,
|
|
} from '../types'
|
|
import { formatWorkflowRunIdentifier } from '../utils'
|
|
import HumanInputFilledFormList from './human-input-filled-form-list'
|
|
import HumanInputFormList from './human-input-form-list'
|
|
import InputsPanel from './inputs-panel'
|
|
|
|
const WorkflowPreview = () => {
|
|
const { t } = useTranslation()
|
|
const { handleCancelDebugAndPreviewPanel, handleClearWorkflowRunHistory } = useWorkflowInteractions()
|
|
const workflowRunningData = useStore(s => s.workflowRunningData)
|
|
const isListening = useStore(s => s.isListening)
|
|
const showInputsPanel = useStore(s => s.showInputsPanel)
|
|
const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
|
|
const panelWidth = useStore(s => s.previewPanelWidth)
|
|
const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
|
|
const humanInputFormDataList = useStore(s => s.workflowRunningData?.humanInputFormDataList)
|
|
const humanInputFilledFormDataList = useStore(s => s.workflowRunningData?.humanInputFilledFormDataList)
|
|
const [userSelectedTab, setUserSelectedTab] = useState<string | null>(null)
|
|
|
|
const effectiveTab = (() => {
|
|
if (isListening)
|
|
return 'DETAIL'
|
|
|
|
if (workflowRunningData) {
|
|
const status = workflowRunningData.result.status
|
|
const isFinishedWithoutOutput = (status === WorkflowRunningStatus.Succeeded || status === WorkflowRunningStatus.Failed)
|
|
&& !workflowRunningData.resultText
|
|
&& !workflowRunningData.result.files?.length
|
|
|
|
if (status === WorkflowRunningStatus.Paused && humanInputFormDataList?.length)
|
|
return 'RESULT'
|
|
|
|
if (isFinishedWithoutOutput && userSelectedTab === null)
|
|
return 'DETAIL'
|
|
|
|
return userSelectedTab ?? 'RESULT'
|
|
}
|
|
|
|
if (showInputsPanel)
|
|
return 'INPUT'
|
|
|
|
return 'TRACING'
|
|
})()
|
|
|
|
const shouldShowTracingLoading = effectiveTab === 'TRACING'
|
|
&& !workflowRunningData?.tracing?.length
|
|
&& (workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result)
|
|
|
|
const handleTabChange = (tab: string) => {
|
|
setUserSelectedTab(tab)
|
|
}
|
|
|
|
const [isResizing, setIsResizing] = useState(false)
|
|
|
|
const startResizing = useCallback((e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
setIsResizing(true)
|
|
}, [])
|
|
|
|
const stopResizing = useCallback(() => {
|
|
setIsResizing(false)
|
|
}, [])
|
|
|
|
const resize = useCallback((e: MouseEvent) => {
|
|
if (isResizing) {
|
|
const newWidth = window.innerWidth - e.clientX
|
|
// width constraints: 400 <= width <= maxAllowed (canvas - reserved 400)
|
|
const reservedCanvasWidth = 400
|
|
const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
|
|
|
|
if (newWidth >= 400 && newWidth <= maxAllowed)
|
|
setPreviewPanelWidth(newWidth)
|
|
}
|
|
}, [isResizing, workflowCanvasWidth, setPreviewPanelWidth])
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('mousemove', resize)
|
|
window.addEventListener('mouseup', stopResizing)
|
|
return () => {
|
|
window.removeEventListener('mousemove', resize)
|
|
window.removeEventListener('mouseup', stopResizing)
|
|
}
|
|
}, [resize, stopResizing])
|
|
|
|
const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: {
|
|
inputs: Record<string, string>
|
|
action: string
|
|
}) => {
|
|
await submitHumanInputForm(formToken, formData)
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
className="relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
|
|
style={{ width: `${panelWidth}px` }}
|
|
>
|
|
<div
|
|
className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
|
|
onMouseDown={startResizing}
|
|
/>
|
|
<div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
|
|
{`${t('singleRun.testRun', { ns: 'workflow' })}${workflowRunningData ? formatWorkflowRunIdentifier(workflowRunningData.result.finished_at, t('common.running', { ns: 'workflow' })) : ''}`}
|
|
<div className="flex items-center gap-1">
|
|
<Tooltip popupContent={t('operation.refresh', { ns: 'common' })}>
|
|
<ActionButton onClick={() => {
|
|
setUserSelectedTab(null)
|
|
handleClearWorkflowRunHistory()
|
|
}}
|
|
>
|
|
<RefreshCcw01 className="h-4 w-4" />
|
|
</ActionButton>
|
|
</Tooltip>
|
|
<div className="mx-3 h-3.5 w-[1px] bg-divider-regular" />
|
|
<div className="cursor-pointer p-1" onClick={() => handleCancelDebugAndPreviewPanel()}>
|
|
<span className="i-ri-close-line size-4 text-text-tertiary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative flex grow flex-col">
|
|
<div className="flex shrink-0 items-center border-b-[0.5px] border-divider-subtle px-4">
|
|
{showInputsPanel
|
|
? (
|
|
<div
|
|
className={cn(
|
|
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
|
effectiveTab === 'INPUT' && '!border-[rgb(21,94,239)] text-text-secondary',
|
|
)}
|
|
onClick={() => handleTabChange('INPUT')}
|
|
>
|
|
{t('input', { ns: 'runLog' })}
|
|
</div>
|
|
)
|
|
: null}
|
|
<div
|
|
className={cn(
|
|
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
|
effectiveTab === 'RESULT' && '!border-[rgb(21,94,239)] text-text-secondary',
|
|
!workflowRunningData && '!cursor-not-allowed opacity-30',
|
|
)}
|
|
onClick={() => {
|
|
if (!workflowRunningData)
|
|
return
|
|
handleTabChange('RESULT')
|
|
}}
|
|
>
|
|
{t('result', { ns: 'runLog' })}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
|
effectiveTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
|
|
!workflowRunningData && '!cursor-not-allowed opacity-30',
|
|
)}
|
|
onClick={() => {
|
|
if (!workflowRunningData)
|
|
return
|
|
handleTabChange('DETAIL')
|
|
}}
|
|
>
|
|
{t('detail', { ns: 'runLog' })}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
|
|
effectiveTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
|
|
!workflowRunningData && '!cursor-not-allowed opacity-30',
|
|
)}
|
|
onClick={() => {
|
|
if (!workflowRunningData)
|
|
return
|
|
handleTabChange('TRACING')
|
|
}}
|
|
>
|
|
{t('tracing', { ns: 'runLog' })}
|
|
</div>
|
|
</div>
|
|
<div className={cn(
|
|
'h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg',
|
|
(effectiveTab === 'RESULT' || effectiveTab === 'TRACING') && '!bg-background-section-burn',
|
|
)}
|
|
>
|
|
{effectiveTab === 'INPUT' && showInputsPanel
|
|
? <InputsPanel onRun={() => handleTabChange('RESULT')} />
|
|
: null}
|
|
{effectiveTab === 'RESULT'
|
|
? (
|
|
<div className="p-2">
|
|
{humanInputFormDataList && humanInputFormDataList.length > 0 && (
|
|
<HumanInputFormList
|
|
humanInputFormDataList={humanInputFormDataList}
|
|
onHumanInputFormSubmit={handleSubmitHumanInputForm}
|
|
/>
|
|
)}
|
|
{humanInputFilledFormDataList && humanInputFilledFormDataList.length > 0 && (
|
|
<HumanInputFilledFormList
|
|
humanInputFilledFormDataList={humanInputFilledFormDataList}
|
|
/>
|
|
)}
|
|
<ResultText
|
|
isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
|
|
isPaused={workflowRunningData?.result?.status === WorkflowRunningStatus.Paused}
|
|
outputs={workflowRunningData?.resultText}
|
|
llmGenerationItems={workflowRunningData?.resultLLMGenerationItems}
|
|
allFiles={workflowRunningData?.result?.files}
|
|
error={workflowRunningData?.result?.error}
|
|
onClick={() => handleTabChange('DETAIL')}
|
|
/>
|
|
{(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
|
|
<Button
|
|
className={cn('mb-4 ml-4 space-x-1')}
|
|
onClick={() => {
|
|
const content = workflowRunningData?.resultText
|
|
if (typeof content === 'string')
|
|
copy(content)
|
|
else
|
|
copy(JSON.stringify(content))
|
|
Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
|
|
}}
|
|
>
|
|
<span className="i-ri-clipboard-line h-3.5 w-3.5" />
|
|
<div>{t('operation.copy', { ns: 'common' })}</div>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
: null}
|
|
{effectiveTab === 'DETAIL'
|
|
? (
|
|
<ResultPanel
|
|
inputs={workflowRunningData?.result?.inputs}
|
|
inputs_truncated={workflowRunningData?.result?.inputs_truncated}
|
|
process_data={workflowRunningData?.result?.process_data}
|
|
process_data_truncated={workflowRunningData?.result?.process_data_truncated}
|
|
outputs={workflowRunningData?.result?.outputs}
|
|
outputs_truncated={workflowRunningData?.result?.outputs_truncated}
|
|
outputs_full_content={workflowRunningData?.result?.outputs_full_content}
|
|
status={workflowRunningData?.result?.status || ''}
|
|
error={workflowRunningData?.result?.error}
|
|
elapsed_time={workflowRunningData?.result?.elapsed_time}
|
|
total_tokens={workflowRunningData?.result?.total_tokens}
|
|
created_at={workflowRunningData?.result?.created_at}
|
|
created_by={workflowRunningData?.result?.created_by?.name}
|
|
steps={workflowRunningData?.result?.total_steps}
|
|
exceptionCounts={workflowRunningData?.result?.exceptions_count}
|
|
/>
|
|
)
|
|
: null}
|
|
{effectiveTab === 'DETAIL' && !workflowRunningData?.result
|
|
? (
|
|
<div className="flex h-full items-center justify-center bg-components-panel-bg">
|
|
<Loading />
|
|
</div>
|
|
)
|
|
: null}
|
|
{effectiveTab === 'TRACING'
|
|
? (
|
|
<TracingPanel
|
|
className="bg-background-section-burn"
|
|
list={workflowRunningData?.tracing || []}
|
|
/>
|
|
)
|
|
: null}
|
|
{shouldShowTracingLoading
|
|
? (
|
|
<div className="flex h-full items-center justify-center !bg-background-section-burn">
|
|
<Loading />
|
|
</div>
|
|
)
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(WorkflowPreview)
|