react-native-inapp-inspector 2.0.4 → 2.0.6

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

@@ -0,0 +1,831 @@
+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;