feat: show var full path

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

@@ -12,25 +12,34 @@ import { useTranslation } from 'react-i18next'
 
 const MAX_DEPTH = 10
 
-type Props = { name: string, payload: FieldType, depth?: number }
+type Props = {
+  name: string,
+  payload: FieldType,
+  depth?: number
+  readonly?: boolean
+}
 
 const Field: FC<Props> = ({
   name,
   payload,
   depth = 1,
+  readonly,
 }) => {
   const { t } = useTranslation()
+  const isLastFieldHighlight = readonly
+  const hasChildren = payload.type === Type.object && payload.properties
+  const isHighlight = isLastFieldHighlight && !hasChildren
   if (depth > MAX_DEPTH + 1)
     return null
   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 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')}>
           <div className='grow flex items-stretch'>
             <TreeIndentLine depth={depth} />
             {depth === MAX_DEPTH + 1 ? (
               <RiMoreFill className='w-3 h-3 text-text-tertiary' />
-            ) : (<div className='h-6 leading-6 grow w-0 truncate system-sm-medium text-text-secondary'>{name}</div>)}
+            ) : (<div className={cn('h-6 leading-6 grow w-0 truncate system-sm-medium text-text-secondary', isHighlight && 'text-text-accent')}>{name}</div>)}
 
           </div>
           {depth < MAX_DEPTH + 1 && (
@@ -47,6 +56,7 @@ const Field: FC<Props> = ({
               name={name}
               payload={payload.properties?.[name] as FieldType}
               depth={depth + 1}
+              readonly={readonly}
             />
           ))}
         </div>

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

@@ -3,26 +3,35 @@ import type { FC } from 'react'
 import React from 'react'
 import type { Field as FieldType, StructuredOutput } from '../../../../../llm/types'
 import Field from './field'
+import cn from '@/utils/classnames'
 
 type Props = {
-  root: { nodeName: string, attrName: string }
+  className?: string
+  root: { nodeName?: string, attrName: string }
   payload: StructuredOutput
-  onSelect: (field: FieldType) => void
+  readonly?: boolean
+  onSelect?: (field: FieldType) => void
 }
 
-const PickerPanel: FC<Props> = ({
+export const PickerPanelMain: FC<Props> = ({
+  className,
   root,
   payload,
+  readonly,
 }) => {
   const schema = payload.schema
   const fieldNames = Object.keys(schema.properties)
   return (
-    <div className='w-[296px] p-1 pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+    <div className={cn(className)}>
       {/* Root info */}
       <div className='px-2 py-1 flex justify-between items-center'>
         <div className='flex'>
-          <div className='max-w-[100px] truncate system-sm-medium text-text-tertiary'>{root.nodeName}</div>
+          {root.nodeName && (
-          <div className='system-sm-medium text-text-tertiary'>.</div>
+            <>
+              <div className='max-w-[100px] truncate system-sm-medium text-text-tertiary'>{root.nodeName}</div>
+              <div className='system-sm-medium text-text-tertiary'>.</div>
+            </>
+          )}
           <div className='system-sm-medium text-text-secondary'>{root.attrName}</div>
         </div>
         {/* It must be object */}
@@ -33,9 +42,21 @@ const PickerPanel: FC<Props> = ({
           key={name}
           name={name}
           payload={schema.properties[name]}
+          readonly={readonly}
         />
       ))}
     </div>
   )
 }
+
+const PickerPanel: FC<Props> = ({
+  className,
+  ...props
+}) => {
+  return (
+    <div className={cn('w-[296px] p-1 pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]', className)}>
+      <PickerPanelMain {...props} />
+    </div>
+  )
+}
 export default React.memo(PickerPanel)

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

@@ -2,12 +2,19 @@
 import type { FC } from 'react'
 import React from 'react'
 import mockStructData from '@/app/components/workflow/nodes/llm/mock-struct-data'
+import VarFullPathPanel from '../var-full-path-panel'
 import PickerPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
+import { Type } from '../../../../llm/types'
 
 const Test: FC = () => {
   return (
-    <div className='mb-2'>
+    <div className='mb-2 space-y-2'>
+      <VarFullPathPanel
+        nodeName='LLM'
+        path={['memory', 'content', 'text']}
+        varType={Type.string}
+      />
       <div className='my-2 w-[404px] bg-white'>
         <ShowPanel
           payload={mockStructData}

web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx

@@ -0,0 +1,56 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Field, StructuredOutput, TypeWithArray } from '../../../llm/types'
+import { Type } from '../../../llm/types'
+import { PickerPanelMain as Panel } from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+type Props = {
+  nodeName: string
+  path: string[]
+  varType: TypeWithArray
+}
+
+const VarFullPathPanel: FC<Props> = ({
+  nodeName,
+  path,
+  varType,
+}) => {
+  const schema: StructuredOutput = (() => {
+    const schema: StructuredOutput['schema'] = {
+      type: Type.object,
+      properties: {} as { [key: string]: Field },
+      required: [],
+      additionalProperties: false,
+    }
+    let current = schema
+    for (let i = 0; i < path.length; i++) {
+      const isLast = i === path.length - 1
+      const name = path[i]
+      current.properties[name] = {
+        type: isLast ? varType : Type.object,
+        properties: {},
+      } as Field
+      current = current.properties[name] as { type: Type.object; properties: { [key: string]: Field; }; required: never[]; additionalProperties: false; }
+    }
+    return {
+      schema,
+    }
+  })()
+  return (
+    <div className='w-[280px] pb-0 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
+      <div className='flex p-3 pb-2 border-b-[0.5px] border-divider-subtle space-x-1 '>
+        <BlockIcon size='xs' type={BlockEnum.LLM} />
+        <div className='w-0 grow system-xs-medium text-text-secondary truncate'>{nodeName}</div>
+      </div>
+      <Panel
+        className='pt-2 pb-3 px-1'
+        root={{ attrName: 'structured_output' }} // now only LLM support this, so hard code the root
+        payload={schema}
+        readonly
+      />
+    </div>
+  )
+}
+export default React.memo(VarFullPathPanel)