Spaces:
Running
Running
import React, { useEffect } from 'react' | |
import { Config } from '../types/types' | |
type JsonInputProps = { | |
value: string | |
setConfig: (updater: (prev: Config) => Config) => void | |
isValidJson: boolean | |
setIsValidJson: (arg0: boolean) => void | |
} | |
const JsonInput = ({ value, setConfig, isValidJson, setIsValidJson }: JsonInputProps) => { | |
useEffect(() => { | |
const delay = setTimeout(() => { | |
if (value.length === 0) { | |
setIsValidJson(true) | |
} else { | |
try { | |
JSON.parse(value) | |
setIsValidJson(true) | |
} catch (error) { | |
setIsValidJson(false) | |
} | |
} | |
}, 100) // Adjust the delay as needed | |
return () => clearTimeout(delay) | |
}, [value, setIsValidJson]) | |
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | |
setConfig((prev) => ({ | |
...prev, | |
generation_parameters: { | |
...prev.generation_parameters, | |
json_schema: e.target.value, | |
}, | |
})) | |
} | |
return ( | |
<div> | |
<textarea | |
id='json-schema' | |
className='block px-4 py-2 text-sm w-full config-input resize-none' | |
rows={10} | |
placeholder='Json Schema' | |
onChange={handleInputChange} | |
/> | |
{!isValidJson && <p style={{ color: 'red' }}>Invalid JSON</p>} | |
</div> | |
) | |
} | |
export default JsonInput | |