feat: support choose var

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx

@@ -8,22 +8,27 @@ import cn from '@/utils/classnames'
 import TreeIndentLine from '../tree-indent-line'
 import { RiMoreFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
+import type { ValueSelector } from '@/app/components/workflow/types'
 import { useTranslation } from 'react-i18next'
 
 const MAX_DEPTH = 10
 
 type Props = {
+  valueSelector: ValueSelector
   name: string,
   payload: FieldType,
   depth?: number
   readonly?: boolean
+  onSelect?: (valueSelector: ValueSelector) => void
 }
 
 const Field: FC<Props> = ({
+  valueSelector,
   name,
   payload,
   depth = 1,
   readonly,
+  onSelect,
 }) => {
   const { t } = useTranslation()
   const isLastFieldHighlight = readonly
@@ -34,7 +39,10 @@ const Field: FC<Props> = ({
   return (
     <div>
       <Tooltip popupContent={t('app.structOutput.moreFillTip')} disabled={depth !== MAX_DEPTH + 1}>
-        <div className={cn('flex pr-2 items-center justify-between rounded-md', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}>
+        <div
+          className={cn('flex pr-2 items-center justify-between rounded-md', !readonly && 'hover:bg-state-base-hover', depth !== MAX_DEPTH + 1 && 'cursor-pointer')}
+          onClick={() => !readonly && onSelect?.([...valueSelector, name])}
+        >
           <div className='grow flex items-stretch'>
             <TreeIndentLine depth={depth} />
             {depth === MAX_DEPTH + 1 ? (
@@ -57,6 +65,8 @@ const Field: FC<Props> = ({
               payload={payload.properties?.[name] as FieldType}
               depth={depth + 1}
               readonly={readonly}
+              valueSelector={[...valueSelector, name]}
+              onSelect={onSelect}
             />
           ))}
         </div>

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx

@@ -1,17 +1,18 @@
 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
-import type { Field as FieldType, StructuredOutput } from '../../../../../llm/types'
+import type { StructuredOutput } from '../../../../../llm/types'
 import Field from './field'
 import cn from '@/utils/classnames'
 import { useHover } from 'ahooks'
+import type { ValueSelector } from '@/app/components/workflow/types'
 
 type Props = {
   className?: string
-  root: { nodeName?: string, attrName: string }
+  root: { nodeId?: string, nodeName?: string, attrName: string }
   payload: StructuredOutput
   readonly?: boolean
-  onSelect?: (field: FieldType) => void
+  onSelect?: (valueSelector: ValueSelector) => void
   onHovering?: (value: boolean) => void
 }
 
@@ -21,6 +22,7 @@ export const PickerPanelMain: FC<Props> = ({
   payload,
   readonly,
   onHovering,
+  onSelect,
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   useHover(ref, {
@@ -59,6 +61,8 @@ export const PickerPanelMain: FC<Props> = ({
           name={name}
           payload={schema.properties[name]}
           readonly={readonly}
+          valueSelector={[root.nodeId!, root.attrName]}
+          onSelect={onSelect}
         />
       ))}
     </div>

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -138,9 +138,12 @@ const Item: FC<ItemProps> = ({
       }}>
         {isStructureOutput && (
           <PickerStructurePanel
-            root={{ attrName: itemData.variable }}
+            root={{ nodeId, nodeName: title, attrName: itemData.variable }}
             payload={itemData.children as StructuredOutput}
             onHovering={setIsChildrenHovering}
+            onSelect={(valueSelector) => {
+              onChange(valueSelector, itemData)
+            }}
           />
         )}
         {(isObj && !isFile) && (