Add Paste JSON Schema Functionality to Custom Tools (#4053)

feat: add paste JSON schema functionality to custom tools

- Add PasteJSONDialog component for JSON input

- Add Paste JSON button to Tool Dialog

- Support JSON validation and format conversion

- Add example JSON template

packages/ui/src/views/tools/PasteJSONDialog.jsx

@@ -0,0 +1,87 @@
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { StyledButton } from '@/ui-component/button/StyledButton'
+import { CodeEditor } from '@/ui-component/editor/CodeEditor'
+
+const PasteJSONDialog = ({ show, onCancel, onConfirm, customization }) => {
+    const portalElement = document.getElementById('portal')
+    const [jsonInput, setJsonInput] = useState('')
+    const [error, setError] = useState('')
+
+    const handleConfirm = () => {
+        try {
+            const parsedJSON = JSON.parse(jsonInput)
+            if (!Array.isArray(parsedJSON)) throw new Error('Input must be an array of properties')
+            const formattedData = parsedJSON.map((item, index) => ({
+                id: index + 1,
+                property: item.property || '',
+                type: item.type || 'string',
+                description: item.description || '',
+                required: item.required || false
+            }))
+            onConfirm(formattedData)
+            setError('')
+        } catch (err) {
+            setError('Invalid JSON format. Please check your input.')
+        }
+    }
+
+    const exampleJSON = `[
+    {
+        "property": "name",
+        "type": "string",
+        "description": "User's name",
+        "required": true
+    },
+    {
+        "property": "age",
+        "type": "number",
+        "description": "User's age",
+        "required": false
+    }
+]`
+
+    const component = show ? (
+        <Dialog fullWidth maxWidth='md' open={show} onClose={onCancel} aria-labelledby='paste-json-dialog-title'>
+            <DialogTitle sx={{ fontSize: '1rem' }} id='paste-json-dialog-title'>
+                Paste JSON Schema
+            </DialogTitle>
+            <DialogContent>
+                <Box sx={{ mt: 2 }}>
+                    <Button variant='outlined' size='small' onClick={() => setJsonInput(exampleJSON)} sx={{ mb: 2 }}>
+                        See Example
+                    </Button>
+                    <CodeEditor
+                        value={jsonInput}
+                        theme={customization.isDarkMode ? 'dark' : 'light'}
+                        lang='json'
+                        onValueChange={(code) => {
+                            setJsonInput(code)
+                            setError('')
+                        }}
+                    />
+                    {error && <Box sx={{ color: 'error.main', mt: 1, fontSize: '0.875rem' }}>{error}</Box>}
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onCancel}>Cancel</Button>
+                <StyledButton variant='contained' onClick={handleConfirm}>
+                    Confirm
+                </StyledButton>
+            </DialogActions>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+PasteJSONDialog.propTypes = {
+    show: PropTypes.bool,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func,
+    customization: PropTypes.object
+}
+
+export default PasteJSONDialog

packages/ui/src/views/tools/ToolDialog.jsx

@@ -14,9 +14,10 @@ import DeleteIcon from '@mui/icons-material/Delete'
 import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 import { CodeEditor } from '@/ui-component/editor/CodeEditor'
 import HowToUseFunctionDialog from './HowToUseFunctionDialog'
+import PasteJSONDialog from './PasteJSONDialog'
 
 // Icons
-import { IconX, IconFileDownload, IconPlus, IconTemplate } from '@tabler/icons-react'
+import { IconX, IconFileDownload, IconPlus, IconTemplate, IconCode } from '@tabler/icons-react'
 
 // API
 import toolsApi from '@/api/tools'
@@ -83,6 +84,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
     const [exportAsTemplateDialogOpen, setExportAsTemplateDialogOpen] = useState(false)
     const [exportAsTemplateDialogProps, setExportAsTemplateDialogProps] = useState({})
 
+    const [showPasteJSONDialog, setShowPasteJSONDialog] = useState(false)
+
     const deleteItem = useCallback(
         (id) => () => {
             setTimeout(() => {
@@ -409,6 +412,11 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
         }
     }
 
+    const handlePastedJSON = (formattedData) => {
+        setToolSchema(formattedData)
+        setShowPasteJSONDialog(false)
+    }
+
     const component = show ? (
         <Dialog
             fullWidth
@@ -507,9 +515,14 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
                                 <TooltipWithParser title={'What is the input format in JSON?'} />
                             </Stack>
                             {dialogProps.type !== 'TEMPLATE' && (
-                                <Button variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
+                                <Stack direction='row' spacing={1}>
-                                    Add Item
+                                    <Button variant='outlined' onClick={() => setShowPasteJSONDialog(true)} startIcon={<IconCode />}>
-                                </Button>
+                                        Paste JSON
+                                    </Button>
+                                    <Button variant='outlined' onClick={addNewRow} startIcon={<IconPlus />}>
+                                        Add Item
+                                    </Button>
+                                </Stack>
                             )}
                         </Stack>
                         <Grid columns={columns} rows={toolSchema} disabled={dialogProps.type === 'TEMPLATE'} onRowUpdate={onRowUpdate} />
@@ -577,6 +590,15 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             )}
 
             <HowToUseFunctionDialog show={showHowToDialog} onCancel={() => setShowHowToDialog(false)} />
+
+            {showPasteJSONDialog && (
+                <PasteJSONDialog
+                    show={showPasteJSONDialog}
+                    onCancel={() => setShowPasteJSONDialog(false)}
+                    onConfirm={handlePastedJSON}
+                    customization={customization}
+                />
+            )}
         </Dialog>
     ) : null