react-native-inapp-inspector 2.0.7 → 2.2.0

package/dist/commonjs/components/Inspector/RequestReplayModal.js

@@ -1,792 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestReplayModal = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const CopyButton_1 = __importDefault(require("../CopyButton"));
-const JsonViewer_1 = __importDefault(require("../JsonViewer"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const constants_1 = require("../../constants");
-const helpers_1 = require("../../helpers");
-const toast_1 = require("../../helpers/toast");
-const NetworkIcons_1 = require("../NetworkIcons");
-const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
-const RequestReplayModal = ({ visible, onClose, request, }) => {
-    const [method, setMethod] = (0, react_1.useState)(request.method?.toUpperCase() || 'GET');
-    const [url, setUrl] = (0, react_1.useState)(request.url || '');
-    const [activeTab, setActiveTab] = (0, react_1.useState)('headers');
-    // Initialize headers list from request
-    const [headers, setHeaders] = (0, react_1.useState)(() => {
-        const rawHeaders = request.requestHeaders || request.headers || {};
-        const list = [];
-        Object.entries(rawHeaders).forEach(([k, v], idx) => {
-            list.push({
-                id: `h-${idx}-${Date.now()}`,
-                key: k,
-                value: typeof v === 'string' ? v : JSON.stringify(v),
-                enabled: true,
-            });
-        });
-        if (list.length === 0) {
-            list.push({
-                id: `h-init-1`,
-                key: 'Content-Type',
-                value: 'application/json',
-                enabled: true,
-            });
-        }
-        return list;
-    });
-    // Request Body
-    const [requestBody, setRequestBody] = (0, react_1.useState)(() => {
-        const raw = request.request ?? request.requestBody;
-        if (raw == null)
-            return '';
-        if (typeof raw === 'string') {
-            try {
-                return JSON.stringify(JSON.parse(raw), null, 2);
-            }
-            catch {
-                return raw;
-            }
-        }
-        try {
-            return JSON.stringify(raw, null, 2);
-        }
-        catch {
-            return String(raw);
-        }
-    });
-    const [isExecuting, setIsExecuting] = (0, react_1.useState)(false);
-    const [executionResult, setExecutionResult] = (0, react_1.useState)(null);
-    const [responseSearch, setResponseSearch] = (0, react_1.useState)('');
-    const handleAddHeader = () => {
-        setHeaders(prev => [
-            ...prev,
-            {
-                id: `h-${Date.now()}-${Math.random().toString(36).substring(2, 6)}`,
-                key: '',
-                value: '',
-                enabled: true,
-            },
-        ]);
-    };
-    const handleToggleHeader = (id) => {
-        setHeaders(prev => prev.map(h => (h.id === id ? { ...h, enabled: !h.enabled } : h)));
-    };
-    const handleUpdateHeader = (id, field, val) => {
-        setHeaders(prev => prev.map(h => (h.id === id ? { ...h, [field]: val } : h)));
-    };
-    const handleDeleteHeader = (id) => {
-        setHeaders(prev => prev.filter(h => h.id !== id));
-    };
-    const handlePrettifyBody = () => {
-        if (!requestBody.trim())
-            return;
-        try {
-            const parsed = JSON.parse(requestBody);
-            setRequestBody(JSON.stringify(parsed, null, 2));
-            (0, toast_1.showToast)('JSON formatted');
-        }
-        catch (e) {
-            react_native_1.Alert.alert('JSON Parse Error', e.message || 'Invalid JSON syntax');
-        }
-    };
-    const handleExecute = async () => {
-        if (!url.trim()) {
-            react_native_1.Alert.alert('Missing URL', 'Please enter a valid request URL.');
-            return;
-        }
-        setIsExecuting(true);
-        const startTime = Date.now();
-        const assembledHeaders = {};
-        headers.forEach(h => {
-            if (h.enabled && h.key.trim()) {
-                assembledHeaders[h.key.trim()] = h.value;
-            }
-        });
-        try {
-            const options = {
-                method,
-                headers: assembledHeaders,
-            };
-            if (method !== 'GET' &&
-                requestBody.trim().length > 0) {
-                options.body = requestBody;
-            }
-            const res = await fetch(url.trim(), options);
-            const duration = Date.now() - startTime;
-            const resHeaders = {};
-            res.headers.forEach((val, key) => {
-                resHeaders[key] = val;
-            });
-            const rawText = await res.text();
-            const sizeBytes = new Blob([rawText]).size || rawText.length;
-            setExecutionResult({
-                status: res.status,
-                statusText: res.statusText || (res.status === 200 ? 'OK' : ''),
-                duration,
-                headers: resHeaders,
-                body: rawText,
-                sizeBytes,
-                isError: res.status >= 400 || res.status === 0,
-            });
-            setActiveTab('response');
-            (0, toast_1.showToast)(`Finished: ${res.status} in ${duration}ms`);
-        }
-        catch (err) {
-            const duration = Date.now() - startTime;
-            setExecutionResult({
-                status: 0,
-                statusText: err.message || 'Network Request Failed',
-                duration,
-                headers: {},
-                body: JSON.stringify({
-                    error: true,
-                    name: err.name || 'FetchError',
-                    message: err.message || 'Network Request Failed',
-                    timestamp: new Date().toISOString(),
-                }, null, 2),
-                sizeBytes: 0,
-                isError: true,
-            });
-            setActiveTab('response');
-            (0, toast_1.showToast)('Network error during replay');
-        }
-        finally {
-            setIsExecuting(false);
-        }
-    };
-    if (!visible)
-        return null;
-    return (<react_native_1.View style={styles.backdrop}>
-      <react_native_1.View style={styles.modalCard}>
-          {/* ─── 1. MODAL HEADER ────────────────────────────────────────── */}
-          <react_native_1.View style={styles.headerRow}>
-            <react_native_1.View style={styles.headerTitleBox}>
-              <react_native_1.View style={styles.headerTag}>
-                <react_native_1.Text style={styles.headerTagText}>ISOLATED API REPLAY</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.Text style={styles.headerTitle} numberOfLines={1}>
-                Edit & Resend Request
-              </react_native_1.Text>
-            </react_native_1.View>
-
-            <TouchableScale_1.default onPress={onClose} style={styles.closeBtn}>
-              <NetworkIcons_1.CloseWhite size={14} color={AppColors_1.AppColors.grayText}/>
-            </TouchableScale_1.default>
-          </react_native_1.View>
-
-          {/* ─── 2. METHOD & URL BAR ────────────────────────────────────── */}
-          <react_native_1.View style={styles.urlSection}>
-            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.methodList}>
-              {HTTP_METHODS.map(m => {
-            const isSelected = method === m;
-            const mColor = constants_1.METHOD_COLORS[m] || AppColors_1.AppColors.purple;
-            return (<TouchableScale_1.default key={m} onPress={() => setMethod(m)} style={[
-                    styles.methodPill,
-                    isSelected && {
-                        backgroundColor: mColor,
-                        borderColor: mColor,
-                    },
-                ]}>
-                    <react_native_1.Text style={[
-                    styles.methodPillText,
-                    isSelected && { color: AppColors_1.AppColors.white },
-                ]}>
-                      {m}
-                    </react_native_1.Text>
-                  </TouchableScale_1.default>);
-        })}
-            </react_native_1.ScrollView>
-
-            <react_native_1.View style={styles.urlInputRow}>
-              <react_native_1.TextInput style={styles.urlInput} value={url} onChangeText={setUrl} placeholder="https://api.example.com/endpoint..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false} multiline={false}/>
-              {url.length > 0 && (<TouchableScale_1.default onPress={() => setUrl('')} style={styles.urlClearBtn}>
-                  <NetworkIcons_1.ClearIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
-                </TouchableScale_1.default>)}
-            </react_native_1.View>
-          </react_native_1.View>
-
-          {/* ─── 3. TAB CONTROLS ────────────────────────────────────────── */}
-          <react_native_1.View style={styles.tabBar}>
-            <TouchableScale_1.default onPress={() => setActiveTab('headers')} style={[
-            styles.tabBtn,
-            activeTab === 'headers' && styles.tabBtnActive,
-        ]}>
-              <NetworkIcons_1.HeadersIcon size={12} color={activeTab === 'headers'
-            ? AppColors_1.AppColors.purple
-            : AppColors_1.AppColors.grayTextWeak}/>
-              <react_native_1.Text style={[
-            styles.tabBtnText,
-            activeTab === 'headers' && styles.tabBtnTextActive,
-        ]}>
-                Headers ({headers.filter(h => h.enabled && h.key.trim()).length}
-                )
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-
-            {method !== 'GET' && (<TouchableScale_1.default onPress={() => setActiveTab('body')} style={[
-                styles.tabBtn,
-                activeTab === 'body' && styles.tabBtnActive,
-            ]}>
-                <NetworkIcons_1.RequestIcon size={12} color={activeTab === 'body'
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayTextWeak}/>
-                <react_native_1.Text style={[
-                styles.tabBtnText,
-                activeTab === 'body' && styles.tabBtnTextActive,
-            ]}>
-                  Body {requestBody.trim() ? '●' : ''}
-                </react_native_1.Text>
-              </TouchableScale_1.default>)}
-
-            <TouchableScale_1.default onPress={() => setActiveTab('response')} style={[
-            styles.tabBtn,
-            activeTab === 'response' && styles.tabBtnActive,
-        ]}>
-              <NetworkIcons_1.ResponseIcon size={12} color={activeTab === 'response'
-            ? AppColors_1.AppColors.purple
-            : AppColors_1.AppColors.grayTextWeak}/>
-              <react_native_1.Text style={[
-            styles.tabBtnText,
-            activeTab === 'response' && styles.tabBtnTextActive,
-        ]}>
-                Response{' '}
-                {executionResult
-            ? `(${executionResult.status})`
-            : isExecuting
-                ? '...'
-                : ''}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>
-
-          {/* ─── 4. TAB BODY CONTENT ────────────────────────────────────── */}
-          <react_native_1.ScrollView style={styles.contentScroll} contentContainerStyle={styles.contentInner} keyboardShouldPersistTaps="handled">
-            {/* ── HEADERS TAB ── */}
-            {activeTab === 'headers' && (<react_native_1.View style={styles.headersContainer}>
-                <react_native_1.View style={styles.headersHeaderRow}>
-                  <react_native_1.Text style={styles.sectionHeading}>HTTP HEADERS</react_native_1.Text>
-                  <TouchableScale_1.default onPress={handleAddHeader} style={styles.addHeaderBtn}>
-                    <react_native_1.Text style={styles.addHeaderBtnText}>+ Add Header</react_native_1.Text>
-                  </TouchableScale_1.default>
-                </react_native_1.View>
-
-                {headers.map(h => (<react_native_1.View key={h.id} style={styles.headerRowItem}>
-                    <TouchableScale_1.default onPress={() => handleToggleHeader(h.id)} style={[
-                    styles.headerCheck,
-                    h.enabled && styles.headerCheckActive,
-                ]}>
-                      <react_native_1.Text style={styles.headerCheckText}>
-                        {h.enabled ? '✓' : ''}
-                      </react_native_1.Text>
-                    </TouchableScale_1.default>
-
-                    <react_native_1.TextInput style={[styles.headerKeyInput, !h.enabled && { opacity: 0.5 }]} value={h.key} onChangeText={val => handleUpdateHeader(h.id, 'key', val)} placeholder="Header Key" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-                    <react_native_1.TextInput style={[
-                    styles.headerValInput,
-                    !h.enabled && { opacity: 0.5 },
-                ]} value={h.value} onChangeText={val => handleUpdateHeader(h.id, 'value', val)} placeholder="Value" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-                    <TouchableScale_1.default onPress={() => handleDeleteHeader(h.id)} style={styles.deleteHeaderBtn}>
-                      <NetworkIcons_1.ClearIcon size={12} color={AppColors_1.AppColors.errorColor}/>
-                    </TouchableScale_1.default>
-                  </react_native_1.View>))}
-              </react_native_1.View>)}
-
-            {/* ── BODY TAB ── */}
-            {activeTab === 'body' && (<react_native_1.View style={styles.bodyContainer}>
-                <react_native_1.View style={styles.bodyActionRow}>
-                  <react_native_1.Text style={styles.sectionHeading}>REQUEST JSON / RAW PAYLOAD</react_native_1.Text>
-                  <TouchableScale_1.default onPress={handlePrettifyBody} style={styles.prettifyBtn}>
-                    <react_native_1.Text style={styles.prettifyBtnText}>✨ Prettify JSON</react_native_1.Text>
-                  </TouchableScale_1.default>
-                </react_native_1.View>
-
-                <react_native_1.TextInput style={styles.bodyTextInput} value={requestBody} onChangeText={setRequestBody} placeholder={`{\n  "key": "value"\n}`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} multiline autoCapitalize="none" autoCorrect={false} textAlignVertical="top"/>
-              </react_native_1.View>)}
-
-            {/* ── RESPONSE TAB ── */}
-            {activeTab === 'response' && (<react_native_1.View style={styles.responseContainer}>
-                {isExecuting ? (<react_native_1.View style={styles.loadingBox}>
-                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                    <react_native_1.Text style={styles.loadingText}>
-                      Sending request to {url}...
-                    </react_native_1.Text>
-                  </react_native_1.View>) : executionResult ? (<react_native_1.View style={{ gap: 12 }}>
-                    {/* Status Pill Card */}
-                    <react_native_1.View style={styles.resStatusBar}>
-                      <react_native_1.View style={styles.resStatusLeft}>
-                        <react_native_1.View style={[
-                    styles.resStatusPill,
-                    {
-                        backgroundColor: `${(0, helpers_1.getStatusColor)(executionResult.status)}16`,
-                        borderColor: `${(0, helpers_1.getStatusColor)(executionResult.status)}40`,
-                    },
-                ]}>
-                          <react_native_1.View style={[
-                    styles.statusDot,
-                    {
-                        backgroundColor: (0, helpers_1.getStatusColor)(executionResult.status),
-                    },
-                ]}/>
-                          <react_native_1.Text style={[
-                    styles.resStatusText,
-                    {
-                        color: (0, helpers_1.getStatusColor)(executionResult.status),
-                    },
-                ]}>
-                            {executionResult.status}{' '}
-                            {executionResult.statusText}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-
-                        <react_native_1.View style={styles.resMetaPill}>
-                          <react_native_1.Text style={styles.resMetaPillText}>
-                            ⏱ {executionResult.duration}ms
-                          </react_native_1.Text>
-                        </react_native_1.View>
-
-                        <react_native_1.View style={styles.resMetaPill}>
-                          <react_native_1.Text style={styles.resMetaPillText}>
-                            📦 {(0, helpers_1.getSize)(executionResult.body)}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                      </react_native_1.View>
-
-                      <CopyButton_1.default value={executionResult.body} label="Copy Body" iconType="copy"/>
-                    </react_native_1.View>
-
-                    {/* Response Body Output */}
-                    <react_native_1.View style={styles.responseBox}>
-                      <JsonViewer_1.default data={executionResult.body} search={responseSearch}/>
-                    </react_native_1.View>
-                  </react_native_1.View>) : (<react_native_1.View style={styles.emptyResponseBox}>
-                    <NetworkIcons_1.TerminalIcon size={32} color={AppColors_1.AppColors.grayTextWeak}/>
-                    <react_native_1.Text style={styles.emptyResponseTitle}>
-                      No execution yet
-                    </react_native_1.Text>
-                    <react_native_1.Text style={styles.emptyResponseSub}>
-                      Tap "Send Request" below to trigger this API and view the
-                      live response.
-                    </react_native_1.Text>
-                  </react_native_1.View>)}
-              </react_native_1.View>)}
-          </react_native_1.ScrollView>
-
-          {/* ─── 5. BOTTOM EXECUTE BAR ──────────────────────────────────── */}
-          <react_native_1.View style={styles.bottomBar}>
-            <TouchableScale_1.default onPress={handleExecute} disabled={isExecuting} style={[
-            styles.sendBtn,
-            isExecuting && { backgroundColor: AppColors_1.AppColors.grayBorderSecondary },
-        ]}>
-              {isExecuting ? (<react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.white}/>) : (<>
-                  <react_native_1.Text style={styles.sendBtnIcon}>⚡</react_native_1.Text>
-                  <react_native_1.Text style={styles.sendBtnText}>Send Request</react_native_1.Text>
-                </>)}
-            </TouchableScale_1.default>
-          </react_native_1.View>
-        </react_native_1.View>
-      </react_native_1.View>);
-};
-exports.RequestReplayModal = RequestReplayModal;
-const styles = react_native_1.StyleSheet.create({
-    backdrop: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.65)',
-        justifyContent: 'flex-end',
-        zIndex: 999999,
-        elevation: 999999,
-    },
-    modalCard: {
-        height: '90%',
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        overflow: 'hidden',
-    },
-    headerRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingTop: 14,
-        paddingBottom: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    headerTitleBox: {
-        flex: 1,
-    },
-    headerTag: {
-        backgroundColor: `${AppColors_1.AppColors.purple}14`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        alignSelf: 'flex-start',
-        marginBottom: 4,
-    },
-    headerTagText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.purple,
-        letterSpacing: 0.5,
-    },
-    headerTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 16,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    closeBtn: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    urlSection: {
-        padding: 12,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-        gap: 8,
-    },
-    methodList: {
-        flexDirection: 'row',
-        gap: 6,
-    },
-    methodPill: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        backgroundColor: AppColors_1.AppColors.contentBg,
-    },
-    methodPillText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayText,
-    },
-    urlInputRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        paddingHorizontal: 10,
-    },
-    urlInput: {
-        flex: 1,
-        paddingVertical: 8,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        fontSize: 12,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    urlClearBtn: {
-        padding: 4,
-    },
-    tabBar: {
-        flexDirection: 'row',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    tabBtn: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 10,
-        gap: 6,
-        borderBottomWidth: 2,
-        borderBottomColor: 'transparent',
-    },
-    tabBtnActive: {
-        borderBottomColor: AppColors_1.AppColors.purple,
-        backgroundColor: AppColors_1.AppColors.contentBg,
-    },
-    tabBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    tabBtnTextActive: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.purple,
-    },
-    contentScroll: {
-        flex: 1,
-    },
-    contentInner: {
-        padding: 14,
-    },
-    sectionHeading: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    headersContainer: {
-        gap: 8,
-    },
-    headersHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 4,
-    },
-    addHeaderBtn: {
-        backgroundColor: `${AppColors_1.AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    addHeaderBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.purple,
-    },
-    headerRowItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    headerCheck: {
-        width: 22,
-        height: 22,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors_1.AppColors.contentBg,
-    },
-    headerCheckActive: {
-        backgroundColor: AppColors_1.AppColors.purple,
-        borderColor: AppColors_1.AppColors.purple,
-    },
-    headerCheckText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors_1.AppColors.white,
-    },
-    headerKeyInput: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: 6,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    headerValInput: {
-        flex: 1.5,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: 6,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    deleteHeaderBtn: {
-        padding: 6,
-    },
-    bodyContainer: {
-        gap: 8,
-    },
-    bodyActionRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 4,
-    },
-    prettifyBtn: {
-        backgroundColor: `${AppColors_1.AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    prettifyBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors_1.AppColors.purple,
-    },
-    bodyTextInput: {
-        height: 260,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        padding: 10,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        fontSize: 11.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    responseContainer: {
-        minHeight: 200,
-    },
-    loadingBox: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 40,
-        gap: 12,
-    },
-    loadingText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 13,
-        color: AppColors_1.AppColors.grayText,
-    },
-    resStatusBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        padding: 10,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    resStatusLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-    },
-    resStatusPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 3.5,
-        borderRadius: 6,
-        borderWidth: 1,
-    },
-    statusDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    resStatusText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 11,
-    },
-    resMetaPill: {
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    resMetaPillText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.grayText,
-    },
-    responseBox: {
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        padding: 10,
-        minHeight: 200,
-    },
-    emptyResponseBox: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 50,
-        gap: 8,
-    },
-    emptyResponseTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    emptyResponseSub: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
-        paddingHorizontal: 24,
-    },
-    bottomBar: {
-        paddingHorizontal: 16,
-        paddingTop: 12,
-        paddingBottom: react_native_1.Platform.OS === 'ios' ? 34 : 16,
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderTopWidth: 1,
-        borderTopColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    sendBtn: {
-        backgroundColor: AppColors_1.AppColors.purple,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 6,
-        paddingVertical: 12,
-        borderRadius: 10,
-        shadowColor: AppColors_1.AppColors.purple,
-        shadowOpacity: 0.3,
-        shadowRadius: 6,
-        shadowOffset: { width: 0, height: 2 },
-    },
-    sendBtnIcon: {
-        fontSize: 14,
-        color: AppColors_1.AppColors.white,
-    },
-    sendBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors_1.AppColors.white,
-    },
-});
-exports.default = exports.RequestReplayModal;