opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify dependencies in DetailPanel and enhance workflow run components with new props for better handling of paused states

This commit is contained in:
twwu 2026-01-15 11:52:33 +08:00
parent ca58055a39
commit 88c2483192
8 changed files with 111 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/app/log/list.tsx
View File

@ -304,7 +304,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
if (abortControllerRef.current === controller)
abortControllerRef.current = null
}
}, [detail.id, hasMore, timezone, t, appDetail, detail?.model_config?.configs?.introduction])
}, [detail.id, hasMore, timezone, t, appDetail])
// Derive chatItemTree, threadChatItems, and oldestAnswerIdRef from allChatItems
useEffect(() => {
@ -512,7 +512,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
finally {
setIsLoading(false)
}
}, [detail.id, hasMore, isLoading, timezone, t, appDetail, detail?.model_config?.configs?.introduction])
}, [detail.id, hasMore, isLoading, timezone, t, appDetail])
useEffect(() => {
const scrollableDiv = document.getElementById('scrollableDiv')

1
web/app/components/workflow/run/index.tsx
View File

@ -182,6 +182,7 @@ const RunPanel: FC<RunProps> = ({
steps={runDetail.total_steps}
exceptionCounts={runDetail.exceptions_count}
isListening={isListening}
workflowRunId={runDetail.id}
/>
)}
{!loading && currentTab === 'DETAIL' && !runDetail && isListening && (

3
web/app/components/workflow/run/result-panel.tsx
View File

@ -41,6 +41,7 @@ export type ResultPanelProps = {
exceptionCounts?: number
execution_metadata?: any
isListening?: boolean
workflowRunId?: string
handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
handleShowLoopResultList?: (detail: NodeTracing[][], loopDurationMap: any) => void
onShowRetryDetail?: (detail: NodeTracing[]) => void
@ -67,6 +68,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
exceptionCounts,
execution_metadata,
isListening = false,
workflowRunId,
handleShowIterationResultList,
handleShowLoopResultList,
onShowRetryDetail,
@ -89,6 +91,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
error={error}
exceptionCounts={exceptionCounts}
isListening={isListening}
workflowRunId={workflowRunId}
/>
</div>
<div className="px-4">

86
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 = {
@ -12,8 +14,8 @@ type ResultProps = {
tokens?: number
error?: string
exceptionCounts?: number
inputURL?: string
isListening?: boolean
workflowRunId?: string
}
const StatusPanel: FC<ResultProps> = ({
@ -22,11 +24,46 @@ const StatusPanel: FC<ResultProps> = ({
tokens,
error,
exceptionCounts,
inputURL,
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}>
@ -95,7 +132,7 @@ const StatusPanel: FC<ResultProps> = ({
<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' || status === 'paused') && (
<div className="h-2 w-16 rounded-sm bg-text-quaternary" />
<div className="h-2 w-16 animate-pulse rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && status !== 'paused' && (
<span>{time ? `${time?.toFixed(3)}s` : '-'}</span>
@ -106,7 +143,7 @@ const StatusPanel: FC<ResultProps> = ({
<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' || status === 'paused') && (
<div className="h-2 w-20 rounded-sm bg-text-quaternary" />
<div className="h-2 w-20 animate-pulse rounded-sm bg-text-quaternary" />
)}
{status !== 'running' && status !== 'paused' && (
<span>{`${tokens || 0} Tokens`}</span>
@ -160,21 +197,34 @@ const StatusPanel: FC<ResultProps> = ({
{status === 'paused' && (
<>
<div className="my-2 h-[0.5px] bg-divider-deep" />
<div className="system-xs-medium space-y-1 text-text-warning">
<div className="flex items-center gap-1">
<div className="w-[96px] uppercase">{t('nodes.humanInput.log.reason', { ns: 'workflow' })}</div>
<div className="truncate">{t('nodes.humanInput.log.reasonContent', { ns: 'workflow' })}</div>
</div>
<div className="flex items-center gap-1">
<div className="w-[96px] uppercase">{t('nodes.humanInput.log.inputURL', { ns: 'workflow' })}</div>
<a
href={inputURL}
target="_blank"
className="text-text-accent"
>
{inputURL}
</a>
<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>
</>
)}

2
web/i18n/en-US/workflow.json
View File

@ -577,7 +577,7 @@
"nodes.humanInput.insertInputField.useVarInstead": "Use Variable Instead",
"nodes.humanInput.insertInputField.variable": "variable",
"nodes.humanInput.insertInputField.variableNameInvalid": "Variable name can only contain letters, numbers, and underscores, and cannot start with a number",
"nodes.humanInput.log.inputURL": "Input URL:",
"nodes.humanInput.log.backstageInputURL": "Backstage input URL:",
"nodes.humanInput.log.reason": "Reason:",
"nodes.humanInput.log.reasonContent": "Human input required to proceed",
"nodes.humanInput.singleRun.back": "Back",

2
web/i18n/zh-Hans/workflow.json
View File

@ -577,7 +577,7 @@
"nodes.humanInput.insertInputField.useVarInstead": "使用变量代替",
"nodes.humanInput.insertInputField.variable": "变量",
"nodes.humanInput.insertInputField.variableNameInvalid": "只能包含字母、数字和下划线，且不能以数字开头",
"nodes.humanInput.log.inputURL": "输入 URL ：",
"nodes.humanInput.log.backstageInputURL": "表单输入 URL：",
"nodes.humanInput.log.reason": "原因：",
"nodes.humanInput.log.reasonContent": "需要人类输入才能继续",
"nodes.humanInput.singleRun.back": "返回",

19
web/models/log.ts
View File

@ -367,3 +367,22 @@ export type AgentLogDetailResponse = {
iterations: AgentIteration[]
files: AgentLogFile[]
}
export type PauseType = {
type: 'human_input'
form_id: string
backstage_input_url: string
} | {
type: 'breakpoint'
}
export type PauseDetail = {
node_id: string
node_title: string
pause_type: PauseType
}
export type WorkflowPausedDetailsResponse = {
paused_at: string
paused_nodes: PauseDetail[]
}

16
web/service/use-log.ts
View File

@ -7,6 +7,7 @@ import type {
CompletionConversationsRequest,
CompletionConversationsResponse,
WorkflowLogsResponse,
WorkflowPausedDetailsResponse,
} from '@/models/log'
import { useQuery } from '@tanstack/react-query'
import { get } from './base'
@ -87,3 +88,18 @@ export const useWorkflowLogs = ({ appId, params }: WorkflowLogsParams) => {
enabled: !!appId,
})
}
// ============ Workflow Pause Details ============
type WorkflowPausedDetailsParams = {
workflowRunId: string
enabled?: boolean
}
export const useWorkflowPausedDetails = ({ workflowRunId, enabled = true }: WorkflowPausedDetailsParams) => {
return useQuery<WorkflowPausedDetailsResponse>({
queryKey: [NAME_SPACE, 'workflow-paused-details', workflowRunId],
queryFn: () => get<WorkflowPausedDetailsResponse>(`/workflow/${workflowRunId}/pause-details`),
enabled: enabled && !!workflowRunId,
})
}