@regantis-sdk/react-native-chat 0.1.0

package/src/RegantisChat.js

@@ -0,0 +1,539 @@
+'use strict';
+
+const React = require('react');
+const {
+  ActivityIndicator,
+  AppState,
+  FlatList,
+  Image,
+  KeyboardAvoidingView,
+  Linking,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} = require('react-native');
+const { RegantisChatClient } = require('./client');
+
+const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '🤔', '😞', '😢', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
+
+function colorWithOpacity(hex, opacity) {
+  const value = String(hex || '#F5F7FB').replace('#', '');
+  if (!/^[0-9a-f]{6}$/i.test(value)) return hex;
+  const alpha = Math.max(0, Math.min(100, Number(opacity))) / 100;
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function makePalette(settings) {
+  const dark = settings.theme_mode === 'dark';
+  const primary = settings.color_mode === 'advanced' ? settings.primary_color : settings.theme_color;
+  return {
+    primary,
+    background: colorWithOpacity(settings.chat_background, settings.chat_background_opacity),
+    surface: dark ? '#17181B' : '#FFFFFF',
+    surfaceAlt: dark ? '#22252A' : '#EEF1F5',
+    border: dark ? '#30343B' : '#E0E4EA',
+    text: dark ? '#F7F8FA' : '#17181B',
+    muted: settings.system_text || (dark ? '#A7ADB7' : '#6F7480'),
+    customerBubble: settings.color_mode === 'advanced' ? settings.customer_bubble : primary,
+    customerText: settings.color_mode === 'advanced' ? settings.customer_text : '#FFFFFF',
+    agentBubble: settings.color_mode === 'advanced' ? settings.agent_bubble : (dark ? '#22252A' : '#FFFFFF'),
+    agentText: settings.color_mode === 'advanced' ? settings.agent_text : (dark ? '#F7F8FA' : '#17181B'),
+    danger: '#C93A3A',
+  };
+}
+
+function formatTime(value) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function RegantisChat(props) {
+  const {
+    apiKey,
+    serverUrl,
+    language = 'en',
+    translationLanguage = '',
+    customer,
+    theme,
+    texts,
+    screen = 'chat',
+    style,
+    onMessage,
+    onUnreadChange,
+    onError,
+  } = props;
+
+  const client = React.useMemo(() => new RegantisChatClient({
+    apiKey,
+    serverUrl,
+    language,
+    translationLanguage,
+    customer,
+    theme,
+    texts,
+    screen,
+    onMessage,
+    onUnreadChange,
+    onError,
+  }), [apiKey, serverUrl, language, translationLanguage, customer, theme, texts, screen, onMessage, onUnreadChange, onError]);
+
+  const [state, setState] = React.useState(client.getState());
+  const [draft, setDraft] = React.useState('');
+  const [contactName, setContactName] = React.useState(customer && customer.name || '');
+  const [contactEmail, setContactEmail] = React.useState(customer && customer.email || '');
+  const [contactError, setContactError] = React.useState('');
+  const [optionsOpen, setOptionsOpen] = React.useState(false);
+  const [attachOpen, setAttachOpen] = React.useState(false);
+  const [emojiOpen, setEmojiOpen] = React.useState(false);
+  const [closeOpen, setCloseOpen] = React.useState(false);
+  const [transcriptOpen, setTranscriptOpen] = React.useState(false);
+  const [transcriptEmail, setTranscriptEmail] = React.useState(customer && customer.email || '');
+  const [transcriptStatus, setTranscriptStatus] = React.useState('');
+  const [ratingOpen, setRatingOpen] = React.useState(false);
+  const [ratingComment, setRatingComment] = React.useState('');
+  const [ratingStatus, setRatingStatus] = React.useState('');
+  const [busyAction, setBusyAction] = React.useState('');
+  const listRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const unsubscribe = client.subscribe(next => setState(next));
+    client.start().catch(() => {});
+    const sub = AppState.addEventListener('change', value => client.setVisible(value === 'active'));
+    return () => {
+      if (sub && sub.remove) sub.remove();
+      unsubscribe();
+      client.stop();
+    };
+  }, [client]);
+
+  React.useEffect(() => {
+    const c = state.conversation || {};
+    if (c.contact_name && !contactName) setContactName(c.contact_name);
+    if (c.contact_email && !contactEmail) setContactEmail(c.contact_email);
+    if (c.contact_email && !transcriptEmail) setTranscriptEmail(c.contact_email);
+  }, [state.conversation, contactName, contactEmail, transcriptEmail]);
+
+  React.useEffect(() => {
+    if (state.messages.length) {
+      const timer = setTimeout(() => listRef.current && listRef.current.scrollToEnd({ animated: true }), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [state.messages.length]);
+
+  const t = key => state.texts[key] || key;
+  const palette = makePalette(state.settings);
+  const styles = React.useMemo(() => buildStyles(palette), [
+    palette.primary,
+    palette.background,
+    palette.surface,
+    palette.surfaceAlt,
+    palette.border,
+    palette.text,
+    palette.muted,
+    palette.customerBubble,
+    palette.customerText,
+    palette.agentBubble,
+    palette.agentText,
+  ]);
+
+  async function submitContact() {
+    setContactError('');
+    if (!contactName.trim() || !/^\S+@\S+\.\S+$/.test(contactEmail.trim())) {
+      setContactError(t('invalid_contact'));
+      return;
+    }
+    setBusyAction('contact');
+    try {
+      await client.saveContact(contactName.trim(), contactEmail.trim());
+    } catch (error) {
+      setContactError(error.message || t('invalid_contact'));
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function submitMessage() {
+    const message = draft.trim();
+    if (!message || state.sending) return;
+    setDraft('');
+    client.sendTyping('');
+    try {
+      await client.sendMessage(message);
+    } catch (_) {
+      setDraft(message);
+    }
+  }
+
+  async function pick(kind) {
+    setAttachOpen(false);
+    setBusyAction('upload');
+    try {
+      await client.pickAndUpload(kind);
+    } catch (_) {
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function selectLanguage(code) {
+    setBusyAction('language');
+    try {
+      await client.setTranslationLanguage(code);
+      setOptionsOpen(false);
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function closeChat() {
+    setBusyAction('close');
+    try {
+      await client.closeChat();
+      setCloseOpen(false);
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function reopenChat() {
+    setBusyAction('reopen');
+    try {
+      await client.reopenChat();
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function sendTranscript() {
+    setTranscriptStatus('');
+    setBusyAction('transcript');
+    try {
+      const data = await client.sendTranscript(transcriptEmail.trim());
+      setTranscriptStatus(data.verification_required ? t('transcript_verification_sent') : t('transcript_sent'));
+    } catch (error) {
+      setTranscriptStatus(error.message || t('send_error'));
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function rate(value) {
+    setBusyAction('rating');
+    setRatingStatus('');
+    try {
+      await client.rate(value);
+      setRatingStatus(value ? t('rating_event_good') : t('rating_event_bad'));
+    } catch (_) {
+      setRatingStatus(t('rating_error'));
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  async function sendRatingComment() {
+    if (!ratingComment.trim()) return;
+    setBusyAction('rating-comment');
+    try {
+      await client.rateComment(ratingComment.trim());
+      setRatingComment('');
+      setRatingOpen(false);
+    } catch (_) {
+      setRatingStatus(t('rating_error'));
+    } finally {
+      setBusyAction('');
+    }
+  }
+
+  function renderMessage({ item }) {
+    const sender = String(item.sender_type || '').toLowerCase();
+    const system = sender === 'system' || String(item.message_type || '').startsWith('routing_') || String(item.message_type || '').startsWith('rating_');
+    const visitor = sender === 'visitor';
+
+    if (system) {
+      return <View style={styles.systemRow}><Text style={styles.systemText}>{item.message}</Text></View>;
+    }
+
+    const bubbleStyle = visitor ? styles.customerBubble : styles.agentBubble;
+    const textStyle = visitor ? styles.customerText : styles.agentText;
+    const attachment = item.attachment || null;
+    const isImage = attachment && String(attachment.mime || '').startsWith('image/');
+
+    return (
+      <View style={[styles.messageRow, visitor ? styles.messageRowRight : styles.messageRowLeft]}>
+        {!visitor && state.settings.show_agent_photo ? <View style={styles.avatar}><Text style={styles.avatarText}>{String(item.sender_name || state.settings.operator_name || 'S').slice(0, 1).toUpperCase()}</Text></View> : null}
+        <View style={[styles.bubble, bubbleStyle]}>
+          {!visitor && item.sender_name ? <Text style={[styles.senderName, textStyle]}>{item.sender_name}</Text> : null}
+          {isImage ? (
+            <Pressable onPress={() => Linking.openURL(attachment.url)}>
+              <Image source={{ uri: attachment.url }} style={styles.attachmentImage} resizeMode="cover" />
+            </Pressable>
+          ) : attachment ? (
+            <Pressable style={styles.fileAttachment} onPress={() => Linking.openURL(attachment.url)}>
+              <Text style={textStyle}>📎 {attachment.name || t('attach_file')}</Text>
+            </Pressable>
+          ) : null}
+          {item.message ? <Text style={[styles.messageText, textStyle]}>{item.message}</Text> : null}
+          <Text style={[styles.timeText, textStyle]}>{formatTime(item.date_added)}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (state.loading) {
+    return <View style={[styles.root, styles.center, style]}><ActivityIndicator size="large" color={palette.primary} /><Text style={styles.loadingText}>{t('loading')}</Text></View>;
+  }
+
+  if (state.error) {
+    return (
+      <View style={[styles.root, styles.center, style]}>
+        <Text style={styles.errorText}>{t('error')}</Text>
+        <Pressable style={styles.primaryButton} onPress={() => client.start().catch(() => {})}><Text style={styles.primaryButtonText}>{t('restart_chat')}</Text></Pressable>
+      </View>
+    );
+  }
+
+  if (state.banned) return <View style={[styles.root, styles.center, style]}><Text style={styles.errorText}>{t('error')}</Text></View>;
+
+  const c = state.conversation || {};
+  const active = Number(c.status || 0) === 1;
+  const contactConfirmed = Number(c.contact_confirmed || 0) === 1;
+  const canUpload = !!(state.upload && state.upload.enabled);
+
+  return (
+    <KeyboardAvoidingView style={[styles.root, style]} behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={props.keyboardVerticalOffset || 0}>
+      <View style={styles.header}>
+        <View style={styles.headerBrand}>
+          {state.settings.show_logo && state.settings.logo_url ? <Image source={{ uri: state.settings.logo_url }} style={styles.logo} resizeMode="contain" /> : <View style={styles.logoFallback}><Text style={styles.logoFallbackText}>R</Text></View>}
+          <View style={styles.headerCopy}>
+            <Text numberOfLines={1} style={styles.headerTitle}>{state.settings.operator_name || t('support_name')}</Text>
+            <Text style={styles.headerStatus}>{state.realtimeConnected ? '● ' : '○ '}{state.realtimeConnected ? t('chat') : t('offline')}</Text>
+          </View>
+        </View>
+        <View style={styles.headerActions}>
+          <Pressable style={styles.iconButton} onPress={() => setOptionsOpen(true)}><Text style={styles.iconText}>⋯</Text></Pressable>
+          {active && state.conversation.conversation_id ? <Pressable style={styles.iconButton} onPress={() => setCloseOpen(true)}><Text style={styles.iconText}>×</Text></Pressable> : null}
+        </View>
+      </View>
+
+      {!contactConfirmed ? (
+        <ScrollView contentContainerStyle={styles.contactStage} keyboardShouldPersistTaps="handled">
+          <Text style={styles.contactTitle}>{t('start_chat_title')}</Text>
+          <Text style={styles.label}>{t('name')}</Text>
+          <TextInput style={styles.input} value={contactName} onChangeText={setContactName} maxLength={190} placeholder={t('name')} placeholderTextColor={palette.muted} autoCapitalize="words" />
+          <Text style={styles.label}>{t('email')}</Text>
+          <TextInput style={styles.input} value={contactEmail} onChangeText={setContactEmail} maxLength={190} placeholder={t('email')} placeholderTextColor={palette.muted} keyboardType="email-address" autoCapitalize="none" />
+          {contactError ? <Text style={styles.inlineError}>{contactError}</Text> : null}
+          <Pressable disabled={busyAction === 'contact'} style={[styles.primaryButton, busyAction === 'contact' && styles.disabled]} onPress={submitContact}>
+            {busyAction === 'contact' ? <ActivityIndicator color="#FFFFFF" /> : <Text style={styles.primaryButtonText}>{t('start_chat')}</Text>}
+          </Pressable>
+        </ScrollView>
+      ) : (
+        <>
+          <FlatList
+            ref={listRef}
+            data={state.messages}
+            keyExtractor={item => String(item.chat_message_id)}
+            renderItem={renderMessage}
+            style={styles.messageList}
+            contentContainerStyle={styles.messageListContent}
+            onScrollBeginDrag={() => state.hasMore && client.loadOlder().catch(() => {})}
+            ListEmptyComponent={<View style={styles.emptyState}><Text style={styles.emptyText}>{t('empty')}</Text></View>}
+          />
+
+          {state.remoteTyping ? <View style={styles.typingRow}><Text style={styles.typingText}>{state.remoteTyping === 'chatbot' ? t('chatbot_typing') : t('typing')}</Text></View> : null}
+
+          {!active ? (
+            <View style={styles.closedStage}>
+              <Text style={styles.closedText}>{c.closed_by === 'visitor' ? t('chat_closed') : t('chat_closed_agent')}</Text>
+              <Pressable disabled={busyAction === 'reopen'} style={styles.primaryButton} onPress={reopenChat}><Text style={styles.primaryButtonText}>{t('restart_chat')}</Text></Pressable>
+              {state.settings.rating_enabled ? <Pressable style={styles.secondaryButton} onPress={() => setRatingOpen(true)}><Text style={styles.secondaryButtonText}>{t('rating_agent_label')}</Text></Pressable> : null}
+            </View>
+          ) : (
+            <View style={styles.composerArea}>
+              {emojiOpen ? <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.emojiRow}>{EMOJIS.map(emoji => <Pressable key={emoji} style={styles.emojiButton} onPress={() => { setDraft(value => value + emoji); setEmojiOpen(false); }}><Text style={styles.emojiText}>{emoji}</Text></Pressable>)}</ScrollView> : null}
+              <View style={styles.composer}>
+                <Pressable disabled={!canUpload || state.uploading} style={styles.composerButton} onPress={() => setAttachOpen(true)}><Text style={styles.composerIcon}>＋</Text></Pressable>
+                <Pressable style={styles.composerButton} onPress={() => setEmojiOpen(value => !value)}><Text style={styles.composerIcon}>☺</Text></Pressable>
+                <TextInput
+                  style={styles.composerInput}
+                  value={draft}
+                  onChangeText={value => { setDraft(value); client.sendTyping(value); }}
+                  placeholder={t('placeholder')}
+                  placeholderTextColor={palette.muted}
+                  multiline
+                  maxLength={5000}
+                />
+                <Pressable disabled={!draft.trim() || state.sending} style={[styles.sendButton, (!draft.trim() || state.sending) && styles.disabled]} onPress={submitMessage}>
+                  {state.sending ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Text style={styles.sendIcon}>➤</Text>}
+                </Pressable>
+              </View>
+              {String(c.routing_mode || '') === 'chatbot' ? <Text style={styles.aiCompliance}>{t('ai_compliance')}</Text> : null}
+            </View>
+          )}
+        </>
+      )}
+
+      {!state.settings.white_label ? <View style={styles.poweredBy}><Text style={styles.poweredByText}>{t('powered_by')} Regantis</Text></View> : null}
+
+      <Modal transparent visible={attachOpen} animationType="fade" onRequestClose={() => setAttachOpen(false)}>
+        <Pressable style={styles.modalBackdrop} onPress={() => setAttachOpen(false)}>
+          <View style={styles.sheet}>
+            <Pressable style={styles.sheetRow} onPress={() => pick('image')}><Text style={styles.sheetText}>▣ {t('attach_image')}</Text></Pressable>
+            <Pressable style={styles.sheetRow} onPress={() => pick('file')}><Text style={styles.sheetText}>📎 {t('attach_file')}</Text></Pressable>
+            <Pressable style={styles.sheetRow} onPress={() => pick('screenshot')}><Text style={styles.sheetText}>▧ {t('attach_screenshot')}</Text></Pressable>
+          </View>
+        </Pressable>
+      </Modal>
+
+      <Modal transparent visible={optionsOpen} animationType="fade" onRequestClose={() => setOptionsOpen(false)}>
+        <Pressable style={styles.modalBackdrop} onPress={() => setOptionsOpen(false)}>
+          <View style={styles.modalCard} onStartShouldSetResponder={() => true}>
+            <Text style={styles.modalTitle}>{t('options')}</Text>
+            <Pressable style={styles.optionRow} onPress={() => client.setSoundEnabled(!state.settings.sound_enabled)}><Text style={styles.optionText}>{t('sounds')}</Text><Text style={styles.optionValue}>{state.settings.sound_enabled ? '✓' : '—'}</Text></Pressable>
+            {state.translationCustomerEnabled ? (
+              <View style={styles.optionSection}>
+                <Text style={styles.optionSectionTitle}>{t('language')}</Text>
+                <ScrollView style={styles.languageList}>
+                  <Pressable style={styles.languageRow} onPress={() => selectLanguage('')}><Text style={styles.optionText}>{t('language_auto')}</Text><Text style={styles.optionValue}>{!c.translation_language_code ? '✓' : ''}</Text></Pressable>
+                  {state.languages.map(item => {
+                    const code = String(item.code || item.language_code || '').toLowerCase();
+                    const name = item.name || item.language_name || code.toUpperCase();
+                    return <Pressable key={code} style={styles.languageRow} onPress={() => selectLanguage(code)}><Text style={styles.optionText}>{name}</Text><Text style={styles.optionValue}>{String(c.translation_language_code || '').toLowerCase() === code ? '✓' : code.toUpperCase()}</Text></Pressable>;
+                  })}
+                </ScrollView>
+              </View>
+            ) : null}
+            {state.settings.transcript_enabled && contactConfirmed ? <Pressable style={styles.optionRow} onPress={() => { setOptionsOpen(false); setTranscriptOpen(true); }}><Text style={styles.optionText}>{t('send_transcript')}</Text><Text style={styles.optionValue}>›</Text></Pressable> : null}
+            {state.settings.rating_enabled && contactConfirmed ? <Pressable style={styles.optionRow} onPress={() => { setOptionsOpen(false); setRatingOpen(true); }}><Text style={styles.optionText}>{t('rating_agent_label')}</Text><Text style={styles.optionValue}>›</Text></Pressable> : null}
+          </View>
+        </Pressable>
+      </Modal>
+
+      <Modal transparent visible={closeOpen} animationType="fade" onRequestClose={() => setCloseOpen(false)}>
+        <View style={styles.modalBackdrop}><View style={styles.modalCard}>
+          <Text style={styles.modalTitle}>{t('close_chat_question')}</Text>
+          <View style={styles.modalActions}><Pressable style={styles.secondaryButton} onPress={() => setCloseOpen(false)}><Text style={styles.secondaryButtonText}>{t('cancel')}</Text></Pressable><Pressable style={styles.dangerButton} onPress={closeChat}><Text style={styles.primaryButtonText}>{t('close_chat_confirm')}</Text></Pressable></View>
+        </View></View>
+      </Modal>
+
+      <Modal transparent visible={transcriptOpen} animationType="fade" onRequestClose={() => setTranscriptOpen(false)}>
+        <View style={styles.modalBackdrop}><View style={styles.modalCard}>
+          <Text style={styles.modalTitle}>{t('send_transcript_title')}</Text>
+          <TextInput style={styles.input} value={transcriptEmail} onChangeText={setTranscriptEmail} keyboardType="email-address" autoCapitalize="none" placeholder={t('email')} placeholderTextColor={palette.muted} />
+          {transcriptStatus ? <Text style={styles.modalStatus}>{transcriptStatus}</Text> : null}
+          <View style={styles.modalActions}><Pressable style={styles.secondaryButton} onPress={() => setTranscriptOpen(false)}><Text style={styles.secondaryButtonText}>{t('cancel')}</Text></Pressable><Pressable style={styles.primaryButton} onPress={sendTranscript}><Text style={styles.primaryButtonText}>{t('send_transcript')}</Text></Pressable></View>
+        </View></View>
+      </Modal>
+
+      <Modal transparent visible={ratingOpen} animationType="fade" onRequestClose={() => setRatingOpen(false)}>
+        <View style={styles.modalBackdrop}><View style={styles.modalCard}>
+          <Text style={styles.modalTitle}>{t('rating_agent_label')}</Text>
+          <View style={styles.ratingButtons}><Pressable style={styles.ratingButton} onPress={() => rate(1)}><Text style={styles.ratingIcon}>👍</Text></Pressable><Pressable style={styles.ratingButton} onPress={() => rate(0)}><Text style={styles.ratingIcon}>👎</Text></Pressable></View>
+          {ratingStatus ? <Text style={styles.modalStatus}>{ratingStatus}</Text> : null}
+          <TextInput style={[styles.input, styles.commentInput]} value={ratingComment} onChangeText={setRatingComment} multiline maxLength={2000} placeholder={t('rating_comment_placeholder')} placeholderTextColor={palette.muted} />
+          <View style={styles.modalActions}><Pressable style={styles.secondaryButton} onPress={() => setRatingOpen(false)}><Text style={styles.secondaryButtonText}>{t('cancel')}</Text></Pressable><Pressable style={styles.primaryButton} onPress={sendRatingComment}><Text style={styles.primaryButtonText}>{t('rating_comment_send')}</Text></Pressable></View>
+        </View></View>
+      </Modal>
+    </KeyboardAvoidingView>
+  );
+}
+
+function buildStyles(p) {
+  return StyleSheet.create({
+    root: { flex: 1, backgroundColor: p.background },
+    center: { alignItems: 'center', justifyContent: 'center', padding: 24, gap: 14 },
+    loadingText: { color: p.muted, fontSize: 14 },
+    errorText: { color: p.text, fontSize: 15, textAlign: 'center', marginBottom: 16 },
+    header: { minHeight: 68, paddingHorizontal: 14, paddingVertical: 10, backgroundColor: p.surface, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: p.border, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    headerBrand: { flex: 1, flexDirection: 'row', alignItems: 'center', minWidth: 0 },
+    headerCopy: { flex: 1, minWidth: 0 },
+    headerTitle: { color: p.text, fontSize: 16, fontWeight: '700' },
+    headerStatus: { color: p.muted, fontSize: 11, marginTop: 2 },
+    headerActions: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    logo: { width: 38, height: 38, borderRadius: 10, marginRight: 10 },
+    logoFallback: { width: 38, height: 38, borderRadius: 10, marginRight: 10, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    logoFallbackText: { color: '#FFFFFF', fontWeight: '800', fontSize: 18 },
+    iconButton: { width: 38, height: 38, borderRadius: 10, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    iconText: { color: p.text, fontSize: 24, lineHeight: 26 },
+    contactStage: { flexGrow: 1, justifyContent: 'center', padding: 22 },
+    contactTitle: { color: p.text, fontSize: 20, lineHeight: 27, fontWeight: '700', marginBottom: 24 },
+    label: { color: p.text, fontSize: 13, fontWeight: '600', marginBottom: 7, marginTop: 10 },
+    input: { minHeight: 48, borderWidth: 1, borderColor: p.border, borderRadius: 12, backgroundColor: p.surface, color: p.text, paddingHorizontal: 13, paddingVertical: 10, fontSize: 15 },
+    inlineError: { color: p.danger, fontSize: 12, marginTop: 8 },
+    primaryButton: { minHeight: 48, borderRadius: 12, backgroundColor: p.primary, paddingHorizontal: 18, alignItems: 'center', justifyContent: 'center', marginTop: 14 },
+    primaryButtonText: { color: '#FFFFFF', fontSize: 14, fontWeight: '700' },
+    secondaryButton: { minHeight: 46, borderRadius: 12, backgroundColor: p.surfaceAlt, paddingHorizontal: 16, alignItems: 'center', justifyContent: 'center', marginTop: 10 },
+    secondaryButtonText: { color: p.text, fontSize: 14, fontWeight: '700' },
+    dangerButton: { minHeight: 46, borderRadius: 12, backgroundColor: p.danger, paddingHorizontal: 16, alignItems: 'center', justifyContent: 'center', marginTop: 10 },
+    disabled: { opacity: 0.55 },
+    messageList: { flex: 1 },
+    messageListContent: { paddingHorizontal: 12, paddingVertical: 14, flexGrow: 1 },
+    emptyState: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 30 },
+    emptyText: { color: p.muted, textAlign: 'center', lineHeight: 21 },
+    messageRow: { marginBottom: 8, flexDirection: 'row', alignItems: 'flex-end', maxWidth: '88%' },
+    messageRowLeft: { alignSelf: 'flex-start' },
+    messageRowRight: { alignSelf: 'flex-end', justifyContent: 'flex-end' },
+    avatar: { width: 28, height: 28, borderRadius: 14, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center', marginRight: 6 },
+    avatarText: { color: '#FFFFFF', fontSize: 12, fontWeight: '800' },
+    bubble: { maxWidth: '100%', borderRadius: 16, paddingHorizontal: 12, paddingVertical: 9 },
+    customerBubble: { backgroundColor: p.customerBubble, borderBottomRightRadius: 5 },
+    agentBubble: { backgroundColor: p.agentBubble, borderBottomLeftRadius: 5, borderWidth: StyleSheet.hairlineWidth, borderColor: p.border },
+    customerText: { color: p.customerText },
+    agentText: { color: p.agentText },
+    senderName: { fontSize: 11, fontWeight: '700', marginBottom: 4, opacity: 0.85 },
+    messageText: { fontSize: 15, lineHeight: 20 },
+    timeText: { fontSize: 9, marginTop: 4, opacity: 0.6, alignSelf: 'flex-end' },
+    systemRow: { alignSelf: 'center', paddingHorizontal: 16, paddingVertical: 7, marginVertical: 3 },
+    systemText: { color: p.muted, fontSize: 11, textAlign: 'center' },
+    attachmentImage: { width: 210, height: 160, borderRadius: 10, marginBottom: 5, backgroundColor: p.surfaceAlt },
+    fileAttachment: { paddingVertical: 5 },
+    typingRow: { paddingHorizontal: 16, paddingVertical: 5 },
+    typingText: { color: p.muted, fontSize: 12, fontStyle: 'italic' },
+    closedStage: { padding: 14, backgroundColor: p.surface, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: p.border },
+    closedText: { color: p.muted, textAlign: 'center', marginBottom: 4 },
+    composerArea: { backgroundColor: p.surface, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: p.border, paddingHorizontal: 8, paddingTop: 7, paddingBottom: 8 },
+    composer: { flexDirection: 'row', alignItems: 'flex-end', gap: 5 },
+    composerButton: { width: 38, height: 42, borderRadius: 11, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    composerIcon: { color: p.text, fontSize: 21 },
+    composerInput: { flex: 1, minHeight: 42, maxHeight: 120, borderRadius: 13, backgroundColor: p.surfaceAlt, color: p.text, paddingHorizontal: 12, paddingTop: 10, paddingBottom: 9, fontSize: 15 },
+    sendButton: { width: 42, height: 42, borderRadius: 13, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    sendIcon: { color: '#FFFFFF', fontSize: 18 },
+    aiCompliance: { color: p.muted, fontSize: 9, textAlign: 'center', marginTop: 5, paddingHorizontal: 8 },
+    emojiRow: { paddingVertical: 6, gap: 4 },
+    emojiButton: { width: 39, height: 39, borderRadius: 10, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    emojiText: { fontSize: 21 },
+    poweredBy: { backgroundColor: p.surface, paddingBottom: 4, alignItems: 'center' },
+    poweredByText: { color: p.muted, fontSize: 8 },
+    modalBackdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'center', padding: 20 },
+    modalCard: { backgroundColor: p.surface, borderRadius: 18, padding: 16, maxHeight: '82%' },
+    modalTitle: { color: p.text, fontSize: 17, fontWeight: '700', marginBottom: 12 },
+    modalActions: { flexDirection: 'row', gap: 8, justifyContent: 'flex-end' },
+    modalStatus: { color: p.muted, fontSize: 12, marginTop: 9 },
+    sheet: { alignSelf: 'stretch', backgroundColor: p.surface, borderRadius: 18, paddingVertical: 6 },
+    sheetRow: { minHeight: 54, justifyContent: 'center', paddingHorizontal: 18, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: p.border },
+    sheetText: { color: p.text, fontSize: 16 },
+    optionRow: { minHeight: 50, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: p.border },
+    optionText: { color: p.text, fontSize: 14 },
+    optionValue: { color: p.muted, fontSize: 12, marginLeft: 12 },
+    optionSection: { paddingTop: 10 },
+    optionSectionTitle: { color: p.muted, fontSize: 11, fontWeight: '700', marginBottom: 4 },
+    languageList: { maxHeight: 220 },
+    languageRow: { minHeight: 44, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingLeft: 8 },
+    ratingButtons: { flexDirection: 'row', gap: 12, justifyContent: 'center', marginVertical: 8 },
+    ratingButton: { width: 66, height: 54, borderRadius: 14, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    ratingIcon: { fontSize: 27 },
+    commentInput: { minHeight: 82, textAlignVertical: 'top', marginTop: 10 },
+  });
+}
+
+module.exports = RegantisChat;