diff --git a/packages/ui/src/views/tools/PasteJSONDialog.jsx b/packages/ui/src/views/tools/PasteJSONDialog.jsx
new file mode 100644
index 00000000..02778aa1
--- /dev/null
+++ b/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 ? (
+
+ ) : null
+
+ return createPortal(component, portalElement)
+}
+
+PasteJSONDialog.propTypes = {
+ show: PropTypes.bool,
+ onCancel: PropTypes.func,
+ onConfirm: PropTypes.func,
+ customization: PropTypes.object
+}
+
+export default PasteJSONDialog
diff --git a/packages/ui/src/views/tools/ToolDialog.jsx b/packages/ui/src/views/tools/ToolDialog.jsx
index 8be2a325..de048b63 100644
--- a/packages/ui/src/views/tools/ToolDialog.jsx
+++ b/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 ? (
{dialogProps.type !== 'TEMPLATE' && (
- }>
- Add Item
-
+
+
+ }>
+ Add Item
+
+
)}
@@ -577,6 +590,15 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
)}
setShowHowToDialog(false)} />
+
+ {showPasteJSONDialog && (
+ setShowPasteJSONDialog(false)}
+ onConfirm={handlePastedJSON}
+ customization={customization}
+ />
+ )}
) : null