-
-
- {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/config/index.ts b/web/config/index.ts
index b164392c52..3466686293 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -285,6 +285,7 @@ export const GITHUB_ACCESS_TOKEN = process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN |
export const SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS = '.difypkg,.difybndl'
export const FULL_DOC_PREVIEW_LENGTH = 50
+export const JSON_SCHEMA_MAX_DEPTH = 10
let loopNodeMaxCount = 100
if (process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT && process.env.NEXT_PUBLIC_LOOP_NODE_MAX_COUNT !== '')
diff --git a/web/hooks/use-mitt.ts b/web/hooks/use-mitt.ts
index 9aea988b6e..584636c8a6 100644
--- a/web/hooks/use-mitt.ts
+++ b/web/hooks/use-mitt.ts
@@ -10,7 +10,7 @@ const merge = >(
export type _Events = Record
-export type UseSubcribeOption = {
+export type UseSubscribeOption = {
/**
* Whether the subscription is enabled.
* @default true
@@ -22,21 +22,21 @@ export type ExtendedOn = {
(
type: Key,
handler: Handler,
- options?: UseSubcribeOption,
+ options?: UseSubscribeOption,
): void;
(
type: '*',
handler: WildcardHandler,
- option?: UseSubcribeOption,
+ option?: UseSubscribeOption,
): void;
}
export type UseMittReturn = {
- useSubcribe: ExtendedOn;
+ useSubscribe: ExtendedOn;
emit: Emitter['emit'];
}
-const defaultSubcribeOption: UseSubcribeOption = {
+const defaultSubscribeOption: UseSubscribeOption = {
enabled: true,
}
@@ -52,12 +52,12 @@ function useMitt(
emitterRef.current = mitt
}
const emitter = emitterRef.current
- const useSubcribe: ExtendedOn = (
+ const useSubscribe: ExtendedOn = (
type: string,
handler: any,
- option?: UseSubcribeOption,
+ option?: UseSubscribeOption,
) => {
- const { enabled } = merge(defaultSubcribeOption, option)
+ const { enabled } = merge(defaultSubscribeOption, option)
useEffect(() => {
if (enabled) {
emitter.on(type, handler)
@@ -67,7 +67,7 @@ function useMitt(
}
return {
emit: emitter.emit,
- useSubcribe,
+ useSubscribe,
}
}
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index ef883c0123..8139c1e3f2 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -180,6 +180,17 @@ const translation = {
noParams: 'No parameters needed',
},
showMyCreatedAppsOnly: 'Created by me',
+ structOutput: {
+ moreFillTip: 'Showing max 10 levels of nesting',
+ required: 'Required',
+ LLMResponse: 'LLM Response',
+ configure: 'Configure',
+ notConfiguredTip: 'Structured output has not been configured yet',
+ structured: 'Structured',
+ structuredTip: 'Structured Outputs is a feature that ensures the model will always generate responses that adhere to your supplied JSON Schema',
+ modelNotSupported: 'Model not supported',
+ modelNotSupportedTip: 'The current model does not support this feature and is automatically downgraded to prompt injection.',
+ },
}
export default translation
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 0811ba73ff..bf2bf83f68 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -56,6 +56,7 @@ const translation = {
regenerate: 'Regenerate',
submit: 'Submit',
skip: 'Skip',
+ format: 'Format',
},
errorMsg: {
fieldRequired: '{{field}} is required',
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index bdad0fdaca..543f689611 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -423,6 +423,34 @@ const translation = {
variable: 'Variable',
},
sysQueryInUser: 'sys.query in user message is required',
+ jsonSchema: {
+ title: 'Structured Output Schema',
+ instruction: 'Instruction',
+ promptTooltip: 'Convert the text description into a standardized JSON Schema structure.',
+ promptPlaceholder: 'Describe your JSON Schema...',
+ generate: 'Generate',
+ import: 'Import from JSON',
+ generateJsonSchema: 'Generate JSON Schema',
+ generationTip: 'You can use natural language to quickly create a JSON Schema.',
+ generating: 'Generating JSON Schema...',
+ generatedResult: 'Generated Result',
+ resultTip: 'Here is the generated result. If you\'re not satisfied, you can go back and modify your prompt.',
+ back: 'Back',
+ regenerate: 'Regenerate',
+ apply: 'Apply',
+ doc: 'Learn more about structured output',
+ resetDefaults: 'Reset',
+ required: 'required',
+ addField: 'Add Field',
+ addChildField: 'Add Child Field',
+ showAdvancedOptions: 'Show advanced options',
+ stringValidations: 'String Validations',
+ fieldNamePlaceholder: 'Field Name',
+ descriptionPlaceholder: 'Add description',
+ warningTips: {
+ saveSchema: 'Please finish editing the current field before saving the schema',
+ },
+ },
},
knowledgeRetrieval: {
queryVariable: 'Query Variable',
diff --git a/web/i18n/language.ts b/web/i18n/language.ts
index cd770977bd..c86d31ffa0 100644
--- a/web/i18n/language.ts
+++ b/web/i18n/language.ts
@@ -33,7 +33,7 @@ export const languages = data.languages
export const LanguagesSupported = languages.filter(item => item.supported).map(item => item.value)
export const getLanguage = (locale: string) => {
- if (locale === 'zh-Hans')
+ if (['zh-Hans', 'ja-JP'].includes(locale))
return locale.replace('-', '_')
return LanguagesSupported[0].replace('-', '_')
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index ba44d4db31..7ef8c1b514 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -181,6 +181,17 @@ const translation = {
},
openInExplore: '在“探索”中打开',
showMyCreatedAppsOnly: '我创建的',
+ structOutput: {
+ moreFillTip: '最多显示 10 级嵌套',
+ required: '必填',
+ LLMResponse: 'LLM 的响应',
+ configure: '配置',
+ notConfiguredTip: '结构化输出尚未配置',
+ structured: '结构化输出',
+ structuredTip: '结构化输出是一项功能，可确保模型始终生成符合您提供的 JSON 模式的响应',
+ modelNotSupported: '模型不支持',
+ modelNotSupportedTip: '当前模型不支持此功能，将自动降级为提示注入。',
+ },
}
export default translation
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 9c822885e0..8ed1e28fd8 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -56,6 +56,7 @@ const translation = {
regenerate: '重新生成',
submit: '提交',
skip: '跳过',
+ format: '格式化',
},
errorMsg: {
fieldRequired: '{{field}} 为必填项',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 4e63a7b8c3..ab56c468ce 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -424,6 +424,34 @@ const translation = {
variable: '变量',
},
sysQueryInUser: 'user message 中必须包含 sys.query',
+ jsonSchema: {
+ title: '结构化输出 Schema',
+ instruction: '指令',
+ promptTooltip: '将文本描述转换为标准化的 JSON Schema 结构',
+ promptPlaceholder: '描述你的 JSON Schema...',
+ generate: '生成',
+ import: '从 JSON 导入',
+ generateJsonSchema: '生成 JSON Schema',
+ generationTip: '可以使用自然语言快速创建 JSON Schema。',
+ generating: '正在为您生成 JSON Schema...',
+ generatedResult: '生成结果',
+ resultTip: '以下是生成的结果。如果你对这个结果不满意，可以返回并修改你的提示词。',
+ back: '返回',
+ regenerate: '重新生成',
+ apply: '应用',
+ doc: '了解有关结构化输出的更多信息',
+ resetDefaults: '清空配置',
+ required: '必填',
+ addField: '添加字段',
+ addChildField: '添加子字段',
+ showAdvancedOptions: '显示高级选项',
+ stringValidations: '字符串验证',
+ fieldNamePlaceholder: '字段名',
+ descriptionPlaceholder: '添加描述',
+ warningTips: {
+ saveSchema: '请先完成当前字段的编辑',
+ },
+ },
},
knowledgeRetrieval: {
queryVariable: '查询变量',
diff --git a/web/models/common.ts b/web/models/common.ts
index 0ee164aad8..cb8fb7f2bf 100644
--- a/web/models/common.ts
+++ b/web/models/common.ts
@@ -1,4 +1,5 @@
import type { I18nText } from '@/i18n/language'
+import type { Model } from '@/types/app'
export type CommonResponse = {
result: 'success' | 'fail'
@@ -291,3 +292,13 @@ export type ModerationService = (
text: string
}
) => Promise
+
+export type StructuredOutputRulesRequestBody = {
+ instruction: string
+ model_config: Model
+}
+
+export type StructuredOutputRulesResponse = {
+ output: string
+ error?: string
+}
diff --git a/web/package.json b/web/package.json
index a1af12cff4..b63617f47b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -77,6 +77,7 @@
"immer": "^9.0.19",
"js-audio-recorder": "^1.0.7",
"js-cookie": "^3.0.5",
+ "jsonschema": "^1.5.0",
"jwt-decode": "^4.0.0",
"katex": "^0.16.21",
"ky": "^1.7.2",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index d1c65b6a4a..28822be807 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -163,6 +163,9 @@ importers:
js-cookie:
specifier: ^3.0.5
version: 3.0.5
+ jsonschema:
+ specifier: ^1.5.0
+ version: 1.5.0
jwt-decode:
specifier: ^4.0.0
version: 4.0.0
@@ -6025,6 +6028,9 @@ packages:
jsonfile@6.1.0:
resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+ jsonschema@1.5.0:
+ resolution: {integrity: sha512-K+A9hhqbn0f3pJX17Q/7H6yQfD/5OXgdrR5UE12gMXCiN9D5Xq2o5mddV2QEcX/bjla99ASsAAQUyMCCRWAEhw==}
+
jsx-ast-utils@3.3.5:
resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
engines: {node: '>=4.0'}
@@ -15479,6 +15485,8 @@ snapshots:
optionalDependencies:
graceful-fs: 4.2.11
+ jsonschema@1.5.0: {}
+
jsx-ast-utils@3.3.5:
dependencies:
array-includes: 3.1.8
diff --git a/web/service/use-common.ts b/web/service/use-common.ts
index 98ab535948..d49f3803ac 100644
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@@ -1,8 +1,10 @@
-import { get } from './base'
+import { get, post } from './base'
import type {
FileUploadConfigResponse,
+ StructuredOutputRulesRequestBody,
+ StructuredOutputRulesResponse,
} from '@/models/common'
-import { useQuery } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
const NAME_SPACE = 'common'
@@ -12,3 +14,15 @@ export const useFileUploadConfig = () => {
queryFn: () => get('/files/upload'),
})
}
+
+export const useGenerateStructuredOutputRules = () => {
+ return useMutation({
+ mutationKey: [NAME_SPACE, 'generate-structured-output-rules'],
+ mutationFn: (body: StructuredOutputRulesRequestBody) => {
+ return post(
+ '/rule-structured-output-generate',
+ { body },
+ )
+ },
+ })
+}
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index aff4ed4c57..3f64afcc29 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -113,6 +113,7 @@ const config = {
'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
'dataset-chunk-list-mask-bg': 'var(--color-dataset-chunk-list-mask-bg)',
+ 'line-divider-bg': 'var(--color-line-divider-bg)',
'dataset-warning-message-bg': 'var(--color-dataset-warning-message-bg)',
'price-premium-badge-background': 'var(--color-premium-badge-background)',
'premium-yearly-tip-text-background': 'var(--color-premium-yearly-tip-text-background)',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 95d81ca1b9..3c2b143b3c 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -1,64 +1,64 @@
html[data-theme="dark"] {
- --color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);
- --color-premium-badge-background: linear-gradient(95deg, rgba(103, 111, 131, 0.90) 0%, rgba(73, 84, 100, 0.90) 105.58%), var(--util-colors-gray-gray-200, #18222F);
- --color-premium-text-background: linear-gradient(92deg, rgba(249, 250, 251, 0.95) 0%, rgba(233, 235, 240, 0.95) 97.78%);
- --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
- --color-grid-mask-background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(24, 24, 25, 0.1) 62.25%, rgba(24, 24, 25, 0.10) 100%);
- --color-chatbot-bg: linear-gradient(180deg,
- rgba(34, 34, 37, 0.9) 0%,
- rgba(29, 29, 32, 0.9) 90.48%);
- --color-chat-bubble-bg: linear-gradient(180deg,
- rgba(200, 206, 218, 0.08) 0%,
- rgba(200, 206, 218, 0.02) 100%);
- --color-chat-input-mask: linear-gradient(180deg,
- rgba(24, 24, 27, 0.04) 0%,
- rgba(24, 24, 27, 0.60) 100%);
- --color-workflow-process-bg: linear-gradient(90deg,
- rgba(24, 24, 27, 0.25) 0%,
- rgba(24, 24, 27, 0.04) 100%);
- --color-workflow-run-failed-bg: linear-gradient(98deg,
- rgba(240, 68, 56, 0.12) 0%,
- rgba(0, 0, 0, 0) 26.01%);
- --color-workflow-batch-failed-bg: linear-gradient(92deg,
- rgba(240, 68, 56, 0.3) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-marketplace-divider-bg: linear-gradient(90deg,
- rgba(200, 206, 218, 0.14) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-marketplace-plugin-empty: linear-gradient(180deg,
- rgba(0, 0, 0, 0) 0%,
- #222225 100%);
- --color-toast-success-bg: linear-gradient(92deg,
- rgba(23, 178, 106, 0.3) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-toast-warning-bg: linear-gradient(92deg,
- rgba(247, 144, 9, 0.3) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-toast-error-bg: linear-gradient(92deg,
- rgba(240, 68, 56, 0.3) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-toast-info-bg: linear-gradient(92deg,
- rgba(11, 165, 236, 0.3) 0%);
- --color-account-teams-bg: linear-gradient(271deg,
- rgba(34, 34, 37, 0.9) -0.1%,
- rgba(29, 29, 32, 0.9) 98.26%);
- --color-app-detail-bg: linear-gradient(169deg,
- #1D1D20 1.18%,
- #222225 99.52%);
- --color-app-detail-overlay-bg: linear-gradient(270deg,
- rgba(0, 0, 0, 0.00) 0%,
- rgba(24, 24, 27, 0.02) 8%,
- rgba(24, 24, 27, 0.54) 100%);
- --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
- --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
- --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
- --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
- --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
- --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
- --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
- --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
- --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
- rgba(24, 24, 27, 0.08) 0%,
- rgba(0, 0, 0, 0) 100%);
- --color-dataset-warning-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+ --color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);
+ --color-premium-badge-background: linear-gradient(95deg, rgba(103, 111, 131, 0.90) 0%, rgba(73, 84, 100, 0.90) 105.58%), var(--util-colors-gray-gray-200, #18222F);
+ --color-premium-text-background: linear-gradient(92deg, rgba(249, 250, 251, 0.95) 0%, rgba(233, 235, 240, 0.95) 97.78%);
+ --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
+ --color-grid-mask-background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(24, 24, 25, 0.1) 62.25%, rgba(24, 24, 25, 0.10) 100%);
+ --color-chatbot-bg: linear-gradient(180deg,
+ rgba(34, 34, 37, 0.9) 0%,
+ rgba(29, 29, 32, 0.9) 90.48%);
+ --color-chat-bubble-bg: linear-gradient(180deg,
+ rgba(200, 206, 218, 0.08) 0%,
+ rgba(200, 206, 218, 0.02) 100%);
+ --color-chat-input-mask: linear-gradient(180deg,
+ rgba(24, 24, 27, 0.04) 0%,
+ rgba(24, 24, 27, 0.60) 100%);
+ --color-workflow-process-bg: linear-gradient(90deg,
+ rgba(24, 24, 27, 0.25) 0%,
+ rgba(24, 24, 27, 0.04) 100%);
+ --color-workflow-run-failed-bg: linear-gradient(98deg,
+ rgba(240, 68, 56, 0.12) 0%,
+ rgba(0, 0, 0, 0) 26.01%);
+ --color-workflow-batch-failed-bg: linear-gradient(92deg,
+ rgba(240, 68, 56, 0.3) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-marketplace-divider-bg: linear-gradient(90deg,
+ rgba(200, 206, 218, 0.14) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-marketplace-plugin-empty: linear-gradient(180deg,
+ rgba(0, 0, 0, 0) 0%,
+ #222225 100%);
+ --color-toast-success-bg: linear-gradient(92deg,
+ rgba(23, 178, 106, 0.3) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-toast-warning-bg: linear-gradient(92deg,
+ rgba(247, 144, 9, 0.3) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-toast-error-bg: linear-gradient(92deg,
+ rgba(240, 68, 56, 0.3) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-toast-info-bg: linear-gradient(92deg,
+ rgba(11, 165, 236, 0.3) 0%);
+ --color-account-teams-bg: linear-gradient(271deg,
+ rgba(34, 34, 37, 0.9) -0.1%,
+ rgba(29, 29, 32, 0.9) 98.26%);
+ --color-app-detail-bg: linear-gradient(169deg,
+ #1D1D20 1.18%,
+ #222225 99.52%);
+ --color-app-detail-overlay-bg: linear-gradient(270deg,
+ rgba(0, 0, 0, 0.00) 0%,
+ rgba(24, 24, 27, 0.02) 8%,
+ rgba(24, 24, 27, 0.54) 100%);
+ --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+ --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+ --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
+ --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
+ --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
+ --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
+ --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
+ --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
+ --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
+ rgba(24, 24, 27, 0.08) 0%,
+ rgba(0, 0, 0, 0) 100%);
+ --color-line-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%, );
}
\ No newline at end of file
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index c5a427ec3f..92473320bc 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -1,13 +1,54 @@
html[data-theme="light"] {
+ --color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);
+ --color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
+ --color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
+ --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
+ --color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
--color-chatbot-bg: linear-gradient(180deg,
- rgba(249, 250, 251, 0.9) 0%,
- rgba(242, 244, 247, 0.9) 90.48%);
+ rgba(249, 250, 251, 0.9) 0%,
+ rgba(242, 244, 247, 0.9) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg,
- #fff 0%,
- rgba(255, 255, 255, 0.6) 100%);
+ #fff 0%,
+ rgba(255, 255, 255, 0.6) 100%);
+ --color-chat-input-mask: linear-gradient(180deg,
+ rgba(255, 255, 255, 0.01) 0%,
+ #F2F4F7 100%);
--color-workflow-process-bg: linear-gradient(90deg,
- rgba(200, 206, 218, 0.2) 0%,
- rgba(200, 206, 218, 0.04) 100%);
+ rgba(200, 206, 218, 0.2) 0%,
+ rgba(200, 206, 218, 0.04) 100%);
+ --color-workflow-run-failed-bg: linear-gradient(98deg,
+ rgba(240, 68, 56, 0.10) 0%,
+ rgba(255, 255, 255, 0) 26.01%);
+ --color-workflow-batch-failed-bg: linear-gradient(92deg,
+ rgba(240, 68, 56, 0.25) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-marketplace-divider-bg: linear-gradient(90deg,
+ rgba(16, 24, 40, 0.08) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-marketplace-plugin-empty: linear-gradient(180deg,
+ rgba(255, 255, 255, 0) 0%,
+ #fcfcfd 100%);
+ --color-toast-success-bg: linear-gradient(92deg,
+ rgba(23, 178, 106, 0.25) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-toast-warning-bg: linear-gradient(92deg,
+ rgba(247, 144, 9, 0.25) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-toast-error-bg: linear-gradient(92deg,
+ rgba(240, 68, 56, 0.25) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-toast-info-bg: linear-gradient(92deg,
+ rgba(11, 165, 236, 0.25) 0%);
+ --color-account-teams-bg: linear-gradient(271deg,
+ rgba(249, 250, 251, 0.9) -0.1%,
+ rgba(242, 244, 247, 0.9) 98.26%);
+ --color-app-detail-bg: linear-gradient(169deg,
+ #F2F4F7 1.18%,
+ #F9FAFB 99.52%);
+ --color-app-detail-overlay-bg: linear-gradient(270deg,
+ rgba(0, 0, 0, 0.00) 0%,
+ rgba(16, 24, 40, 0.01) 8%,
+ rgba(16, 24, 40, 0.18) 100%);
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
@@ -15,50 +56,9 @@ html[data-theme="light"] {
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
- --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
+ --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
- rgba(200, 206, 218, 0.2) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);
- --color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
- --color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
- --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
- --color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
- --color-chat-input-mask: linear-gradient(180deg,
- rgba(255, 255, 255, 0.01) 0%,
- #F2F4F7 100%);
- --color-workflow-run-failed-bg: linear-gradient(98deg,
- rgba(240, 68, 56, 0.10) 0%,
- rgba(255, 255, 255, 0) 26.01%);
- --color-workflow-batch-failed-bg: linear-gradient(92deg,
- rgba(240, 68, 56, 0.25) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-marketplace-divider-bg: linear-gradient(90deg,
- rgba(16, 24, 40, 0.08) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-marketplace-plugin-empty: linear-gradient(180deg,
- rgba(255, 255, 255, 0) 0%,
- #fcfcfd 100%);
- --color-toast-success-bg: linear-gradient(92deg,
- rgba(23, 178, 106, 0.25) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-toast-warning-bg: linear-gradient(92deg,
- rgba(247, 144, 9, 0.25) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-toast-error-bg: linear-gradient(92deg,
- rgba(240, 68, 56, 0.25) 0%,
- rgba(255, 255, 255, 0) 100%);
- --color-toast-info-bg: linear-gradient(92deg,
- rgba(11, 165, 236, 0.25) 0%);
- --color-account-teams-bg: linear-gradient(271deg,
- rgba(249, 250, 251, 0.9) -0.1%,
- rgba(242, 244, 247, 0.9) 98.26%);
- --color-app-detail-bg: linear-gradient(169deg,
- #F2F4F7 1.18%,
- #F9FAFB 99.52%);
- --color-app-detail-overlay-bg: linear-gradient(270deg,
- rgba(0, 0, 0, 0.00) 0%,
- rgba(16, 24, 40, 0.01) 8%,
- rgba(16, 24, 40, 0.18) 100%);
- --color-dataset-warning-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
+ rgba(200, 206, 218, 0.2) 0%,
+ rgba(255, 255, 255, 0) 100%);
+ --color-line-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}
\ No newline at end of file