Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>
2025-12-16 06:16:53 +08:00 · 2024-07-22 15:29:39 +08:00
parent 87d583f454
commit 5e6fc58db3
146 changed files with 2486 additions and 746 deletions
--- a/web/app/components/workflow/nodes/_base/components/add-variable-popup-with-position.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-variable-popup-with-position.tsx
@@ -5,12 +5,12 @@ import {
  useRef,
 } from 'react'
 import { useClickAway } from 'ahooks'
-import { useTranslation } from 'react-i18next'
 import { useStore } from '../../../store'
 import {
  useIsChatMode,
  useNodeDataUpdate,
  useWorkflow,
+  useWorkflowVariables,
 } from '../../../hooks'
 import type {
  ValueSelector,
@@ -20,7 +20,6 @@ import type {
 import { useVariableAssigner } from '../../variable-assigner/hooks'
 import { filterVar } from '../../variable-assigner/utils'
 import AddVariablePopup from './add-variable-popup'
-import { toNodeAvailableVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'

 type AddVariablePopupWithPositionProps = {
  nodeId: string
@@ -30,7 +29,6 @@ const AddVariablePopupWithPosition = ({
  nodeId,
  nodeData,
 }: AddVariablePopupWithPositionProps) => {
-  const { t } = useTranslation()
  const ref = useRef(null)
  const showAssignVariablePopup = useStore(s => s.showAssignVariablePopup)
  const setShowAssignVariablePopup = useStore(s => s.setShowAssignVariablePopup)
@@ -38,6 +36,7 @@ const AddVariablePopupWithPosition = ({
  const { handleAddVariableInAddVariablePopupWithPosition } = useVariableAssigner()
  const isChatMode = useIsChatMode()
  const { getBeforeNodesInSameBranch } = useWorkflow()
+  const { getNodeAvailableVars } = useWorkflowVariables()

  const outputType = useMemo(() => {
    if (!showAssignVariablePopup)
@@ -55,9 +54,8 @@ const AddVariablePopupWithPosition = ({
    if (!showAssignVariablePopup)
      return []

-    return toNodeAvailableVars({
+    return getNodeAvailableVars({
      parentNode: showAssignVariablePopup.parentNode,
-      t,
      beforeNodes: [
        ...getBeforeNodesInSameBranch(showAssignVariablePopup.nodeId),
        {
@@ -65,10 +63,16 @@ const AddVariablePopupWithPosition = ({
          data: showAssignVariablePopup.nodeData,
        } as any,
      ],
+      hideEnv: true,
      isChatMode,
      filterVar: filterVar(outputType as VarType),
    })
-  }, [getBeforeNodesInSameBranch, isChatMode, showAssignVariablePopup, t, outputType])
+      .map(node => ({
+        ...node,
+        vars: node.isStartNode ? node.vars.filter(v => !v.variable.startsWith('sys.')) : node.vars,
+      }))
+      .filter(item => item.vars.length > 0)
+  }, [showAssignVariablePopup, getNodeAvailableVars, getBeforeNodesInSameBranch, isChatMode, outputType])

  useClickAway(() => {
    if (nodeData._holdAddVariablePopup) {
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -5,9 +5,10 @@ import cn from 'classnames'
 import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { VarBlockIcon } from '../../../block-icon'
-import { getNodeInfoById, isSystemVar } from './variable/utils'
+import { getNodeInfoById, 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 { Env } from '@/app/components/base/icons/src/vender/line/others'
 type Props = {
  nodeId: string
  value: string
@@ -40,25 +41,29 @@ const ReadonlyInputWithSelectVar: FC<Props> = ({

      const value = vars[index].split('.')
      const isSystem = isSystemVar(value)
+      const isEnv = isENV(value)
      const node = (isSystem ? startNode : getNodeInfoById(availableNodes, value[0]))?.data
      const varName = `${isSystem ? 'sys.' : ''}${value[value.length - 1]}`

      return (<span key={index}>
        <span className='relative top-[-3px] leading-[16px]'>{str}</span>
        <div className=' inline-flex h-[16px] items-center px-1.5 rounded-[5px] bg-white'>
-          <div className='flex items-center'>
-            <div className='p-[1px]'>
-              <VarBlockIcon
-                className='!text-gray-900'
-                type={node?.type || BlockEnum.Start}
-              />
+          {!isEnv && (
+            <div className='flex items-center'>
+              <div className='p-[1px]'>
+                <VarBlockIcon
+                  className='!text-gray-900'
+                  type={node?.type || BlockEnum.Start}
+                />
+              </div>
+              <div className='max-w-[60px] mx-0.5 text-xs font-medium text-gray-700 truncate' title={node?.title}>{node?.title}</div>
+              <Line3 className='mr-0.5'></Line3>
            </div>
-            <div className='max-w-[60px] mx-0.5 text-xs font-medium text-gray-700 truncate' title={node?.title}>{node?.title}</div>
-            <Line3 className='mr-0.5'></Line3>
-          </div>
+          )}
          <div className='flex items-center text-primary-600'>
-            <Variable02 className='w-3.5 h-3.5' />
-            <div className='max-w-[50px] ml-0.5 text-xs font-medium truncate' title={varName}>{varName}</div>
+            {!isEnv && <Variable02 className='shrink-0 w-3.5 h-3.5' />}
+            {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+            <div className={cn('max-w-[50px] ml-0.5 text-xs font-medium truncate', isEnv && 'text-gray-900')} title={varName}>{varName}</div>
          </div>
        </div>
      </span>)
--- a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
@@ -10,7 +10,9 @@ import type {
 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 { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import cn from '@/utils/classnames'

 type VariableTagProps = {
  valueSelector: ValueSelector
@@ -27,36 +29,40 @@ const VariableTag = ({

    return nodes.find(node => node.id === valueSelector[0])
  }, [nodes, valueSelector])
+  const isEnv = isENV(valueSelector)

  const variableName = isSystemVar(valueSelector) ? valueSelector.slice(0).join('.') : valueSelector.slice(1).join('.')

  return (
    <div className='inline-flex items-center px-1.5 max-w-full h-6 text-xs rounded-md border-[0.5px] border-[rgba(16, 2440,0.08)] bg-white shadow-xs'>
-      {
-        node && (
-          <VarBlockIcon
-            className='shrink-0 mr-0.5 text-[#354052]'
-            type={node!.data.type}
-          />
-        )
-      }
+      {!isEnv && (
+        <>
+          {node && (
+            <VarBlockIcon
+              className='shrink-0 mr-0.5 text-text-secondary'
+              type={node!.data.type}
+            />
+          )}
+          <div
+            className='max-w-[60px] truncate text-text-secondary font-medium'
+            title={node?.data.title}
+          >
+            {node?.data.title}
+          </div>
+          <Line3 className='shrink-0 mx-0.5' />
+          <Variable02 className='shrink-0 mr-0.5 w-3.5 h-3.5 text-text-accent' />
+        </>
+      )}
+      {isEnv && <Env className='shrink-0 mr-0.5 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
      <div
-        className='max-w-[60px] truncate text-[#354052] font-medium'
-        title={node?.data.title}
-      >
-        {node?.data.title}
-      </div>
-      <Line3 className='shrink-0 mx-0.5' />
-      <Variable02 className='shrink-0 mr-0.5 w-3.5 h-3.5 text-[#155AEF]' />
-      <div
-        className='truncate text-[#155AEF] font-medium'
+        className={cn('truncate text-text-accent font-medium', isEnv && 'text-text-secondary')}
        title={variableName}
      >
        {variableName}
      </div>
      {
        varType && (
-          <div className='shrink-0 ml-0.5 text-[#676F83]'>{capitalize(varType)}</div>
+          <div className='shrink-0 ml-0.5 text-text-tertiary'>{capitalize(varType)}</div>
        )
      }
    </div>
--- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@@ -15,7 +15,7 @@ import type { ParameterExtractorNodeType } from '../../../parameter-extractor/ty
 import type { IterationNodeType } from '../../../iteration/types'
 import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
-import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
+import type { EnvironmentVariable, Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import type { VariableAssignerNodeType } from '@/app/components/workflow/nodes/variable-assigner/types'
 import {
  HTTP_REQUEST_OUTPUT_STRUCT,
@@ -34,6 +34,10 @@ export const isSystemVar = (valueSelector: ValueSelector) => {
  return valueSelector[0] === 'sys' || valueSelector[1] === 'sys'
 }

+export const isENV = (valueSelector: ValueSelector) => {
+  return valueSelector[0] === 'env'
+}
+
 const inputVarTypeToVarType = (type: InputVarType): VarType => {
  if (type === InputVarType.number)
    return VarType.number
@@ -59,7 +63,11 @@ const findExceptVarInObject = (obj: any, filterVar: (payload: Var, selector: Val
  return res
 }

-const formatItem = (item: any, isChatMode: boolean, filterVar: (payload: Var, selector: ValueSelector) => boolean): NodeOutPutVar => {
+const formatItem = (
+  item: any,
+  isChatMode: boolean,
+  filterVar: (payload: Var, selector: ValueSelector) => boolean,
+): NodeOutPutVar => {
  const { id, data } = item

  const res: NodeOutPutVar = {
@@ -226,6 +234,16 @@ const formatItem = (item: any, isChatMode: boolean, filterVar: (payload: Var, se
      ]
      break
    }
+
+    case 'env': {
+      res.vars = data.envList.map((env: EnvironmentVariable) => {
+        return {
+          variable: `env.${env.name}`,
+          type: env.value_type,
+        }
+      }) as Var[]
+      break
+    }
  }

  const selector = [id]
@@ -246,16 +264,30 @@ const formatItem = (item: any, isChatMode: boolean, filterVar: (payload: Var, se

  return res
 }
-export const toNodeOutputVars = (nodes: any[], isChatMode: boolean, filterVar = (_payload: Var, _selector: ValueSelector) => true): NodeOutPutVar[] => {
-  const res = nodes
-    .filter(node => SUPPORT_OUTPUT_VARS_NODE.includes(node.data.type))
-    .map((node) => {
-      return {
-        ...formatItem(node, isChatMode, filterVar),
-        isStartNode: node.data.type === BlockEnum.Start,
-      }
-    })
-    .filter(item => item.vars.length > 0)
+export const toNodeOutputVars = (
+  nodes: any[],
+  isChatMode: boolean,
+  filterVar = (_payload: Var, _selector: ValueSelector) => true,
+  environmentVariables: EnvironmentVariable[] = [],
+): NodeOutPutVar[] => {
+  // ENV_NODE data format
+  const ENV_NODE = {
+    id: 'env',
+    data: {
+      title: 'ENVIRONMENT',
+      type: 'env',
+      envList: environmentVariables,
+    },
+  }
+  const res = [
+    ...nodes.filter(node => SUPPORT_OUTPUT_VARS_NODE.includes(node.data.type)),
+    ...(environmentVariables.length > 0 ? [ENV_NODE] : []),
+  ].map((node) => {
+    return {
+      ...formatItem(node, isChatMode, filterVar),
+      isStartNode: node.data.type === BlockEnum.Start,
+    }
+  }).filter(item => item.vars.length > 0)
  return res
 }

@@ -313,6 +345,7 @@ export const getVarType = ({
  availableNodes,
  isChatMode,
  isConstant,
+  environmentVariables = [],
 }:
 {
  valueSelector: ValueSelector
@@ -321,11 +354,17 @@ export const getVarType = ({
  availableNodes: any[]
  isChatMode: boolean
  isConstant?: boolean
+  environmentVariables?: EnvironmentVariable[]
 }): VarType => {
  if (isConstant)
    return VarType.string

-  const beforeNodesOutputVars = toNodeOutputVars(availableNodes, isChatMode)
+  const beforeNodesOutputVars = toNodeOutputVars(
+    availableNodes,
+    isChatMode,
+    undefined,
+    environmentVariables,
+  )

  const isIterationInnerVar = parentNode?.data.type === BlockEnum.Iteration
  if (isIterationItem) {
@@ -346,6 +385,7 @@ export const getVarType = ({
      return VarType.number
  }
  const isSystem = isSystemVar(valueSelector)
+  const isEnv = isENV(valueSelector)
  const startNode = availableNodes.find((node: any) => {
    return node.data.type === BlockEnum.Start
  })
@@ -358,7 +398,7 @@ export const getVarType = ({

  let type: VarType = VarType.string
  let curr: any = targetVar.vars
-  if (isSystem) {
+  if (isSystem || isEnv) {
    return curr.find((v: any) => v.variable === (valueSelector as ValueSelector).join('.'))?.type
  }
  else {
@@ -383,6 +423,7 @@ export const toNodeAvailableVars = ({
  t,
  beforeNodes,
  isChatMode,
+  environmentVariables,
  filterVar,
 }: {
  parentNode?: Node | null
@@ -390,9 +431,16 @@ export const toNodeAvailableVars = ({
  // to get those nodes output vars
  beforeNodes: Node[]
  isChatMode: boolean
+  // env
+  environmentVariables?: EnvironmentVariable[]
  filterVar: (payload: Var, selector: ValueSelector) => boolean
 }): NodeOutPutVar[] => {
-  const beforeNodesOutputVars = toNodeOutputVars(beforeNodes, isChatMode, filterVar)
+  const beforeNodesOutputVars = toNodeOutputVars(
+    beforeNodes,
+    isChatMode,
+    filterVar,
+    environmentVariables,
+  )
  const isInIteration = parentNode?.data.type === BlockEnum.Iteration
  if (isInIteration) {
    const iterationNode: any = parentNode
@@ -402,6 +450,7 @@ export const toNodeAvailableVars = ({
      valueSelector: iterationNode?.data.iterator_selector || [],
      availableNodes: beforeNodes,
      isChatMode,
+      environmentVariables,
    })
    const iterationVar = {
      nodeId: iterationNode?.id,
@@ -493,7 +542,7 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => {
    case BlockEnum.IfElse: {
      res = (data as IfElseNodeType).conditions?.map((c) => {
        return c.variable_selector
-      })
+      }) || []
      break
    }
    case BlockEnum.Code: {
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -9,12 +9,13 @@ import {
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
 import VarReferencePopup from './var-reference-popup'
-import { getNodeInfoById, getVarType, isSystemVar, toNodeAvailableVars } from './utils'
+import { getNodeInfoById, isENV, isSystemVar } from './utils'
 import cn from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
  PortalToFollowElem,
@@ -24,6 +25,7 @@ import {
 import {
  useIsChatMode,
  useWorkflow,
+  useWorkflowVariables,
 } from '@/app/components/workflow/hooks'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
@@ -71,6 +73,7 @@ const VarReferencePicker: FC<Props> = ({
  const isChatMode = useIsChatMode()

  const { getTreeLeafNodes, getBeforeNodesInSameBranch } = useWorkflow()
+  const { getCurrentVariableType, getNodeAvailableVars } = useWorkflowVariables()
  const availableNodes = useMemo(() => {
    return passedInAvailableNodes || (onlyLeafNodeVar ? getTreeLeafNodes(nodeId) : getBeforeNodesInSameBranch(nodeId))
  }, [getBeforeNodesInSameBranch, getTreeLeafNodes, nodeId, onlyLeafNodeVar, passedInAvailableNodes])
@@ -97,16 +100,15 @@ const VarReferencePicker: FC<Props> = ({
    if (availableVars)
      return availableVars

-    const vars = toNodeAvailableVars({
+    const vars = getNodeAvailableVars({
      parentNode: iterationNode,
-      t,
      beforeNodes: availableNodes,
      isChatMode,
      filterVar,
    })

    return vars
-  }, [iterationNode, availableNodes, isChatMode, filterVar, availableVars, t])
+  }, [iterationNode, availableNodes, isChatMode, filterVar, availableVars, getNodeAvailableVars])

  const [open, setOpen] = useState(false)
  useEffect(() => {
@@ -201,7 +203,7 @@ const VarReferencePicker: FC<Props> = ({
      onChange([], varKindType)
  }, [onChange, varKindType])

-  const type = getVarType({
+  const type = getCurrentVariableType({
    parentNode: iterationNode,
    valueSelector: value as ValueSelector,
    availableNodes,
@@ -209,6 +211,8 @@ const VarReferencePicker: FC<Props> = ({
    isConstant: !!isConstant,
  })

+  const isEnv = isENV(value as ValueSelector)
+
  // 8(left/right-padding) + 14(icon) + 4 + 14 + 2 = 42 + 17 buff
  const availableWidth = triggerWidth - 56
  const [maxNodeNameWidth, maxVarNameWidth, maxTypeWidth] = (() => {
@@ -276,7 +280,7 @@ const VarReferencePicker: FC<Props> = ({
                    {hasValue
                      ? (
                        <>
-                          {isShowNodeName && (
+                          {isShowNodeName && !isEnv && (
                            <div className='flex items-center'>
                              <div className='p-[1px]'>
                                <VarBlockIcon
@@ -292,7 +296,8 @@ const VarReferencePicker: FC<Props> = ({
                          )}
                          <div className='flex items-center text-primary-600'>
                            {!hasValue && <Variable02 className='w-3.5 h-3.5' />}
-                            <div className='ml-0.5 text-xs font-medium truncate' title={varName} style={{
+                            {isEnv && <Env className='w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+                            <div className={cn('ml-0.5 text-xs font-medium truncate', isEnv && '!text-gray-900')} title={varName} style={{
                              maxWidth: maxVarNameWidth,
                            }}>{varName}</div>
                          </div>
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -16,6 +16,7 @@ import {
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { checkKeys } from '@/utils/var'

 type ObjectChildrenProps = {
@@ -48,6 +49,8 @@ const Item: FC<ItemProps> = ({
  itemWidth,
 }) => {
  const isObj = itemData.type === VarType.object && itemData.children && itemData.children.length > 0
+  const isSys = itemData.variable.startsWith('sys.')
+  const isEnv = itemData.variable.startsWith('env.')
  const itemRef = useRef(null)
  const [isItemHovering, setIsItemHovering] = useState(false)
  const _ = useHover(itemRef, {
@@ -76,7 +79,7 @@ const Item: FC<ItemProps> = ({
  }, [isHovering])
  const handleChosen = (e: React.MouseEvent) => {
    e.stopPropagation()
-    if (itemData.variable.startsWith('sys.')) { // system variable
+    if (isSys || isEnv) { // system variable or environment variable
      onChange([...objPath, ...itemData.variable.split('.')], itemData)
    }
    else {
@@ -101,8 +104,9 @@ const Item: FC<ItemProps> = ({
          onClick={handleChosen}
        >
          <div className='flex items-center w-0 grow'>
-            <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />
-            <div title={itemData.variable} className='ml-1 w-0 grow truncate text-[13px] font-normal text-gray-900'>{itemData.variable}</div>
+            {!isEnv && <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />}
+            {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+            <div title={itemData.variable} className='ml-1 w-0 grow truncate text-[13px] font-normal text-gray-900'>{!isEnv ? itemData.variable : itemData.variable.replace('env.', '')}</div>
          </div>
          <div className='ml-1 shrink-0 text-xs font-normal text-gray-500 capitalize'>{itemData.type}</div>
          {isObj && (
@@ -205,8 +209,9 @@ const VarReferenceVars: FC<Props> = ({
 }) => {
  const { t } = useTranslation()
  const [searchText, setSearchText] = useState('')
+
  const filteredVars = vars.filter((v) => {
-    const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
+    const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.') || v.variable.startsWith('env.'))
    return children.length > 0
  }).filter((node) => {
    if (!searchText)
@@ -217,7 +222,7 @@ const VarReferenceVars: FC<Props> = ({
    })
    return children.length > 0
  }).map((node) => {
-    let vars = node.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.'))
+    let vars = node.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.') || v.variable.startsWith('env.'))
    if (searchText) {
      const searchTextLower = searchText.toLowerCase()
      if (!node.title.toLowerCase().includes(searchTextLower))
@@ -229,6 +234,7 @@ const VarReferenceVars: FC<Props> = ({
      vars,
    }
  })
+
  const [isFocus, {
    setFalse: setBlur,
    setTrue: setFocus,
--- a/web/app/components/workflow/nodes/_base/hooks/use-available-var-list.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-available-var-list.ts
@@ -1,10 +1,9 @@
-import { useTranslation } from 'react-i18next'
 import useNodeInfo from './use-node-info'
 import {
  useIsChatMode,
  useWorkflow,
+  useWorkflowVariables,
 } from '@/app/components/workflow/hooks'
-import { toNodeAvailableVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 type Params = {
  onlyLeafNodeVar?: boolean
@@ -18,9 +17,8 @@ const useAvailableVarList = (nodeId: string, {
  onlyLeafNodeVar: false,
  filterVar: () => true,
 }) => {
-  const { t } = useTranslation()
-
  const { getTreeLeafNodes, getBeforeNodesInSameBranch } = useWorkflow()
+  const { getNodeAvailableVars } = useWorkflowVariables()
  const isChatMode = useIsChatMode()

  const availableNodes = onlyLeafNodeVar ? getTreeLeafNodes(nodeId) : getBeforeNodesInSameBranch(nodeId)
@@ -29,9 +27,8 @@ const useAvailableVarList = (nodeId: string, {
    parentNode: iterationNode,
  } = useNodeInfo(nodeId)

-  const availableVars = toNodeAvailableVars({
+  const availableVars = getNodeAvailableVars({
    parentNode: iterationNode,
-    t,
    beforeNodes: availableNodes,
    isChatMode,
    filterVar,
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -7,7 +7,7 @@ import {
  useNodeDataUpdate,
  useWorkflow,
 } from '@/app/components/workflow/hooks'
-import { getNodeInfoById, isSystemVar, toNodeOutputVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { getNodeInfoById, isENV, isSystemVar, toNodeOutputVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'

 import type { CommonNodeType, InputVar, ValueSelector, Var, Variable } from '@/app/components/workflow/types'
 import { BlockEnum, InputVarType, NodeRunningStatus, VarType } from '@/app/components/workflow/types'
@@ -329,7 +329,7 @@ const useOneStepRun = <T>({
    if (!variables)
      return []

-    const varInputs = variables.map((item) => {
+    const varInputs = variables.filter(item => !isENV(item.value_selector)).map((item) => {
      const originalVar = getVar(item.value_selector)
      if (!originalVar) {
        return {
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -161,7 +161,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
  })

  const filterVar = useCallback((varPayload: Var) => {
-    return [VarType.string, VarType.number, VarType.object, VarType.array, VarType.arrayNumber, VarType.arrayString, VarType.arrayObject].includes(varPayload.type)
+    return [VarType.string, VarType.number, VarType.secret, VarType.object, VarType.array, VarType.arrayNumber, VarType.arrayString, VarType.arrayObject].includes(varPayload.type)
  }, [])

  // single run
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -1,15 +1,18 @@
 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 { getVarType, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { 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 { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { BlockEnum } from '@/app/components/workflow/types'

 const Node: FC<NodeProps<EndNodeType>> = ({
@@ -18,6 +21,7 @@ const Node: FC<NodeProps<EndNodeType>> = ({
 }) => {
  const { getBeforeNodesInSameBranch } = useWorkflow()
  const availableNodes = getBeforeNodesInSameBranch(id)
+  const { getCurrentVariableType } = useWorkflowVariables()
  const isChatMode = useIsChatMode()

  const startNode = availableNodes.find((node: any) => {
@@ -39,8 +43,9 @@ const Node: FC<NodeProps<EndNodeType>> = ({
      {filteredOutputs.map(({ value_selector }, index) => {
        const node = getNode(value_selector[0])
        const isSystem = isSystemVar(value_selector)
+        const isEnv = isENV(value_selector)
        const varName = isSystem ? `sys.${value_selector[value_selector.length - 1]}` : value_selector[value_selector.length - 1]
-        const varType = getVarType({
+        const varType = getCurrentVariableType({
          valueSelector: value_selector,
          availableNodes,
          isChatMode,
@@ -48,17 +53,22 @@ const Node: FC<NodeProps<EndNodeType>> = ({
        return (
          <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
            <div className='flex items-center text-xs font-medium text-gray-500'>
-              <div className='p-[1px]'>
-                <VarBlockIcon
-                  className='!text-gray-900'
-                  type={node?.data.type || BlockEnum.Start}
-                />
-              </div>
-              <div className='max-w-[75px] truncate'>{node?.data.title}</div>
-              <Line3 className='mr-0.5'></Line3>
+              {!isEnv && (
+                <>
+                  <div className='p-[1px]'>
+                    <VarBlockIcon
+                      className='!text-gray-900'
+                      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-primary-600'>
-                <Variable02 className='w-3.5 h-3.5' />
-                <div className='max-w-[50px] ml-0.5 text-xs font-medium truncate'>{varName}</div>
+                {!isEnv && <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />}
+                {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+                <div className={cn('max-w-[50px] ml-0.5 text-xs font-medium truncate', isEnv && '!max-w-[70px] text-gray-900')}>{varName}</div>
              </div>
            </div>
            <div className='text-xs font-normal text-gray-700'>
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -42,7 +42,7 @@ const ApiInput: FC<Props> = ({
  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
    },
  })

--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -1,17 +1,23 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import produce from 'immer'
 import type { Authorization as AuthorizationPayloadType } from '../../types'
 import { APIType, AuthorizationType } from '../../types'
 import RadioGroup from './radio-group'
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
+import { VarType } from '@/app/components/workflow/types'
+import type { Var } from '@/app/components/workflow/types'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
+import cn from '@/utils/classnames'

 const i18nPrefix = 'workflow.nodes.http.authorization'

 type Props = {
+  nodeId: string
  payload: AuthorizationPayloadType
  onChange: (payload: AuthorizationPayloadType) => void
  isShow: boolean
@@ -31,6 +37,7 @@ const Field = ({ title, isRequired, children }: { title: string; isRequired?: bo
 }

 const Authorization: FC<Props> = ({
+  nodeId,
  payload,
  onChange,
  isShow,
@@ -38,6 +45,14 @@ const Authorization: FC<Props> = ({
 }) => {
  const { t } = useTranslation()

+  const [isFocus, setIsFocus] = useState(false)
+  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
+    onlyLeafNodeVar: false,
+    filterVar: (varPayload: Var) => {
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+    },
+  })
+
  const [tempPayload, setTempPayload] = React.useState<AuthorizationPayloadType>(payload)
  const handleAuthTypeChange = useCallback((type: string) => {
    const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
@@ -80,6 +95,19 @@ const Authorization: FC<Props> = ({
    }
  }, [tempPayload, setTempPayload])

+  const handleAPIKeyChange = useCallback((str: string) => {
+    const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
+      if (!draft.config) {
+        draft.config = {
+          type: APIType.basic,
+          api_key: '',
+        }
+      }
+      draft.config.api_key = str
+    })
+    setTempPayload(newPayload)
+  }, [tempPayload, setTempPayload])
+
  const handleConfirm = useCallback(() => {
    onChange(tempPayload)
    onHide()
@@ -128,12 +156,19 @@ const Authorization: FC<Props> = ({
              )}

              <Field title={t(`${i18nPrefix}.api-key-title`)} isRequired>
-                <input
-                  type='text'
-                  className='w-full h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-                  value={tempPayload.config?.api_key || ''}
-                  onChange={handleAPIKeyOrHeaderChange('api_key')}
-                />
+                <div className='flex'>
+                  <Input
+                    instanceId='http-api-key'
+                    className={cn(isFocus ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'w-0 grow rounded-lg px-3 py-[6px] border')}
+                    value={tempPayload.config?.api_key || ''}
+                    onChange={handleAPIKeyChange}
+                    nodesOutputVars={availableVars}
+                    availableNodes={availableNodesWithParent}
+                    onFocusChange={setIsFocus}
+                    placeholder={' '}
+                    placeholderClassName='!leading-[21px]'
+                  />
+                </div>
              </Field>
            </>
          )}
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -44,7 +44,7 @@ const EditBody: FC<Props> = ({
  const { availableVars, availableNodes } = useAvailableVarList(nodeId, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
    },
  })

--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -39,7 +39,7 @@ const InputItem: FC<Props> = ({
  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
    },
  })

--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -125,6 +125,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
      </div>
      {(isShowAuthorization && !readOnly) && (
        <AuthorizationModal
+          nodeId={id}
          isShow
          onHide={hideAuthorization}
          payload={inputs.authorization}
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -103,7 +103,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
  }, [inputs, setInputs])

  const filterVar = useCallback((varPayload: Var) => {
-    return [VarType.string, VarType.number].includes(varPayload.type)
+    return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
  }, [])

  // single run
--- a/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-value.tsx
@@ -9,8 +9,9 @@ import {
  isComparisonOperatorNeedTranslate,
 } from '../utils'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import cn from '@/utils/classnames'
-import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+import { isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'

 type ConditionValueProps = {
  variableSelector: string[]
@@ -32,7 +33,7 @@ const ConditionValue = ({
      return ''

    return value.replace(/{{#([^#]*)#}}/g, (a, b) => {
-      const arr = b.split('.')
+      const arr: string[] = b.split('.')
      if (isSystemVar(arr))
        return `{{${b}}}`

@@ -42,7 +43,8 @@ const ConditionValue = ({

  return (
    <div className='flex items-center px-1 h-6 rounded-md bg-workflow-block-parma-bg'>
-      <Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />
+      {!isENV(variableSelector) && <Variable02 className='shrink-0 mr-1 w-3.5 h-3.5 text-text-accent' />}
+      {isENV(variableSelector) && <Env className='shrink-0 mr-1 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
      <div
        className={cn(
          'shrink-0  truncate text-xs font-medium text-text-accent',
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -328,11 +328,11 @@ const useConfig = (id: string, payload: LLMNodeType) => {
  }, [inputs, setInputs])

  const filterInputVar = useCallback((varPayload: Var) => {
-    return [VarType.number, VarType.string].includes(varPayload.type)
+    return [VarType.number, VarType.string, VarType.secret].includes(varPayload.type)
  }, [])

  const filterVar = useCallback((varPayload: Var) => {
-    return [VarType.arrayObject, VarType.array, VarType.string].includes(varPayload.type)
+    return [VarType.arrayObject, VarType.array, VarType.number, VarType.string, VarType.secret].includes(varPayload.type)
  }, [])

  const {
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -40,7 +40,7 @@ const InputVarList: FC<Props> = ({
  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number].includes(varPayload.type)
+      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
    },
  })
  const paramType = (type: string) => {
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -19,8 +19,8 @@ import {
 import { filterVar } from '../utils'
 import AddVariable from './add-variable'
 import NodeVariableItem from './node-variable-item'
+import { isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import cn from '@/utils/classnames'
-import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'

 const i18nPrefix = 'workflow.nodes.variableAssigner'
 type GroupItem = {
@@ -55,7 +55,7 @@ const NodeGroupItem = ({
    const group = item.variableAssignerNodeData.advanced_settings?.groups.find(group => group.groupId === item.targetHandleId)
    return group?.output_type || ''
  }, [item.variableAssignerNodeData, item.targetHandleId, groupEnabled])
-  const availableVars = getAvailableVars(item.variableAssignerNodeId, item.targetHandleId, filterVar(outputType as VarType))
+  const availableVars = getAvailableVars(item.variableAssignerNodeId, item.targetHandleId, filterVar(outputType as VarType), true)
  const showSelectionBorder = useMemo(() => {
    if (groupEnabled && enteringNodePayload?.nodeId === item.variableAssignerNodeId) {
      if (hoveringAssignVariableGroupId)
@@ -123,12 +123,14 @@ const NodeGroupItem = ({
      {
        !!item.variables.length && item.variables.map((variable = [], index) => {
          const isSystem = isSystemVar(variable)
+          const isEnv = isENV(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 (
            <NodeVariableItem
              key={index}
+              isEnv={isEnv}
              node={node as Node}
              varName={varName}
              showBorder={showSelectedBorder || showSelectionBorder}
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -3,15 +3,18 @@ import cn from '@/utils/classnames'
 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 { Env } from '@/app/components/base/icons/src/vender/line/others'
 import type { Node } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'

 type NodeVariableItemProps = {
+  isEnv: boolean
  node: Node
  varName: string
  showBorder?: boolean
 }
 const NodeVariableItem = ({
+  isEnv,
  node,
  varName,
  showBorder,
@@ -21,19 +24,22 @@ const NodeVariableItem = ({
      'relative flex items-center mt-0.5 h-6 bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700',
      showBorder && '!bg-black/[0.02]',
    )}>
-      <div className='flex items-center'>
-        <div className='p-[1px]'>
-          <VarBlockIcon
-            className='!text-gray-900'
-            type={node?.data.type || BlockEnum.Start}
-          />
+      {!isEnv && (
+        <div className='flex items-center'>
+          <div className='p-[1px]'>
+            <VarBlockIcon
+              className='!text-gray-900'
+              type={node?.data.type || BlockEnum.Start}
+            />
+          </div>
+          <div className='max-w-[85px] truncate mx-0.5 text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
+          <Line3 className='mr-0.5'></Line3>
        </div>
-        <div className='max-w-[85px] truncate mx-0.5 text-xs font-medium text-gray-700' title={node?.data.title}>{node?.data.title}</div>
-        <Line3 className='mr-0.5'></Line3>
-      </div>
+      )}
      <div className='flex items-center text-primary-600'>
-        <Variable02 className='w-3.5 h-3.5' />
-        <div className='max-w-[75px] truncate ml-0.5 text-xs font-medium' title={varName}>{varName}</div>
+        {!isEnv && <Variable02 className='shrink-0 w-3.5 h-3.5 text-primary-500' />}
+        {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
+        <div className={cn('max-w-[75px] truncate ml-0.5 text-xs font-medium', isEnv && 'text-gray-900')} title={varName}>{varName}</div>
      </div>
    </div>
  )
--- a/web/app/components/workflow/nodes/variable-assigner/hooks.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/hooks.ts
@@ -3,13 +3,13 @@ import {
  useNodes,
  useStoreApi,
 } from 'reactflow'
-import { useTranslation } from 'react-i18next'
 import { uniqBy } from 'lodash-es'
 import produce from 'immer'
 import {
  useIsChatMode,
  useNodeDataUpdate,
  useWorkflow,
+  useWorkflowVariables,
 } from '../../hooks'
 import type {
  Node,
@@ -21,7 +21,6 @@ import type {
  VarGroupItem,
  VariableAssignerNodeType,
 } from './types'
-import { toNodeAvailableVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'

 export const useVariableAssigner = () => {
  const store = useStoreApi()
@@ -123,11 +122,11 @@ export const useVariableAssigner = () => {
 }

 export const useGetAvailableVars = () => {
-  const { t } = useTranslation()
  const nodes: Node[] = useNodes()
  const { getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
+  const { getNodeAvailableVars } = useWorkflowVariables()
  const isChatMode = useIsChatMode()
-  const getAvailableVars = useCallback((nodeId: string, handleId: string, filterVar: (v: Var) => boolean) => {
+  const getAvailableVars = useCallback((nodeId: string, handleId: string, filterVar: (v: Var) => boolean, hideEnv = false) => {
    const availableNodes: Node[] = []
    const currentNode = nodes.find(node => node.id === nodeId)!

@@ -138,14 +137,28 @@ export const useGetAvailableVars = () => {
    availableNodes.push(...beforeNodes)
    const parentNode = nodes.find(node => node.id === currentNode.parentId)

-    return toNodeAvailableVars({
+    if (hideEnv) {
+      return getNodeAvailableVars({
+        parentNode,
+        beforeNodes: uniqBy(availableNodes, 'id').filter(node => node.id !== nodeId),
+        isChatMode,
+        hideEnv,
+        filterVar,
+      })
+        .map(node => ({
+          ...node,
+          vars: node.isStartNode ? node.vars.filter(v => !v.variable.startsWith('sys.')) : node.vars,
+        }))
+        .filter(item => item.vars.length > 0)
+    }
+
+    return getNodeAvailableVars({
      parentNode,
-      t,
      beforeNodes: uniqBy(availableNodes, 'id').filter(node => node.id !== nodeId),
      isChatMode,
      filterVar,
    })
-  }, [nodes, t, isChatMode, getBeforeNodesInSameBranchIncludeParent])
+  }, [nodes, getBeforeNodesInSameBranchIncludeParent, getNodeAvailableVars, isChatMode])

  return getAvailableVars
 }
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -51,7 +51,7 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
              }}
              onChange={handleListOrTypeChange}
              groupEnabled={false}
-              availableVars={getAvailableVars(id, 'target', filterVar(inputs.output_type))}
+              availableVars={getAvailableVars(id, 'target', filterVar(inputs.output_type), true)}
            />
          )
          : (<div>
@@ -67,7 +67,7 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
                    canRemove={!readOnly && inputs.advanced_settings?.groups.length > 1}
                    onRemove={handleGroupRemoved(item.groupId)}
                    onGroupNameChange={handleVarGroupNameChange(item.groupId)}
-                    availableVars={getAvailableVars(id, item.groupId, filterVar(item.output_type))}
+                    availableVars={getAvailableVars(id, item.groupId, filterVar(item.output_type), true)}
                  />
                  {index !== inputs.advanced_settings?.groups.length - 1 && <Split className='my-4' />}
                </div>