node name

web/app/components/workflow/constants.ts

@@ -12,7 +12,7 @@ import ToolDefault from './nodes/tool/default'
 import VariableAssignerDefault from './nodes/variable-assigner/default'
 import EndNodeDefault from './nodes/end/default'
 
-export const NodeInitialData = {
+export const NODES_INITIAL_DATA = {
   [BlockEnum.Start]: {
     type: BlockEnum.Start,
     title: '',

web/app/components/workflow/hooks.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import type {
   EdgeMouseHandler,
@@ -19,13 +20,24 @@ import type {
   Node,
   SelectedNode,
 } from './types'
-import { NodeInitialData } from './constants'
+import { NODES_INITIAL_DATA } from './constants'
 import { getLayoutByDagre } from './utils'
 import { useStore } from './store'
 
+export const useNodesInitialData = () => {
+  const { t } = useTranslation()
+
+  return produce(NODES_INITIAL_DATA, (draft) => {
+    Object.keys(draft).forEach((key) => {
+      draft[key as BlockEnum].title = t(`workflow.blocks.${key}`)
+    })
+  })
+}
+
 export const useWorkflow = () => {
   const store = useStoreApi()
   const reactFlow = useReactFlow()
+  const nodesInitialData = useNodesInitialData()
 
   const handleLayout = useCallback(async () => {
     const {
@@ -267,7 +279,7 @@ export const useWorkflow = () => {
       id: `${Date.now()}`,
       type: 'custom',
       data: {
-        ...NodeInitialData[nodeType],
+        ...nodesInitialData[nodeType],
         _selected: true,
       },
       position: {
@@ -311,7 +323,7 @@ export const useWorkflow = () => {
       id: `${Date.now()}`,
       type: 'custom',
       data: {
-        ...NodeInitialData[nodeType],
+        ...nodesInitialData[nodeType],
         _selected: currentNode.data._selected,
       },
       position: {

web/app/components/workflow/index.tsx

@@ -17,7 +17,10 @@ import type {
   Edge,
   Node,
 } from './types'
-import { useWorkflow } from './hooks'
+import {
+  useNodesInitialData,
+  useWorkflow,
+} from './hooks'
 import Header from './header'
 import CustomNode from './nodes'
 import Operator from './operator'
@@ -26,7 +29,6 @@ import CustomConnectionLine from './custom-connection-line'
 import Panel from './panel'
 import Features from './features'
 import { useStore } from './store'
-import { NodeInitialData } from './constants'
 import {
   fetchWorkflowDraft,
   syncWorkflowDraft,
@@ -115,11 +117,12 @@ const WorkflowWrap: FC<WorkflowProps> = ({
 }) => {
   const appId = useParams().appId
   const { data, isLoading, error } = useSWR(`/apps/${appId}/workflows/draft`, fetchWorkflowDraft)
+  const nodesInitialData = useNodesInitialData()
 
   const startNode = {
     id: `${Date.now()}`,
     type: 'custom',
-    data: NodeInitialData.start,
+    data: nodesInitialData.start,
     position: {
       x: 100,
       y: 100,

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

@@ -39,22 +39,16 @@ const BaseNode: FC<BaseNodeProps> = ({
           {data.title}
         </div>
       </div>
+      <div className='mb-1'>
+        {cloneElement(children, { id, data })}
+      </div>
       {
-        children && (
-          <div className='mb-1'>
-            {cloneElement(children, { id, data })}
+        data.desc && (
+          <div className='px-3 pt-s1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
+            {data.desc}
           </div>
         )
       }
-      <div className='pb-1'>
-        {
-          data.desc && (
-            <div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
-              {data.desc}
-            </div>
-          )
-        }
-      </div>
     </div>
   )
 }