Function JsonInput

packages/agentflow/src/atoms/JsonInput.tsx:37–167

({ value, onChange, disabled = false, variableItems }: JsonInputProps)

 * inject a variable into that specific key (matching the original Flowise behaviour).
 */
export function JsonInput({ value, onChange, disabled = false, variableItems }: JsonInputProps) {
    const theme = useTheme()
    const isDarkMode = theme.palette.mode === 'dark'

    const [myValue, setMyValue] = useState<object>(() => safeParse(value))
    const myValueRef = useRef(myValue)
    myValueRef.current = myValue

    // Sync internal state when the value prop changes externally
    useEffect(() => {
        const parsed = safeParse(value)
        if (JSON.stringify(parsed) !== JSON.stringify(myValueRef.current)) {
            setMyValue(parsed)
        }
    }, [value])

    // ── Per-key variable popover state ───────────────────────────────────────
    const mouseUpKeyRef = useRef('')
    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
    // Counter that increments on variable injection to force ReactJson remount.
    // ReactJson doesn't re-render when `src` changes via setState — it manages
    // its own internal tree. Bumping the key forces a fresh mount with the new data.
    const [remountKey, setRemountKey] = useState(0)
    const openPopOver = Boolean(anchorEl)

    const handleClosePopOver = useCallback(() => {
        setAnchorEl(null)
    }, [])

    const setNewVal = useCallback(
        (val: string) => {
            setMyValue((prev) => {
                const updated = { ...prev, [mouseUpKeyRef.current]: val }
                onChange(JSON.stringify(updated))
                return updated
            })
            setRemountKey((k) => k + 1)
        },
        [onChange]
    )

    // ── Clipboard ────────────────────────────────────────────────────────────
    const onClipboardCopy = useCallback((e: { src: unknown }) => {
        const src = e.src
        if (Array.isArray(src) || typeof src === 'object') {
            navigator.clipboard.writeText(JSON.stringify(src, null, '  '))
        } else {
            navigator.clipboard.writeText(String(src))
        }
    }, [])

    const hasVariables = variableItems && variableItems.length > 0
    const jsonTheme = isDarkMode ? 'ocean' : 'rjv-default'

    return (
        <>
            <FormControl sx={{ mt: 1, width: '100%' }} size='small'>
                {disabled && (