-
-
- {description}
- {subItems && (
-
- {subItems.map((item, index) => (
-
- ))}
+
+ {isIndent &&
}
+
+
+
+ {description}
+ {subItems && (
+
+ {subItems.map((item, index) => (
+
+ ))}
+
+ )}
+
)
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index dd4d837d12..c6233ff377 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -35,6 +35,7 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
import Switch from '@/app/components/base/switch'
import { Jinja } from '@/app/components/base/icons/src/vender/workflow'
import { useStore } from '@/app/components/workflow/store'
+import { useWorkflowVariableType } from '@/app/components/workflow/hooks'
type Props = {
className?: string
@@ -144,6 +145,8 @@ const Editor: FC
= ({
eventEmitter?.emit({ type: PROMPT_EDITOR_INSERT_QUICKLY, instanceId } as any)
}
+ const getVarType = useWorkflowVariableType()
+
return (
@@ -251,6 +254,7 @@ const Editor: FC
= ({
workflowVariableBlock={{
show: true,
variables: nodesOutputVars || [],
+ getVarType,
workflowNodesMap: availableNodes.reduce((acc, node) => {
acc[node.id] = {
title: node.data.title,
diff --git a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index 749fb77e47..4a4ca454d3 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
@@ -9,6 +9,7 @@ import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from './variab
import { Line3 } from '@/app/components/base/icons/src/public/common'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import { RiMoreLine } from '@remixicon/react'
type Props = {
nodeId: string
value: string
@@ -45,6 +46,7 @@ const ReadonlyInputWithSelectVar: FC = ({
const isChatVar = isConversationVar(value)
const node = (isSystem ? startNode : getNodeInfoById(availableNodes, value[0]))?.data
const varName = `${isSystem ? 'sys.' : ''}${value[value.length - 1]}`
+ const isShowAPart = value.length > 2
return (
{str}
@@ -61,6 +63,12 @@ const ReadonlyInputWithSelectVar: FC = ({
+
+
+
+ )}
{!isEnv && !isChatVar &&
}
{isEnv &&
}
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
new file mode 100644
index 0000000000..f90f30e7ce
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -0,0 +1,77 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { Type } from '../../../../../llm/types'
+import { getFieldType } from '../../../../../llm/utils'
+import type { Field as FieldType } from '../../../../../llm/types'
+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
= ({
+ valueSelector,
+ name,
+ payload,
+ depth = 1,
+ readonly,
+ onSelect,
+}) => {
+ 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 (
+
+
+ !readonly && onSelect?.([...valueSelector, name])}
+ >
+
+
+ {depth === MAX_DEPTH + 1 ? (
+
+ ) : (
{name}
)}
+
+
+ {depth < MAX_DEPTH + 1 && (
+
{getFieldType(payload)}
+ )}
+
+
+ {depth <= MAX_DEPTH && payload.type === Type.object && payload.properties && (
+
+ {Object.keys(payload.properties).map(propName => (
+
+ ))}
+
+ )}
+
+ {/* Root info */}
+
+
+ {root.nodeName && (
+ <>
+
{root.nodeName}
+
.
+
+ )}
+
{root.attrName}
+
+ {/* It must be object */}
+
object
+
+ {fieldNames.map(name => (
+
+ ))}
+
+
+
+
+
+ {hasChildren && (
+
+ )}
+
{name}
+
{getFieldType(payload)}
+ {required &&
{t('app.structOutput.required')}
}
+
+ {payload.description && (
+
+
{payload.description}
+
+ )}
+
+
+
+ {hasChildren && !fold && (
+
+ {Object.keys(payload.properties!).map(name => (
+
+ ))}
+
+ )}
+
+ {Object.keys(schema.schema.properties!).map(name => (
+
+ ))}
+
+ )
+}
+export default React.memo(ShowPanel)
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
new file mode 100644
index 0000000000..475c119647
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -0,0 +1,24 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+ depth?: number,
+ className?: string,
+}
+
+const TreeIndentLine: FC = ({
+ depth = 1,
+ className,
+}) => {
+ const depthArray = Array.from({ length: depth }, (_, index) => index)
+ return (
+
+ {depthArray.map(d => (
+
+ ))}
+
= ({
className='h-full grow'
>
-
+
{hasValue
? (
@@ -353,6 +370,12 @@ const VarReferencePicker: FC
= ({
+
+
+
+ )}
{!hasValue &&
}
{isEnv &&
}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 27117c81b8..751e1990cf 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/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,6 +15,11 @@ 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 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'
+import type { Field } from '@/app/components/workflow/nodes/llm/types'
import { FILE_STRUCT } from '@/app/components/workflow/constants'
import { Loop } from '@/app/components/base/icons/src/vender/workflow'
import { noop } from 'lodash-es'
@@ -52,16 +57,41 @@ const Item: FC
= ({
itemData,
onChange,
onHovering,
- itemWidth,
isSupportFileVar,
isException,
isLoopVar,
}) => {
- const isFile = itemData.type === VarType.file
- const isObj = (objVarTypes.includes(itemData.type) && itemData.children && itemData.children.length > 0)
+ const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
+ const isFile = itemData.type === VarType.file && !isStructureOutput
+ const isObj = ([VarType.object, VarType.file].includes(itemData.type) && itemData.children && (itemData.children as Var[]).length > 0)
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 = {};
+ (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)
useHover(itemRef, {
@@ -70,7 +100,7 @@ const Item: FC = ({
setIsItemHovering(true)
}
else {
- if (isObj) {
+ if (isObj || isStructureOutput) {
setTimeout(() => {
setIsItemHovering(false)
}, 100)
@@ -83,7 +113,7 @@ const Item: FC = ({
})
const [isChildrenHovering, setIsChildrenHovering] = useState(false)
const isHovering = isItemHovering || isChildrenHovering
- const open = isObj && isHovering
+ const open = (isObj || isStructureOutput) && isHovering
useEffect(() => {
onHovering && onHovering(isHovering)
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -110,8 +140,8 @@ const Item: FC = ({
= ({
)}
{itemData.type}
- {isObj && (
-
- )}
-
+
)
}
@@ -331,7 +347,7 @@ const VarReferenceVars: FC
= ({
}
: {t('workflow.common.noVar')}
}
-
+
)
}
export default React.memo(VarReferenceVars)
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
index 925970e311..8ea313dd26 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx
@@ -39,7 +39,8 @@ const MetadataFilter = ({
disabled={metadataFilterMode === MetadataFilteringModeEnum.disabled || metadataFilterMode === MetadataFilteringModeEnum.manual}
collapsed={collapsed}
onCollapse={setCollapsed}
- trigger={
+ hideCollapseIcon
+ trigger={collapseIcon => (
@@ -52,6 +53,7 @@ const MetadataFilter = ({
)}
/>
+ {collapseIcon}
- }
+ )}
>
<>
{
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
new file mode 100644
index 0000000000..a3c2552b45
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -0,0 +1,140 @@
+import React, { type FC, useCallback, useEffect, useRef } from 'react'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+import classNames from '@/utils/classnames'
+import { Editor } from '@monaco-editor/react'
+import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
+import copy from 'copy-to-clipboard'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
+
+type CodeEditorProps = {
+ value: string
+ onUpdate?: (value: string) => void
+ showFormatButton?: boolean
+ editorWrapperClassName?: string
+ readOnly?: boolean
+} & React.HTMLAttributes
+
+const CodeEditor: FC = ({
+ value,
+ onUpdate,
+ showFormatButton = true,
+ editorWrapperClassName,
+ readOnly = false,
+ className,
+}) => {
+ const { t } = useTranslation()
+ const { theme } = useTheme()
+ const monacoRef = useRef(null)
+ const editorRef = useRef(null)
+
+ useEffect(() => {
+ if (monacoRef.current) {
+ if (theme === Theme.light)
+ monacoRef.current.editor.setTheme('light-theme')
+ else
+ monacoRef.current.editor.setTheme('dark-theme')
+ }
+ }, [theme])
+
+ const handleEditorDidMount = useCallback((editor: any, monaco: any) => {
+ editorRef.current = editor
+ monacoRef.current = monaco
+ monaco.editor.defineTheme('light-theme', {
+ base: 'vs',
+ inherit: true,
+ rules: [],
+ colors: {
+ 'editor.background': '#00000000',
+ 'editor.lineHighlightBackground': '#00000000',
+ 'focusBorder': '#00000000',
+ },
+ })
+ monaco.editor.defineTheme('dark-theme', {
+ base: 'vs-dark',
+ inherit: true,
+ rules: [],
+ colors: {
+ 'editor.background': '#00000000',
+ 'editor.lineHighlightBackground': '#00000000',
+ 'focusBorder': '#00000000',
+ },
+ })
+ monaco.editor.setTheme('light-theme')
+ }, [])
+
+ const formatJsonContent = useCallback(() => {
+ if (editorRef.current)
+ editorRef.current.getAction('editor.action.formatDocument')?.run()
+ }, [])
+
+ const handleEditorChange = useCallback((value: string | undefined) => {
+ if (value !== undefined)
+ onUpdate?.(value)
+ }, [onUpdate])
+
+ return (
+
+
+
+ JSON
+
+
+ {showFormatButton && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {/* Title */}
+
+
+
+
+
+ {t('workflow.nodes.llm.jsonSchema.import')}
+
+
+ {/* Content */}
+
+
+ {parseError && }
+
+ {/* Footer */}
+
+
+
+
+
+ {/* Header */}
+
+
+ {t('workflow.nodes.llm.jsonSchema.title')}
+
+
+
+
+
+ {/* Content */}
+
+ {/* Tab */}
+
+ options={VIEW_TABS}
+ value={currentTab}
+ onChange={handleTabChange}
+ />
+
+ {/* JSON Schema Generator */}
+
+
+ {/* JSON Schema Importer */}
+
+
+
+ {currentTab === SchemaView.VisualEditor && (
+
+ )}
+ {currentTab === SchemaView.JsonSchema && (
+
+ )}
+ {parseError && }
+ {validationError && }
+
+ {/* Footer */}
+
+
+ {
+ isGenerating ? (
+
+
+
{t('workflow.nodes.llm.jsonSchema.generating')}
+
+ ) : (
+ <>
+
+
+
+ {/* Title */}
+
+
+ {t('workflow.nodes.llm.jsonSchema.generatedResult')}
+
+
+ {t('workflow.nodes.llm.jsonSchema.resultTip')}
+
+
+ {/* Content */}
+
+
+ {parseError && }
+ {validationError && }
+
+ {/* Footer */}
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+
+
+
+ {/* Title */}
+
+
+ {t('workflow.nodes.llm.jsonSchema.generateJsonSchema')}
+
+
+ {t('workflow.nodes.llm.jsonSchema.generationTip')}
+
+
+ {/* Content */}
+
+
+ {t('common.modelProvider.model')}
+
+
+
+
+
+ {t('workflow.nodes.llm.jsonSchema.instruction')}
+
+
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(AddField)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
new file mode 100644
index 0000000000..4f53f6b163
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
@@ -0,0 +1,46 @@
+import React, { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type CardProps = {
+ name: string
+ type: string
+ required: boolean
+ description?: string
+}
+
+const Card: FC = ({
+ name,
+ type,
+ required,
+ description,
+}) => {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+ {name}
+
+
+ {type}
+
+ {
+ required && (
+
+ {t('workflow.nodes.llm.jsonSchema.required')}
+
+ )
+ }
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default React.memo(Actions)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
new file mode 100644
index 0000000000..e065406bde
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -0,0 +1,59 @@
+import React, { type FC } from 'react'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import { useKeyPress } from 'ahooks'
+
+type AdvancedActionsProps = {
+ isConfirmDisabled: boolean
+ onCancel: () => void
+ onConfirm: () => void
+}
+
+const Key = (props: { keyName: string }) => {
+ const { keyName } = props
+ return (
+
+ {keyName}
+
+ )
+}
+
+const AdvancedActions: FC = ({
+ isConfirmDisabled,
+ onCancel,
+ onConfirm,
+}) => {
+ const { t } = useTranslation()
+
+ useKeyPress([`${getKeyboardKeyCodeBySystem('ctrl')}.enter`], (e) => {
+ e.preventDefault()
+ onConfirm()
+ }, {
+ exactMatch: true,
+ useCapture: true,
+ })
+
+ return (
+
+
+
+
+ {/* {showAdvancedOptions ? ( */}
+
+
+
+ {t('workflow.nodes.llm.jsonSchema.stringValidations')}
+
+
+
+
+
+ {/* ) : (
+
+ )} */}
+
+ {/* Hidden measurement span */}
+
+ {value || placeholder}
+
+
+ {/* Actual input element */}
+
+
+ )
+}
+
+export default React.memo(AutoWidthInput)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
new file mode 100644
index 0000000000..4023a937fd
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -0,0 +1,277 @@
+import React, { type FC, useCallback, useMemo, useRef, useState } from 'react'
+import type { SchemaEnumType } from '../../../../types'
+import { ArrayType, Type } from '../../../../types'
+import type { TypeItem } from './type-selector'
+import TypeSelector from './type-selector'
+import RequiredSwitch from './required-switch'
+import Divider from '@/app/components/base/divider'
+import Actions from './actions'
+import AdvancedActions from './advanced-actions'
+import AdvancedOptions, { type AdvancedOptionsType } from './advanced-options'
+import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
+import { useVisualEditorStore } from '../store'
+import { useMittContext } from '../context'
+import { useUnmount } from 'ahooks'
+import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
+import AutoWidthInput from './auto-width-input'
+
+export type EditData = {
+ name: string
+ type: Type | ArrayType
+ required: boolean
+ description?: string
+ enum?: SchemaEnumType
+}
+
+type Options = {
+ description?: string
+ enum?: SchemaEnumType
+}
+
+type EditCardProps = {
+ fields: EditData
+ depth: number
+ path: string[]
+ parentPath: string[]
+}
+
+const TYPE_OPTIONS = [
+ { value: Type.string, text: 'string' },
+ { value: Type.number, text: 'number' },
+ // { value: Type.boolean, text: 'boolean' },
+ { value: Type.object, text: 'object' },
+ { value: ArrayType.string, text: 'array[string]' },
+ { value: ArrayType.number, text: 'array[number]' },
+ // { value: ArrayType.boolean, text: 'array[boolean]' },
+ { value: ArrayType.object, text: 'array[object]' },
+]
+
+const MAXIMUM_DEPTH_TYPE_OPTIONS = [
+ { value: Type.string, text: 'string' },
+ { value: Type.number, text: 'number' },
+ // { value: Type.boolean, text: 'boolean' },
+ { value: ArrayType.string, text: 'array[string]' },
+ { value: ArrayType.number, text: 'array[number]' },
+ // { value: ArrayType.boolean, text: 'array[boolean]' },
+]
+
+const EditCard: FC = ({
+ fields,
+ depth,
+ path,
+ parentPath,
+}) => {
+ const { t } = useTranslation()
+ const [currentFields, setCurrentFields] = useState(fields)
+ const [backupFields, setBackupFields] = useState(null)
+ const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
+ const setIsAddingNewField = useVisualEditorStore(state => state.setIsAddingNewField)
+ const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
+ const setAdvancedEditing = useVisualEditorStore(state => state.setAdvancedEditing)
+ const { emit, useSubscribe } = useMittContext()
+ const blurWithActions = useRef(false)
+
+ const maximumDepthReached = depth === JSON_SCHEMA_MAX_DEPTH
+ const disableAddBtn = maximumDepthReached || (currentFields.type !== Type.object && currentFields.type !== ArrayType.object)
+ const hasAdvancedOptions = currentFields.type === Type.string || currentFields.type === Type.number
+ const isAdvancedEditing = advancedEditing || isAddingNewField
+
+ const advancedOptions = useMemo(() => {
+ let enumValue = ''
+ if (currentFields.type === Type.string || currentFields.type === Type.number)
+ enumValue = (currentFields.enum || []).join(', ')
+ return { enum: enumValue }
+ }, [currentFields.type, currentFields.enum])
+
+ useSubscribe('restorePropertyName', () => {
+ setCurrentFields(prev => ({ ...prev, name: fields.name }))
+ })
+
+ useSubscribe('fieldChangeSuccess', () => {
+ isAddingNewField && setIsAddingNewField(false)
+ advancedEditing && setAdvancedEditing(false)
+ })
+
+ const emitPropertyNameChange = useCallback(() => {
+ emit('propertyNameChange', { path, parentPath, oldFields: fields, fields: currentFields })
+ }, [fields, currentFields, path, parentPath, emit])
+
+ const emitPropertyTypeChange = useCallback((type: Type | ArrayType) => {
+ emit('propertyTypeChange', { path, parentPath, oldFields: fields, fields: { ...currentFields, type } })
+ }, [fields, currentFields, path, parentPath, emit])
+
+ const emitPropertyRequiredToggle = useCallback(() => {
+ emit('propertyRequiredToggle', { path, parentPath, oldFields: fields, fields: currentFields })
+ }, [emit, path, parentPath, fields, currentFields])
+
+ const emitPropertyOptionsChange = useCallback((options: Options) => {
+ emit('propertyOptionsChange', { path, parentPath, oldFields: fields, fields: { ...currentFields, ...options } })
+ }, [emit, path, parentPath, fields, currentFields])
+
+ const emitPropertyDelete = useCallback(() => {
+ emit('propertyDelete', { path, parentPath, oldFields: fields, fields: currentFields })
+ }, [emit, path, parentPath, fields, currentFields])
+
+ const emitPropertyAdd = useCallback(() => {
+ emit('addField', { path })
+ }, [emit, path])
+
+ const emitFieldChange = useCallback(() => {
+ emit('fieldChange', { path, parentPath, oldFields: fields, fields: currentFields })
+ }, [emit, path, parentPath, fields, currentFields])
+
+ const handlePropertyNameChange = useCallback((e: React.ChangeEvent) => {
+ setCurrentFields(prev => ({ ...prev, name: e.target.value }))
+ }, [])
+
+ const handlePropertyNameBlur = useCallback(() => {
+ if (isAdvancedEditing) return
+ emitPropertyNameChange()
+ }, [isAdvancedEditing, emitPropertyNameChange])
+
+ const handleTypeChange = useCallback((item: TypeItem) => {
+ setCurrentFields(prev => ({ ...prev, type: item.value }))
+ if (isAdvancedEditing) return
+ emitPropertyTypeChange(item.value)
+ }, [isAdvancedEditing, emitPropertyTypeChange])
+
+ const toggleRequired = useCallback(() => {
+ setCurrentFields(prev => ({ ...prev, required: !prev.required }))
+ if (isAdvancedEditing) return
+ emitPropertyRequiredToggle()
+ }, [isAdvancedEditing, emitPropertyRequiredToggle])
+
+ const handleDescriptionChange = useCallback((e: React.ChangeEvent) => {
+ setCurrentFields(prev => ({ ...prev, description: e.target.value }))
+ }, [])
+
+ const handleDescriptionBlur = useCallback(() => {
+ if (isAdvancedEditing) return
+ emitPropertyOptionsChange({ description: currentFields.description, enum: currentFields.enum })
+ }, [isAdvancedEditing, emitPropertyOptionsChange, currentFields])
+
+ const handleAdvancedOptionsChange = useCallback((options: AdvancedOptionsType) => {
+ let enumValue: any = options.enum
+ if (enumValue === '') {
+ enumValue = undefined
+ }
+ else {
+ enumValue = options.enum.replace(/\s/g, '').split(',')
+ if (currentFields.type === Type.number)
+ enumValue = (enumValue as SchemaEnumType).map(value => Number(value)).filter(num => !Number.isNaN(num))
+ }
+ setCurrentFields(prev => ({ ...prev, enum: enumValue }))
+ if (isAdvancedEditing) return
+ emitPropertyOptionsChange({ description: currentFields.description, enum: enumValue })
+ }, [isAdvancedEditing, emitPropertyOptionsChange, currentFields])
+
+ const handleDelete = useCallback(() => {
+ blurWithActions.current = true
+ emitPropertyDelete()
+ }, [emitPropertyDelete])
+
+ const handleAdvancedEdit = useCallback(() => {
+ setBackupFields({ ...currentFields })
+ setAdvancedEditing(true)
+ }, [currentFields, setAdvancedEditing])
+
+ const handleAddChildField = useCallback(() => {
+ blurWithActions.current = true
+ emitPropertyAdd()
+ }, [emitPropertyAdd])
+
+ const handleConfirm = useCallback(() => {
+ emitFieldChange()
+ }, [emitFieldChange])
+
+ const handleCancel = useCallback(() => {
+ if (isAddingNewField) {
+ blurWithActions.current = true
+ emit('restoreSchema')
+ setIsAddingNewField(false)
+ return
+ }
+ if (backupFields) {
+ setCurrentFields(backupFields)
+ setBackupFields(null)
+ }
+ setAdvancedEditing(false)
+ }, [isAddingNewField, emit, setIsAddingNewField, setAdvancedEditing, backupFields])
+
+ useUnmount(() => {
+ if (isAdvancedEditing || blurWithActions.current) return
+ emitFieldChange()
+ })
+
+ return (
+
+
+
+
+
+ {
+ currentFields.required && (
+
+ {t('workflow.nodes.llm.jsonSchema.required')}
+
+ )
+ }
+
+
+
+ {isAdvancedEditing ? (
+
+ ) : (
+
+ )}
+
+
+ {(fields.description || isAdvancedEditing) && (
+
+ e.key === 'Enter' && e.currentTarget.blur()}
+ />
+
+ )}
+
+ {isAdvancedEditing && hasAdvancedOptions && (
+
+ )}
+
+ {t('workflow.nodes.llm.jsonSchema.required')}
+
+
+ )
+}
+
+export default React.memo(RequiredSwitch)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
new file mode 100644
index 0000000000..84d75e1ada
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -0,0 +1,69 @@
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import type { ArrayType, Type } from '../../../../types'
+import type { FC } from 'react'
+import { useState } from 'react'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+export type TypeItem = {
+ value: Type | ArrayType
+ text: string
+}
+
+type TypeSelectorProps = {
+ items: TypeItem[]
+ currentValue: Type | ArrayType
+ onSelect: (item: TypeItem) => void
+ popupClassName?: string
+}
+
+const TypeSelector: FC = ({
+ items,
+ currentValue,
+ onSelect,
+ popupClassName,
+}) => {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+ setOpen(v => !v)}>
+
+ {currentValue}
+
+
+
+
+
+ {items.map((item) => {
+ const isSelected = item.value === currentValue
+ return (
{
+ onSelect(item)
+ setOpen(false)
+ }}
+ >
+ {item.text}
+ {isSelected && }
+
+ )
+ })}
+
+
+
+ )
+}
+
+export default VisualEditor
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
new file mode 100644
index 0000000000..70a6b861ad
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -0,0 +1,194 @@
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { type Field, Type } from '../../../types'
+import classNames from '@/utils/classnames'
+import { RiArrowDropDownLine, RiArrowDropRightLine } from '@remixicon/react'
+import { getFieldType, getHasChildren } from '../../../utils'
+import Divider from '@/app/components/base/divider'
+import EditCard from './edit-card'
+import Card from './card'
+import { useVisualEditorStore } from './store'
+import { useDebounceFn } from 'ahooks'
+import AddField from './add-field'
+import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
+
+type SchemaNodeProps = {
+ name: string
+ required: boolean
+ schema: Field
+ path: string[]
+ parentPath?: string[]
+ depth: number
+}
+
+// Support 10 levels of indentation
+const indentPadding: Record = {
+ 0: 'pl-0',
+ 1: 'pl-[20px]',
+ 2: 'pl-[40px]',
+ 3: 'pl-[60px]',
+ 4: 'pl-[80px]',
+ 5: 'pl-[100px]',
+ 6: 'pl-[120px]',
+ 7: 'pl-[140px]',
+ 8: 'pl-[160px]',
+ 9: 'pl-[180px]',
+ 10: 'pl-[200px]',
+}
+
+const indentLeft: Record = {
+ 0: 'left-0',
+ 1: 'left-[20px]',
+ 2: 'left-[40px]',
+ 3: 'left-[60px]',
+ 4: 'left-[80px]',
+ 5: 'left-[100px]',
+ 6: 'left-[120px]',
+ 7: 'left-[140px]',
+ 8: 'left-[160px]',
+ 9: 'left-[180px]',
+ 10: 'left-[200px]',
+}
+
+const SchemaNode: FC = ({
+ name,
+ required,
+ schema,
+ path,
+ parentPath,
+ depth,
+}) => {
+ const [isExpanded, setIsExpanded] = useState(true)
+ const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty)
+ const setHoveringProperty = useVisualEditorStore(state => state.setHoveringProperty)
+ const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)
+ const advancedEditing = useVisualEditorStore(state => state.advancedEditing)
+
+ const { run: setHoveringPropertyDebounced } = useDebounceFn((path: string | null) => {
+ setHoveringProperty(path)
+ }, { wait: 50 })
+
+ const hasChildren = useMemo(() => getHasChildren(schema), [schema])
+ const type = useMemo(() => getFieldType(schema), [schema])
+ const isHovering = hoveringProperty === path.join('.')
+
+ const handleExpand = () => {
+ setIsExpanded(!isExpanded)
+ }
+
+ const handleMouseEnter = () => {
+ if (advancedEditing || isAddingNewField) return
+ setHoveringPropertyDebounced(path.join('.'))
+ }
+
+ const handleMouseLeave = () => {
+ if (advancedEditing || isAddingNewField) return
+ setHoveringPropertyDebounced(null)
+ }
+
+ return (
+
+
+ {depth > 0 && hasChildren && (
+
+
+
+ )}
+
+
+ {(isHovering && depth > 0) ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {isExpanded && hasChildren && depth < JSON_SCHEMA_MAX_DEPTH && (
+ <>
+ {schema.type === Type.object && schema.properties && (
+ Object.entries(schema.properties).map(([key, childSchema]) => (
+
+ ))
+ )}
+
+ {schema.type === Type.array
+ && schema.items
+ && schema.items.type === Type.object
+ && schema.items.properties
+ && (
+ Object.entries(schema.items.properties).map(([key, childSchema]) => (
+
+ ))
+ )}
+
+ )}
+
+ {
+ depth === 0 && !isAddingNewField && (
+
+ )
+ }
+
+
+
+
structured_output
+
object
+
+
+
+ {(value?.schema && value.schema.properties && Object.keys(value.schema.properties).length > 0) ? (
+
) : (
+
{t('app.structOutput.notConfiguredTip')}
+ )}
+
+ {showConfig && (
+
+ )}
+
-
+
+ {!isModelSupportStructuredOutput && (
+
+ {t('app.structOutput.modelNotSupported')}
+ {t('app.structOutput.modelNotSupportedTip')}
+
+
+
+
+ )}
+ {t('app.structOutput.structured')}
+ {t('app.structOutput.structuredTip')}
+ }>
+
+
+
+
+
+
+ }
+ >
<>
+ {inputs.structured_output_enabled && (
+ <>
+
+
+
+ )}
{isShowSingleRun && (
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 6b2d27e70f..13db9e4031 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -9,9 +9,10 @@ import {
} from '../../hooks'
import useAvailableVarList from '../_base/hooks/use-available-var-list'
import useConfigVision from '../../hooks/use-config-vision'
-import type { LLMNodeType } from './types'
-import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import type { LLMNodeType, StructuredOutput } from './types'
+import { useModelList, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
import {
+ ModelFeatureEnum,
ModelTypeEnum,
} from '@/app/components/header/account-setting/model-provider-page/declarations'
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
@@ -277,6 +278,30 @@ const useConfig = (id: string, payload: LLMNodeType) => {
setInputs(newInputs)
}, [inputs, setInputs])
+ // structure output
+ const { data: modelList } = useModelList(ModelTypeEnum.textGeneration)
+ const isModelSupportStructuredOutput = modelList
+ ?.find(provideItem => provideItem.provider === model?.provider)
+ ?.models.find(modelItem => modelItem.model === model?.name)
+ ?.features?.includes(ModelFeatureEnum.StructuredOutput)
+
+ const [structuredOutputCollapsed, setStructuredOutputCollapsed] = useState(true)
+ const handleStructureOutputEnableChange = useCallback((enabled: boolean) => {
+ const newInputs = produce(inputs, (draft) => {
+ draft.structured_output_enabled = enabled
+ })
+ setInputs(newInputs)
+ if (enabled)
+ setStructuredOutputCollapsed(false)
+ }, [inputs, setInputs])
+
+ const handleStructureOutputChange = useCallback((newOutput: StructuredOutput) => {
+ const newInputs = produce(inputs, (draft) => {
+ draft.structured_output = newOutput
+ })
+ setInputs(newInputs)
+ }, [inputs, setInputs])
+
const filterInputVar = useCallback((varPayload: Var) => {
return [VarType.number, VarType.string, VarType.secret, VarType.arrayString, VarType.arrayNumber, VarType.file, VarType.arrayFile].includes(varPayload.type)
}, [])
@@ -408,6 +433,11 @@ const useConfig = (id: string, payload: LLMNodeType) => {
setContexts,
varInputs,
runningStatus,
+ isModelSupportStructuredOutput,
+ handleStructureOutputChange,
+ structuredOutputCollapsed,
+ setStructuredOutputCollapsed,
+ handleStructureOutputEnableChange,
handleRun,
handleStop,
runResult,
diff --git a/web/app/components/workflow/nodes/llm/utils.ts b/web/app/components/workflow/nodes/llm/utils.ts
index 5f6b0864d6..b29646de66 100644
--- a/web/app/components/workflow/nodes/llm/utils.ts
+++ b/web/app/components/workflow/nodes/llm/utils.ts
@@ -1,5 +1,336 @@
-import type { LLMNodeType } from './types'
+import { ArrayType, Type } from './types'
+import type { ArrayItems, Field, LLMNodeType } from './types'
+import type { Schema, ValidationError } from 'jsonschema'
+import { Validator } from 'jsonschema'
+import produce from 'immer'
+import { z } from 'zod'
export const checkNodeValid = (payload: LLMNodeType) => {
return true
}
+
+export const getFieldType = (field: Field) => {
+ const { type, items } = field
+ if (type !== Type.array || !items)
+ return type
+
+ return ArrayType[items.type]
+}
+
+export const getHasChildren = (schema: Field) => {
+ const complexTypes = [Type.object, Type.array]
+ if (!complexTypes.includes(schema.type))
+ return false
+ if (schema.type === Type.object)
+ return schema.properties && Object.keys(schema.properties).length > 0
+ if (schema.type === Type.array)
+ return schema.items && schema.items.type === Type.object && schema.items.properties && Object.keys(schema.items.properties).length > 0
+}
+
+export const getTypeOf = (target: any) => {
+ if (target === null) return 'null'
+ if (typeof target !== 'object') {
+ return typeof target
+ }
+ else {
+ return Object.prototype.toString
+ .call(target)
+ .slice(8, -1)
+ .toLocaleLowerCase()
+ }
+}
+
+export const inferType = (value: any): Type => {
+ const type = getTypeOf(value)
+ if (type === 'array') return Type.array
+ // type boolean will be treated as string
+ if (type === 'boolean') return Type.string
+ if (type === 'number') return Type.number
+ if (type === 'string') return Type.string
+ if (type === 'object') return Type.object
+ return Type.string
+}
+
+export const jsonToSchema = (json: any): Field => {
+ const schema: Field = {
+ type: inferType(json),
+ }
+
+ if (schema.type === Type.object) {
+ schema.properties = {}
+ schema.required = []
+ schema.additionalProperties = false
+
+ Object.entries(json).forEach(([key, value]) => {
+ schema.properties![key] = jsonToSchema(value)
+ schema.required!.push(key)
+ })
+ }
+ else if (schema.type === Type.array) {
+ schema.items = jsonToSchema(json[0]) as ArrayItems
+ }
+
+ return schema
+}
+
+export const checkJsonDepth = (json: any) => {
+ if (!json || getTypeOf(json) !== 'object')
+ return 0
+
+ let maxDepth = 0
+
+ if (getTypeOf(json) === 'array') {
+ if (json[0] && getTypeOf(json[0]) === 'object')
+ maxDepth = checkJsonDepth(json[0])
+ }
+ else if (getTypeOf(json) === 'object') {
+ const propertyDepths = Object.values(json).map(value => checkJsonDepth(value))
+ maxDepth = propertyDepths.length ? Math.max(...propertyDepths) + 1 : 1
+ }
+
+ return maxDepth
+}
+
+export const checkJsonSchemaDepth = (schema: Field) => {
+ if (!schema || getTypeOf(schema) !== 'object')
+ return 0
+
+ let maxDepth = 0
+
+ if (schema.type === Type.object && schema.properties) {
+ const propertyDepths = Object.values(schema.properties).map(value => checkJsonSchemaDepth(value))
+ maxDepth = propertyDepths.length ? Math.max(...propertyDepths) + 1 : 1
+ }
+ else if (schema.type === Type.array && schema.items && schema.items.type === Type.object) {
+ maxDepth = checkJsonSchemaDepth(schema.items) + 1
+ }
+
+ return maxDepth
+}
+
+export const findPropertyWithPath = (target: any, path: string[]) => {
+ let current = target
+ for (const key of path)
+ current = current[key]
+ return current
+}
+
+const draft07MetaSchema = {
+ $schema: 'http://json-schema.org/draft-07/schema#',
+ $id: 'http://json-schema.org/draft-07/schema#',
+ title: 'Core schema meta-schema',
+ definitions: {
+ schemaArray: {
+ type: 'array',
+ minItems: 1,
+ items: { $ref: '#' },
+ },
+ nonNegativeInteger: {
+ type: 'integer',
+ minimum: 0,
+ },
+ nonNegativeIntegerDefault0: {
+ allOf: [
+ { $ref: '#/definitions/nonNegativeInteger' },
+ { default: 0 },
+ ],
+ },
+ simpleTypes: {
+ enum: [
+ 'array',
+ 'boolean',
+ 'integer',
+ 'null',
+ 'number',
+ 'object',
+ 'string',
+ ],
+ },
+ stringArray: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true,
+ default: [],
+ },
+ },
+ type: ['object', 'boolean'],
+ properties: {
+ $id: {
+ type: 'string',
+ format: 'uri-reference',
+ },
+ $schema: {
+ type: 'string',
+ format: 'uri',
+ },
+ $ref: {
+ type: 'string',
+ format: 'uri-reference',
+ },
+ title: {
+ type: 'string',
+ },
+ description: {
+ type: 'string',
+ },
+ default: true,
+ readOnly: {
+ type: 'boolean',
+ default: false,
+ },
+ examples: {
+ type: 'array',
+ items: true,
+ },
+ multipleOf: {
+ type: 'number',
+ exclusiveMinimum: 0,
+ },
+ maximum: {
+ type: 'number',
+ },
+ exclusiveMaximum: {
+ type: 'number',
+ },
+ minimum: {
+ type: 'number',
+ },
+ exclusiveMinimum: {
+ type: 'number',
+ },
+ maxLength: { $ref: '#/definitions/nonNegativeInteger' },
+ minLength: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+ pattern: {
+ type: 'string',
+ format: 'regex',
+ },
+ additionalItems: { $ref: '#' },
+ items: {
+ anyOf: [
+ { $ref: '#' },
+ { $ref: '#/definitions/schemaArray' },
+ ],
+ default: true,
+ },
+ maxItems: { $ref: '#/definitions/nonNegativeInteger' },
+ minItems: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+ uniqueItems: {
+ type: 'boolean',
+ default: false,
+ },
+ contains: { $ref: '#' },
+ maxProperties: { $ref: '#/definitions/nonNegativeInteger' },
+ minProperties: { $ref: '#/definitions/nonNegativeIntegerDefault0' },
+ required: { $ref: '#/definitions/stringArray' },
+ additionalProperties: { $ref: '#' },
+ definitions: {
+ type: 'object',
+ additionalProperties: { $ref: '#' },
+ default: {},
+ },
+ properties: {
+ type: 'object',
+ additionalProperties: { $ref: '#' },
+ default: {},
+ },
+ patternProperties: {
+ type: 'object',
+ additionalProperties: { $ref: '#' },
+ propertyNames: { format: 'regex' },
+ default: {},
+ },
+ dependencies: {
+ type: 'object',
+ additionalProperties: {
+ anyOf: [
+ { $ref: '#' },
+ { $ref: '#/definitions/stringArray' },
+ ],
+ },
+ },
+ propertyNames: { $ref: '#' },
+ const: true,
+ enum: {
+ type: 'array',
+ items: true,
+ minItems: 1,
+ uniqueItems: true,
+ },
+ type: {
+ anyOf: [
+ { $ref: '#/definitions/simpleTypes' },
+ {
+ type: 'array',
+ items: { $ref: '#/definitions/simpleTypes' },
+ minItems: 1,
+ uniqueItems: true,
+ },
+ ],
+ },
+ format: { type: 'string' },
+ allOf: { $ref: '#/definitions/schemaArray' },
+ anyOf: { $ref: '#/definitions/schemaArray' },
+ oneOf: { $ref: '#/definitions/schemaArray' },
+ not: { $ref: '#' },
+ },
+ default: true,
+} as unknown as Schema
+
+const validator = new Validator()
+
+export const validateSchemaAgainstDraft7 = (schemaToValidate: any) => {
+ const schema = produce(schemaToValidate, (draft: any) => {
+ // Make sure the schema has the $schema property for draft-07
+ if (!draft.$schema)
+ draft.$schema = 'http://json-schema.org/draft-07/schema#'
+ })
+
+ const result = validator.validate(schema, draft07MetaSchema, {
+ nestedErrors: true,
+ throwError: false,
+ })
+
+ // Access errors from the validation result
+ const errors = result.valid ? [] : result.errors || []
+
+ return errors
+}
+
+export const getValidationErrorMessage = (errors: ValidationError[]) => {
+ const message = errors.map((error) => {
+ return `Error: ${error.path.join('.')} ${error.message} Details: ${JSON.stringify(error.stack)}`
+ }).join('; ')
+ return message
+}
+
+export const convertBooleanToString = (schema: any) => {
+ if (schema.type === Type.boolean)
+ schema.type = Type.string
+ if (schema.type === Type.array && schema.items && schema.items.type === Type.boolean)
+ schema.items.type = Type.string
+ if (schema.type === Type.object) {
+ schema.properties = Object.entries(schema.properties).reduce((acc, [key, value]) => {
+ acc[key] = convertBooleanToString(value)
+ return acc
+ }, {} as any)
+ }
+ if (schema.type === Type.array && schema.items && schema.items.type === Type.object) {
+ schema.items.properties = Object.entries(schema.items.properties).reduce((acc, [key, value]) => {
+ acc[key] = convertBooleanToString(value)
+ return acc
+ }, {} as any)
+ }
+ return schema
+}
+
+const schemaRootObject = z.object({
+ type: z.literal('object'),
+ properties: z.record(z.string(), z.any()),
+ required: z.array(z.string()),
+ additionalProperties: z.boolean().optional(),
+})
+
+export const preValidateSchema = (schema: any) => {
+ const result = schemaRootObject.safeParse(schema)
+ return result
+}
diff --git a/web/app/components/workflow/nodes/tool/panel.tsx b/web/app/components/workflow/nodes/tool/panel.tsx
index b8dc93455a..85966443d5 100644
--- a/web/app/components/workflow/nodes/tool/panel.tsx
+++ b/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
> = ({
handleStop,
runResult,
outputSchema,
+ hasObjectOutput,
} = useConfig(id, data)
const toolIcon = useToolIcon(data)
const logsParams = useLogs()
@@ -134,26 +137,45 @@ const Panel: FC> = ({
<>
{outputSchema.map(outputItem => (
-
+
+ {outputItem.value?.type === 'object' ? (
+
+ ) : (
+
+ )}
+
))}
diff --git a/web/app/components/workflow/nodes/tool/use-config.ts b/web/app/components/workflow/nodes/tool/use-config.ts
index 36519ce991..38ca5b5195 100644
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/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,
}
}
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index c33a6355f2..b63b7af16c 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -10,10 +10,10 @@ import { RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useNodes } from 'reactflow'
import {
- useEdgesInteractions,
- useNodesInteractions,
useWorkflowInteractions,
} from '../../hooks'
+import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
+import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
import { BlockEnum } from '../../types'
import type { StartNodeType } from '../../nodes/start/types'
import ChatWrapper from './chat-wrapper'
@@ -32,8 +32,8 @@ const DebugAndPreview = () => {
const { t } = useTranslation()
const chatRef = useRef({ handleRestart: noop })
const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
- const { handleNodeCancelRunningStatus } = useNodesInteractions()
- const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
+ const { handleNodeCancelRunningStatus } = useNodesInteractionsWithoutSync()
+ const { handleEdgeCancelRunningStatus } = useEdgesInteractionsWithoutSync()
const varList = useStore(s => s.conversationVariables)
const [expanded, setExpanded] = useState(true)
const nodes = useNodes()
@@ -116,7 +116,7 @@ const DebugAndPreview = () => {
- {expanded && }
+ {expanded && }