Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>
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/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>