Function ArrayInput

packages/agentflow/src/atoms/ArrayInput.tsx:55–235

({
    inputParam,
    data,
    disabled = false,
    onDataChange,
    itemParameters: itemParametersProp,
    AsyncInputComponent,
    ConfigInputComponent,
    onConfigChange,
    variableItems
}: ArrayInputProps)

}

export function ArrayInput({
    inputParam,
    data,
    disabled = false,
    onDataChange,
    itemParameters: itemParametersProp,
    AsyncInputComponent,
    ConfigInputComponent,
    onConfigChange,
    variableItems
}: ArrayInputProps) {
    const theme = useTheme()

    // Derive array items directly from props (single source of truth)
    // Memoized to prevent unnecessary re-renders of child hooks
    const arrayItems = useMemo(
        () => (Array.isArray(data.inputs?.[inputParam.name]) ? (data.inputs[inputParam.name] as Record<string, unknown>[]) : []),
        [data.inputs, inputParam.name]
    )

    const { keys: effectiveKeys, removeKey } = useStableKeys(arrayItems.length, 'item')

    // Use pre-computed itemParameters
    // Falls back to raw field definitions for nested arrays without show/hide conditions.
    const itemParameters = useMemo<InputParam[][]>(
        () => itemParametersProp ?? arrayItems.map(() => inputParam.array || []),
        [itemParametersProp, arrayItems, inputParam.array]
    )

    // Handle changes to individual fields within array items
    const handleItemInputChange = useCallback(
        (itemIndex: number, changedParam: InputParam, newValue: unknown) => {
            const updatedArrayItems = [...arrayItems]
            const updatedItem = { ...updatedArrayItems[itemIndex] }

            // Update the specific field
            updatedItem[changedParam.name] = newValue
            updatedArrayItems[itemIndex] = updatedItem

            // Notify parent of change (parent will update props, causing re-render)
            onDataChange?.({ inputParam, newValue: updatedArrayItems })
        },
        [arrayItems, inputParam, onDataChange]
    )

    // Add new array item
    const handleAddItem = useCallback(() => {
        // Initialize new item with type-appropriate default values
        const newItem: Record<string, unknown> = {}

        if (inputParam.array) {
            for (const field of inputParam.array) {
                newItem[field.name] = getDefaultValueForType(field)
            }
        }

        const updatedArrayItems = [...arrayItems, newItem]