Refactor Start node UI to User Input and optimize EntryNodeContainer (#24156)

web/app/components/workflow/nodes/_base/components/entry-node-container.tsx

@@ -0,0 +1,50 @@
+import type { FC, ReactNode } from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+
+export type EntryNodeStatus = 'enabled' | 'disabled'
+
+type EntryNodeContainerProps = {
+  children: ReactNode
+  status?: EntryNodeStatus
+  customLabel?: string
+  showIndicator?: boolean
+  nodeType?: 'start' | 'trigger'
+}
+
+const EntryNodeContainer: FC<EntryNodeContainerProps> = ({
+  children,
+  status = 'enabled',
+  customLabel,
+  showIndicator = true,
+  nodeType = 'trigger',
+}) => {
+  const { t } = useTranslation()
+
+  const statusConfig = useMemo(() => {
+    const isDisabled = status === 'disabled'
+    const translationKey = nodeType === 'start' ? 'entryNodeStatus' : 'triggerStatus'
+
+    return {
+      label: customLabel || (isDisabled ? t(`workflow.${translationKey}.disabled`) : t(`workflow.${translationKey}.enabled`)),
+      dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500',
+    }
+  }, [status, customLabel, nodeType, t])
+
+  return (
+    <div className="w-[242px] rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pb-0 pt-0.5">
+      <div className="mb-0.5 flex items-center px-1.5 pt-0.5">
+        {showIndicator && (
+          <div className={cn('ml-0.5 mr-0.5 h-1.5 w-1.5 rounded-sm border border-black/15', statusConfig.dotColor)} />
+        )}
+        <span className={`text-2xs font-semibold uppercase text-text-tertiary ${!showIndicator ? 'ml-1.5' : ''}`}>
+          {statusConfig.label}
+        </span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default EntryNodeContainer

web/app/components/workflow/nodes/_base/components/trigger-container.tsx

@@ -1,43 +0,0 @@
-import type { FC, ReactNode } from 'react'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-
-export type TriggerStatus = 'enabled' | 'disabled'
-
-type TriggerContainerProps = {
-  children: ReactNode
-  status?: TriggerStatus
-  customLabel?: string
-}
-
-const TriggerContainer: FC<TriggerContainerProps> = ({
-  children,
-  status = 'enabled',
-  customLabel,
-}) => {
-  const { t } = useTranslation()
-
-  const statusConfig = useMemo(() => {
-    const isDisabled = status === 'disabled'
-
-    return {
-      label: customLabel || (isDisabled ? t('workflow.triggerStatus.disabled') : t('workflow.triggerStatus.enabled')),
-      dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500',
-    }
-  }, [status, customLabel, t])
-
-  return (
-    <div className="w-[242px] rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pb-0 pt-0.5">
-      <div className="mb-0.5 flex items-center px-1.5 pt-0.5">
-        <div className={cn('ml-0.5 mr-0.5 h-1.5 w-1.5 rounded-sm border border-black/15', statusConfig.dotColor)} />
-        <span className="text-2xs font-semibold uppercase text-text-tertiary">
-          {statusConfig.label}
-        </span>
-      </div>
-      {children}
-    </div>
-  )
-}
-
-export default TriggerContainer

web/app/components/workflow/nodes/_base/node.tsx

@@ -43,7 +43,7 @@ import NodeControl from './components/node-control'
 import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
 import RetryOnNode from './components/retry/retry-on-node'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
-import TriggerContainer from './components/trigger-container'
+import EntryNodeContainer from './components/entry-node-container'
 import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
@@ -138,8 +138,6 @@ const BaseNode: FC<BaseNodeProps> = ({
     return null
   }, [data._loopIndex, data._runningStatus, t])
 
-  const isTriggerNode = TRIGGER_NODE_TYPES.includes(data.type as any)
-
   const nodeContent = (
     <div
       className={cn(
@@ -337,10 +335,17 @@ const BaseNode: FC<BaseNodeProps> = ({
     </div>
   )
 
-  return isTriggerNode ? (
-    <TriggerContainer status="enabled">
+  const isEntryNode = TRIGGER_NODE_TYPES.includes(data.type as any) || data.type === BlockEnum.Start
+  const isStartNode = data.type === BlockEnum.Start
+
+  return isEntryNode ? (
+    <EntryNodeContainer
+      status="enabled"
+      showIndicator={!isStartNode}
+      nodeType={isStartNode ? 'start' : 'trigger'}
+    >
       {nodeContent}
-    </TriggerContainer>
+    </EntryNodeContainer>
   ) : nodeContent
 }
 

web/i18n/en-US/workflow.ts

@@ -11,7 +11,7 @@ const translation = {
     publishUpdate: 'Publish Update',
     run: 'Test Run',
     running: 'Running',
-    chooseStartNodeToRun: 'Choose the start node to run',
+    chooseStartNodeToRun: 'Choose the entry node to run',
     inRunMode: 'In Run Mode',
     inPreview: 'In Preview',
     inPreviewMode: 'In Preview Mode',
@@ -45,7 +45,7 @@ const translation = {
     needConnectTip: 'This step is not connected to anything',
     maxTreeDepth: 'Maximum limit of {{depth}} nodes per branch',
     needEndNode: 'The End node must be added',
-    needStartNode: 'A start node (Start or Trigger) must be added',
+    needStartNode: 'An entry node (User Input or Trigger) must be added',
     needAnswerNode: 'The Answer node must be added',
     workflowProcess: 'Workflow Process',
     notRunning: 'Not running yet',
@@ -221,7 +221,7 @@ const translation = {
   },
   tabs: {
     'searchBlock': 'Search node',
-    'start': 'Start',
+    'start': 'User Input',
     'blocks': 'Nodes',
     'searchTool': 'Search tool',
     'tools': 'Tools',
@@ -239,7 +239,7 @@ const translation = {
     'addAll': 'Add all',
   },
   blocks: {
-    'start': 'Start',
+    'start': 'User Input',
     'end': 'End',
     'answer': 'Answer',
     'llm': 'LLM',
@@ -990,6 +990,10 @@ const translation = {
     enabled: 'TRIGGER',
     disabled: 'TRIGGER • DISABLED',
   },
+  entryNodeStatus: {
+    enabled: 'START',
+    disabled: 'START • DISABLED',
+  },
   tracing: {
     stopBy: 'Stop by {{user}}',
   },

web/i18n/ja-JP/workflow.ts

@@ -1071,6 +1071,10 @@ const translation = {
     enabled: 'トリガー',
     disabled: 'トリガー • 無効',
   },
+  entryNodeStatus: {
+    enabled: 'スタート',
+    disabled: '開始 • 無効',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/workflow.ts

@@ -1071,6 +1071,10 @@ const translation = {
     enabled: '触发器',
     disabled: '触发器 • 已禁用',
   },
+  entryNodeStatus: {
+    enabled: '开始',
+    disabled: '开始 • 已禁用',
+  },
 }
 
 export default translation