From 1305e5f8c13295877fa102c1f8935263f674d66f Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 17 Mar 2025 18:36:42 +0800
Subject: [PATCH] feat: update JSON Schema handling and improve UI interactions

---
 .../json-importer.tsx                         |  2 +-
 .../json-schema-config.tsx                    | 12 +++++--
 .../visual-editor/card.tsx                    |  4 +--
 .../visual-editor/index.tsx                   |  4 +--
 .../components/workflow/nodes/llm/utils.ts    | 33 ++++++++++++++++++-
 5 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 8f863d23a4..16964da140 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/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>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index 669ec07c55..e6ce21b0b8 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/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'
         >
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
index f785b29b87..70fb026ec3 100644
--- 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
@@ -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>
       )}
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
index a9093ff7fe..6468935aa2 100644
--- 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
@@ -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> = ({
diff --git a/web/app/components/workflow/nodes/llm/utils.ts b/web/app/components/workflow/nodes/llm/utils.ts
index 310b65f528..e8930dc13e 100644
--- a/web/app/components/workflow/nodes/llm/utils.ts
+++ b/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
+}