From 7510e0654ba8f1737ab239d8985629ee95c5a42c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 17 Oct 2025 14:24:20 +0800
Subject: [PATCH] fix: show global vars in picker

---
 .../variable/var-reference-picker.tsx         | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git 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
index fea1415421..df49174797 100644
--- 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
@@ -18,7 +18,7 @@ import {
 import RemoveButton from '../remove-button'
 import useAvailableVarList from '../../hooks/use-available-var-list'
 import VarReferencePopup from './var-reference-popup'
-import { getNodeInfoById, isConversationVar, isENV, isRagVariableVar, isSystemVar, removeFileVars, varTypeToStructType } from './utils'
+import { getNodeInfoById, isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar, removeFileVars, varTypeToStructType } from './utils'
 import ConstantField from './constant-field'
 import cn from '@/utils/classnames'
 import type { CommonNodeType, Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
@@ -50,6 +50,7 @@ import { noop } from 'lodash-es'
 import type { Tool } from '@/app/components/tools/types'
 import { useFetchDynamicOptions } from '@/service/use-plugins'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
+import { VAR_SHOW_NAME_MAP } from '@/app/components/workflow/constants'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
@@ -205,6 +206,9 @@ const VarReferencePicker: FC<Props> = ({
   const varName = useMemo(() => {
     if (!hasValue)
       return ''
+    const showName = VAR_SHOW_NAME_MAP[(value as ValueSelector).join('.')]
+    if(showName)
+      return showName
 
     const isSystem = isSystemVar(value as ValueSelector)
     const varName = Array.isArray(value) ? value[(value as ValueSelector).length - 1] : ''
@@ -293,15 +297,17 @@ const VarReferencePicker: FC<Props> = ({
     preferSchemaType,
   })
 
-  const { isEnv, isChatVar, isRagVar, isValidVar, isException } = useMemo(() => {
+  const { isEnv, isChatVar, isGlobal, isRagVar, isValidVar, isException } = useMemo(() => {
     const isEnv = isENV(value as ValueSelector)
     const isChatVar = isConversationVar(value as ValueSelector)
+    const isGlobal = isGlobalVar(value as ValueSelector)
     const isRagVar = isRagVariableVar(value as ValueSelector)
-    const isValidVar = Boolean(outputVarNode) || isEnv || isChatVar || isRagVar
+    const isValidVar = Boolean(outputVarNode) || isEnv || isChatVar || isGlobal || isRagVar
     const isException = isExceptionVariable(varName, outputVarNode?.type)
     return {
       isEnv,
       isChatVar,
+      isGlobal,
       isRagVar,
       isValidVar,
       isException,
@@ -394,10 +400,11 @@ const VarReferencePicker: FC<Props> = ({
   const variableCategory = useMemo(() => {
     if (isEnv) return 'environment'
     if (isChatVar) return 'conversation'
+    if (isGlobal) return 'global'
     if (isLoopVar) return 'loop'
     if (isRagVar) return 'rag'
     return 'system'
-  }, [isEnv, isChatVar, isLoopVar, isRagVar])
+  }, [isEnv, isChatVar, isGlobal, isLoopVar, isRagVar])
 
   return (
     <div className={cn(className, !readonly && 'cursor-pointer')}>
@@ -475,7 +482,7 @@ const VarReferencePicker: FC<Props> = ({
                             {hasValue
                               ? (
                                 <>
-                                  {isShowNodeName && !isEnv && !isChatVar && !isRagVar && (
+                                  {isShowNodeName && !isEnv && !isChatVar && !isGlobal && !isRagVar && (
                                     <div className='flex items-center' onClick={(e) => {
                                       if (e.metaKey || e.ctrlKey) {
                                         e.stopPropagation()
@@ -503,10 +510,11 @@ const VarReferencePicker: FC<Props> = ({
                                   <div className='flex items-center text-text-accent'>
                                     {isLoading && <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />}
                                     <VariableIconWithColor
+                                      variables={value as ValueSelector}
                                       variableCategory={variableCategory}
                                       isExceptionVariable={isException}
                                     />
-                                    <div className={cn('ml-0.5 truncate text-xs font-medium', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning')} title={varName} style={{
+                                    <div className={cn('ml-0.5 truncate text-xs font-medium', isEnv && '!text-text-secondary', isChatVar && 'text-util-colors-teal-teal-700', isException && 'text-text-warning', isGlobal && 'text-util-colors-orange-orange-600')} title={varName} style={{
                                       maxWidth: maxVarNameWidth,
                                     }}>{varName}</div>
                                   </div>