Chore/variable label (#23270)

web/app/components/workflow/nodes/document-extractor/node.tsx

@@ -2,10 +2,12 @@ import type { FC } from 'react'
 import React from 'react'
 import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
-import NodeVariableItem from '../variable-assigner/components/node-variable-item'
 import type { DocExtractorNodeType } from './types'
-import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import { BlockEnum, type Node, type NodeProps } from '@/app/components/workflow/types'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 const i18nPrefix = 'workflow.nodes.docExtractor'
 
@@ -21,19 +23,14 @@ const NodeComponent: FC<NodeProps<DocExtractorNodeType>> = ({
     return null
 
   const isSystem = isSystemVar(variable)
-  const isEnv = isENV(variable)
-  const isChatVar = isConversationVar(variable)
   const node = isSystem ? nodes.find(node => node.data.type === BlockEnum.Start) : nodes.find(node => node.id === variable[0])
-  const varName = isSystem ? `sys.${variable[variable.length - 1]}` : variable.slice(1).join('.')
   return (
     <div className='relative px-3'>
       <div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t(`${i18nPrefix}.inputVar`)}</div>
-      <NodeVariableItem
-        node={node as Node}
-        isEnv={isEnv}
-        isChatVar={isChatVar}
-        varName={varName}
-        className='bg-workflow-block-parma-bg'
+      <VariableLabelInNode
+        variables={variable}
+        nodeType={node?.data.type}
+        nodeTitle={node?.data.title}
       />
     </div>
   )