@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/node-forms/ApiForm.tsx

@@ -1,416 +1,416 @@
-import React, { useState, useCallback, useEffect, memo } from 'react';
-import {
-    Box,
-    Button,
-    FormControl,
-    InputLabel,
-    TextField,
-    Typography,
-    Stack,
-    IconButton,
-    Divider,
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
-} from '@mui/material';
-import { Add as AddIcon, Delete as DeleteIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { useTranslation } from 'react-i18next';
-import { useFormValidation } from '../../hooks/useFormValidation';
-import ValidationError from '../../atoms/ValidationError';
-import ExpressionInput from '../../atoms/ExpressionInput';
-import { ApiNodeForm } from '../../types/workflow-node-data-types';
-
-interface ApiFormProps {
-    formData: ApiNodeForm;
-    handleInputChange: (key: string, value: unknown) => void;
-    handleMultipleInputChanges: (changes: { [key: string]: unknown }) => void;
-}
-
-const ApiForm: React.FC<ApiFormProps> = ({
-    formData,
-    handleInputChange,
-    handleMultipleInputChanges,
-}) => {
-    const { t } = useTranslation();
-    const [expandedSections, setExpandedSections] = useState({
-        headers: true,
-        queryParams: true,
-        body: false,
-    });
-
-    const {
-        validationState,
-        setFieldError,
-        setFieldTouched,
-        shouldShowFieldError,
-        getFieldError,
-        clearFieldError,
-    } = useFormValidation();
-
-    // Handle section expansion - memoized to prevent recreation
-    const handleSectionToggle = useCallback((section: keyof typeof expandedSections) => {
-        setExpandedSections(prev => ({
-            ...prev,
-            [section]: !prev[section]
-        }));
-    }, []);
-
-    // Handle header management
-    const addHeader = useCallback(() => {
-        const newHeaders = [...(formData.headers || []), { key: '', value: '' }];
-        handleInputChange('headers', newHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
-        const updatedHeaders = [...(formData.headers || [])];
-        updatedHeaders[index] = { ...updatedHeaders[index], [field]: value };
-        handleInputChange('headers', updatedHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    const removeHeader = useCallback((index: number) => {
-        const updatedHeaders = (formData.headers || []).filter((_, i) => i !== index);
-        handleInputChange('headers', updatedHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    // Handle query parameter management
-    const addQueryParam = useCallback(() => {
-        const newQueryParams = [...(formData.queryParams || []), { key: '', value: '' }];
-        handleInputChange('queryParams', newQueryParams);
-    }, [formData.queryParams, handleInputChange]);
-
-    const updateQueryParam = useCallback((index: number, field: 'key' | 'value', value: string) => {
-        const updatedQueryParams = [...(formData.queryParams || [])];
-        updatedQueryParams[index] = { ...updatedQueryParams[index], [field]: value };
-        handleInputChange('queryParams', updatedQueryParams);
-    }, [formData.queryParams, handleInputChange]);
-
-    const removeQueryParam = useCallback((index: number) => {
-        const updatedQueryParams = (formData.queryParams || []).filter((_, i) => i !== index);
-        handleInputChange('queryParams', updatedQueryParams);
-    }, [formData.queryParams, handleInputChange]);
-
-    // Memoized handlers for accordion toggles
-    const handleHeadersToggle = useCallback(() => {
-        handleSectionToggle('headers');
-    }, [handleSectionToggle]);
-
-    const handleQueryParamsToggle = useCallback(() => {
-        handleSectionToggle('queryParams');
-    }, [handleSectionToggle]);
-
-    const handleBodyToggle = useCallback(() => {
-        handleSectionToggle('body');
-    }, [handleSectionToggle]);
-
-    const apiFormStyles = {
-        accordion: {
-            backgroundColor: 'transparent',
-            color: '#FFFFFF',
-            '&:before': {
-                backgroundColor: 'transparent',
-            },
-            '& .MuiAccordionSummary-root': {
-                color: '#FFFFFF',
-            },
-        },
-        textField: {
-            '& .MuiOutlinedInput-root': {
-                color: '#FFFFFF',
-                '& fieldset': {
-                    borderColor: '#8E8E93',
-                },
-                '&:hover fieldset': {
-                    borderColor: '#FFFFFF',
-                },
-                '&.Mui-focused fieldset': {
-                    borderColor: '#3688A2',
-                },
-            },
-            '& .MuiInputLabel-root': {
-                color: '#8E8E93',
-                '&.Mui-focused': {
-                    color: '#3688A2',
-                },
-            },
-        },
-    };
-
-    return (
-        <Stack spacing={2}>
-            {/* HTTP Method and URL */}
-            <Stack direction="row" spacing={2}>
-                <Box sx={{ minWidth: 120 }}>
-                    <select
-                        value={formData.method || 'GET'}
-                        onChange={(e) => handleInputChange('method', e.target.value)}
-                        style={{
-                            width: '100%',
-                            height: '100%',
-                            padding: '8px 12px',
-                            backgroundColor: 'transparent',
-                            color: '#FFFFFF',
-                            border: '1px solid #8E8E93',
-                            borderRadius: '4px',
-                            fontSize: '14px',
-                            outline: 'none',
-                            cursor: 'pointer'
-                        }}
-                        onFocus={(e) => {
-                            e.target.style.borderColor = '#3688A2';
-                        }}
-                        onBlur={(e) => {
-                            e.target.style.borderColor = '#8E8E93';
-                        }}
-                    >
-                        <option value="GET" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>GET</option>
-                        <option value="POST" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>POST</option>
-                        <option value="PUT" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>PUT</option>
-                        <option value="DELETE" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>DELETE</option>
-                        <option value="PATCH" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>PATCH</option>
-                    </select>
-                </Box>
-
-                <TextField
-                    fullWidth
-                    label="URL"
-                    value={formData.url || ''}
-                    onChange={(e) => handleInputChange('url', e.target.value)}
-                    placeholder="https://api.example.com/endpoint"
-                    sx={apiFormStyles.textField}
-                />
-            </Stack>
-
-            {/* Headers Section */}
-            <Accordion
-                expanded={expandedSections.headers}
-                onChange={handleHeadersToggle}
-                sx={apiFormStyles.accordion}
-            >
-                <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                    <Typography sx={{ color: '#FFFFFF' }}>Headers</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <Stack spacing={1}>
-                        {(formData.headers || []).map((header, index) => (
-                            <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                <TextField
-                                    label="Key"
-                                    value={header.key}
-                                    onChange={(e) => updateHeader(index, 'key', e.target.value)}
-                                    size="small"
-                                    sx={apiFormStyles.textField}
-                                />
-                                <TextField
-                                    label="Value"
-                                    value={header.value}
-                                    onChange={(e) => updateHeader(index, 'value', e.target.value)}
-                                    size="small"
-                                    sx={apiFormStyles.textField}
-                                />
-                                <IconButton
-                                    onClick={() => removeHeader(index)}
-                                    sx={{ color: '#FF6B6B' }}
-                                >
-                                    <DeleteIcon />
-                                </IconButton>
-                            </Stack>
-                        ))}
-                        <Button
-                            startIcon={<AddIcon />}
-                            onClick={addHeader}
-                            sx={{
-                                color: '#3688A2',
-                                borderColor: '#3688A2',
-                                '&:hover': {
-                                    borderColor: '#4A90E2',
-                                    backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                },
-                            }}
-                            variant="outlined"
-                        >
-                            Add Header
-                        </Button>
-                    </Stack>
-                </AccordionDetails>
-            </Accordion>
-
-            {/* Query Parameters Section */}
-            <Accordion
-                expanded={expandedSections.queryParams}
-                onChange={handleQueryParamsToggle}
-                sx={apiFormStyles.accordion}
-            >
-                <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                    <Typography sx={{ color: '#FFFFFF' }}>Query Parameters</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                    <Stack spacing={1}>
-                        {(formData.queryParams || []).map((param, index) => (
-                            <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                <TextField
-                                    label="Key"
-                                    value={param.key}
-                                    onChange={(e) => updateQueryParam(index, 'key', e.target.value)}
-                                    size="small"
-                                    sx={apiFormStyles.textField}
-                                />
-                                <TextField
-                                    label="Value"
-                                    value={param.value}
-                                    onChange={(e) => updateQueryParam(index, 'value', e.target.value)}
-                                    size="small"
-                                    sx={apiFormStyles.textField}
-                                />
-                                <IconButton
-                                    onClick={() => removeQueryParam(index)}
-                                    sx={{ color: '#FF6B6B' }}
-                                >
-                                    <DeleteIcon />
-                                </IconButton>
-                            </Stack>
-                        ))}
-                        <Button
-                            startIcon={<AddIcon />}
-                            onClick={addQueryParam}
-                            sx={{
-                                color: '#3688A2',
-                                borderColor: '#3688A2',
-                                '&:hover': {
-                                    borderColor: '#4A90E2',
-                                    backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                },
-                            }}
-                            variant="outlined"
-                        >
-                            Add Query Parameter
-                        </Button>
-                    </Stack>
-                </AccordionDetails>
-            </Accordion>
-
-            {/* Request Body Section (for POST, PUT, PATCH) */}
-            {['POST', 'PUT', 'PATCH'].includes(formData.method || 'GET') && (
-                <Accordion
-                    expanded={expandedSections.body}
-                    onChange={handleBodyToggle}
-                    sx={apiFormStyles.accordion}
-                >
-                    <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                        <Typography sx={{ color: '#FFFFFF' }}>Request Body</Typography>
-                    </AccordionSummary>
-                    <AccordionDetails>
-                        <Stack spacing={2}>
-                            <Box>
-                                <select
-                                    value={formData.bodyType || 'json'}
-                                    onChange={(e) => handleInputChange('bodyType', e.target.value)}
-                                    style={{
-                                        width: '100%',
-                                        padding: '8px 12px',
-                                        backgroundColor: 'transparent',
-                                        color: '#FFFFFF',
-                                        border: '1px solid #8E8E93',
-                                        borderRadius: '4px',
-                                        fontSize: '14px',
-                                        outline: 'none',
-                                        cursor: 'pointer'
-                                    }}
-                                    onFocus={(e) => {
-                                        e.target.style.borderColor = '#3688A2';
-                                    }}
-                                    onBlur={(e) => {
-                                        e.target.style.borderColor = '#8E8E93';
-                                    }}
-                                >
-                                    <option value="json" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>JSON</option>
-                                    <option value="form-data" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Form Data</option>
-                                    <option value="x-www-form-urlencoded" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>URL Encoded</option>
-                                    <option value="raw" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Raw</option>
-                                </select>
-                            </Box>
-
-                            <TextField
-                                multiline
-                                rows={4}
-                                label="Body Content"
-                                value={formData.body || ''}
-                                onChange={(e) => handleInputChange('body', e.target.value)}
-                                placeholder={formData.bodyType === 'json' ? '{"key": "value"}' : 'Enter body content'}
-                                sx={apiFormStyles.textField}
-                            />
-                        </Stack>
-                    </AccordionDetails>
-                </Accordion>
-            )}
-
-            {/* Response Configuration */}
-            <Divider sx={{ borderColor: '#3a3a3a' }} />
-            <Typography variant="h6" sx={{ color: '#FFFFFF' }}>Response Configuration</Typography>
-
-            <Stack direction="row" spacing={2}>
-                <TextField
-                    label="Response Variable Name"
-                    value={formData.responseVariable || ''}
-                    onChange={(e) => handleInputChange('responseVariable', e.target.value)}
-                    placeholder="apiResponse"
-                    sx={apiFormStyles.textField}
-                />
-
-                <Box sx={{ minWidth: 120 }}>
-                    <select
-                        value={formData.responseDataType || 'Object'}
-                        onChange={(e) => handleInputChange('responseDataType', e.target.value)}
-                        style={{
-                            width: '100%',
-                            height: '100%',
-                            padding: '8px 12px',
-                            backgroundColor: 'transparent',
-                            color: '#FFFFFF',
-                            border: '1px solid #8E8E93',
-                            borderRadius: '4px',
-                            fontSize: '14px',
-                            outline: 'none',
-                            cursor: 'pointer'
-                        }}
-                        onFocus={(e) => {
-                            e.target.style.borderColor = '#3688A2';
-                        }}
-                        onBlur={(e) => {
-                            e.target.style.borderColor = '#8E8E93';
-                        }}
-                    >
-                        <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
-                        <option value="Object" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Object</option>
-                        <option value="Array" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Array</option>
-                    </select>
-                </Box>
-            </Stack>
-
-        </Stack>
-    );
-};
-
-// Memoize the component to prevent unnecessary re-renders
-export default memo(ApiForm, (prevProps, nextProps) => {
-    // Only re-render if formData actually changes
-    const prevFormData = prevProps.formData;
-    const nextFormData = nextProps.formData;
-
-    // Check if formData reference is the same (most efficient)
-    if (prevFormData === nextFormData) {
-        return true; // Don't re-render
-    }
-
-    // Deep comparison for formData changes
-    return (
-        prevFormData.type === nextFormData.type &&
-        prevFormData.method === nextFormData.method &&
-        prevFormData.url === nextFormData.url &&
-        JSON.stringify(prevFormData.headers) === JSON.stringify(nextFormData.headers) &&
-        JSON.stringify(prevFormData.queryParams) === JSON.stringify(nextFormData.queryParams) &&
-        prevFormData.body === nextFormData.body &&
-        prevFormData.bodyType === nextFormData.bodyType &&
-        prevFormData.responseVariable === nextFormData.responseVariable &&
-        prevFormData.responseDataType === nextFormData.responseDataType
-    );
-});
+import React, { useState, useCallback, useEffect, memo } from 'react';
+import {
+    Box,
+    Button,
+    FormControl,
+    InputLabel,
+    TextField,
+    Typography,
+    Stack,
+    IconButton,
+    Divider,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails,
+} from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+import ExpressionInput from '../../atoms/ExpressionInput';
+import { ApiNodeForm } from '../../types/workflow-node-data-types';
+
+interface ApiFormProps {
+    formData: ApiNodeForm;
+    handleInputChange: (key: string, value: unknown) => void;
+    handleMultipleInputChanges: (changes: { [key: string]: unknown }) => void;
+}
+
+const ApiForm: React.FC<ApiFormProps> = ({
+    formData,
+    handleInputChange,
+    handleMultipleInputChanges,
+}) => {
+    const { t } = useTranslation();
+    const [expandedSections, setExpandedSections] = useState({
+        headers: true,
+        queryParams: true,
+        body: false,
+    });
+
+    const {
+        validationState,
+        setFieldError,
+        setFieldTouched,
+        shouldShowFieldError,
+        getFieldError,
+        clearFieldError,
+    } = useFormValidation();
+
+    // Handle section expansion - memoized to prevent recreation
+    const handleSectionToggle = useCallback((section: keyof typeof expandedSections) => {
+        setExpandedSections(prev => ({
+            ...prev,
+            [section]: !prev[section]
+        }));
+    }, []);
+
+    // Handle header management
+    const addHeader = useCallback(() => {
+        const newHeaders = [...(formData.headers || []), { key: '', value: '' }];
+        handleInputChange('headers', newHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
+        const updatedHeaders = [...(formData.headers || [])];
+        updatedHeaders[index] = { ...updatedHeaders[index], [field]: value };
+        handleInputChange('headers', updatedHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    const removeHeader = useCallback((index: number) => {
+        const updatedHeaders = (formData.headers || []).filter((_, i) => i !== index);
+        handleInputChange('headers', updatedHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    // Handle query parameter management
+    const addQueryParam = useCallback(() => {
+        const newQueryParams = [...(formData.queryParams || []), { key: '', value: '' }];
+        handleInputChange('queryParams', newQueryParams);
+    }, [formData.queryParams, handleInputChange]);
+
+    const updateQueryParam = useCallback((index: number, field: 'key' | 'value', value: string) => {
+        const updatedQueryParams = [...(formData.queryParams || [])];
+        updatedQueryParams[index] = { ...updatedQueryParams[index], [field]: value };
+        handleInputChange('queryParams', updatedQueryParams);
+    }, [formData.queryParams, handleInputChange]);
+
+    const removeQueryParam = useCallback((index: number) => {
+        const updatedQueryParams = (formData.queryParams || []).filter((_, i) => i !== index);
+        handleInputChange('queryParams', updatedQueryParams);
+    }, [formData.queryParams, handleInputChange]);
+
+    // Memoized handlers for accordion toggles
+    const handleHeadersToggle = useCallback(() => {
+        handleSectionToggle('headers');
+    }, [handleSectionToggle]);
+
+    const handleQueryParamsToggle = useCallback(() => {
+        handleSectionToggle('queryParams');
+    }, [handleSectionToggle]);
+
+    const handleBodyToggle = useCallback(() => {
+        handleSectionToggle('body');
+    }, [handleSectionToggle]);
+
+    const apiFormStyles = {
+        accordion: {
+            backgroundColor: 'transparent',
+            color: '#FFFFFF',
+            '&:before': {
+                backgroundColor: 'transparent',
+            },
+            '& .MuiAccordionSummary-root': {
+                color: '#FFFFFF',
+            },
+        },
+        textField: {
+            '& .MuiOutlinedInput-root': {
+                color: '#FFFFFF',
+                '& fieldset': {
+                    borderColor: '#8E8E93',
+                },
+                '&:hover fieldset': {
+                    borderColor: '#FFFFFF',
+                },
+                '&.Mui-focused fieldset': {
+                    borderColor: '#3688A2',
+                },
+            },
+            '& .MuiInputLabel-root': {
+                color: '#8E8E93',
+                '&.Mui-focused': {
+                    color: '#3688A2',
+                },
+            },
+        },
+    };
+
+    return (
+        <Stack spacing={2}>
+            {/* HTTP Method and URL */}
+            <Stack direction="row" spacing={2}>
+                <Box sx={{ minWidth: 120 }}>
+                    <select
+                        value={formData.method || 'GET'}
+                        onChange={(e) => handleInputChange('method', e.target.value)}
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            padding: '8px 12px',
+                            backgroundColor: 'transparent',
+                            color: '#FFFFFF',
+                            border: '1px solid #8E8E93',
+                            borderRadius: '4px',
+                            fontSize: '14px',
+                            outline: 'none',
+                            cursor: 'pointer'
+                        }}
+                        onFocus={(e) => {
+                            e.target.style.borderColor = '#3688A2';
+                        }}
+                        onBlur={(e) => {
+                            e.target.style.borderColor = '#8E8E93';
+                        }}
+                    >
+                        <option value="GET" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>GET</option>
+                        <option value="POST" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>POST</option>
+                        <option value="PUT" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>PUT</option>
+                        <option value="DELETE" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>DELETE</option>
+                        <option value="PATCH" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>PATCH</option>
+                    </select>
+                </Box>
+
+                <TextField
+                    fullWidth
+                    label="URL"
+                    value={formData.url || ''}
+                    onChange={(e) => handleInputChange('url', e.target.value)}
+                    placeholder="https://api.example.com/endpoint"
+                    sx={apiFormStyles.textField}
+                />
+            </Stack>
+
+            {/* Headers Section */}
+            <Accordion
+                expanded={expandedSections.headers}
+                onChange={handleHeadersToggle}
+                sx={apiFormStyles.accordion}
+            >
+                <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                    <Typography sx={{ color: '#FFFFFF' }}>Headers</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Stack spacing={1}>
+                        {(formData.headers || []).map((header, index) => (
+                            <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                <TextField
+                                    label="Key"
+                                    value={header.key}
+                                    onChange={(e) => updateHeader(index, 'key', e.target.value)}
+                                    size="small"
+                                    sx={apiFormStyles.textField}
+                                />
+                                <TextField
+                                    label="Value"
+                                    value={header.value}
+                                    onChange={(e) => updateHeader(index, 'value', e.target.value)}
+                                    size="small"
+                                    sx={apiFormStyles.textField}
+                                />
+                                <IconButton
+                                    onClick={() => removeHeader(index)}
+                                    sx={{ color: '#FF6B6B' }}
+                                >
+                                    <DeleteIcon />
+                                </IconButton>
+                            </Stack>
+                        ))}
+                        <Button
+                            startIcon={<AddIcon />}
+                            onClick={addHeader}
+                            sx={{
+                                color: '#3688A2',
+                                borderColor: '#3688A2',
+                                '&:hover': {
+                                    borderColor: '#4A90E2',
+                                    backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                },
+                            }}
+                            variant="outlined"
+                        >
+                            Add Header
+                        </Button>
+                    </Stack>
+                </AccordionDetails>
+            </Accordion>
+
+            {/* Query Parameters Section */}
+            <Accordion
+                expanded={expandedSections.queryParams}
+                onChange={handleQueryParamsToggle}
+                sx={apiFormStyles.accordion}
+            >
+                <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                    <Typography sx={{ color: '#FFFFFF' }}>Query Parameters</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <Stack spacing={1}>
+                        {(formData.queryParams || []).map((param, index) => (
+                            <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                <TextField
+                                    label="Key"
+                                    value={param.key}
+                                    onChange={(e) => updateQueryParam(index, 'key', e.target.value)}
+                                    size="small"
+                                    sx={apiFormStyles.textField}
+                                />
+                                <TextField
+                                    label="Value"
+                                    value={param.value}
+                                    onChange={(e) => updateQueryParam(index, 'value', e.target.value)}
+                                    size="small"
+                                    sx={apiFormStyles.textField}
+                                />
+                                <IconButton
+                                    onClick={() => removeQueryParam(index)}
+                                    sx={{ color: '#FF6B6B' }}
+                                >
+                                    <DeleteIcon />
+                                </IconButton>
+                            </Stack>
+                        ))}
+                        <Button
+                            startIcon={<AddIcon />}
+                            onClick={addQueryParam}
+                            sx={{
+                                color: '#3688A2',
+                                borderColor: '#3688A2',
+                                '&:hover': {
+                                    borderColor: '#4A90E2',
+                                    backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                },
+                            }}
+                            variant="outlined"
+                        >
+                            Add Query Parameter
+                        </Button>
+                    </Stack>
+                </AccordionDetails>
+            </Accordion>
+
+            {/* Request Body Section (for POST, PUT, PATCH) */}
+            {['POST', 'PUT', 'PATCH'].includes(formData.method || 'GET') && (
+                <Accordion
+                    expanded={expandedSections.body}
+                    onChange={handleBodyToggle}
+                    sx={apiFormStyles.accordion}
+                >
+                    <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                        <Typography sx={{ color: '#FFFFFF' }}>Request Body</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <Stack spacing={2}>
+                            <Box>
+                                <select
+                                    value={formData.bodyType || 'json'}
+                                    onChange={(e) => handleInputChange('bodyType', e.target.value)}
+                                    style={{
+                                        width: '100%',
+                                        padding: '8px 12px',
+                                        backgroundColor: 'transparent',
+                                        color: '#FFFFFF',
+                                        border: '1px solid #8E8E93',
+                                        borderRadius: '4px',
+                                        fontSize: '14px',
+                                        outline: 'none',
+                                        cursor: 'pointer'
+                                    }}
+                                    onFocus={(e) => {
+                                        e.target.style.borderColor = '#3688A2';
+                                    }}
+                                    onBlur={(e) => {
+                                        e.target.style.borderColor = '#8E8E93';
+                                    }}
+                                >
+                                    <option value="json" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>JSON</option>
+                                    <option value="form-data" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Form Data</option>
+                                    <option value="x-www-form-urlencoded" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>URL Encoded</option>
+                                    <option value="raw" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Raw</option>
+                                </select>
+                            </Box>
+
+                            <TextField
+                                multiline
+                                rows={4}
+                                label="Body Content"
+                                value={formData.body || ''}
+                                onChange={(e) => handleInputChange('body', e.target.value)}
+                                placeholder={formData.bodyType === 'json' ? '{"key": "value"}' : 'Enter body content'}
+                                sx={apiFormStyles.textField}
+                            />
+                        </Stack>
+                    </AccordionDetails>
+                </Accordion>
+            )}
+
+            {/* Response Configuration */}
+            <Divider sx={{ borderColor: '#3a3a3a' }} />
+            <Typography variant="h6" sx={{ color: '#FFFFFF' }}>Response Configuration</Typography>
+
+            <Stack direction="row" spacing={2}>
+                <TextField
+                    label="Response Variable Name"
+                    value={formData.responseVariable || ''}
+                    onChange={(e) => handleInputChange('responseVariable', e.target.value)}
+                    placeholder="apiResponse"
+                    sx={apiFormStyles.textField}
+                />
+
+                <Box sx={{ minWidth: 120 }}>
+                    <select
+                        value={formData.responseDataType || 'Object'}
+                        onChange={(e) => handleInputChange('responseDataType', e.target.value)}
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            padding: '8px 12px',
+                            backgroundColor: 'transparent',
+                            color: '#FFFFFF',
+                            border: '1px solid #8E8E93',
+                            borderRadius: '4px',
+                            fontSize: '14px',
+                            outline: 'none',
+                            cursor: 'pointer'
+                        }}
+                        onFocus={(e) => {
+                            e.target.style.borderColor = '#3688A2';
+                        }}
+                        onBlur={(e) => {
+                            e.target.style.borderColor = '#8E8E93';
+                        }}
+                    >
+                        <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
+                        <option value="Object" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Object</option>
+                        <option value="Array" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Array</option>
+                    </select>
+                </Box>
+            </Stack>
+
+        </Stack>
+    );
+};
+
+// Memoize the component to prevent unnecessary re-renders
+export default memo(ApiForm, (prevProps, nextProps) => {
+    // Only re-render if formData actually changes
+    const prevFormData = prevProps.formData;
+    const nextFormData = nextProps.formData;
+
+    // Check if formData reference is the same (most efficient)
+    if (prevFormData === nextFormData) {
+        return true; // Don't re-render
+    }
+
+    // Deep comparison for formData changes
+    return (
+        prevFormData.type === nextFormData.type &&
+        prevFormData.method === nextFormData.method &&
+        prevFormData.url === nextFormData.url &&
+        JSON.stringify(prevFormData.headers) === JSON.stringify(nextFormData.headers) &&
+        JSON.stringify(prevFormData.queryParams) === JSON.stringify(nextFormData.queryParams) &&
+        prevFormData.body === nextFormData.body &&
+        prevFormData.bodyType === nextFormData.bodyType &&
+        prevFormData.responseVariable === nextFormData.responseVariable &&
+        prevFormData.responseDataType === nextFormData.responseDataType
+    );
+});