From 8adf0fa698b1656f45f26b518df7bc74ed28ff81 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 14 Mar 2025 16:03:23 +0800
Subject: [PATCH] feat: var picker can show the right var

---
 .../[appId]/overview/tracing/panel.tsx        |  2 +-
 .../object-child-tree-panel/picker/field.tsx  |  8 ++++----
 .../nodes/_base/components/variable/utils.ts  | 20 +++++++++++++++++++
 .../variable/var-reference-picker.tsx         |  7 +++----
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 6df1466df8..eb0e7371bb 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -82,7 +82,7 @@ const Panel: FC = () => {
         ? LangfuseIcon
         : inUseTracingProvider === TracingProvider.opik
           ? OpikIcon
-          : null
+          : LangsmithIcon
 
   const [langSmithConfig, setLangSmithConfig] = useState<LangSmithConfig | null>(null)
   const [langFuseConfig, setLangFuseConfig] = useState<LangFuseConfig | null>(null)
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index 7c8ad80f88..b01badca57 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -58,11 +58,11 @@ const Field: FC<Props> = ({
 
       {depth <= MAX_DEPTH && payload.type === Type.object && payload.properties && (
         <div>
-          {Object.keys(payload.properties).map(name => (
+          {Object.keys(payload.properties).map(propName => (
             <Field
-              key={name}
-              name={name}
-              payload={payload.properties?.[name] as FieldType}
+              key={propName}
+              name={propName}
+              payload={payload.properties?.[propName] as FieldType}
               depth={depth + 1}
               readonly={readonly}
               valueSelector={[...valueSelector, name]}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/utils.ts b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
index 187b2f18e5..e407e7ea81 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts
+++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts
@@ -656,10 +656,30 @@ export const getVarType = ({
 
   let type: VarType = VarType.string
   let curr: any = targetVar.vars
+
   if (isSystem || isEnv || isChatVar) {
     return curr.find((v: any) => v.variable === (valueSelector as ValueSelector).join('.'))?.type
   }
   else {
+    const targetVar = curr.find((v: any) => v.variable === valueSelector[1])
+    if (!targetVar)
+      return VarType.string
+
+    const isStructuredOutputVar = !!targetVar.children.schema?.properties
+    if (isStructuredOutputVar) {
+      let currProperties = targetVar.children.schema;
+      (valueSelector as ValueSelector).slice(2).forEach((key, i) => {
+        const isLast = i === valueSelector.length - 3
+        if (!currProperties)
+          return
+
+        currProperties = currProperties.properties[key]
+        if (isLast)
+          type = structTypeToVarType(currProperties?.type)
+      })
+      return type
+    }
+
     (valueSelector as ValueSelector).slice(1).forEach((key, i) => {
       const isLast = i === valueSelector.length - 2
       if (Array.isArray(curr))
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 b776983803..64319044e4 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
@@ -13,7 +13,7 @@ import { useStoreApi } from 'reactflow'
 import RemoveButton from '../remove-button'
 import useAvailableVarList from '../../hooks/use-available-var-list'
 import VarReferencePopup from './var-reference-popup'
-import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from './utils'
+import { getNodeInfoById, isConversationVar, isENV, isSystemVar, varTypeToStructType } from './utils'
 import ConstantField from './constant-field'
 import cn from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
@@ -39,7 +39,6 @@ import Badge from '@/app/components/base/badge'
 import Tooltip from '@/app/components/base/tooltip'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import VarFullPathPanel from './var-full-path-panel'
-import { Type } from '../../../llm/types'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
@@ -262,7 +261,7 @@ const VarReferencePicker: FC<Props> = ({
         <VarFullPathPanel
           nodeName={outputVarNode?.title}
           path={(value as ValueSelector).slice(1)}
-          varType={Type.string}
+          varType={varTypeToStructType(type)}
           nodeType={outputVarNode?.type}
         />)
     }
@@ -270,7 +269,7 @@ const VarReferencePicker: FC<Props> = ({
       return t('workflow.errorMsg.invalidVariable')
 
     return null
-  }, [isValidVar, isShowAPart, hasValue, t, outputVarNode?.title, outputVarNode?.type, value])
+  }, [isValidVar, isShowAPart, hasValue, t, outputVarNode?.title, outputVarNode?.type, value, type])
   return (
     <div className={cn(className, !readonly && 'cursor-pointer')}>
       <PortalToFollowElem