youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 10:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Human Input node (Frontend Part) (#31631)

Browse Source 
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
This commit is contained in:
Wu Tianwei
2026-01-30 10:16:46 +08:00
committed by GitHub
parent 5bf0251554
commit fedd097f63
198 changed files with 10955 additions and 1683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,11 @@
'use client'
import type { FC } from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Indicator from '@/app/components/header/indicator'
import StatusContainer from '@/app/components/workflow/run/status-container'
import { useDocLink } from '@/context/i18n'
import { useWorkflowPausedDetails } from '@/service/use-log'
import { cn } from '@/utils/classnames'
type ResultProps = {
@ -13,6 +15,7 @@ type ResultProps = {
error?: string
exceptionCounts?: number
isListening?: boolean
workflowRunId?: string
}
const StatusPanel: FC<ResultProps> = ({
@ -22,9 +25,45 @@ const StatusPanel: FC<ResultProps> = ({
error,
exceptionCounts,
isListening = false,
workflowRunId,
}) => {
const { t } = useTranslation()
const docLink = useDocLink()
const { data: pausedDetails } = useWorkflowPausedDetails({
workflowRunId: workflowRunId || '',
enabled: status === 'paused',
})
const pausedReasons = useMemo(() => {
const reasons: string[] = []
if (!pausedDetails)
return reasons
const hasHumanInputNode = pausedDetails.paused_nodes.some(
node => node.pause_type.type === 'human_input',
)
if (hasHumanInputNode) {
reasons.push(t('nodes.humanInput.log.reasonContent', { ns: 'workflow' }))
}
return reasons
}, [pausedDetails, t])
const pausedInputURLs = useMemo(() => {
const inputURLs: string[] = []
if (!pausedDetails)
return inputURLs
const { paused_nodes } = pausedDetails
const hasHumanInputNode = paused_nodes.some(
node => node.pause_type.type === 'human_input',
)
if (hasHumanInputNode) {
paused_nodes.forEach((node) => {
if (node.pause_type.type === 'human_input') {
inputURLs.push(node.pause_type.backstage_input_url)
}
})
}
return inputURLs
}, [pausedDetails])
return (
<StatusContainer status={status}>
@ -41,7 +80,7 @@ const StatusPanel: FC<ResultProps> = ({
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',
status === 'stopped' && 'text-util-colors-warning-warning-600',
(status === 'stopped' || status === 'paused') && 'text-util-colors-warning-warning-600',
status === 'running' && 'text-util-colors-blue-light-blue-light-600',
)}
>
@ -81,15 +120,21 @@ const StatusPanel: FC<ResultProps> = ({
<span>STOP</span>
</>
)}
{status === 'paused' && (
<>
<Indicator color="yellow" />
<span>PENDING</span>
</>
)}
</div>
</div>
<div className="max-w-[152px] flex-[33%]">
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.time', { ns: 'runLog' })}</div>
<div className="system-sm-medium flex items-center gap-1 text-text-secondary">
{status === 'running' && (
<div className="h-2 w-16 rounded-sm bg-text-quaternary" />
{(status === 'running' || status === 'paused') && (
<div className="h-2 w-16 animate-pulse rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
{status !== 'running' && status !== 'paused' && (
<span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
)}
</div>
@ -97,10 +142,10 @@ const StatusPanel: FC<ResultProps> = ({
<div className="flex-[33%]">
<div className="system-2xs-medium-uppercase mb-1 text-text-tertiary">{t('resultPanel.tokens', { ns: 'runLog' })}</div>
<div className="system-sm-medium flex items-center gap-1 text-text-secondary">
{status === 'running' && (
<div className="h-2 w-20 rounded-sm bg-text-quaternary" />
{(status === 'running' || status === 'paused') && (
<div className="h-2 w-20 animate-pulse rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && (
{status !== 'running' && status !== 'paused' && (
<span>{`${tokens || 0} Tokens`}</span>
)}
</div>
@ -149,6 +194,40 @@ const StatusPanel: FC<ResultProps> = ({
</>
)
}
{status === 'paused' && (
<>
<div className="my-2 h-[0.5px] bg-divider-deep" />
<div className="system-xs-medium flex flex-col gap-y-2">
<div className="flex flex-col gap-y-0.5">
<div className="system-2xs-medium-uppercase text-text-tertiary">{t('nodes.humanInput.log.reason', { ns: 'workflow' })}</div>
{
pausedReasons.length > 0
? pausedReasons.map(reason => (
<div className="system-xs-medium truncate text-text-secondary" key={reason}>{reason}</div>
))
: (
<div className="h-2 w-20 animate-pulse rounded-sm bg-text-quaternary" />
)
}
</div>
{pausedInputURLs.length > 0 && (
<div className="flex flex-col gap-y-0.5">
<div className="system-2xs-medium-uppercase text-text-tertiary">{t('nodes.humanInput.log.backstageInputURL', { ns: 'workflow' })}</div>
{pausedInputURLs.map(url => (
<a
key={url}
href={url}
target="_blank"
className="system-xs-medium text-text-accent"
>
{url}
</a>
))}
</div>
)}
</div>
</>
)}
</StatusContainer>
)
}