From 4333820aa66de60a775d76868b7e4ba8f0ef60a7 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 14 Mar 2025 16:43:43 +0800
Subject: [PATCH] feat: enhance JSON Schema visual editor with new components
 and translations

---
 web/app/components/base/textarea/index.tsx    |   5 +-
 .../json-schema-config-modal/index.tsx        |  40 +-
 .../generated-result.tsx                      |   4 +-
 .../json-schema-generator/index.tsx           |  34 +-
 .../visual-editor/card.tsx                    |  46 +++
 .../visual-editor/edit-card/actions.tsx       |  56 +++
 .../edit-card/advanced-actions.tsx            |  28 ++
 .../edit-card/advanced-options.tsx            |  83 ++++
 .../visual-editor/edit-card/index.tsx         | 179 +++++++++
 .../edit-card/required-switch.tsx             |  25 ++
 .../visual-editor/edit-card/type-selector.tsx |  69 ++++
 .../visual-editor/index.tsx                   |  27 ++
 .../visual-editor/schema-node.tsx             | 375 ++++++++++++++++++
 .../components/workflow/nodes/llm/types.ts    |  23 +-
 .../components/workflow/nodes/llm/utils.ts    |  10 +
 web/app/dev-preview/page.tsx                  |  84 +++-
 web/i18n/en-US/workflow.ts                    |   7 +
 web/i18n/zh-Hans/workflow.ts                  |   7 +
 web/tailwind-common-config.ts                 |   1 +
 web/themes/manual-dark.css                    |   3 +-
 web/themes/manual-light.css                   |   3 +-
 21 files changed, 1047 insertions(+), 62 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
 create mode 100644 web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx

diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index 13e7af9603..5c72461532 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -8,8 +8,9 @@ const textareaVariants = cva(
   {
     variants: {
       size: {
-        regular: 'px-3 radius-md system-sm-regular',
-        large: 'px-4 radius-lg system-md-regular',
+        small: 'py-1 rounded-md system-xs-regular',
+        regular: 'px-3 rounded-md system-sm-regular',
+        large: 'px-4 rounded-lg system-md-regular',
       },
     },
     defaultVariants: {
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
index 39bafb9abb..befed2ef1d 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/index.tsx
@@ -1,6 +1,6 @@
 import React, { type FC, useCallback, useState } from 'react'
 import Modal from '../../../../../base/modal'
-import { type StructuredOutput, Type } from '../../types'
+import { type Field, Type } from '../../types'
 import { RiBracesLine, RiCloseLine, RiExternalLinkLine, RiTimelineView } from '@remixicon/react'
 import { SegmentedControl } from '../../../../../base/segmented-control'
 import JsonSchemaGenerator from './json-schema-generator'
@@ -8,11 +8,12 @@ import Divider from '@/app/components/base/divider'
 import JsonImporter from './json-importer'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import VisualEditor from './visual-editor'
 
 type JsonSchemaConfigModalProps = {
   isShow: boolean
-  defaultSchema: StructuredOutput
-  onSave: (schema: StructuredOutput) => void
+  defaultSchema?: Field
+  onSave: (schema: Field) => void
   onClose: () => void
 }
 
@@ -21,18 +22,16 @@ enum SchemaView {
   JsonSchema = 'jsonSchema',
 }
 
-const options = [
+const VIEW_TABS = [
   { Icon: RiTimelineView, text: 'Visual Editor', value: SchemaView.VisualEditor },
   { Icon: RiBracesLine, text: 'JSON Schema', value: SchemaView.JsonSchema },
 ]
 
-const DEFAULT_SCHEMA = {
-  schema: {
-    type: Type.object,
-    properties: {},
-    required: [],
-    additionalProperties: false,
-  },
+const DEFAULT_SCHEMA: Field = {
+  type: Type.object,
+  properties: {},
+  required: [],
+  additionalProperties: false,
 }
 
 const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
@@ -54,6 +53,10 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
 
   const handleSubmit = useCallback(() => {}, [])
 
+  const handleUpdateSchema = useCallback((schema: Field) => {
+    setJsonSchema(schema)
+  }, [])
+
   const handleResetDefaults = useCallback(() => {
     setJsonSchema(defaultSchema || DEFAULT_SCHEMA)
   }, [defaultSchema])
@@ -73,7 +76,7 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
       onClose={onClose}
       className='max-w-[960px] h-[800px] p-0'
     >
-      <div className='flex flex-col'>
+      <div className='flex flex-col h-full'>
         {/* Header */}
         <div className='relative flex p-6 pr-14 pb-3'>
           <div className='text-text-primary title-2xl-semi-bold grow truncate'>
@@ -87,7 +90,7 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
         <div className='flex items-center justify-between px-6 py-2'>
           {/* Tab */}
           <SegmentedControl<SchemaView>
-            options={options}
+            options={VIEW_TABS}
             value={currentTab}
             onChange={(value: SchemaView) => {
               setCurrentTab(value)
@@ -108,8 +111,15 @@ const JsonSchemaConfigModal: FC<JsonSchemaConfigModalProps> = ({
           </div>
         </div>
         <div className='px-6 grow'>
-          {currentTab === SchemaView.VisualEditor && <div className='h-full bg-components-input-bg-normal'>Visual Editor</div>}
-          {currentTab === SchemaView.JsonSchema && <div className='h-full bg-components-input-bg-normal'>JSON Schema</div>}
+          {currentTab === SchemaView.VisualEditor && (
+            <VisualEditor
+              schema={jsonSchema}
+              onChange={handleUpdateSchema}
+            />
+          )}
+          {currentTab === SchemaView.JsonSchema && (
+            <div className='h-full rounded-xl bg-components-input-bg-normal'>JSON Schema</div>
+          )}
         </div>
         {/* Footer */}
         <div className='flex items-center p-6 pt-5 gap-x-2'>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index f068b9f25b..5a50a4afb8 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useCallback, useRef, useState } from 'react'
-import type { StructuredOutput } from '../../../types'
+import type { SchemaRoot } from '../../../types'
 import { RiArrowLeftLine, RiClipboardLine, RiCloseLine, RiSparklingLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Editor from '@monaco-editor/react'
@@ -7,7 +7,7 @@ import copy from 'copy-to-clipboard'
 import Button from '@/app/components/base/button'
 
 type GeneratedResultProps = {
-  schema: StructuredOutput
+  schema: SchemaRoot
   onBack: () => void
   onRegenerate: () => void
   onClose: () => void
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index de5343ff3d..1ce1b79f3f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useCallback, useState } from 'react'
-import { type StructuredOutput, Type } from '../../../types'
+import { type SchemaRoot, Type } from '../../../types'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -13,7 +13,7 @@ import PromptEditor from './prompt-editor'
 import GeneratedResult from './generated-result'
 
 type JsonSchemaGeneratorProps = {
-  onApply: (schema: StructuredOutput) => void
+  onApply: (schema: SchemaRoot) => void
   crossAxisOffset?: number
 }
 
@@ -30,7 +30,7 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
   const { theme } = useTheme()
   const [view, setView] = useState(GeneratorView.promptEditor)
   const [instruction, setInstruction] = useState('')
-  const [schema, setSchema] = useState<StructuredOutput | null>(null)
+  const [schema, setSchema] = useState<SchemaRoot | null>(null)
   const SchemaGenerator = theme === Theme.light ? SchemaGeneratorLight : SchemaGeneratorDark
 
   const handleTrigger = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
@@ -47,23 +47,21 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
     await new Promise<void>((resolve) => {
       setTimeout(() => {
         setSchema({
-          schema: {
-            type: Type.object,
-            properties: {
-              string_field_1: {
-                type: Type.string,
-                description: '可为空可为空可为空可为空可为空可为空可为空可为空可为空可为空',
-              },
-              string_field_2: {
-                type: Type.string,
-                description: '可为空可为空可为空可为空可为空可为空可为空可为空可为空可为空',
-              },
+          type: Type.object,
+          properties: {
+            string_field_1: {
+              type: Type.string,
+              description: '可为空可为空可为空可为空可为空可为空可为空可为空可为空可为空',
+            },
+            string_field_2: {
+              type: Type.string,
+              description: '可为空可为空可为空可为空可为空可为空可为空可为空可为空可为空',
             },
-            required: [
-              'string_field_1',
-            ],
-            additionalProperties: false,
           },
+          required: [
+            'string_field_1',
+          ],
+          additionalProperties: false,
         })
         resolve()
       }, 1000)
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..f785b29b87
--- /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<CardProps> = ({
+  name,
+  type,
+  required,
+  description,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex flex-col py-0.5'>
+      <div className='flex items-center gap-x-1 p-0.5 pl-1'>
+        <div className='px-1 py-0.5 text-text-primary system-sm-semibold'>
+          {name}
+        </div>
+        <div className='px-1 py-0.5 text-text-tertiary system-xs-medium'>
+          {type}
+        </div>
+        {
+          required && (
+            <div className='px-1 py-0.5 text-text-warning system-2xs-medium-uppercase'>
+              {t('workflow.nodes.llm.jsonSchema.required')}
+            </div>
+          )
+        }
+      </div>
+
+      {description && (
+        <div className='px-2 pb-1 text-text-tertiary system-xs-regular'>
+          {description}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Card
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
new file mode 100644
index 0000000000..3fa76b45ea
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/actions.tsx
@@ -0,0 +1,56 @@
+import type { FC } from 'react'
+import React from 'react'
+import Tooltip from '@/app/components/base/tooltip'
+import { RiAddCircleLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+type ActionsProps = {
+  disableAddBtn: boolean
+  onAddChildField: () => void
+  onEdit: () => void
+  onDelete: () => void
+}
+
+const Actions: FC<ActionsProps> = ({
+  disableAddBtn,
+  onAddChildField,
+  onEdit,
+  onDelete,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center gap-x-0.5'>
+      <Tooltip popupContent={t('workflow.nodes.llm.jsonSchema.addChildField')}>
+        <button
+          type='button'
+          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary disabled:cursor-not-allowed disabled:text-text-disabled'
+          onClick={onAddChildField}
+          disabled={disableAddBtn}
+        >
+          <RiAddCircleLine className='w-4 h-4'/>
+        </button>
+      </Tooltip>
+      <Tooltip popupContent={t('common.operation.edit')}>
+        <button
+          type='button'
+          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'
+          onClick={onEdit}
+        >
+          <RiEditLine className='w-4 h-4' />
+        </button>
+      </Tooltip>
+      <Tooltip popupContent={t('common.operation.remove')}>
+        <button
+          type='button'
+          className='flex items-center justify-center w-6 h-6 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+          onClick={onDelete}
+        >
+          <RiDeleteBinLine className='w-4 h-4' />
+        </button>
+      </Tooltip>
+    </div>
+  )
+}
+
+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..709b9f9bc0
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -0,0 +1,28 @@
+import React, { type FC } from 'react'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+
+type AdvancedActionsProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+const AdvancedActions: FC<AdvancedActionsProps> = ({
+  onCancel,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center gap-x-1'>
+      <Button size='small' variant='secondary' onClick={onCancel}>
+        {t('common.operation.cancel')}
+      </Button>
+      <Button size='small' variant='primary' onClick={onConfirm}>
+        {t('common.operation.confirm')}
+      </Button>
+    </div>
+  )
+}
+
+export default React.memo(AdvancedActions)
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
new file mode 100644
index 0000000000..3d9bbbafbe
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-options.tsx
@@ -0,0 +1,83 @@
+import React, { type FC, useCallback, useState } from 'react'
+import { RiArrowDownDoubleLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Divider from '@/app/components/base/divider'
+import Textarea from '@/app/components/base/textarea'
+
+export type AdvancedOptionsType = {
+  enum: string
+}
+
+type AdvancedOptionsProps = {
+  options: AdvancedOptionsType
+  onChange: (options: AdvancedOptionsType) => void
+}
+
+const AdvancedOptions: FC<AdvancedOptionsProps> = ({
+  onChange,
+  options,
+}) => {
+  const { t } = useTranslation()
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
+  const [enumValue, setEnumValue] = useState(options.enum)
+
+  const handleEnumChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setEnumValue(e.target.value)
+  }, [])
+
+  const handleEnumBlur = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+    onChange({ enum: e.target.value })
+  }, [onChange])
+
+  // const handleEnumChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  //   const value = e.target.value
+  //   onChange({ enum: value })
+  // }, [onChange])
+
+  const handleToggleAdvancedOptions = useCallback(() => {
+    setShowAdvancedOptions(prev => !prev)
+  }, [])
+
+  return (
+    <div className='border-t border-divider-subtle'>
+      {showAdvancedOptions ? (
+        <div className='flex flex-col px-2 py-1.5 gap-y-1'>
+          <div className='flex items-center gap-x-2 w-full'>
+            <span className='text-text-tertiary system-2xs-medium-uppercase'>
+              {t('workflow.nodes.llm.jsonSchema.stringValidations')}
+            </span>
+            <div className='grow'>
+              <Divider type='horizontal' className='h-px my-0 bg-line-divider-bg' />
+            </div>
+          </div>
+          <div className='flex flex-col'>
+            <div className='flex items-center h-6 text-text-secondary system-xs-medium'>
+              Enum
+            </div>
+            <Textarea
+              size='small'
+              className='min-h-6'
+              value={enumValue}
+              onChange={handleEnumChange}
+              onBlur={handleEnumBlur}
+              placeholder={'\'abcd\', 1, 1.5, \'etc\''}
+            />
+          </div>
+        </div>
+      ) : (
+        <button
+          type='button'
+          className='flex items-center pl-1.5 pt-2 pr-2 pb-1 gap-x-0.5'
+          onClick={handleToggleAdvancedOptions}
+        >
+          <RiArrowDownDoubleLine className='w-3 h-3 text-text-tertiary' />
+          <span className='text-text-tertiary system-xs-regular'>
+            {t('workflow.nodes.llm.jsonSchema.showAdvancedOptions')}
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default AdvancedOptions
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..a678ad1297
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -0,0 +1,179 @@
+import React, { type FC, useCallback, useMemo, 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 { useUnmount } from 'ahooks'
+import classNames from '@/utils/classnames'
+
+export type EditData = {
+  name: string
+  type: Type | ArrayType
+  required: boolean
+  description: string
+  enum?: SchemaEnumType
+}
+
+type EditCardProps = {
+  fields: EditData
+  onPropertyNameChange: (name: string) => void
+  onTypeChange: (type: Type | ArrayType) => void
+  onRequiredChange: (name: string) => void
+  onDescriptionChange: (description: string) => void
+  onAdvancedOptionsChange: (options: AdvancedOptionsType) => void
+  onDelete: (name: string) => void
+  onCancel: () => void
+}
+
+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 EditCard: FC<EditCardProps> = ({
+  fields,
+  onPropertyNameChange,
+  onTypeChange,
+  onRequiredChange,
+  onDescriptionChange,
+  onAdvancedOptionsChange,
+  onDelete,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const [propertyName, setPropertyName] = useState(fields.name)
+  const [description, setDescription] = useState(fields.description)
+  const [AdvancedEditing, setAdvancedEditing] = useState(!fields)
+
+  const handlePropertyNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setPropertyName(e.target.value)
+  }, [])
+
+  const handlePropertyNameBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    onPropertyNameChange(e.target.value)
+  }, [onPropertyNameChange])
+
+  const handleTypeChange = useCallback((item: TypeItem) => {
+    onTypeChange(item.value)
+  }, [onTypeChange])
+
+  const toggleRequired = useCallback(() => {
+    onRequiredChange(propertyName)
+  }, [onRequiredChange, propertyName])
+
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(e.target.value)
+  }, [])
+
+  const handleDescriptionBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    onDescriptionChange(e.target.value)
+  }, [onDescriptionChange])
+
+  const advancedOptions = useMemo(() => {
+    return { enum: (fields.enum || []).join(', ') }
+  }, [fields.enum])
+
+  const handleAdvancedOptionsChange = useCallback((options: AdvancedOptionsType) => {
+    onAdvancedOptionsChange(options)
+  }, [onAdvancedOptionsChange])
+
+  const handleConfirm = useCallback(() => {
+    setAdvancedEditing(false)
+  }, [])
+
+  const handleDelete = useCallback(() => {
+    onDelete(propertyName)
+  }, [onDelete, propertyName])
+
+  const handleEdit = useCallback(() => {
+    setAdvancedEditing(true)
+  }, [])
+
+  useUnmount(() => {
+    onPropertyNameChange(propertyName)
+  })
+
+  const disableAddBtn = fields.type !== Type.object && fields.type !== ArrayType.object
+  const hasAdvancedOptions = fields.type === Type.string || fields.type === Type.number
+
+  return (
+    <div className='flex flex-col py-0.5 rounded-lg bg-components-panel-bg shadow-sm shadow-shadow-shadow-4'>
+      <div className='flex items-center pl-1 pr-0.5'>
+        <div className='flex items-center gap-x-1 grow'>
+          <input
+            value={propertyName}
+            className='max-w-20 h-5 rounded-[5px] px-1 py-0.5 text-text-primary system-sm-semibold placeholder:text-text-placeholder
+            placeholder:system-sm-semibold hover:bg-state-base-hover border border-transparent focus:border-components-input-border-active
+            focus:bg-components-input-bg-active focus:shadow-xs shadow-shadow-shadow-3 caret-[#295EFF] outline-none'
+            placeholder={t('workflow.nodes.llm.jsonSchema.fieldNamePlaceholder')}
+            onChange={handlePropertyNameChange}
+            onBlur={handlePropertyNameBlur}
+          />
+          <TypeSelector
+            currentValue={fields.type}
+            items={TYPE_OPTIONS}
+            onSelect={handleTypeChange}
+            popupClassName={'z-[1000]'}
+          />
+          {
+            fields.required && (
+              <div className='px-1 py-0.5 text-text-warning system-2xs-medium-uppercase'>
+                {t('workflow.nodes.llm.jsonSchema.required')}
+              </div>
+            )
+          }
+        </div>
+        <RequiredSwitch
+          defaultValue={fields.required}
+          toggleRequired={toggleRequired}
+        />
+        <Divider type='vertical' className='h-3' />
+        {AdvancedEditing ? (
+          <AdvancedActions
+            onCancel={() => { }}
+            onConfirm={handleConfirm}
+          />
+        ) : (
+          <Actions
+            disableAddBtn={disableAddBtn}
+            onAddChildField={() => { }}
+            onDelete={handleDelete}
+            onEdit={handleEdit}/>
+        )}
+      </div>
+
+      {(description || AdvancedEditing) && (
+        <div className={classNames(AdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
+          <input
+            value={description}
+            className='w-full h-4 p-0 text-text-tertiary system-xs-regular placeholder:text-text-placeholder placeholder:system-xs-regular caret-[#295EFF] outline-none'
+            placeholder={t('workflow.nodes.llm.jsonSchema.descriptionPlaceholder')}
+            onChange={handleDescriptionChange}
+            onBlur={handleDescriptionBlur}
+          />
+        </div>
+      )}
+
+      {AdvancedEditing && hasAdvancedOptions && (
+        <AdvancedOptions
+          options={advancedOptions}
+          onChange={handleAdvancedOptionsChange}
+        />
+      )}
+    </div>
+  )
+}
+
+export default EditCard
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
new file mode 100644
index 0000000000..4e6980f675
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import type { FC } from 'react'
+import Switch from '@/app/components/base/switch'
+import { useTranslation } from 'react-i18next'
+
+type RequiredSwitchProps = {
+  defaultValue: boolean
+  toggleRequired: () => void
+}
+
+const RequiredSwitch: FC<RequiredSwitchProps> = ({
+  defaultValue,
+  toggleRequired,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center gap-x-1 px-1.5 py-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter'>
+      <span className='text-text-secondary system-2xs-medium-uppercase'>{t('workflow.nodes.llm.jsonSchema.required')}</span>
+      <Switch size='xs' defaultValue={defaultValue} onChange={toggleRequired} />
+    </div>
+  )
+}
+
+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..130eed7ed9
--- /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<TypeSelectorProps> = ({
+  items,
+  currentValue,
+  onSelect,
+  popupClassName,
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn(
+          'flex items-center p-0.5 pl-1 rounded-[5px] hover:bg-state-base-hover',
+          open && 'bg-state-base-hover',
+        )}>
+          <span className='text-text-tertiary system-xs-medium'>{currentValue}</span>
+          <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className={popupClassName}>
+        <div className='w-40 p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
+          {items.map((item) => {
+            const isSelected = item.value === currentValue
+            return (<div
+              key={item.value}
+              className={'flex items-center gap-x-1 px-2 py-1 rounded-lg hover:bg-state-base-hover'}
+              onClick={() => {
+                onSelect(item)
+                setOpen(false)
+              }}
+            >
+              <span className='px-1 text-text-secondary system-sm-medium'>{item.text}</span>
+              {isSelected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
+            </div>
+            )
+          })}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TypeSelector
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
new file mode 100644
index 0000000000..500e92fe10
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -0,0 +1,27 @@
+import type { FC } from 'react'
+import type { Field } from '../../../types'
+import SchemaNode from './schema-node'
+
+type VisualEditorProps = {
+  schema: Field
+  onChange: (schema: Field) => void
+}
+
+const VisualEditor: FC<VisualEditorProps> = ({
+  schema,
+  onChange,
+}) => {
+  return (
+    <div className='h-full rounded-xl p-1 pl-2 bg-background-section-burn'>
+      <SchemaNode
+        name='structured_output'
+        schema={schema}
+        required={false}
+        onChange={onChange}
+        depth={0}
+      />
+    </div>
+  )
+}
+
+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..055a2f178c
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -0,0 +1,375 @@
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { ArrayType } from '../../../types'
+import { type ArrayItems, type Field, Type } from '../../../types'
+import type { AdvancedOptionsType } from './edit-card/advanced-options'
+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 produce from 'immer'
+
+type SchemaNodeProps = {
+  name: string
+  required: boolean
+  schema: Field
+  depth: number
+  onChange: (schema: Field) => void
+  onPropertyNameChange?: (name: string) => void
+  onRequiredChange?: (name: string) => void
+  onNodeDelete?: (name: string) => void
+}
+
+// Support 10 levels of indentation
+const indentPadding: Record<number, string> = {
+  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]',
+}
+
+const indentLeft: Record<number, string> = {
+  1: 'left-0',
+  2: 'left-[20px]',
+  3: 'left-[40px]',
+  4: 'left-[60px]',
+  5: 'left-[80px]',
+  6: 'left-[100px]',
+  7: 'left-[120px]',
+  8: 'left-[140px]',
+  9: 'left-[160px]',
+}
+
+const SchemaNode: FC<SchemaNodeProps> = ({
+  name,
+  required,
+  schema,
+  onChange,
+  onPropertyNameChange,
+  onRequiredChange,
+  onNodeDelete,
+  depth,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [isHovering, setIsHovering] = useState(false)
+  const hoverTimer = useRef<any>(null)
+
+  const hasChildren = getHasChildren(schema)
+  const isEditing = isHovering && depth > 0
+  const type = getFieldType(schema)
+
+  const handleExpand = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  const handleMouseEnter = () => {
+    hoverTimer.current = setTimeout(() => {
+      setIsHovering(true)
+    }, 100)
+  }
+
+  const handleMouseLeave = () => {
+    clearTimeout(hoverTimer.current)
+    setIsHovering(false)
+  }
+
+  const handlePropertyNameChange = useCallback((oldName: string, newName: string) => {
+    if (oldName === newName) return
+
+    if (schema.type === Type.object) {
+      const properties = schema.properties || {}
+      if (properties[newName]) {
+        // TODO: Show error message
+        return
+      }
+
+      const newProperties = Object.entries(properties).reduce((acc, [key, value]) => {
+        acc[key === oldName ? newName : key] = value
+        return acc
+      }, {} as Record<string, Field>)
+
+      const required = schema.required || []
+      const newRequired = produce(required, (draft) => {
+        const index = draft.indexOf(oldName)
+        if (index !== -1)
+          draft.splice(index, 1, newName)
+      })
+
+      onChange({
+        ...schema,
+        properties: newProperties,
+        required: newRequired,
+      })
+      return
+    }
+
+    if (schema.type === Type.array && schema.items && schema.items.type === Type.object) {
+      const properties = schema.items.properties || {}
+      if (properties[newName]) {
+        // TODO: Show error message
+        return
+      }
+
+      const newProperties = Object.entries(properties).reduce((acc, [key, value]) => {
+        acc[key === oldName ? newName : key] = value
+        return acc
+      }, {} as Record<string, Field>)
+      const required = schema.items.required || []
+      const newRequired = produce(required, (draft) => {
+        const index = draft.indexOf(oldName)
+        if (index !== -1)
+          draft.splice(index, 1, newName)
+      })
+      onChange({
+        ...schema,
+        items: {
+          ...schema.items,
+          properties: newProperties,
+          required: newRequired,
+        },
+      })
+    }
+  }, [onChange, schema])
+
+  const handleTypeChange = useCallback((newType: Type | ArrayType) => {
+    if (schema.type === newType) return
+    const newSchema = produce(schema, (draft) => {
+      if (draft.type === Type.object) {
+        delete draft.properties
+        delete draft.required
+      }
+      if (draft.type === Type.array)
+        delete draft.items
+      switch (newType) {
+        case Type.object:
+          draft.type = Type.object
+          draft.properties = {}
+          draft.required = []
+          break
+        case ArrayType.string:
+          draft.type = Type.array
+          draft.items = {
+            type: Type.string,
+          }
+          break
+        case ArrayType.number:
+          draft.type = Type.array
+          draft.items = {
+            type: Type.number,
+          }
+          break
+        case ArrayType.boolean:
+          draft.type = Type.array
+          draft.items = {
+            type: Type.boolean,
+          }
+          break
+        case ArrayType.object:
+          draft.type = Type.array
+          draft.items = {
+            type: Type.object,
+            properties: {},
+            required: [],
+          }
+          break
+        default:
+          draft.type = newType as Type
+      }
+    })
+    onChange(newSchema)
+  }, [onChange, schema])
+
+  const toggleRequired = useCallback((name: string) => {
+    if (schema.type === Type.object) {
+      const required = schema.required || []
+      const newRequired = required.includes(name)
+        ? required.filter(item => item !== name)
+        : [...required, name]
+      onChange({
+        ...schema,
+        required: newRequired,
+      })
+      return
+    }
+    if (schema.type === Type.array && schema.items && schema.items.type === Type.object) {
+      const required = schema.items.required || []
+      const newRequired = required.includes(name)
+        ? required.filter(item => item !== name)
+        : [...required, name]
+      onChange({
+        ...schema,
+        items: {
+          ...schema.items,
+          required: newRequired,
+        },
+      })
+    }
+  }, [onChange, schema])
+
+  const handleDescriptionChange = useCallback((description: string) => {
+    onChange({
+      ...schema,
+      description,
+    })
+  }, [onChange, schema])
+
+  const handleAdvancedOptionsChange = useCallback((advancedOptions: AdvancedOptionsType) => {
+    const newAdvancedOptions = {
+      enum: advancedOptions.enum.replace(' ', '').split(','),
+    }
+    onChange({
+      ...schema,
+      ...newAdvancedOptions,
+    })
+  }, [onChange, schema])
+
+  const handleNodeDelete = useCallback((name: string) => {
+    const newSchema = produce(schema, (draft) => {
+      if (draft.type === Type.object && draft.properties) {
+        delete draft.properties[name]
+        draft.required = draft.required?.filter(item => item !== name)
+      }
+      if (draft.type === Type.array && draft.items?.properties && draft.items?.type === Type.object) {
+        delete draft.items.properties[name]
+        draft.items.required = draft.items.required?.filter(item => item !== name)
+      }
+    })
+    onChange(newSchema)
+  }, [onChange, schema])
+
+  const handlePropertyChange = useCallback((name: string, propertySchema: Field) => {
+    onChange({
+      ...schema,
+      properties: {
+        ...(schema.properties || {}),
+        [name]: propertySchema,
+      },
+    })
+  }, [onChange, schema])
+
+  const handleItemsPropertyChange = useCallback((name: string, itemsSchema: Field) => {
+    onChange({
+      ...schema,
+      items: {
+        ...schema.items,
+        properties: {
+          ...(schema.items?.properties || {}),
+          [name]: itemsSchema as ArrayItems,
+        },
+      } as ArrayItems,
+    })
+  }, [onChange, schema])
+
+  return (
+    <div className='relative'>
+      <div className={classNames('relative z-10', indentPadding[depth])}>
+        {depth > 0 && hasChildren && (
+          <div className={classNames(
+            'flex items-center absolute top-0 w-5 h-7 px-0.5 z-10 bg-background-section-burn',
+            indentLeft[depth],
+          )}>
+            <button
+              onClick={handleExpand}
+              className='py-0.5 text-text-tertiary hover:text-text-accent'
+            >
+              {
+                isExpanded
+                  ? <RiArrowDropDownLine className='w-4 h-4' />
+                  : <RiArrowDropRightLine className='w-4 h-4' />
+              }
+            </button>
+          </div>
+        )}
+
+        <div
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {isEditing ? (
+            <EditCard
+              fields={{
+                name,
+                type,
+                required,
+                description: schema.description || '',
+                enum: schema.enum || [],
+              }}
+              onPropertyNameChange={onPropertyNameChange!}
+              onTypeChange={handleTypeChange}
+              onRequiredChange={onRequiredChange!}
+              onDescriptionChange={handleDescriptionChange}
+              onAdvancedOptionsChange={handleAdvancedOptionsChange}
+              onDelete={onNodeDelete!}
+              onCancel={() => {}}
+            />
+          ) : (
+            <Card
+              name={name}
+              type={type}
+              required={required}
+              description={schema.description}
+            />
+          )}
+        </div>
+
+      </div>
+
+      <div className={classNames(
+        'flex justify-center w-5 h-[calc(100%-1.75rem)] absolute top-7 z-0',
+        indentLeft[depth + 1],
+      )}>
+        <Divider type='vertical' className='bg-divider-subtle mx-0' />
+      </div>
+
+      {isExpanded && hasChildren && (
+        <>
+          {schema.type === Type.object && schema.properties && (
+            Object.entries(schema.properties).map(([key, childSchema]) => (
+              <SchemaNode
+                key={key}
+                name={key}
+                required={!!schema.required?.includes(key)}
+                schema={childSchema}
+                onChange={handlePropertyChange.bind(null, key)}
+                onPropertyNameChange={handlePropertyNameChange.bind(null, key)}
+                onRequiredChange={toggleRequired}
+                onNodeDelete={handleNodeDelete}
+                depth={depth + 1}
+              />
+            ))
+          )}
+
+          {schema.type === Type.array
+            && schema.items
+            && schema.items.type === Type.object
+            && schema.items.properties
+            && (
+              Object.entries(schema.items.properties).map(([key, childSchema]) => (
+                <SchemaNode
+                  key={key}
+                  name={key}
+                  required={!!schema.items?.required?.includes(key)}
+                  schema={childSchema}
+                  onChange={handleItemsPropertyChange.bind(null, key)}
+                  onPropertyNameChange={handlePropertyNameChange.bind(null, key)}
+                  onRequiredChange={toggleRequired}
+                  onNodeDelete={handleNodeDelete}
+                  depth={depth + 1}
+                />
+              ))
+            )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(SchemaNode)
diff --git a/web/app/components/workflow/nodes/llm/types.ts b/web/app/components/workflow/nodes/llm/types.ts
index 78b7cf3cc2..2fcd110879 100644
--- a/web/app/components/workflow/nodes/llm/types.ts
+++ b/web/app/components/workflow/nodes/llm/types.ts
@@ -35,6 +35,9 @@ export enum ArrayType {
 export type TypeWithArray = Type | ArrayType
 
 type ArrayItemType = Exclude<Type, Type.array>
+export type ArrayItems = Omit<Field, 'type'> & { type: ArrayItemType }
+
+export type SchemaEnumType = string[] | number[]
 
 export type Field = {
   type: Type
@@ -43,18 +46,18 @@ export type Field = {
   }
   required?: string[] // Key of required properties in object
   description?: string
-  items?: { // Array has items. Define the item type
-    type: ArrayItemType
-  }
-  enum?: string[] // Enum values
+  items?: ArrayItems // Array has items. Define the item type
+  enum?: SchemaEnumType // Enum values
   additionalProperties?: false // Required in object by api. Just set false
 }
 
 export type StructuredOutput = {
-  schema: {
-    type: Type.object,
-    properties: Record<string, Field>
-    required: string[]
-    additionalProperties: false
-  }
+  schema: SchemaRoot
+}
+
+export type SchemaRoot = {
+  type: Type.object
+  properties: Record<string, Field>
+  required?: string[]
+  additionalProperties: false
 }
diff --git a/web/app/components/workflow/nodes/llm/utils.ts b/web/app/components/workflow/nodes/llm/utils.ts
index d3454e2083..310b65f528 100644
--- a/web/app/components/workflow/nodes/llm/utils.ts
+++ b/web/app/components/workflow/nodes/llm/utils.ts
@@ -12,3 +12,13 @@ export const getFieldType = (field: Field) => {
 
   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
+}
diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx
index 24631aa28e..7c9e1c1ecf 100644
--- a/web/app/dev-preview/page.tsx
+++ b/web/app/dev-preview/page.tsx
@@ -1,19 +1,77 @@
 'use client'
 
-import { ToolTipContent } from '../components/base/tooltip/content'
-import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version'
-import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { type Field, Type } from '../components/workflow/nodes/llm/types'
+import JsonSchemaConfigModal from '../components/workflow/nodes/llm/components/json-schema-config-modal'
 
 export default function Page() {
-  const { t } = useTranslation()
-  return <div className="p-20">
-    <SwitchPluginVersion
-      uniqueIdentifier={'langgenius/openai:12'}
-      tooltip={<ToolTipContent
-        title={t('workflow.nodes.agent.unsupportedStrategy')}
-      >
-        {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
-      </ToolTipContent>}
-    />
+  const [show, setShow] = useState(false)
+  const [schema, setSchema] = useState<Field>({
+    type: Type.object,
+    properties: {
+      userId: {
+        type: Type.number,
+        description: 'The user ID',
+      },
+      id: {
+        type: Type.number,
+      },
+      title: {
+        type: Type.string,
+      },
+      completed: {
+        type: Type.boolean,
+      },
+      locations: {
+        type: Type.array,
+        items: {
+          type: Type.object,
+          properties: {
+            x: {
+              type: Type.object,
+              properties: {
+                x1: {
+                  type: Type.array,
+                  items: {
+                    type: Type.number,
+                  },
+                },
+              },
+              required: [
+                'x1',
+              ],
+            },
+            y: {
+              type: Type.number,
+            },
+          },
+          required: [
+            'x',
+            'y',
+          ],
+        },
+      },
+    },
+    required: [
+      'userId',
+      'id',
+      'title',
+    ],
+    additionalProperties: false,
+  })
+
+  return <div className='flex flex-col p-20 h-full w-full overflow-hidden'>
+    <button onClick={() => setShow(true)} className='shrink-0'>Open Json Schema Config</button>
+    {show && <JsonSchemaConfigModal
+      isShow={show}
+      defaultSchema={schema}
+      onSave={(schema) => {
+        setSchema(schema)
+      }}
+      onClose={() => setShow(false)}
+    />}
+    <pre className='bg-gray-50 p-4 rounded-lg overflow-auto grow'>
+      {JSON.stringify(schema, null, 2)}
+    </pre>
   </div>
 }
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index dd60e7336d..4a287e9412 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -426,6 +426,13 @@ const translation = {
         apply: 'Apply',
         doc: 'Learn more about structured output',
         resetDefaults: 'Reset Defaults',
+        required: 'required',
+        addField: 'Add Field',
+        addChildField: 'Add Child Field',
+        showAdvancedOptions: 'Show advanced options',
+        stringValidations: 'String Validations',
+        fieldNamePlaceholder: 'Field Name',
+        descriptionPlaceholder: 'Add description',
       },
     },
     knowledgeRetrieval: {
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 3b5ccd1759..4416ffc762 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -426,6 +426,13 @@ const translation = {
         apply: '应用',
         doc: '了解有关结构化输出的更多信息',
         resetDefaults: '恢复默认值',
+        required: '必填',
+        addField: '添加字段',
+        addChildField: '添加子字段',
+        showAdvancedOptions: '显示高级选项',
+        stringValidations: '字符串验证',
+        fieldNamePlaceholder: '字段名',
+        descriptionPlaceholder: '添加描述',
       },
     },
     knowledgeRetrieval: {
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 1d0c8a768b..9e36410f11 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)',
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 479408c897..7616e3a1ce 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -33,7 +33,7 @@ html[data-theme="dark"] {
       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%),
+      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%
@@ -61,4 +61,5 @@ html[data-theme="dark"] {
     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 119dee5af6..23e8a951f2 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -33,7 +33,7 @@ html[data-theme="light"] {
       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%),
+      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%
@@ -61,4 +61,5 @@ html[data-theme="light"] {
     180deg,
     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