workflow info

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,
     }

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<CommonNodeType>()
+  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 = () => {
         </div>
         <div className='flex items-center px-4 h-[42px] text-[13px] font-semibold text-gray-700'>
           <FileCheck02 className='mr-1 w-4 h-4' />
-          {t('workflow.panel.checklist')}(2)
+          {t('workflow.panel.checklist')}({needConnectNodes.length})
         </div>
       </div>
       <div className='py-2'>
@@ -42,21 +56,28 @@ const WorkflowInfo: FC = () => {
           {t('workflow.panel.checklistTip')}
         </div>
         <div className='px-4 py-2'>
-          <div className='border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg'>
-            <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
-              <BlockIcon
-                type={BlockEnum.Start}
-                className='mr-1.5'
-              />
-              Start
-            </div>
-            <div className='px-3 py-2 border-t-[0.5px] border-t-black/[0.02] bg-gray-25 rounded-b-lg'>
-              <div className='flex text-xs leading-[18px] text-gray-500'>
-                <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
-                This step is not connected to anything
+          {
+            needConnectNodes.map(node => (
+              <div
+                key={node.id}
+                className='mb-2 border-[0.5px] border-gray-200 bg-white shadow-xs rounded-lg'
+              >
+                <div className='flex items-center p-2 h-9 text-xs font-medium text-gray-700'>
+                  <BlockIcon
+                    type={node.data.type}
+                    className='mr-1.5'
+                  />
+                  {node.data.title}
+                </div>
+                <div className='px-3 py-2 border-t-[0.5px] border-t-black/[0.02] bg-gray-25 rounded-b-lg'>
+                  <div className='flex text-xs leading-[18px] text-gray-500'>
+                    <AlertTriangle className='mt-[3px] mr-2 w-3 h-3 text-[#F79009]' />
+                    {t('workflow.common.needConnecttip')}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+            ))
+          }
         </div>
       </div>
     </div>

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',

web/i18n/zh-Hans/workflow.ts

@@ -26,6 +26,7 @@ const translation = {
     noVar: '没有变量',
     variableNamePlaceholder: '变量名',
     setVarValuePlaceholder: '设置变量值',
+    needConnecttip: '此节点尚未连接到其他节点',
   },
   errorMsg: {
     fieldRequired: '{{field}} 不能为空',