react-native-inapp-inspector 2.0.7 → 2.2.0

package/dist/esm/components/Inspector/RequestReplayView.js

@@ -1,831 +0,0 @@
-import React, { useState } from 'react';
-import { ActivityIndicator, Alert, Platform, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import TouchableScale from '../TouchableScale';
-import CopyButton from '../CopyButton';
-import JsonViewer from '../JsonViewer';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { METHOD_COLORS } from '../../constants';
-import { getSize } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { ClearIcon, HeadersIcon, RequestIcon, ResponseIcon, SearchIcon, TerminalIcon, WhiteBackNavigation, } from '../NetworkIcons';
-const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
-export const RequestReplayView = ({ request, onBack, }) => {
-    const [method, setMethod] = useState(request.method?.toUpperCase() || 'GET');
-    const [url, setUrl] = useState(request.url || '');
-    const [activeTab, setActiveTab] = useState('headers');
-    // Initialize headers list from request
-    const [headers, setHeaders] = 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] = 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] = useState(false);
-    const [executionResult, setExecutionResult] = useState(null);
-    const [responseSearch, setResponseSearch] = useState('');
-    // Add new header
-    const handleAddHeader = () => {
-        setHeaders(prev => [
-            ...prev,
-            {
-                id: `h-new-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`,
-                key: '',
-                value: '',
-                enabled: true,
-            },
-        ]);
-    };
-    // Toggle header enabled
-    const handleToggleHeader = (id) => {
-        setHeaders(prev => prev.map(h => (h.id === id ? { ...h, enabled: !h.enabled } : h)));
-    };
-    // Update header key
-    const handleUpdateHeaderKey = (id, key) => {
-        setHeaders(prev => prev.map(h => (h.id === id ? { ...h, key } : h)));
-    };
-    // Update header value
-    const handleUpdateHeaderValue = (id, value) => {
-        setHeaders(prev => prev.map(h => (h.id === id ? { ...h, value } : h)));
-    };
-    // Delete header
-    const handleDeleteHeader = (id) => {
-        setHeaders(prev => prev.filter(h => h.id !== id));
-    };
-    // Prettify JSON Body
-    const handlePrettifyBody = () => {
-        try {
-            const parsed = JSON.parse(requestBody);
-            setRequestBody(JSON.stringify(parsed, null, 2));
-            showToast('JSON formatted');
-        }
-        catch (e) {
-            Alert.alert('Invalid JSON', e.message || 'Cannot parse body as valid JSON');
-        }
-    };
-    // Reset to original
-    const handleResetToOriginal = () => {
-        setMethod(request.method?.toUpperCase() || 'GET');
-        setUrl(request.url || '');
-        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,
-            });
-        });
-        setHeaders(list);
-        const raw = request.request ?? request.requestBody;
-        if (raw == null) {
-            setRequestBody('');
-        }
-        else if (typeof raw === 'string') {
-            try {
-                setRequestBody(JSON.stringify(JSON.parse(raw), null, 2));
-            }
-            catch {
-                setRequestBody(raw);
-            }
-        }
-        else {
-            try {
-                setRequestBody(JSON.stringify(raw, null, 2));
-            }
-            catch {
-                setRequestBody(String(raw));
-            }
-        }
-        setExecutionResult(null);
-        showToast('Reset to original request');
-    };
-    // Execute API Request
-    const handleExecute = async () => {
-        if (!url.trim()) {
-            Alert.alert('Missing URL', 'Please enter a valid request URL');
-            return;
-        }
-        setIsExecuting(true);
-        const startTime = Date.now();
-        try {
-            // Build Headers Record
-            const reqHeaders = {};
-            headers.forEach(h => {
-                if (h.enabled && h.key.trim()) {
-                    reqHeaders[h.key.trim()] = h.value;
-                }
-            });
-            const options = {
-                method,
-                headers: reqHeaders,
-            };
-            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.ok ? 'OK' : 'Error'),
-                duration,
-                headers: resHeaders,
-                body: rawText,
-                sizeBytes,
-                isError: !res.ok,
-            });
-            setActiveTab('response');
-            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');
-            showToast('Network error during replay');
-        }
-        finally {
-            setIsExecuting(false);
-        }
-    };
-    return (<View style={styles.pageContainer}>
-      {/* ─── 1. PAGE HEADER ────────────────────────────────────────── */}
-      <View style={styles.headerBar}>
-        <TouchableScale onPress={onBack} style={styles.backBtn} hitSlop={8}>
-          <WhiteBackNavigation size={16} color={AppColors.purple}/>
-          <Text style={styles.backBtnText}>Details</Text>
-        </TouchableScale>
-
-        <View style={styles.headerTitleBox}>
-          <View style={styles.headerTag}>
-            <Text style={styles.headerTagText}>ISOLATED REPLAY ENGINE</Text>
-          </View>
-          <Text style={styles.headerTitle} numberOfLines={1}>
-            Edit & Resend
-          </Text>
-        </View>
-
-        <TouchableScale onPress={handleResetToOriginal} style={styles.resetBtn} hitSlop={8}>
-          <Text style={styles.resetBtnText}>Reset</Text>
-        </TouchableScale>
-      </View>
-
-      <ScrollView style={styles.scrollContent} contentContainerStyle={styles.scrollInner} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
-        {/* ─── 2. METHOD & URL BAR ──────────────────────────────────── */}
-        <View style={styles.urlSection}>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.methodList}>
-            {HTTP_METHODS.map(m => {
-            const isSelected = method === m;
-            const mColor = METHOD_COLORS[m] || AppColors.purple;
-            return (<TouchableScale key={m} onPress={() => setMethod(m)} style={[
-                    styles.methodPill,
-                    isSelected && {
-                        backgroundColor: mColor,
-                        borderColor: mColor,
-                    },
-                ]}>
-                  <Text style={[
-                    styles.methodPillText,
-                    isSelected && { color: AppColors.white },
-                ]}>
-                    {m}
-                  </Text>
-                </TouchableScale>);
-        })}
-          </ScrollView>
-
-          <View style={styles.urlInputRow}>
-            <TextInput style={styles.urlInput} value={url} onChangeText={setUrl} placeholder="https://api.example.com/endpoint..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false} selectTextOnFocus/>
-            {url.length > 0 && (<TouchableScale onPress={() => setUrl('')} style={styles.urlClearBtn} hitSlop={8}>
-                <ClearIcon size={14} color={AppColors.grayTextWeak}/>
-              </TouchableScale>)}
-          </View>
-        </View>
-
-        {/* ─── 3. SEGMENTED TABS (Headers | Body | Response) ────────── */}
-        <View style={styles.tabBar}>
-          <TouchableScale onPress={() => setActiveTab('headers')} style={[
-            styles.tabBtn,
-            activeTab === 'headers' && styles.tabBtnActive,
-        ]}>
-            <HeadersIcon size={12} color={activeTab === 'headers'
-            ? AppColors.purple
-            : AppColors.grayTextWeak}/>
-            <Text style={[
-            styles.tabBtnText,
-            activeTab === 'headers' && styles.tabBtnTextActive,
-        ]}>
-              Headers ({headers.filter(h => h.enabled && h.key.trim()).length})
-            </Text>
-          </TouchableScale>
-
-          {method !== 'GET' && (<TouchableScale onPress={() => setActiveTab('body')} style={[
-                styles.tabBtn,
-                activeTab === 'body' && styles.tabBtnActive,
-            ]}>
-              <RequestIcon size={12} color={activeTab === 'body'
-                ? AppColors.purple
-                : AppColors.grayTextWeak}/>
-              <Text style={[
-                styles.tabBtnText,
-                activeTab === 'body' && styles.tabBtnTextActive,
-            ]}>
-                Body {requestBody.trim().length > 0 ? '●' : ''}
-              </Text>
-            </TouchableScale>)}
-
-          <TouchableScale onPress={() => setActiveTab('response')} style={[
-            styles.tabBtn,
-            activeTab === 'response' && styles.tabBtnActive,
-        ]}>
-            <ResponseIcon size={12} color={activeTab === 'response'
-            ? AppColors.purple
-            : AppColors.grayTextWeak}/>
-            <Text style={[
-            styles.tabBtnText,
-            activeTab === 'response' && styles.tabBtnTextActive,
-        ]}>
-              Response{' '}
-              {executionResult ? `(${executionResult.status})` : ''}
-            </Text>
-          </TouchableScale>
-        </View>
-
-        {/* ─── 4. TAB PANELS ────────────────────────────────────────── */}
-
-        {/* TAB A: HEADERS EDITOR */}
-        {activeTab === 'headers' && (<View style={styles.panelContainer}>
-            <View style={styles.sectionHeaderRow}>
-              <Text style={styles.sectionTitle}>HTTP HEADERS</Text>
-              <TouchableScale onPress={handleAddHeader} style={styles.addHeaderBtn} hitSlop={6}>
-                <Text style={styles.addHeaderBtnText}>+ Add Header</Text>
-              </TouchableScale>
-            </View>
-
-            {headers.map(item => (<View key={item.id} style={styles.headerRowItem}>
-                <TouchableScale onPress={() => handleToggleHeader(item.id)} style={[
-                    styles.checkbox,
-                    item.enabled && styles.checkboxActive,
-                ]} hitSlop={6}>
-                  {item.enabled && <Text style={styles.checkmark}>✓</Text>}
-                </TouchableScale>
-
-                <TextInput style={[
-                    styles.headerKeyInput,
-                    !item.enabled && styles.disabledInput,
-                ]} value={item.key} onChangeText={txt => handleUpdateHeaderKey(item.id, txt)} placeholder="Key (e.g. Authorization)" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-                <TextInput style={[
-                    styles.headerValueInput,
-                    !item.enabled && styles.disabledInput,
-                ]} value={item.value} onChangeText={txt => handleUpdateHeaderValue(item.id, txt)} placeholder="Value" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-
-                <TouchableScale onPress={() => handleDeleteHeader(item.id)} style={styles.deleteHeaderBtn} hitSlop={6}>
-                  <Text style={styles.deleteHeaderText}>✕</Text>
-                </TouchableScale>
-              </View>))}
-          </View>)}
-
-        {/* TAB B: REQUEST BODY */}
-        {activeTab === 'body' && method !== 'GET' && (<View style={styles.panelContainer}>
-            <View style={styles.sectionHeaderRow}>
-              <Text style={styles.sectionTitle}>JSON / RAW PAYLOAD</Text>
-              <View style={{ flexDirection: 'row', gap: 8 }}>
-                <TouchableScale onPress={handlePrettifyBody} style={styles.formatBtn} hitSlop={6}>
-                  <Text style={styles.formatBtnText}>✨ Prettify JSON</Text>
-                </TouchableScale>
-                <TouchableScale onPress={() => setRequestBody('')} style={styles.clearBodyBtn} hitSlop={6}>
-                  <Text style={styles.clearBodyBtnText}>Clear</Text>
-                </TouchableScale>
-              </View>
-            </View>
-
-            <TextInput style={styles.bodyTextInput} value={requestBody} onChangeText={setRequestBody} placeholder='{\n  "key": "value"\n}' placeholderTextColor={AppColors.grayTextWeak} multiline numberOfLines={10} autoCapitalize="none" autoCorrect={false}/>
-          </View>)}
-
-        {/* TAB C: RESPONSE VIEWER */}
-        {activeTab === 'response' && (<View style={styles.panelContainer}>
-            {executionResult ? (<View>
-                {/* Status Bar */}
-                <View style={styles.responseSummaryRow}>
-                  <View style={[
-                    styles.resStatusBadge,
-                    {
-                        backgroundColor: executionResult.isError
-                            ? `${AppColors.errorColor}18`
-                            : `${AppColors.greenColor}18`,
-                        borderColor: executionResult.isError
-                            ? `${AppColors.errorColor}40`
-                            : `${AppColors.greenColor}40`,
-                    },
-                ]}>
-                    <View style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: 3,
-                    backgroundColor: executionResult.isError
-                        ? AppColors.errorColor
-                        : AppColors.greenColor,
-                }}/>
-                    <Text style={[
-                    styles.resStatusText,
-                    {
-                        color: executionResult.isError
-                            ? AppColors.errorColor
-                            : AppColors.greenColor,
-                    },
-                ]}>
-                      {executionResult.status} {executionResult.statusText}
-                    </Text>
-                  </View>
-
-                  <View style={styles.resMetaItem}>
-                    <Text style={styles.resMetaText}>
-                      ⏱ {executionResult.duration}ms
-                    </Text>
-                  </View>
-
-                  <View style={styles.resMetaItem}>
-                    <Text style={styles.resMetaText}>
-                      📦 {getSize(executionResult.body)}
-                    </Text>
-                  </View>
-                </View>
-
-                {/* Search in response */}
-                <View style={styles.responseSearchBar}>
-                  <View style={styles.searchIconBox}>
-                    <SearchIcon size={12} color={AppColors.grayTextWeak}/>
-                  </View>
-                  <TextInput style={styles.responseSearchInput} value={responseSearch} onChangeText={setResponseSearch} placeholder="Search response..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-                  {responseSearch.length > 0 && (<TouchableScale onPress={() => setResponseSearch('')} style={{ padding: 4 }}>
-                      <ClearIcon size={12} color={AppColors.grayTextWeak}/>
-                    </TouchableScale>)}
-
-                  <CopyButton value={executionResult.body} label="Copy Body" iconType="copy"/>
-                </View>
-
-                {/* Response Body Output */}
-                <View style={styles.responseBox}>
-                  <JsonViewer data={executionResult.body} search={responseSearch}/>
-                </View>
-              </View>) : (<View style={styles.emptyResponseBox}>
-                <TerminalIcon size={32} color={AppColors.grayTextWeak}/>
-                <Text style={styles.emptyResponseTitle}>
-                  No execution yet
-                </Text>
-                <Text style={styles.emptyResponseSub}>
-                  Tap "Send Request" below to trigger this API and view the live response.
-                </Text>
-              </View>)}
-          </View>)}
-      </ScrollView>
-
-      {/* ─── 5. STICKY BOTTOM ACTION BAR ───────────────────────────── */}
-      <View style={styles.footerBar}>
-        <TouchableScale onPress={handleExecute} disabled={isExecuting} style={[
-            styles.sendBtn,
-            isExecuting && { backgroundColor: AppColors.grayBorderSecondary },
-        ]}>
-          {isExecuting ? (<ActivityIndicator size="small" color={AppColors.white}/>) : (<>
-              <Text style={styles.sendBtnIcon}>⚡</Text>
-              <Text style={styles.sendBtnText}>Send Request</Text>
-            </>)}
-        </TouchableScale>
-      </View>
-    </View>);
-};
-const styles = StyleSheet.create({
-    pageContainer: {
-        flex: 1,
-        backgroundColor: AppColors.contentBg,
-    },
-    headerBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 14,
-        paddingTop: 10,
-        paddingBottom: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
-    },
-    backBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.purple}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}25`,
-    },
-    backBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.purple,
-    },
-    headerTitleBox: {
-        alignItems: 'center',
-    },
-    headerTag: {
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        marginBottom: 2,
-    },
-    headerTagText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.purple,
-        letterSpacing: 0.5,
-    },
-    headerTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14.5,
-        color: AppColors.primaryBlack,
-    },
-    resetBtn: {
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 8,
-        backgroundColor: AppColors.grayBorderSecondary,
-    },
-    resetBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayText,
-    },
-    scrollContent: {
-        flex: 1,
-    },
-    scrollInner: {
-        padding: 14,
-        paddingBottom: 24,
-    },
-    urlSection: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 12,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        marginBottom: 12,
-    },
-    methodList: {
-        gap: 6,
-        paddingBottom: 8,
-    },
-    methodPill: {
-        paddingHorizontal: 10,
-        paddingVertical: 4.5,
-        borderRadius: 6,
-        backgroundColor: AppColors.contentBg,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    methodPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    urlInputRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 10,
-    },
-    urlInput: {
-        flex: 1,
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-        paddingVertical: Platform.OS === 'ios' ? 8 : 6,
-    },
-    urlClearBtn: {
-        padding: 4,
-    },
-    tabBar: {
-        flexDirection: 'row',
-        backgroundColor: AppColors.grayBorderSecondary,
-        borderRadius: 10,
-        padding: 3,
-        gap: 4,
-        marginBottom: 12,
-    },
-    tabBtn: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 6,
-        borderRadius: 7,
-        gap: 4,
-    },
-    tabBtnActive: {
-        backgroundColor: AppColors.primaryLight,
-        shadowColor: AppColors.black,
-        shadowOpacity: 0.08,
-        shadowRadius: 2,
-        shadowOffset: { width: 0, height: 1 },
-    },
-    tabBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11.5,
-        color: AppColors.grayTextWeak,
-    },
-    tabBtnTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.purple,
-    },
-    panelContainer: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 12,
-    },
-    sectionHeaderRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 10,
-    },
-    sectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    addHeaderBtn: {
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 3.5,
-        borderRadius: 6,
-    },
-    addHeaderBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.purple,
-    },
-    headerRowItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginBottom: 8,
-    },
-    checkbox: {
-        width: 18,
-        height: 18,
-        borderRadius: 4,
-        borderWidth: 1.5,
-        borderColor: AppColors.grayBorderSecondary,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.contentBg,
-    },
-    checkboxActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    checkmark: {
-        color: AppColors.white,
-        fontSize: 10,
-        fontFamily: AppFonts.interBold,
-    },
-    headerKeyInput: {
-        flex: 1.2,
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: Platform.OS === 'ios' ? 6 : 4,
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    headerValueInput: {
-        flex: 1.8,
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: Platform.OS === 'ios' ? 6 : 4,
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    disabledInput: {
-        opacity: 0.45,
-    },
-    deleteHeaderBtn: {
-        padding: 6,
-    },
-    deleteHeaderText: {
-        fontSize: 12,
-        color: AppColors.errorColor,
-    },
-    formatBtn: {
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 3.5,
-        borderRadius: 6,
-    },
-    formatBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.purple,
-    },
-    clearBodyBtn: {
-        backgroundColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: 3.5,
-        borderRadius: 6,
-    },
-    clearBodyBtnText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-    },
-    bodyTextInput: {
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 10,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        minHeight: 180,
-        textAlignVertical: 'top',
-    },
-    responseSummaryRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        marginBottom: 10,
-        flexWrap: 'wrap',
-    },
-    resStatusBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        borderWidth: 1,
-    },
-    resStatusText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-    },
-    resMetaItem: {
-        backgroundColor: AppColors.contentBg,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    resMetaText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    responseSearchBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        marginBottom: 8,
-        gap: 6,
-    },
-    searchIconBox: {
-        marginRight: 2,
-    },
-    responseSearchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.primaryBlack,
-        paddingVertical: 2,
-    },
-    responseBox: {
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        overflow: 'hidden',
-    },
-    emptyResponseBox: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 32,
-        paddingHorizontal: 20,
-        gap: 6,
-    },
-    emptyResponseTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        marginTop: 4,
-    },
-    emptyResponseSub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 16,
-    },
-    footerBar: {
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
-    },
-    sendBtn: {
-        backgroundColor: AppColors.purple,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 12,
-        borderRadius: 10,
-        gap: 6,
-    },
-    sendBtnIcon: {
-        fontSize: 14,
-        color: AppColors.white,
-    },
-    sendBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.white,
-    },
-});
-export default RequestReplayView;