Merge branch 'feat/llm-struct-output' of https://github.com/langgenius/dify into feat/llm-struct-output

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)

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -11,6 +11,7 @@ import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import {
   RiErrorWarningFill,
+  RiMoreLine,
 } from '@remixicon/react'
 import { useSelectOrDelete } from '../../hooks'
 import type { WorkflowNodesMap } from './node'
@@ -27,6 +28,8 @@ import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import Tooltip from '@/app/components/base/tooltip'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
+import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
+import { Type } from '@/app/components/workflow/nodes/llm/types'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -43,10 +46,11 @@ const WorkflowVariableBlockComponent = ({
   const [editor] = useLexicalComposerContext()
   const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND)
   const variablesLength = variables.length
+  const isShowAPart = variablesLength > 2
   const varName = (
     () => {
       const isSystem = isSystemVar(variables)
-      const varName = variablesLength >= 3 ? (variables).slice(-2).join('.') : variables[variablesLength - 1]
+      const varName = variables[variablesLength - 1]
       return `${isSystem ? 'sys.' : ''}${varName}`
     }
   )()
@@ -76,7 +80,7 @@ const WorkflowVariableBlockComponent = ({
   const Item = (
     <div
       className={cn(
-        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none',
+        'mx-0.5 relative group/wrap flex items-center h-[18px] pl-0.5 pr-[3px] rounded-[5px] border select-none hover:border-state-accent-solid hover:bg-state-accent-hover',
         isSelected ? ' border-state-accent-solid bg-state-accent-hover' : ' border-components-panel-border-subtle bg-components-badge-white-to-dark',
         !node && !isEnv && !isChatVar && '!border-state-destructive-solid !bg-state-destructive-hover',
       )}
@@ -99,6 +103,13 @@ const WorkflowVariableBlockComponent = ({
           <Line3 className='mr-0.5 text-divider-deep'></Line3>
         </div>
       )}
+      {isShowAPart && (
+        <div className='flex items-center'>
+          <RiMoreLine className='w-3 h-3 text-text-secondary' />
+          <Line3 className='mr-0.5 text-divider-deep'></Line3>
+        </div>
+      )}
+
       <div className='flex items-center text-text-accent'>
         {!isEnv && !isChatVar && <Variable02 className={cn('shrink-0 w-3.5 h-3.5', isException && 'text-text-warning')} />}
         {isEnv && <Env className='shrink-0 w-3.5 h-3.5 text-util-colors-violet-violet-600' />}
@@ -126,7 +137,21 @@ const WorkflowVariableBlockComponent = ({
     )
   }
 
-  return Item
+  return (
+    <Tooltip
+      noDecoration
+      popupContent={
+        <VarFullPathPanel
+          nodeName={node.title}
+          path={variables.slice(1)}
+          varType={Type.string}
+          nodeType={node?.type}
+        />}
+      disabled={!isShowAPart}
+    >
+      {Item}
+    </Tooltip>
+  )
 }
 
 export default memo(WorkflowVariableBlockComponent)

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}
+              key={propName}
-              name={name}
+              name={propName}
-              payload={payload.properties?.[name] as FieldType}
+              payload={payload.properties?.[propName] as FieldType}
               depth={depth + 1}
               readonly={readonly}
               valueSelector={[...valueSelector, name]}

web/app/components/workflow/nodes/_base/components/variable/utils.ts

@@ -67,6 +67,16 @@ const structTypeToVarType = (type: Type): VarType => {
   } as any)[type] || VarType.string
 }
 
