feat: enhance JSON schema editor with keyboard shortcuts and additional properties validation

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

@@ -1,6 +1,8 @@
 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
@@ -8,6 +10,15 @@ type AdvancedActionsProps = {
   onConfirm: () => void
 }
 
+const Key = (props: { keyName: string }) => {
+  const { keyName } = props
+  return (
+    <kbd className='flex items-center justify-center min-w-4 h-4 px-px rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface system-kbd'>
+      {keyName}
+    </kbd>
+  )
+}
+
 const AdvancedActions: FC<AdvancedActionsProps> = ({
   isConfirmDisabled,
   onCancel,
@@ -15,18 +26,31 @@ const AdvancedActions: FC<AdvancedActionsProps> = ({
 }) => {
   const { t } = useTranslation()
 
+  useKeyPress([`${getKeyboardKeyCodeBySystem('ctrl')}.enter`], (e) => {
+    e.preventDefault()
+    onConfirm()
+  }, {
+    exactMatch: true,
+    useCapture: true,
+  })
+
   return (
     <div className='flex items-center gap-x-1'>
       <Button size='small' variant='secondary' onClick={onCancel}>
         {t('common.operation.cancel')}
       </Button>
       <Button
+        className='flex items-center gap-x-1'
         disabled={isConfirmDisabled}
         size='small'
         variant='primary'
         onClick={onConfirm}
       >
-        {t('common.operation.confirm')}
+        <span>{t('common.operation.confirm')}</span>
+        <div className='flex items-center gap-x-0.5'>
+          <Key keyName={getKeyboardKeyNameBySystem('ctrl')} />
+          <Key keyName='⏎' />
+        </div>
       </Button>
     </div>
   )

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

@@ -20,12 +20,12 @@ export type EditData = {
   name: string
   type: Type | ArrayType
   required: boolean
-  description: string
+  description?: string
   enum?: SchemaEnumType
 }
 
 type Options = {
-  description: string
+  description?: string
   enum?: SchemaEnumType
 }
 

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts

@@ -116,6 +116,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
           schema.type = Type.object
           schema.properties = {}
           schema.required = []
+          schema.additionalProperties = false
           break
         case ArrayType.string:
           schema.type = Type.array
@@ -141,6 +142,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
             type: Type.object,
             properties: {},
             required: [],
+            additionalProperties: false,
           }
           break
         default:
@@ -212,8 +214,6 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
           ...(schema.properties || {}),
           '': {
             type: Type.string,
-            description: '',
-            enum: [],
           },
         }
         setHoveringProperty([...path, 'properties', ''].join('.'))
@@ -223,8 +223,6 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
           ...(schema.items.properties || {}),
           '': {
             type: Type.string,
-            description: '',
-            enum: [],
           },
         }
         setHoveringProperty([...path, 'items', 'properties', ''].join('.'))
@@ -292,6 +290,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
               schema.type = Type.object
               schema.properties = {}
               schema.required = []
+              schema.additionalProperties = false
               break
             case ArrayType.string:
               schema.type = Type.array
@@ -317,6 +316,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
                 type: Type.object,
                 properties: {},
                 required: [],
+                additionalProperties: false,
               }
               break
             default:
@@ -379,6 +379,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
               schema.type = Type.object
               schema.properties = {}
               schema.required = []
+              schema.additionalProperties = false
               break
             case ArrayType.string:
               schema.type = Type.array
@@ -404,6 +405,7 @@ export const useSchemaNodeOperations = (props: VisualEditorProps) => {
                 type: Type.object,
                 properties: {},
                 required: [],
+                additionalProperties: false,
               }
               break
             default:

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

@@ -114,8 +114,8 @@ const SchemaNode: FC<SchemaNodeProps> = ({
                 name,
                 type,
                 required,
-                description: schema.description || '',
+                description: schema.description,
-                enum: schema.enum || [],
+                enum: schema.enum,
               }}
               path={path}
               parentPath={parentPath!}

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

@@ -2,6 +2,7 @@ import { ArrayType, Type } from './types'
 import type { ArrayItems, Field, LLMNodeType } from './types'
 import Ajv, { type ErrorObject } from 'ajv'
 import draft7MetaSchema from 'ajv/dist/refs/json-schema-draft-07.json'
+import produce from 'immer'
 
 export const checkNodeValid = (payload: LLMNodeType) => {
   return true
@@ -91,11 +92,13 @@ const ajv = new Ajv({
 ajv.addMetaSchema(draft7MetaSchema)
 
 export const validateSchemaAgainstDraft7 = (schemaToValidate: any) => {
+  const schema = produce(schemaToValidate, (draft: any) => {
   // Make sure the schema has the $schema property for draft-07
-  if (!schemaToValidate.$schema)
+    if (!draft.$schema)
-    schemaToValidate.$schema = 'http://json-schema.org/draft-07/schema#'
+      draft.$schema = 'http://json-schema.org/draft-07/schema#'
+  })
 
-  const valid = ajv.validateSchema(schemaToValidate)
+  const valid = ajv.validateSchema(schema)
 
   return valid ? [] : ajv.errors || []
 }