Function APICodeDialog

packages/ui/src/views/chatflows/APICodeDialog.jsx:87–1097

({ show, dialogProps, onCancel })

}

const APICodeDialog = ({ show, dialogProps, onCancel }) => {
    const portalElement = document.getElementById('portal')
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const theme = useTheme()
    const chatflow = useSelector((state) => state.canvas.chatflow)
    const apiConfig = chatflow?.apiConfig ? JSON.parse(chatflow.apiConfig) : {}
    const overrideConfigStatus = apiConfig?.overrideConfig?.status !== undefined ? apiConfig.overrideConfig.status : false

    const startNodeInputs = useMemo(() => {
        if (!chatflow?.flowData) return null
        try {
            const parsed = JSON.parse(chatflow.flowData)
            const startNode = (parsed.nodes || []).find((n) => n?.data?.name === 'startAgentflow')
            return startNode?.data?.inputs ?? null
        } catch {
            return null
        }
    }, [chatflow?.flowData])

    const startInputType = startNodeInputs?.startInputType
    const isWebhookFlow = startInputType === 'webhookTrigger'
    const isScheduleFlow = startInputType === 'scheduleInput'
    const webhookMethod = (startNodeInputs?.webhookMethod || 'POST').toUpperCase()
    const webhookContentType = startNodeInputs?.webhookContentType || 'application/json'
    const webhookEnableAuth = startNodeInputs?.webhookEnableAuth === true
    const webhookSignatureHeader = startNodeInputs?.webhookSignatureHeader || 'x-webhook-signature'
    const webhookResponseMode = startNodeInputs?.webhookResponseMode || 'sync'

    const codes = useMemo(() => {
        if (isWebhookFlow || isScheduleFlow) return ['Python', 'JavaScript', 'cURL']
        return ['Embed', 'Python', 'JavaScript', 'cURL', 'Share Chatbot']
    }, [isWebhookFlow, isScheduleFlow])
    const [value, setValue] = useState(0)
    const [apiKeys, setAPIKeys] = useState([])
    const [chatflowApiKeyId, setChatflowApiKeyId] = useState('')
    const [selectedApiKey, setSelectedApiKey] = useState({})
    const [checkboxVal, setCheckbox] = useState(false)
    const [nodeConfig, setNodeConfig] = useState({})
    const [nodeConfigExpanded, setNodeConfigExpanded] = useState({})
    const [nodeOverrides, setNodeOverrides] = useState(apiConfig?.overrideConfig?.nodes ?? null)
    const [variableOverrides, setVariableOverrides] = useState(apiConfig?.overrideConfig?.variables ?? [])

    const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)
    const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
    const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)
    const getConfigApi = useApi(configApi.getConfig)
    const getAllVariablesApi = useApi(variablesApi.getAllVariables)
    const isGlobal = useSelector((state) => state.auth.isGlobal)
    const { hasPermission } = useAuth()

    // Memoize keyOptions to prevent recreation on hover
    const keyOptions = useMemo(() => {
        if (!getAllAPIKeysApi.data) return []

        const options = [
            {
                label: 'No Authorization',