+export const varTypeToStructType = (type: VarType): Type => {
+  return ({
+    [VarType.string]: Type.string,
+    [VarType.number]: Type.number,
+    [VarType.boolean]: Type.boolean,
+    [VarType.object]: Type.object,
+    [VarType.array]: Type.array,
+  } as any)[type] || Type.string
+}
+
 const findExceptVarInStructuredProperties = (properties: Record<string, StructField>, filterVar: (payload: Var, selector: ValueSelector) => boolean): Record<string, StructField> => {
   const res = produce(properties, (draft) => {
     Object.keys(properties).forEach((key) => {
@@ -646,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))

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

@@ -6,16 +6,19 @@ 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
+  nodeType?: BlockEnum
 }
 
 const VarFullPathPanel: FC<Props> = ({
   nodeName,
   path,
   varType,
+  nodeType = BlockEnum.LLM,
 }) => {
   const schema: StructuredOutput = (() => {
     const schema: StructuredOutput['schema'] = {
@@ -25,7 +28,7 @@ const VarFullPathPanel: FC<Props> = ({
       additionalProperties: false,
     }
     let current = schema
-    for (let i = 0; i < path.length; i++) {
+    for (let i = 1; i < path.length; i++) {
       const isLast = i === path.length - 1
       const name = path[i]
       current.properties[name] = {
@@ -41,12 +44,12 @@ const VarFullPathPanel: FC<Props> = ({
   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} />
+        <BlockIcon size='xs' type={nodeType} />
         <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
+        root={{ attrName: path[0] }}
         payload={schema}
         readonly
       />

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

@@ -6,13 +6,14 @@ import {
   RiArrowDownSLine,
   RiCloseLine,
   RiErrorWarningFill,
+  RiMoreLine,
 } from '@remixicon/react'
 import produce from 'immer'
 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'
@@ -37,6 +38,7 @@ import AddButton from '@/app/components/base/button/add-button'
 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'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
@@ -156,16 +158,15 @@ const VarReferencePicker: FC<Props> = ({
     return getNodeInfoById(availableNodes, outputVarNodeId)?.data
   }, [value, hasValue, isConstant, isIterationVar, iterationNode, availableNodes, outputVarNodeId, startNode])
 
-  const varName = useMemo(() => {
+  const isShowAPart = (value as ValueSelector).length > 2
-    if (hasValue) {
-      const isSystem = isSystemVar(value as ValueSelector)
-      let varName = ''
-      if (Array.isArray(value))
-        varName = value.length >= 3 ? (value as ValueSelector).slice(-2).join('.') : value[value.length - 1]
 
-      return `${isSystem ? 'sys.' : ''}${varName}`
+  const varName = useMemo(() => {
-    }
+    if (!hasValue)
-    return ''
+      return ''
+
+    const isSystem = isSystemVar(value as ValueSelector)
+    const varName = Array.isArray(value) ? value[(value as ValueSelector).length - 1] : ''
+    return `${isSystem ? 'sys.' : ''}${varName}`
   }, [hasValue, value])
 
   const varKindTypes = [
@@ -253,6 +254,22 @@ const VarReferencePicker: FC<Props> = ({
 
   const WrapElem = isSupportConstantValue ? 'div' : PortalToFollowElemTrigger
   const VarPickerWrap = !isSupportConstantValue ? 'div' : PortalToFollowElemTrigger
+
+  const tooltipPopup = useMemo(() => {
+    if (isValidVar && isShowAPart) {
+      return (
+        <VarFullPathPanel
+          nodeName={outputVarNode?.title}
+          path={(value as ValueSelector).slice(1)}
+          varType={varTypeToStructType(type)}
+          nodeType={outputVarNode?.type}
+        />)
+    }
+    if (!isValidVar && hasValue)
+      return t('workflow.errorMsg.invalidVariable')
+
+    return null
+  }, [isValidVar, isShowAPart, hasValue, t, outputVarNode?.title, outputVarNode?.type, value, type])
   return (
     <div className={cn(className, !readonly && 'cursor-pointer')}>
       <PortalToFollowElem
@@ -317,7 +334,7 @@ const VarReferencePicker: FC<Props> = ({
                       className='grow h-full'
                     >
                       <div ref={isSupportConstantValue ? triggerRef : null} className={cn('h-full', isSupportConstantValue && 'flex items-center pl-1 py-1 rounded-lg bg-gray-100')}>
-                        <Tooltip popupContent={!isValidVar && hasValue && t('workflow.errorMsg.invalidVariable')}>
+                        <Tooltip popupContent={tooltipPopup} noDecoration={isShowAPart}>
                           <div className={cn('h-full items-center px-1.5 rounded-[5px]', hasValue ? 'bg-white inline-flex' : 'flex')}>
                             {hasValue
                               ? (
@@ -336,6 +353,12 @@ const VarReferencePicker: FC<Props> = ({
                                       <Line3 className='mr-0.5'></Line3>
                                     </div>
                                   )}
+                                  {isShowAPart && (
+                                    <div className='flex items-center'>
+                                      <RiMoreLine className='w-3 h-3 text-text-secondary' />
+                                      <Line3 className='mr-0.5 text-divider-deep'></Line3>
+                                    </div>
+                                  )}
                                   <div className='flex items-center text-primary-600'>
                                     {!hasValue && <Variable02 className='w-3.5 h-3.5' />}
                                     {isEnv && <Env className='w-3.5 h-3.5 text-util-colors-violet-violet-600' />}

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

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
@@ -15,20 +15,12 @@ import {
 import Input from '@/app/components/base/input'
 import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
 import { checkKeys } from '@/utils/var'
-import { FILE_STRUCT } from '@/app/components/workflow/constants'
 import type { StructuredOutput } from '../../../llm/types'
+import { Type } from '../../../llm/types'
 import PickerStructurePanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker'
-
+import { varTypeToStructType } from './utils'
-type ObjectChildrenProps = {
+import type { Field } from '@/app/components/workflow/nodes/llm/types'
-  nodeId: string
+import { FILE_STRUCT } from '@/app/components/workflow/constants'
-  title: string
-  data: Var[]
-  objPath: string[]
-  onChange: (value: ValueSelector, item: Var) => void
-  onHovering?: (value: boolean) => void
-  itemWidth?: number
-  isSupportFileVar?: boolean
-}
 
 type ItemProps = {
   nodeId: string
@@ -49,7 +41,6 @@ const Item: FC<ItemProps> = ({
   itemData,
   onChange,
   onHovering,
-  itemWidth,
   isSupportFileVar,
   isException,
 }) => {
@@ -59,6 +50,31 @@ const Item: FC<ItemProps> = ({
   const isSys = itemData.variable.startsWith('sys.')
   const isEnv = itemData.variable.startsWith('env.')
   const isChatVar = itemData.variable.startsWith('conversation.')
+
+  const objStructuredOutput: StructuredOutput | null = useMemo(() => {
+    if (!isObj) return null
+    const properties: Record<string, Field> = {};
+    (isFile ? FILE_STRUCT : (itemData.children as Var[])).forEach((c) => {
+      properties[c.variable] = {
+        type: varTypeToStructType(c.type),
+      }
+    })
+    return {
+      schema: {
+        type: Type.object,
+        properties,
+        required: [],
+        additionalProperties: false,
+      },
+    }
+  }, [isFile, isObj, itemData.children])
+
+  const structuredOutput = (() => {
+    if (isStructureOutput)
+      return itemData.children as StructuredOutput
+    return objStructuredOutput
+  })()
+
   const itemRef = useRef(null)
   const [isItemHovering, setIsItemHovering] = useState(false)
   const _ = useHover(itemRef, {
@@ -136,109 +152,21 @@ const Item: FC<ItemProps> = ({
       <PortalToFollowElemContent style={{
         zIndex: 100,
       }}>
-        {isStructureOutput && (
+        {(isStructureOutput || isObj) && (
           <PickerStructurePanel
             root={{ nodeId, nodeName: title, attrName: itemData.variable }}
-            payload={itemData.children as StructuredOutput}
+            payload={structuredOutput!}
             onHovering={setIsChildrenHovering}
             onSelect={(valueSelector) => {
               onChange(valueSelector, itemData)
             }}
           />
         )}
-        {(isObj && !isFile) && (
-          // eslint-disable-next-line ts/no-use-before-define
-          <ObjectChildren
-            nodeId={nodeId}
-            title={title}
-            objPath={[...objPath, itemData.variable]}
-            data={itemData.children as Var[]}
-            onChange={onChange}
-            onHovering={setIsChildrenHovering}
-            itemWidth={itemWidth}
-            isSupportFileVar={isSupportFileVar}
-          />
-        )}
-        {isFile && (
-          // eslint-disable-next-line ts/no-use-before-define
-          <ObjectChildren
-            nodeId={nodeId}
-            title={title}
-            objPath={[...objPath, itemData.variable]}
-            data={FILE_STRUCT}
-            onChange={onChange}
-            onHovering={setIsChildrenHovering}
-            itemWidth={itemWidth}
-            isSupportFileVar={isSupportFileVar}
-          />
-        )}
       </PortalToFollowElemContent>
     </PortalToFollowElem>
   )
 }
 
-const ObjectChildren: FC<ObjectChildrenProps> = ({
-  title,
-  nodeId,
-  objPath,
-  data,
-  onChange,
-  onHovering,
-  itemWidth,
-  isSupportFileVar,
-}) => {
-  const currObjPath = objPath
-  const itemRef = useRef(null)
-  const [isItemHovering, setIsItemHovering] = useState(false)
-  const _ = useHover(itemRef, {
-    onChange: (hovering) => {
-      if (hovering) {
-        setIsItemHovering(true)
-      }
-      else {
-        setTimeout(() => {
-          setIsItemHovering(false)
-        }, 100)
-      }
-    },
-  })
-  const [isChildrenHovering, setIsChildrenHovering] = useState(false)
-  const isHovering = isItemHovering || isChildrenHovering
-  useEffect(() => {
-    onHovering && onHovering(isHovering)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isHovering])
-  useEffect(() => {
-    onHovering && onHovering(isItemHovering)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isItemHovering])
-  // absolute top-[-2px]
-  return (
-    <div ref={itemRef} className=' bg-white rounded-lg border border-gray-200 shadow-lg space-y-1' style={{
-      right: itemWidth ? itemWidth - 10 : 215,
-      minWidth: 252,
-    }}>
-      <div className='flex items-center h-[22px] px-3 text-xs font-normal text-gray-700'><span className='text-gray-500'>{title}.</span>{currObjPath.join('.')}</div>
-      {
-        (data && data.length > 0)
-        && data.map((v, i) => (
-          <Item
-            key={i}
-            nodeId={nodeId}
-            title={title}
-            objPath={objPath}
-            itemData={v}
-            onChange={onChange}
-            onHovering={setIsChildrenHovering}
-            isSupportFileVar={isSupportFileVar}
-            isException={v.isException}
-          />
-        ))
-      }
-    </div>
-  )
-}
-
 type Props = {
   hideSearch?: boolean
   searchBoxClassName?: string