feat: update JSON Schema handling and improve UI interactions

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx

@@ -184,7 +184,7 @@ const JsonImporter: FC<JsonImporterProps> = ({
               {t('common.operation.cancel')}
             </Button>
             <Button variant='primary' onClick={handleSubmit}>
-              {t('common.operation.confirm')}
+              {t('common.operation.submit')}
             </Button>
           </div>
         </div>

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx

@@ -14,6 +14,7 @@ import { useMittContext } from './context'
 import type { EditData } from './visual-editor/edit-card'
 import produce from 'immer'
 import Toast from '@/app/components/base/toast'
+import { jsonToSchema } from '../../utils'
 
 type JsonSchemaConfigProps = {
   defaultSchema?: SchemaRoot
@@ -470,9 +471,14 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
     setBtnWidth(width + 32)
   }, [])
 
-  const handleApplySchema = useCallback(() => {}, [])
+  const handleApplySchema = useCallback((schema: SchemaRoot) => {
+    setJsonSchema(schema)
+  }, [])
 
-  const handleSubmit = useCallback(() => {}, [])
+  const handleSubmit = useCallback((schema: string) => {
+    const jsonSchema = jsonToSchema(schema) as SchemaRoot
+    setJsonSchema(jsonSchema)
+  }, [])
 
   const handleSchemaEditorUpdate = useCallback((schema: string) => {
     setJson(schema)
@@ -541,7 +547,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
       <div className='flex items-center p-6 pt-5 gap-x-2'>
         <a
           className='flex items-center gap-x-1 grow text-text-accent'
-          href='https://json-schema.org/'
+          href='https://json-schema.org/' // todo: replace with documentation link
           target='_blank'
           rel='noopener noreferrer'
         >

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx

@@ -19,7 +19,7 @@ const Card: FC<CardProps> = ({
   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'>
+        <div className='px-1 py-0.5 text-text-primary system-sm-semibold truncate'>
           {name}
         </div>
         <div className='px-1 py-0.5 text-text-tertiary system-xs-medium'>
@@ -35,7 +35,7 @@ const Card: FC<CardProps> = ({
       </div>
 
       {description && (
-        <div className='px-2 pb-1 text-text-tertiary system-xs-regular'>
+        <div className='px-2 pb-1 text-text-tertiary system-xs-regular truncate'>
           {description}
         </div>
       )}

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react'
-import type { Field } from '../../../types'
+import type { SchemaRoot } from '../../../types'
 import SchemaNode from './schema-node'
 
 type VisualEditorProps = {
-  schema: Field
+  schema: SchemaRoot
 }
 
 const VisualEditor: FC<VisualEditorProps> = ({

web/app/components/workflow/nodes/llm/utils.ts

@@ -1,5 +1,5 @@
 import { ArrayType, Type } from './types'
-import type { Field, LLMNodeType } from './types'
+import type { ArrayItems, Field, LLMNodeType } from './types'
 
 export const checkNodeValid = (payload: LLMNodeType) => {
   return true
@@ -22,3 +22,34 @@ export const getHasChildren = (schema: Field) => {
   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 inferType = (value: any): Type => {
+  if (Array.isArray(value)) return Type.array
+  if (typeof value === 'boolean') return Type.boolean
+  if (typeof value === 'number') return Type.number
+  if (typeof value === 'string') return Type.string
+  if (typeof value === 'object') return Type.object
+  return Type.string
+}
+
+export function jsonToSchema(json: any): Field {
+  const schema: Field = {
+    type: inferType(json),
+  }
+
+  if (schema.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 && json.length > 0) {
+    schema.items = jsonToSchema(json[0]) as ArrayItems
+  }
+
+  return schema
+}