feat: llm support struct output (#17994)

Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>

web/app/components/workflow/nodes/tool/panel.tsx

@@ -17,6 +17,8 @@ import ResultPanel from '@/app/components/workflow/run/result-panel'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import { useLogs } from '@/app/components/workflow/run/hooks'
 import formatToTracingNodeList from '@/app/components/workflow/run/utils/format-log'
+import StructureOutputItem from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
+import { Type } from '../llm/types'
 
 const i18nPrefix = 'workflow.nodes.tool'
 
@@ -51,6 +53,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     handleStop,
     runResult,
     outputSchema,
+    hasObjectOutput,
   } = useConfig(id, data)
   const toolIcon = useToolIcon(data)
   const logsParams = useLogs()
@@ -134,26 +137,45 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
           <>
             <VarItem
               name='text'
-              type='String'
+              type='string'
               description={t(`${i18nPrefix}.outputVars.text`)}
+              isIndent={hasObjectOutput}
             />
             <VarItem
               name='files'
-              type='Array[File]'
+              type='array[file]'
               description={t(`${i18nPrefix}.outputVars.files.title`)}
+              isIndent={hasObjectOutput}
             />
             <VarItem
               name='json'
-              type='Array[Object]'
+              type='array[object]'
               description={t(`${i18nPrefix}.outputVars.json`)}
+              isIndent={hasObjectOutput}
             />
             {outputSchema.map(outputItem => (
-              <VarItem
-                key={outputItem.name}
-                name={outputItem.name}
-                type={outputItem.type}
-                description={outputItem.description}
-              />
+              <div key={outputItem.name}>
+                {outputItem.value?.type === 'object' ? (
+                  <StructureOutputItem
+                    rootClassName='code-sm-semibold text-text-secondary'
+                    payload={{
+                      schema: {
+                        type: Type.object,
+                        properties: {
+                          [outputItem.name]: outputItem.value,
+                        },
+                        additionalProperties: false,
+                      },
+                    }} />
+                ) : (
+                  <VarItem
+                    name={outputItem.name}
+                    type={outputItem.type.toLocaleLowerCase()}
+                    description={outputItem.description}
+                    isIndent={hasObjectOutput}
+                  />
+                )}
+              </div>
             ))}
           </>
         </OutputVars>

web/app/components/workflow/nodes/tool/use-config.ts

@@ -262,17 +262,33 @@ const useConfig = (id: string, payload: ToolNodeType) => {
       return []
     Object.keys(output_schema.properties).forEach((outputKey) => {
       const output = output_schema.properties[outputKey]
-      res.push({
-        name: outputKey,
-        type: output.type === 'array'
-          ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
-          : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
-        description: output.description,
-      })
+      const type = output.type
+      if (type === 'object') {
+        res.push({
+          name: outputKey,
+          value: output,
+        })
+      }
+      else {
+        res.push({
+          name: outputKey,
+          type: output.type === 'array'
+            ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
+            : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
+          description: output.description,
+        })
+      }
     })
     return res
   }, [output_schema])
 
+  const hasObjectOutput = useMemo(() => {
+    if (!output_schema)
+      return false
+    const properties = output_schema.properties
+    return Object.keys(properties).some(key => properties[key].type === 'object')
+  }, [output_schema])
+
   return {
     readOnly,
     inputs,
@@ -302,6 +318,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     handleStop,
     runResult,
     outputSchema,
+    hasObjectOutput,
   }
 }