Function ConfigInput

packages/ui/src/views/agentflowsv2/ConfigInput.jsx:22–330

({ data, inputParam, disabled = false, arrayIndex = null, parentParamForArray = null })

import { FLOWISE_CREDENTIAL_ID } from '@/store/constant'

export const ConfigInput = ({ data, inputParam, disabled = false, arrayIndex = null, parentParamForArray = null }) => {
    const theme = useTheme()
    const { reactFlowInstance } = useContext(flowContext)

    const [expanded, setExpanded] = useState(false)
    const [selectedComponentNodeData, setSelectedComponentNodeData] = useState({})

    // Track the last processed input values to prevent infinite loops using useState
    const [lastProcessedInputs, setLastProcessedInputs] = useState({
        mainValue: null,
        configValue: null,
        arrayValue: null
    })

    const handleAccordionChange = (event, isExpanded) => {
        setExpanded(isExpanded)
    }

    const onCustomDataChange = ({ inputParam, newValue }) => {
        let nodeData = cloneDeep(selectedComponentNodeData)

        const updatedInputs = { ...nodeData.inputs }
        updatedInputs[inputParam.name] = newValue

        const updatedInputParams = showHideInputParams({
            ...nodeData,
            inputs: updatedInputs
        })

        // Remove inputs with display set to false
        Object.keys(updatedInputs).forEach((key) => {
            const input = updatedInputParams.find((param) => param.name === key)
            if (input && input.display === false) {
                delete updatedInputs[key]
            }
        })

        const credential = updatedInputs.credential || updatedInputs[FLOWISE_CREDENTIAL_ID]

        nodeData = {
            ...nodeData,
            inputParams: updatedInputParams,
            inputs: updatedInputs,
            credential: credential ? credential : undefined
        }

        setSelectedComponentNodeData(nodeData)
    }

    // Memoize current input values for reliable comparison
    const currentInputValues = useMemo(
        () => ({
            mainValue: data.inputs[inputParam.name],
            configValue: data.inputs[`${inputParam.name}Config`],
            arrayValue: parentParamForArray ? data.inputs[parentParamForArray.name] : null
        }),

        // eslint-disable-next-line react-hooks/exhaustive-deps