Merge branch 'main' into chore/variable-label

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -10,10 +10,6 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import {
-  RiErrorWarningFill,
-  RiMoreLine,
-} from '@remixicon/react'
 import { useReactFlow, useStoreApi } from 'reactflow'
 import { useSelectOrDelete } from '../../hooks'
 import type { WorkflowNodesMap } from './node'
@@ -22,17 +18,15 @@ import {
   DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
-import cn from '@/utils/classnames'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import { VarBlockIcon } from '@/app/components/workflow/block-icon'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import Tooltip from '@/app/components/base/tooltip'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import { Type } from '@/app/components/workflow/nodes/llm/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import {
+  VariableLabelInEditor,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -126,69 +120,22 @@ const WorkflowVariableBlockComponent = ({
   }, [node, reactflow, store])
 
   const Item = (
-    <div
-      className={cn(
-        'group/wrap relative mx-0.5 flex h-[18px] select-none items-center rounded-[5px] border pl-0.5 pr-[3px] hover:border-state-accent-solid hover:bg-state-accent-hover',
-        isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
-        !variableValid && '!border-state-destructive-solid !bg-state-destructive-hover',
-      )}
+    <VariableLabelInEditor
+      nodeType={node?.type}
+      nodeTitle={node?.title}
+      variables={variables}
       onClick={(e) => {
         e.stopPropagation()
         handleVariableJump()
       }}
+      isExceptionVariable={isException}
+      errorMsg={!variableValid ? t('workflow.errorMsg.invalidVariable') : undefined}
+      isSelected={isSelected}
       ref={ref}
-    >
-      {!isEnv && !isChatVar && (
-        <div className='flex items-center'>
-          {
-            node?.type && (
-              <div className='p-[1px]'>
-                <VarBlockIcon
-                  className='!text-text-secondary'
-                  type={node?.type}
-                />
-              </div>
-            )
-          }
-          <div className='mx-0.5 max-w-[60px] shrink-0 truncate text-xs font-medium text-text-secondary' title={node?.title} style={{
-          }}>{node?.title}</div>
-          <Line3 className='mr-0.5 text-divider-deep'></Line3>
-        </div>
-      )}
-      {isShowAPart && (
-        <div className='flex items-center'>
-          <RiMoreLine className='h-3 w-3 text-text-secondary' />
-          <Line3 className='mr-0.5 text-divider-deep'></Line3>
-        </div>
-      )}
-
-      <div className='flex items-center text-text-accent'>
-        {!isEnv && !isChatVar && <Variable02 className={cn('h-3.5 w-3.5 shrink-0', isException && 'text-text-warning')} />}
-        {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-        <div className={cn(
-          'ml-0.5 shrink-0 truncate text-xs font-medium',
-          isEnv && 'text-util-colors-violet-violet-600',
-          isChatVar && 'text-util-colors-teal-teal-700',
-          isException && 'text-text-warning',
-        )} title={varName}>{varName}</div>
-        {
-          !variableValid && (
-            <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-text-destructive' />
-          )
-        }
-      </div>
-    </div>
+      notShowFullPath={isShowAPart}
+    />
   )
 
-  if (!variableValid) {
-    return (
-      <Tooltip popupContent={t('workflow.errorMsg.invalidVariable')}>
-        {Item}
-      </Tooltip>
-    )
-  }
-
   if (!node)
     return Item
 

web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx

@@ -4,12 +4,10 @@ import React from 'react'
 import cn from 'classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
-import { VarBlockIcon } from '../../../block-icon'
-import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from './variable/utils'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import { RiMoreLine } from '@remixicon/react'
+import { getNodeInfoById, isSystemVar } from './variable/utils'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 type Props = {
   nodeId: string
   value: string
@@ -42,40 +40,17 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({
 
       const value = vars[index].split('.')
       const isSystem = isSystemVar(value)
-      const isEnv = isENV(value)
-      const isChatVar = isConversationVar(value)
       const node = (isSystem ? startNode : getNodeInfoById(availableNodes, value[0]))?.data
-      const varName = `${isSystem ? 'sys.' : ''}${value[value.length - 1]}`
       const isShowAPart = value.length > 2
 
       return (<span key={index}>
         <span className='relative top-[-3px] leading-[16px]'>{str}</span>
-        <div className=' inline-flex h-[16px] items-center rounded-[5px] bg-components-badge-white-to-dark px-1.5'>
-          {!isEnv && !isChatVar && (
-            <div className='flex items-center'>
-              <div className='p-[1px]'>
-                <VarBlockIcon
-                  className='!text-text-primary'
-                  type={node?.type || BlockEnum.Start}
-                />
-              </div>
-              <div className='mx-0.5 max-w-[60px] truncate text-xs font-medium text-text-secondary' title={node?.title}>{node?.title}</div>
-              <Line3 className='mr-0.5'></Line3>
-            </div>
-          )}
-          {isShowAPart && (
-            <div className='flex items-center'>
-              <RiMoreLine className='h-3 w-3 text-text-secondary' />
-              <Line3 className='mr-0.5 text-divider-deep'></Line3>
-            </div>
-          )}
-          <div className='flex items-center text-text-accent'>
-            {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0' />}
-            {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-            {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-            <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && 'text-text-primary')} title={varName}>{varName}</div>
-          </div>
-        </div>
+        <VariableLabelInNode
+          nodeTitle={node?.title}
+          nodeType={node?.type}
+          notShowFullPath={isShowAPart}
+          variables={value}
+        />
       </span>)
     })
     return html

web/app/components/workflow/nodes/_base/components/variable-tag.tsx

@@ -1,9 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { useNodes, useReactFlow, useStoreApi } from 'reactflow'
-import { capitalize } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
-import { RiErrorWarningFill } from '@remixicon/react'
-import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import type {
   CommonNodeType,
   Node,
@@ -11,13 +8,11 @@ import type {
   VarType,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
+import {
+  VariableLabelInSelect,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 type VariableTagProps = {
   valueSelector: ValueSelector
@@ -73,51 +68,20 @@ const VariableTag = ({
 
   const { t } = useTranslation()
   return (
-    <Tooltip popupContent={!isValid && t('workflow.errorMsg.invalidVariable')}>
-      <div className={cn('border-[rgba(16, 2440,0.08)] inline-flex h-6 max-w-full items-center rounded-md border-[0.5px] border-divider-subtle bg-components-badge-white-to-dark px-1.5 text-xs shadow-xs',
-        !isValid && 'border-red-400 !bg-[#FEF3F2]',
-      )}
-        onClick={(e) => {
-          if (e.metaKey || e.ctrlKey) {
-            e.stopPropagation()
-            handleVariableJump()
-          }
-        }}
-      >
-        {(!isEnv && !isChatVar && <>
-          {node && (
-            <>
-              <VarBlockIcon
-                type={node.data.type || BlockEnum.Start}
-                className='mr-0.5 !text-text-primary'
-              />
-              <div
-                className='max-w-[60px] truncate font-medium text-text-secondary'
-                title={node?.data.title}
-              >
-                {node?.data.title}
-              </div>
-            </>
-          )}
-          <Line3 className='mx-0.5 shrink-0' />
-          <Variable02 className={cn('mr-0.5 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />
-        </>)}
-        {isEnv && <Env className='mr-0.5 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-        <div
-          className={cn('ml-0.5 truncate font-medium text-text-accent', (isEnv || isChatVar) && 'text-text-secondary', isException && 'text-text-warning')}
-          title={variableName}
-        >
-          {variableName}
-        </div>
-        {
-          !isShort && varType && (
-            <div className='ml-0.5 shrink-0 text-text-tertiary'>{capitalize(varType)}</div>
-          )
+    <VariableLabelInSelect
+      variables={valueSelector}
+      nodeType={node?.data.type}
+      nodeTitle={node?.data.title}
+      variableType={!isShort ? varType : undefined}
+      onClick={(e) => {
+        if (e.metaKey || e.ctrlKey) {
+          e.stopPropagation()
+          handleVariableJump()
         }
-        {!isValid && <RiErrorWarningFill className='ml-0.5 h-3 w-3 text-[#D92D20]' />}
-      </div>
-    </Tooltip>
+      }}
+      errorMsg={!isValid ? t('workflow.errorMsg.invalidVariable') : undefined}
+      isExceptionVariable={isException}
+    />
   )
 }
 

web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+import { useVarIcon } from '../hooks'
+
+type VariableIconProps = {
+  className?: string
+  variables: string[]
+}
+const VariableIcon = ({
+  className,
+  variables,
+}: VariableIconProps) => {
+  const VarIcon = useVarIcon(variables)
+
+  return (
+    <VarIcon
+      className={cn(
+        'size-3.5 shrink-0',
+        className,
+      )}
+    />
+  )
+}
+
+export default memo(VariableIcon)

web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx

@@ -0,0 +1,79 @@
+import { memo } from 'react'
+import { capitalize } from 'lodash-es'
+import {
+  RiErrorWarningFill,
+  RiMoreLine,
+} from '@remixicon/react'
+import type { VariablePayload } from '../types'
+import { useVarColor } from '../hooks'
+import VariableNodeLabel from './variable-node-label'
+import VariableIcon from './variable-icon'
+import VariableName from './variable-name'
+import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+
+const VariableLabel = ({
+  nodeType,
+  nodeTitle,
+  variables,
+  variableType,
+  className,
+  errorMsg,
+  onClick,
+  isExceptionVariable,
+  ref,
+  notShowFullPath,
+}: VariablePayload) => {
+  const varColorClassName = useVarColor(variables, isExceptionVariable)
+  return (
+    <div
+      className={cn(
+        'inline-flex h-6 max-w-full items-center space-x-0.5 rounded-md border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1.5 shadow-xs',
+        className,
+      )}
+      onClick={onClick}
+      ref={ref}
+    >
+      <VariableNodeLabel
+        nodeType={nodeType}
+        nodeTitle={nodeTitle}
+      />
+      {
+        notShowFullPath && (
+          <>
+            <RiMoreLine className='h-3 w-3 shrink-0 text-text-secondary' />
+            <div className='system-xs-regular shrink-0 text-divider-deep'>/</div>
+          </>
+        )
+      }
+      <VariableIcon
+        variables={variables}
+        className={varColorClassName}
+      />
+      <VariableName
+        variables={variables}
+        className={cn(varColorClassName)}
+        notShowFullPath={notShowFullPath}
+      />
+      {
+        variableType && (
+          <div className='system-xs-regular shrink-0 text-text-tertiary'>
+            {capitalize(variableType)}
+          </div>
+        )
+      }
+      {
+        !!errorMsg && (
+          <Tooltip
+            popupContent={errorMsg}
+            asChild
+          >
+            <RiErrorWarningFill className='h-3 w-3 shrink-0 text-text-destructive' />
+          </Tooltip>
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(VariableLabel)

web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import { useVarName } from '../hooks'
+import cn from '@/utils/classnames'
+
+type VariableNameProps = {
+  variables: string[]
+  className?: string
+  notShowFullPath?: boolean
+}
+const VariableName = ({
+  variables,
+  className,
+  notShowFullPath,
+}: VariableNameProps) => {
+  const varName = useVarName(variables, notShowFullPath)
+
+  return (
+    <div
+      className={cn(
+        'system-xs-medium truncate',
+        className,
+      )}
+      title={varName}
+    >
+      {varName}
+    </div>
+  )
+}
+
+export default memo(VariableName)

web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-node-label.tsx

@@ -0,0 +1,37 @@
+import { memo } from 'react'
+import { VarBlockIcon } from '@/app/components/workflow/block-icon'
+import type { BlockEnum } from '@/app/components/workflow/types'
+
+type VariableNodeLabelProps = {
+  nodeType?: BlockEnum
+  nodeTitle?: string
+}
+const VariableNodeLabel = ({
+  nodeType,
+  nodeTitle,
+}: VariableNodeLabelProps) => {
+  if (!nodeType)
+    return null
+
+  return (
+    <>
+      <VarBlockIcon
+        type={nodeType}
+        className='shrink-0 text-text-secondary'
+      />
+      {
+        nodeTitle && (
+          <div
+            className='system-xs-medium max-[60px] grow truncate text-text-secondary'
+            title={nodeTitle}
+          >
+            {nodeTitle}
+          </div>
+        )
+      }
+      <div className='system-xs-regular shrink-0 text-divider-deep'>/</div>
+    </>
+  )
+}
+
+export default memo(VariableNodeLabel)

web/app/components/workflow/nodes/_base/components/variable/variable-label/hooks.ts

@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import {
+  isConversationVar,
+  isENV,
+  isSystemVar,
+} from '../utils'
+
+export const useVarIcon = (variables: string[]) => {
+  const isEnvVariable = isENV(variables)
+  const isConversationVariable = isConversationVar(variables)
+
+  if (isEnvVariable)
+    return Env
+
+  if (isConversationVariable)
+    return BubbleX
+
+  return Variable02
+}
+
+export const useVarColor = (variables: string[], isExceptionVariable?: boolean) => {
+  return useMemo(() => {
+    if (isExceptionVariable)
+      return 'text-text-warning'
+
+    if (isENV(variables))
+      return 'text-util-colors-violet-violet-600'
+
+    if (isConversationVar(variables))
+      return 'text-util-colors-teal-teal-700'
+
+    return 'text-text-accent'
+  }, [variables, isExceptionVariable])
+}
+
+export const useVarName = (variables: string[], notShowFullPath?: boolean) => {
+  const variableFullPathName = variables.slice(1).join('.')
+  const variablesLength = variables.length
+  const varName = useMemo(() => {
+    const isSystem = isSystemVar(variables)
+    const varName = notShowFullPath ? variables[variablesLength - 1] : variableFullPathName
+    return `${isSystem ? 'sys.' : ''}${varName}`
+  }, [variables, notShowFullPath])
+
+  return varName
+}
+
+export const useVarBgColorInEditor = (variables: string[], hasError?: boolean) => {
+  if (hasError) {
+    return {
+      hoverBorderColor: 'hover:border-state-destructive-active',
+      hoverBgColor: 'hover:bg-state-destructive-hover',
+      selectedBorderColor: '!border-state-destructive-solid',
+      selectedBgColor: '!bg-state-destructive-hover',
+    }
+  }
+
+  if (isENV(variables)) {
+    return {
+      hoverBorderColor: 'hover:border-util-colors-violet-violet-100',
+      hoverBgColor: 'hover:bg-util-colors-violet-violet-50',
+      selectedBorderColor: 'border-util-colors-violet-violet-600',
+      selectedBgColor: 'bg-util-colors-violet-violet-50',
+    }
+  }
+
+  if (isConversationVar(variables)) {
+    return {
+      hoverBorderColor: 'hover:border-util-colors-teal-teal-100',
+      hoverBgColor: 'hover:bg-util-colors-teal-teal-50',
+      selectedBorderColor: 'border-util-colors-teal-teal-600',
+      selectedBgColor: 'bg-util-colors-teal-teal-50',
+    }
+  }
+
+  return {
+    hoverBorderColor: 'hover:border-state-accent-alt',
+    hoverBgColor: 'hover:bg-state-accent-hover',
+    selectedBorderColor: 'border-state-accent-solid',
+    selectedBgColor: 'bg-state-accent-hover',
+  }
+}

web/app/components/workflow/nodes/_base/components/variable/variable-label/index.tsx

@@ -0,0 +1,3 @@
+export { default as VariableLabelInSelect } from './variable-label-in-select'
+export { default as VariableLabelInEditor } from './variable-label-in-editor'
+export { default as VariableLabelInNode } from './variable-label-in-node'

web/app/components/workflow/nodes/_base/components/variable/variable-label/types.ts

@@ -0,0 +1,17 @@
+import type {
+  BlockEnum,
+  VarType,
+} from '@/app/components/workflow/types'
+
+export type VariablePayload = {
+  className?: string
+  nodeType?: BlockEnum
+  nodeTitle?: string
+  variables: string[]
+  variableType?: VarType
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  errorMsg?: string
+  isExceptionVariable?: boolean
+  ref?: React.Ref<HTMLDivElement>
+  notShowFullPath?: boolean
+}

web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+import { useVarBgColorInEditor } from './hooks'
+import cn from '@/utils/classnames'
+
+type VariableLabelInEditorProps = {
+  isSelected?: boolean
+} & VariablePayload
+const VariableLabelInEditor = ({
+  isSelected,
+  variables,
+  errorMsg,
+  ...rest
+}: VariableLabelInEditorProps) => {
+  const {
+    hoverBorderColor,
+    hoverBgColor,
+    selectedBorderColor,
+    selectedBgColor,
+  } = useVarBgColorInEditor(variables, !!errorMsg)
+
+  return (
+    <VariableLabel
+      className={cn(
+        'h-[18px] space-x-[1px] rounded-[5px] px-1 shadow-xs',
+        !isSelected && hoverBgColor,
+        !isSelected && hoverBorderColor,
+        isSelected && 'border',
+        isSelected && selectedBorderColor,
+        isSelected && selectedBgColor,
+      )}
+      variables={variables}
+      errorMsg={errorMsg}
+      {...rest}
+    />
+  )
+}
+
+export default memo(VariableLabelInEditor)

web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+import cn from '@/utils/classnames'
+
+const VariableLabelInNode = (variablePayload: VariablePayload) => {
+  return (
+    <VariableLabel
+      className={cn(
+        'h-[18px] space-x-[1px] rounded-[5px] px-1 shadow-xs',
+      )}
+      {...variablePayload}
+    />
+  )
+}
+
+export default memo(VariableLabelInNode)

web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-select.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react'
+import type { VariablePayload } from './types'
+import VariableLabel from './base/variable-label'
+
+const VariableLabelInSelect = (variablePayload: VariablePayload) => {
+  return (
+    <VariableLabel
+      {...variablePayload}
+    />
+  )
+}
+
+export default memo(VariableLabelInSelect)

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

@@ -1,19 +1,16 @@
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import type { EndNodeType } from './types'
 import type { NodeProps, Variable } from '@/app/components/workflow/types'
-import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import {
   useIsChatMode,
   useWorkflow,
   useWorkflowVariables,
 } from '@/app/components/workflow/hooks'
-import { VarBlockIcon } from '@/app/components/workflow/block-icon'
-import { Line3 } from '@/app/components/base/icons/src/public/common'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { BlockEnum } from '@/app/components/workflow/types'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 const Node: FC<NodeProps<EndNodeType>> = ({
   id,
@@ -42,42 +39,20 @@ const Node: FC<NodeProps<EndNodeType>> = ({
     <div className='mb-1 space-y-0.5 px-3 py-1'>
       {filteredOutputs.map(({ value_selector }, index) => {
         const node = getNode(value_selector[0])
-        const isSystem = isSystemVar(value_selector)
-        const isEnv = isENV(value_selector)
-        const isChatVar = isConversationVar(value_selector)
-        const varName = isSystem ? `sys.${value_selector[value_selector.length - 1]}` : value_selector[value_selector.length - 1]
         const varType = getCurrentVariableType({
           valueSelector: value_selector,
           availableNodes,
           isChatMode,
         })
-        return (
-          <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
-            <div className='flex items-center text-xs font-medium text-text-tertiary'>
-              {!isEnv && !isChatVar && (
-                <>
-                  <div className='p-[1px]'>
-                    <VarBlockIcon
-                      className='!text-text-primary'
-                      type={node?.data.type || BlockEnum.Start}
-                    />
-                  </div>
-                  <div className='max-w-[75px] truncate'>{node?.data.title}</div>
-                  <Line3 className='mr-0.5'></Line3>
-                </>
-              )}
-              <div className='flex items-center text-text-accent'>
-                {!isEnv && !isChatVar && <Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />}
-                {isEnv && <Env className='h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-                {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
 
-                <div className={cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (isEnv || isChatVar) && '!max-w-[70px] text-text-primary')}>{varName}</div>
-              </div>
-            </div>
-            <div className='text-xs font-normal text-text-secondary'>
-              <div className='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-text-tertiary' title={varType}>{varType}</div>
-            </div>
-          </div>
+        return (
+          <VariableLabelInNode
+            key={index}
+            variables={value_selector}
+            nodeType={node?.data.type}
+            nodeTitle={node?.data.title}
+            variableType={varType}
+          />
         )
       })}
 

web/app/components/workflow/nodes/if-else/components/condition-files-list-value.tsx

@@ -11,10 +11,10 @@ import {
 } from '../utils'
 import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from '../../constants'
 import type { ValueSelector } from '../../../types'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import cn from '@/utils/classnames'
-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 {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionValueProps = {
@@ -32,11 +32,7 @@ const ConditionValue = ({
 
   const variableSelector = variable_selector as ValueSelector
 
-  const variableName = (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
   const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
-  const notHasValue = comparisonOperatorNotRequireValue(operator)
-  const isEnvVar = isENV(variableSelector)
-  const isChatVar = isConversationVar(variableSelector)
   const formatValue = useCallback((c: Condition) => {
     const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
     if (notHasValue)
@@ -76,19 +72,10 @@ const ConditionValue = ({
   return (
     <div className='rounded-md bg-workflow-block-parma-bg'>
       <div className='flex h-6 items-center px-1 '>
-        {!isEnvVar && !isChatVar && <Variable02 className='mr-1 h-3.5 w-3.5 shrink-0 text-text-accent' />}
-        {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-
-        <div
-          className={cn(
-            'shrink-0  truncate text-xs font-medium text-text-accent',
-            !notHasValue && 'max-w-[70px]',
-          )}
-          title={variableName}
-        >
-          {variableName}
-        </div>
+        <VariableLabelInNode
+          variables={variableSelector}
+          notShowFullPath
+        />
         <div
           className='mx-1 shrink-0 text-xs font-medium text-text-primary'
           title={operatorName}

web/app/components/workflow/nodes/if-else/components/condition-value.tsx

@@ -10,15 +10,15 @@ import {
   isComparisonOperatorNeedTranslate,
 } from '../utils'
 import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from '../../constants'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import cn from '@/utils/classnames'
-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 { isExceptionVariable } from '@/app/components/workflow/utils'
 import type {
   CommonNodeType,
   Node,
 } from '@/app/components/workflow/types'
+import {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 type ConditionValueProps = {
   variableSelector: string[]
@@ -37,8 +37,6 @@ const ConditionValue = ({
   const variableName = labelName || (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
   const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
   const notHasValue = comparisonOperatorNotRequireValue(operator)
-  const isEnvVar = isENV(variableSelector)
-  const isChatVar = isConversationVar(variableSelector)
   const node: Node<CommonNodeType> | undefined = nodes.find(n => n.id === variableSelector[0]) as Node<CommonNodeType>
   const isException = isExceptionVariable(variableName, node?.data.type)
   const formatValue = useMemo(() => {
@@ -76,20 +74,13 @@ const ConditionValue = ({
 
   return (
     <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1'>
-      {!isEnvVar && !isChatVar && <Variable02 className={cn('mr-1 h-3.5 w-3.5 shrink-0 text-text-accent', isException && 'text-text-warning')} />}
-      {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-      {isChatVar && <BubbleX className='h-3.5 w-3.5 shrink-0 text-util-colors-teal-teal-700' />}
-
-      <div
-        className={cn(
-          'ml-0.5 shrink-[2] truncate text-xs font-medium text-text-accent',
-          !notHasValue && 'max-w-[70px]',
-          isException && 'text-text-warning',
-        )}
-        title={variableName}
-      >
-        {variableName}
-      </div>
+      <VariableLabelInNode
+        variables={variableSelector}
+        nodeTitle={node?.data.title}
+        nodeType={node?.data.type}
+        isExceptionVariable={isException}
+        notShowFullPath
+      />
       <div
         className='mx-1 shrink-0 text-xs font-medium text-text-primary'
         title={operatorName}

web/app/components/workflow/nodes/loop/components/condition-files-list-value.tsx

@@ -11,10 +11,10 @@ import {
 } from '../utils'
 import type { ValueSelector } from '../../../types'
 import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from './../default'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import cn from '@/utils/classnames'
-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 {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionValueProps = {
@@ -32,11 +32,7 @@ const ConditionValue = ({
 
   const variableSelector = variable_selector as ValueSelector
 
-  const variableName = (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
   const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
-  const notHasValue = comparisonOperatorNotRequireValue(operator)
-  const isEnvVar = isENV(variableSelector)
-  const isChatVar = isConversationVar(variableSelector)
   const formatValue = useCallback((c: Condition) => {
     const notHasValue = comparisonOperatorNotRequireValue(c.comparison_operator)
     if (notHasValue)
@@ -76,19 +72,10 @@ const ConditionValue = ({
   return (
     <div className='rounded-md bg-workflow-block-parma-bg'>
       <div className='flex h-6 items-center px-1 '>
-        {!isEnvVar && !isChatVar && <Variable02 className='mr-1 h-3.5 w-3.5 shrink-0 text-text-accent' />}
-        {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-        {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-
-        <div
-          className={cn(
-            'shrink-0  truncate text-xs font-medium text-text-accent',
-            !notHasValue && 'max-w-[70px]',
-          )}
-          title={variableName}
-        >
-          {variableName}
-        </div>
+        <VariableLabelInNode
+          variables={variableSelector}
+          notShowFullPath
+        />
         <div
           className='mx-1 shrink-0 text-xs font-medium text-text-primary'
           title={operatorName}

web/app/components/workflow/nodes/loop/components/condition-value.tsx

@@ -9,10 +9,10 @@ import {
   isComparisonOperatorNeedTranslate,
 } from '../utils'
 import { FILE_TYPE_OPTIONS, TRANSFER_METHOD } from './../default'
-import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
-import cn from '@/utils/classnames'
-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 {
+  VariableLabelInNode,
+} from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
 type ConditionValueProps = {
   variableSelector: string[]
@@ -27,11 +27,8 @@ const ConditionValue = ({
   value,
 }: ConditionValueProps) => {
   const { t } = useTranslation()
-  const variableName = labelName || (isSystemVar(variableSelector) ? variableSelector.slice(0).join('.') : variableSelector.slice(1).join('.'))
   const operatorName = isComparisonOperatorNeedTranslate(operator) ? t(`workflow.nodes.ifElse.comparisonOperator.${operator}`) : operator
   const notHasValue = comparisonOperatorNotRequireValue(operator)
-  const isEnvVar = isENV(variableSelector)
-  const isChatVar = isConversationVar(variableSelector)
   const formatValue = useMemo(() => {
     if (notHasValue)
       return ''
@@ -67,19 +64,10 @@ const ConditionValue = ({
 
   return (
     <div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1'>
-      {!isEnvVar && !isChatVar && <Variable02 className='mr-1 h-3.5 w-3.5 shrink-0 text-text-accent' />}
-      {isEnvVar && <Env className='mr-1 h-3.5 w-3.5 shrink-0 text-util-colors-violet-violet-600' />}
-      {isChatVar && <BubbleX className='h-3.5 w-3.5 text-util-colors-teal-teal-700' />}
-
-      <div
-        className={cn(
-          'shrink-0  truncate text-xs font-medium text-text-accent',
-          !notHasValue && 'max-w-[70px]',
-        )}
-        title={variableName}
-      >
-        {variableName}
-      </div>
+      <VariableLabelInNode
+        variables={variableSelector}
+        notShowFullPath
+      />
       <div
         className='mx-1 shrink-0 text-xs font-medium text-text-primary'
         title={operatorName}