diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx index 5d3bae2cf146d7..2e1b03861dada5 100644 --- a/web/app/components/workflow/panel/index.tsx +++ b/web/app/components/workflow/panel/index.tsx @@ -32,7 +32,7 @@ const Panel: FC = () => { showDebugAndPreviewPanel, } = useMemo(() => { return { - showWorkflowInfoPanel: !isChatMode && !selectedNode && !runningStatus, + showWorkflowInfoPanel: !selectedNode && !runningStatus, showNodePanel: !!selectedNode && !runningStatus, showDebugAndPreviewPanel: isChatMode && runningStatus && !currentConversationID, } diff --git a/web/app/components/workflow/panel/workflow-info.tsx b/web/app/components/workflow/panel/workflow-info.tsx index cddc42cfdc5dc5..efb6588097d6dc 100644 --- a/web/app/components/workflow/panel/workflow-info.tsx +++ b/web/app/components/workflow/panel/workflow-info.tsx @@ -1,8 +1,14 @@ import type { FC } from 'react' import { memo } from 'react' import { useTranslation } from 'react-i18next' +import { + getIncomers, + getOutgoers, + useEdges, + useNodes, +} from 'reactflow' import BlockIcon from '../block-icon' -import { BlockEnum } from '../types' +import type { CommonNodeType } from '../types' import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' import { FileCheck02 } from '@/app/components/base/icons/src/vender/line/files' import { useStore as useAppStore } from '@/app/components/app/store' @@ -11,6 +17,14 @@ import AppIcon from '@/app/components/base/app-icon' const WorkflowInfo: FC = () => { const { t } = useTranslation() const appDetail = useAppStore(state => state.appDetail) + const nodes = useNodes() + const edges = useEdges() + const needConnectNodes = nodes.filter((node) => { + const incomers = getIncomers(node, nodes, edges) + const outgoers = getOutgoers(node, nodes, edges) + + return !incomers.length && !outgoers.length + }) if (!appDetail) return null @@ -34,7 +48,7 @@ const WorkflowInfo: FC = () => {
- {t('workflow.panel.checklist')}(2) + {t('workflow.panel.checklist')}({needConnectNodes.length})
@@ -42,21 +56,28 @@ const WorkflowInfo: FC = () => { {t('workflow.panel.checklistTip')}
-
-
- - Start -
-
-
- - This step is not connected to anything + { + needConnectNodes.map(node => ( +
+
+ + {node.data.title} +
+
+
+ + {t('workflow.common.needConnecttip')} +
+
-
-
+ )) + }
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 8e839c6c7830f3..da67a3fb6e0cba 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -26,6 +26,7 @@ const translation = { noVar: 'No variable', variableNamePlaceholder: 'Variable name', setVarValuePlaceholder: 'Set variable', + needConnecttip: 'This step is not connected to anything', }, errorMsg: { fieldRequired: '{{field}} is required', diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index 659703a3736966..2df76fb6f1c63f 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -26,6 +26,7 @@ const translation = { noVar: '没有变量', variableNamePlaceholder: '变量名', setVarValuePlaceholder: '设置变量值', + needConnecttip: '此节点尚未连接到其他节点', }, errorMsg: { fieldRequired: '{{field}} 不能为空',