@regantis-sdk/react-native-chat 0.1.1 → 0.1.2

package/README.md

@@ -155,3 +155,16 @@ chat.stop();
 npm login
 npm publish --access public
 ```
+
+## Mobile widget-style navigation
+
+The React Native component now mirrors the mobile web widget flow: it opens on the welcome/home screen and the visitor enters the conversation using the chat card or Chat navigation item.
+
+```jsx
+<RegantisChat
+  apiKey="YOUR_REACT_NATIVE_CHAT_API_KEY"
+  initialView="home"
+/>
+```
+
+Use `initialView="chat"` when an application should open directly in the conversation. `onClose` can be supplied when the host app wants the widget-style minimize action to navigate away from the chat page.

package/index.d.ts

@@ -60,6 +60,9 @@ export type RegantisChatProps = {
   texts?: Record<string, string>;
   screen?: string;
   style?: StyleProp<ViewStyle>;
+  initialView?: 'home' | 'chat';
+  onClose?: () => void;
+  onViewChange?: (view: 'home' | 'chat') => void;
   keyboardVerticalOffset?: number;
   onMessage?: (message: any) => void;
   onUnreadChange?: (count: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regantis-sdk/react-native-chat",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Regantis customer support chat SDK for React Native Android and iOS",
   "main": "index.js",
   "types": "index.d.ts",

package/src/RegantisChat.js

@@ -19,7 +19,7 @@ const {
 } = require('react-native');
 const { RegantisChatClient } = require('./client');
 
-const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '🤔', '😞', '😢', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
+const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '😐', '🤔', '😞', '😢', '😭', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
 
 function colorWithOpacity(hex, opacity) {
   const value = String(hex || '#F5F7FB').replace('#', '');
@@ -35,18 +35,24 @@ function makePalette(settings) {
   const dark = settings.theme_mode === 'dark';
   const primary = settings.color_mode === 'advanced' ? settings.primary_color : settings.theme_color;
   return {
+    dark,
     primary,
     background: colorWithOpacity(settings.chat_background, settings.chat_background_opacity),
-    surface: dark ? '#17181B' : '#FFFFFF',
-    surfaceAlt: dark ? '#22252A' : '#EEF1F5',
-    border: dark ? '#30343B' : '#E0E4EA',
+    surface: dark ? '#1D2127' : '#FFFFFF',
+    surfaceAlt: dark ? '#252A31' : '#F5F7FB',
+    header: dark ? '#181B20' : '#F8F9FC',
+    border: dark ? 'rgba(255,255,255,0.10)' : 'rgba(20,32,54,0.10)',
     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',
+    danger: '#DF2917',
+    heroBase: dark ? '#151B21' : '#EEF7FC',
+    heroBlobA: dark ? 'rgba(73,83,152,0.25)' : 'rgba(118,137,255,0.30)',
+    heroBlobB: dark ? 'rgba(34,126,168,0.22)' : 'rgba(96,222,215,0.28)',
+    heroBlobC: dark ? 'rgba(255,255,255,0.035)' : 'rgba(255,255,255,0.52)',
   };
 }
 
@@ -57,6 +63,11 @@ function formatTime(value) {
   return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
 
+function isSupportMessage(message) {
+  const sender = String(message && message.sender_type || '').toLowerCase();
+  return sender === 'agent' || sender === 'admin' || sender === 'chatbot';
+}
+
 function RegantisChat(props) {
   const {
     apiKey,
@@ -68,6 +79,9 @@ function RegantisChat(props) {
     texts,
     screen = 'chat',
     style,
+    initialView = 'home',
+    onClose,
+    onViewChange,
     onMessage,
     onUnreadChange,
     onError,
@@ -88,11 +102,13 @@ function RegantisChat(props) {
   }), [apiKey, serverUrl, language, translationLanguage, customer, theme, texts, screen, onMessage, onUnreadChange, onError]);
 
   const [state, setState] = React.useState(client.getState());
+  const [activeView, setActiveView] = React.useState(initialView === 'chat' ? 'chat' : 'home');
   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 [languageOpen, setLanguageOpen] = React.useState(false);
   const [attachOpen, setAttachOpen] = React.useState(false);
   const [emojiOpen, setEmojiOpen] = React.useState(false);
   const [closeOpen, setCloseOpen] = React.useState(false);
@@ -124,11 +140,11 @@ function RegantisChat(props) {
   }, [state.conversation, contactName, contactEmail, transcriptEmail]);
 
   React.useEffect(() => {
-    if (state.messages.length) {
+    if (activeView === 'chat' && state.messages.length) {
       const timer = setTimeout(() => listRef.current && listRef.current.scrollToEnd({ animated: true }), 50);
       return () => clearTimeout(timer);
     }
-  }, [state.messages.length]);
+  }, [activeView, state.messages.length]);
 
   const t = key => state.texts[key] || key;
   const palette = makePalette(state.settings);
@@ -137,6 +153,7 @@ function RegantisChat(props) {
     palette.background,
     palette.surface,
     palette.surfaceAlt,
+    palette.header,
     palette.border,
     palette.text,
     palette.muted,
@@ -144,8 +161,29 @@ function RegantisChat(props) {
     palette.customerText,
     palette.agentBubble,
     palette.agentText,
+    palette.heroBase,
   ]);
 
+  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);
+  const hasExisting = state.messages.length > 0 || contactConfirmed;
+  const lastSupport = [...state.messages].reverse().find(isSupportMessage);
+  const homePreview = lastSupport
+    ? String(lastSupport.message || '').trim() || (lastSupport.attachment ? `[${String(lastSupport.message_type || 'file')}]` : t('empty'))
+    : t('empty');
+
+  function showView(next) {
+    const view = next === 'chat' ? 'chat' : 'home';
+    setActiveView(view);
+    setOptionsOpen(false);
+    setLanguageOpen(false);
+    setAttachOpen(false);
+    setEmojiOpen(false);
+    if (typeof onViewChange === 'function') onViewChange(view);
+  }
+
   async function submitContact() {
     setContactError('');
     if (!contactName.trim() || !/^\S+@\S+\.\S+$/.test(contactEmail.trim())) {
@@ -189,6 +227,7 @@ function RegantisChat(props) {
     setBusyAction('language');
     try {
       await client.setTranslationLanguage(code);
+      setLanguageOpen(false);
       setOptionsOpen(false);
     } finally {
       setBusyAction('');
@@ -254,6 +293,30 @@ function RegantisChat(props) {
     }
   }
 
+  function renderLogo(size, marginRight) {
+    if (!state.settings.show_logo) return null;
+    if (state.settings.logo_url) {
+      return <Image source={{ uri: state.settings.logo_url }} style={[styles.logoImage, { width: size, height: size, borderRadius: size / 2, marginRight: marginRight || 0 }]} resizeMode="cover" />;
+    }
+    return (
+      <View style={[styles.logoFallback, { width: size, height: size, borderRadius: size / 2, marginRight: marginRight || 0 }]}>
+        <Text style={[styles.logoFallbackText, { fontSize: Math.max(12, Math.round(size * 0.38)) }]}>R</Text>
+      </View>
+    );
+  }
+
+  function renderAgentVisual() {
+    const showLogo = !!state.settings.show_logo;
+    const showAgent = !!state.settings.show_agent_photo;
+    return (
+      <View style={styles.agentVisual}>
+        {showLogo ? renderLogo(28, 0) : null}
+        {showAgent ? <View style={[styles.agentAvatar, showLogo && styles.agentAvatarOverlap]}><Text style={styles.agentAvatarText}>R</Text></View> : null}
+        {!showLogo && !showAgent ? <View style={styles.agentFallback}><Text style={styles.agentFallbackText}>●</Text></View> : null}
+      </View>
+    );
+  }
+
   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_');
@@ -267,66 +330,161 @@ function RegantisChat(props) {
     const textStyle = visitor ? styles.customerText : styles.agentText;
     const attachment = item.attachment || null;
     const isImage = attachment && String(attachment.mime || '').startsWith('image/');
+    const senderName = sender === 'chatbot' ? 'Chatbot' : (item.sender_name || state.settings.operator_name || t('support_name'));
 
     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>
+              <Text style={[styles.fileAttachmentText, 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 style={styles.messageMeta}>
+            {!visitor ? <Text numberOfLines={1} style={[styles.messageSender, textStyle]}>{senderName}</Text> : <View />}
+            <Text style={[styles.timeText, textStyle]}>{formatTime(item.date_added)}</Text>
+          </View>
         </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>;
+  function renderPoweredBy() {
+    if (state.settings.white_label) return null;
+    return <View style={styles.poweredBy}><Text style={styles.poweredByText}>{t('powered_by')} <Text style={styles.poweredByBrand}>Regantis</Text></Text></View>;
   }
 
-  if (state.error) {
+  function renderHome() {
     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 style={styles.screen}>
+        <View style={styles.homeHero}>
+          <View pointerEvents="none" style={styles.heroDecorationA} />
+          <View pointerEvents="none" style={styles.heroDecorationB} />
+          <View pointerEvents="none" style={styles.heroDecorationC} />
+
+          <View style={styles.homeTop}>
+            <View>{renderLogo(42, 0)}</View>
+            {typeof onClose === 'function' ? (
+              <Pressable accessibilityRole="button" accessibilityLabel={t('minimize')} style={styles.iconButton} onPress={onClose}>
+                <Text style={styles.minimizeIcon}>−</Text>
+              </Pressable>
+            ) : <View style={styles.homeTopPlaceholder} />}
+          </View>
+
+          <View style={styles.homeTitle}>
+            <Text style={styles.homeTitleLine}>{t('welcome_title')}</Text>
+            <Text style={styles.homeTitleLine}>{t('welcome_text')}</Text>
+          </View>
+
+          <Pressable style={styles.homeCard} onPress={() => showView('chat')}>
+            <View style={styles.homeCardTop}>
+              {state.settings.show_agent_photo ? <View style={styles.homeAvatar}><Text style={styles.homeAvatarText}>R</Text></View> : null}
+              <View style={styles.homeCardCopy}>
+                <Text numberOfLines={1} style={styles.homeCardAgent}>{state.settings.operator_name || t('support_name')}</Text>
+                <Text numberOfLines={1} style={styles.homeCardPreview}>{homePreview}</Text>
+              </View>
+            </View>
+            <View style={styles.homeCardAction}>
+              <Text style={styles.homeCardActionText}>{hasExisting ? t('back_to_chat') : t('lets_chat')}</Text>
+            </View>
+          </Pressable>
+        </View>
+
+        <View style={styles.homeSpacer} />
+
+        <View style={styles.bottomNav}>
+          <Pressable style={[styles.bottomNavButton, styles.bottomNavButtonActive]} onPress={() => showView('home')}>
+            <Text style={[styles.bottomNavIcon, styles.bottomNavIconActive]}>⌂</Text>
+            <Text style={[styles.bottomNavText, styles.bottomNavTextActive]}>{t('home')}</Text>
+          </Pressable>
+          <Pressable style={styles.bottomNavButton} onPress={() => showView('chat')}>
+            <Text style={styles.bottomNavIcon}>◌</Text>
+            <Text style={styles.bottomNavText}>{t('chat')}</Text>
+          </Pressable>
+        </View>
+        {renderPoweredBy()}
       </View>
     );
   }
 
-  if (state.banned) return <View style={[styles.root, styles.center, style]}><Text style={styles.errorText}>{t('error')}</Text></View>;
+  function renderChatHeader() {
+    return (
+      <View style={styles.chatHeader}>
+        <View style={styles.chatHeaderLeft}>
+          <Pressable accessibilityRole="button" accessibilityLabel={t('back')} style={styles.headerIconButton} onPress={() => showView('home')}>
+            <Text style={styles.backIcon}>‹</Text>
+          </Pressable>
+          <Pressable accessibilityRole="button" accessibilityLabel={t('options')} style={styles.headerIconButton} onPress={() => setOptionsOpen(value => !value)}>
+            <Text style={styles.menuIcon}>•••</Text>
+          </Pressable>
+        </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);
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={state.settings.operator_name || t('support_name')}
+          style={styles.agentTrigger}
+          onPress={() => {
+            if (state.settings.rating_enabled && contactConfirmed) setRatingOpen(true);
+          }}
+        >
+          {renderAgentVisual()}
+        </Pressable>
 
-  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 numberOfLines={1} style={styles.headerStatus}>{t('welcome_text')}</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 style={styles.chatHeaderRight}>
+          {typeof onClose === 'function' ? (
+            <Pressable accessibilityRole="button" accessibilityLabel={t('minimize')} style={styles.headerIconButton} onPress={onClose}>
+              <Text style={styles.minimizeIcon}>−</Text>
+            </Pressable>
+          ) : null}
+          {active && Number(c.conversation_id || 0) > 0 ? (
+            <Pressable accessibilityRole="button" accessibilityLabel={t('close')} style={styles.headerIconButton} onPress={() => setCloseOpen(true)}>
+              <Text style={styles.closeIcon}>×</Text>
+            </Pressable>
+          ) : null}
         </View>
+
+        {optionsOpen ? (
+          <>
+            <Pressable style={styles.inlineDismiss} onPress={() => setOptionsOpen(false)} />
+            <View style={styles.optionsPopover}>
+              {state.settings.transcript_enabled && contactConfirmed ? (
+                <Pressable style={styles.popoverRow} onPress={() => { setOptionsOpen(false); setTranscriptOpen(true); }}>
+                  <Text style={styles.popoverIcon}>✉</Text>
+                  <Text style={styles.popoverText}>{t('send_transcript')}</Text>
+                </Pressable>
+              ) : null}
+              {state.translationCustomerEnabled ? (
+                <Pressable style={styles.popoverRow} onPress={() => { setOptionsOpen(false); setLanguageOpen(true); }}>
+                  <Text style={styles.popoverIcon}>◎</Text>
+                  <Text style={styles.popoverText}>{t('language')}</Text>
+                  <Text style={styles.popoverChevron}>›</Text>
+                </Pressable>
+              ) : null}
+              {state.settings.sound_enabled !== undefined ? (
+                <Pressable style={styles.popoverRow} onPress={() => client.setSoundEnabled(!state.settings.sound_enabled)}>
+                  <Text style={styles.popoverIcon}>◖</Text>
+                  <Text style={styles.popoverText}>{t('sounds')}</Text>
+                  <View style={[styles.switchTrack, state.settings.sound_enabled && styles.switchTrackActive]}>
+                    <View style={[styles.switchThumb, state.settings.sound_enabled && styles.switchThumbActive]} />
+                  </View>
+                </Pressable>
+              ) : null}
+            </View>
+          </>
+        ) : null}
       </View>
+    );
+  }
 
-      {!contactConfirmed ? (
-        <ScrollView contentContainerStyle={styles.contactStage} keyboardShouldPersistTaps="handled">
+  function renderContactStage() {
+    return (
+      <ScrollView style={styles.contactStageScroll} contentContainerStyle={styles.contactStage} keyboardShouldPersistTaps="handled">
+        <View style={styles.contactCard}>
           <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" />
@@ -336,203 +494,335 @@ function RegantisChat(props) {
           <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>}
-          />
+        </View>
+      </ScrollView>
+    );
+  }
 
-          {state.remoteTyping ? <View style={styles.typingRow}><Text style={styles.typingText}>{state.remoteTyping === 'chatbot' ? t('chatbot_typing') : t('typing')}</Text></View> : null}
+  function renderComposer() {
+    if (!active) {
+      return (
+        <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>
+        </View>
+      );
+    }
 
-          {!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>
+    return (
+      <View style={styles.composerArea}>
+        {String(c.routing_mode || '') === 'chatbot' ? <Text style={styles.aiCompliance}>ⓘ {t('ai_compliance')}</Text> : null}
+
+        {attachOpen ? (
+          <View style={styles.attachmentMenu}>
+            <Pressable style={styles.attachmentAction} onPress={() => pick('image')}><Text style={styles.attachmentActionIcon}>▣</Text><Text style={styles.attachmentActionText}>{t('attach_image')}</Text></Pressable>
+            <Pressable style={styles.attachmentAction} onPress={() => pick('file')}><Text style={styles.attachmentActionIcon}>↥</Text><Text style={styles.attachmentActionText}>{t('attach_file')}</Text></Pressable>
+            <Pressable style={styles.attachmentAction} onPress={() => pick('screenshot')}><Text style={styles.attachmentActionIcon}>▧</Text><Text style={styles.attachmentActionText}>{t('attach_screenshot')}</Text></Pressable>
+          </View>
+        ) : null}
+
+        {emojiOpen ? (
+          <View style={styles.emojiPicker}>
+            {EMOJIS.map(emoji => (
+              <Pressable key={emoji} style={styles.emojiButton} onPress={() => { setDraft(value => value + emoji); setEmojiOpen(false); }}>
+                <Text style={styles.emojiText}>{emoji}</Text>
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+
+        <View style={styles.composer}>
+          <Pressable disabled={!canUpload || state.uploading} style={[styles.composerButton, (!canUpload || state.uploading) && styles.disabled]} onPress={() => { setEmojiOpen(false); setAttachOpen(value => !value); }}>
+            <Text style={styles.composerPlus}>＋</Text>
+          </Pressable>
+          <Pressable style={styles.composerButton} onPress={() => { setAttachOpen(false); setEmojiOpen(value => !value); }}>
+            <Text style={styles.composerEmoji}>☺</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>
+      </View>
+    );
+  }
+
+  function renderChat() {
+    return (
+      <View style={styles.screen}>
+        {renderChatHeader()}
+        <View style={styles.chatContent}>
+          {!contactConfirmed ? renderContactStage() : (
+            <>
+              <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(() => {})}
+                ListHeaderComponent={state.hasMore ? <View style={styles.historyLoader}><ActivityIndicator size="small" color={palette.primary} /></View> : null}
+                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}
+              {renderComposer()}
+            </>
           )}
-        </>
-      )}
+          {renderPoweredBy()}
+        </View>
+      </View>
+    );
+  }
 
-      {!state.settings.white_label ? <View style={styles.poweredBy}><Text style={styles.poweredByText}>{t('powered_by')} Regantis</Text></View> : null}
+  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>;
+  }
 
-      <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>
+  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>
+    );
+  }
 
-      <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}
+  if (state.banned) return <View style={[styles.root, styles.center, style]}><Text style={styles.errorText}>{t('error')}</Text></View>;
+
+  return (
+    <KeyboardAvoidingView style={[styles.root, style]} behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={props.keyboardVerticalOffset || 0}>
+      {activeView === 'home' ? renderHome() : renderChat()}
+
+      <Modal transparent visible={languageOpen} animationType="fade" onRequestClose={() => setLanguageOpen(false)}>
+        <Pressable style={styles.modalBackdrop} onPress={() => setLanguageOpen(false)}>
+          <View style={styles.sheet} onStartShouldSetResponder={() => true}>
+            <Text style={styles.sheetTitle}>{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>
         </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>
+        <View style={styles.modalBackdropTop}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalIcon}><Text style={styles.modalIconText}>↪</Text></View>
+            <Text style={styles.modalText}>{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>
+        <View style={styles.modalBackdropTop}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalIcon}><Text style={styles.modalIconText}>✉</Text></View>
+            <Text style={styles.modalText}>{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}
+            <Pressable style={styles.primaryButton} onPress={sendTranscript}><Text style={styles.primaryButtonText}>{t('send_transcript')}</Text></Pressable>
+          </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>
+        <View style={styles.modalBackdropTop}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalTitle}>{state.settings.operator_name || t('support_name')}</Text>
+            <Text style={styles.ratingLabel}>{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.primaryButtonCompact} onPress={sendRatingComment}><Text style={styles.primaryButtonText}>{t('rating_comment_send')}</Text></Pressable>
+            </View>
+          </View>
+        </View>
       </Modal>
     </KeyboardAvoidingView>
   );
 }
 
 function buildStyles(p) {
+  const shadow = {
+    shadowColor: '#172236',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: p.dark ? 0.24 : 0.10,
+    shadowRadius: 18,
+    elevation: 5,
+  };
+
   return StyleSheet.create({
-    root: { flex: 1, backgroundColor: p.background },
+    root: { flex: 1, minWidth: 0, minHeight: 0, overflow: 'hidden', backgroundColor: p.background },
+    screen: { flex: 1, minWidth: 0, minHeight: 0, 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 },
+    loadingText: { color: p.muted, fontSize: 13 },
+    errorText: { color: p.text, fontSize: 14, textAlign: 'center', marginBottom: 12 },
+
+    homeHero: { position: 'relative', overflow: 'hidden', paddingHorizontal: 18, paddingTop: 24, paddingBottom: 28, backgroundColor: p.heroBase },
+    heroDecorationA: { position: 'absolute', width: 240, height: 240, borderRadius: 120, top: -138, left: -74, backgroundColor: p.heroBlobA },
+    heroDecorationB: { position: 'absolute', width: 230, height: 230, borderRadius: 115, top: 80, right: -92, backgroundColor: p.heroBlobB },
+    heroDecorationC: { position: 'absolute', width: 210, height: 210, borderRadius: 105, right: -82, bottom: -120, backgroundColor: p.heroBlobC },
+    homeTop: { minHeight: 42, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 },
+    homeTopPlaceholder: { width: 32, height: 32 },
+    logoImage: { backgroundColor: p.surface },
+    logoFallback: { backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center', shadowColor: p.primary, shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.22, shadowRadius: 10, elevation: 4 },
+    logoFallbackText: { color: '#FFFFFF', fontWeight: '800' },
+    iconButton: { width: 38, height: 38, borderRadius: 19, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.82)', alignItems: 'center', justifyContent: 'center', zIndex: 3 },
+    minimizeIcon: { color: p.text, fontSize: 25, lineHeight: 27, fontWeight: '400', marginTop: -3 },
+    homeTitle: { marginTop: 24, zIndex: 2 },
+    homeTitleLine: { color: p.text, fontSize: 34, lineHeight: 36, letterSpacing: -1.1, fontWeight: '800' },
+    homeCard: { marginTop: 22, padding: 14, borderWidth: 1, borderColor: p.border, borderRadius: 18, backgroundColor: p.dark ? p.surface : 'rgba(255,255,255,0.96)', zIndex: 2, ...shadow },
+    homeCardTop: { minHeight: 38, flexDirection: 'row', alignItems: 'center' },
+    homeAvatar: { width: 38, height: 38, borderRadius: 19, marginRight: 10, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    homeAvatarText: { color: '#FFFFFF', fontSize: 14, fontWeight: '700' },
+    homeCardCopy: { flex: 1, minWidth: 0 },
+    homeCardAgent: { color: p.muted, fontSize: 11, lineHeight: 15, fontWeight: '700' },
+    homeCardPreview: { marginTop: 3, color: p.text, fontSize: 13, lineHeight: 18 },
+    homeCardAction: { minHeight: 41, marginTop: 12, paddingHorizontal: 12, borderRadius: 11, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    homeCardActionText: { color: '#FFFFFF', fontSize: 13, lineHeight: 18, fontWeight: '700', textAlign: 'center' },
+    homeSpacer: { flex: 1, minHeight: 20, backgroundColor: p.background },
+    bottomNav: { minHeight: 64, flexDirection: 'row', gap: 6, marginHorizontal: 16, marginBottom: 10, padding: 7, borderWidth: 1, borderColor: p.border, borderRadius: 18, backgroundColor: p.surface, ...shadow },
+    bottomNavButton: { flex: 1, minHeight: 48, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+    bottomNavButtonActive: { backgroundColor: p.dark ? 'rgba(255,255,255,0.04)' : '#FAFBFC' },
+    bottomNavIcon: { color: p.muted, fontSize: 22, lineHeight: 23 },
+    bottomNavIconActive: { color: p.text },
+    bottomNavText: { marginTop: 2, color: p.muted, fontSize: 10, lineHeight: 12 },
+    bottomNavTextActive: { color: p.text },
+
+    chatHeader: { position: 'relative', zIndex: 20, minHeight: 64, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: p.border, backgroundColor: p.header, overflow: 'visible' },
+    chatHeaderLeft: { position: 'absolute', zIndex: 30, left: 12, top: 16, flexDirection: 'row', alignItems: 'center', gap: 5 },
+    chatHeaderRight: { position: 'absolute', zIndex: 30, right: 12, top: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 5 },
+    headerIconButton: { width: 32, height: 32, borderRadius: 16, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : '#FFFFFF', alignItems: 'center', justifyContent: 'center' },
+    backIcon: { color: p.text, fontSize: 31, lineHeight: 31, marginTop: -4 },
+    menuIcon: { color: p.text, fontSize: 17, lineHeight: 18, letterSpacing: -1.5, fontWeight: '700', marginTop: -4 },
+    closeIcon: { color: p.text, fontSize: 23, lineHeight: 24, marginTop: -2 },
+    agentTrigger: { position: 'absolute', zIndex: 18, top: 0, left: '50%', width: 218, height: 48, marginLeft: -109, borderWidth: 1, borderTopWidth: 0, borderColor: p.border, borderBottomLeftRadius: 24, borderBottomRightRadius: 24, backgroundColor: p.surface, alignItems: 'center', justifyContent: 'center', shadowColor: '#172236', shadowOffset: { width: 0, height: 5 }, shadowOpacity: p.dark ? 0.18 : 0.07, shadowRadius: 8, elevation: 2 },
+    agentVisual: { height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+    agentAvatar: { width: 28, height: 28, borderRadius: 14, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    agentAvatarOverlap: { marginLeft: -8, borderWidth: 2, borderColor: p.surface },
+    agentAvatarText: { color: '#FFFFFF', fontSize: 11, fontWeight: '700' },
+    agentFallback: { width: 28, height: 28, borderRadius: 14, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    agentFallbackText: { color: p.muted, fontSize: 12 },
+    inlineDismiss: { position: 'absolute', zIndex: 23, top: 0, left: -12, right: -12, bottom: -1000 },
+    optionsPopover: { position: 'absolute', zIndex: 40, top: 52, left: 46, width: 230, padding: 7, borderWidth: 1, borderColor: p.border, borderRadius: 14, backgroundColor: p.surface, ...shadow },
+    popoverRow: { minHeight: 43, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9, borderRadius: 9 },
+    popoverIcon: { width: 26, color: p.text, fontSize: 16 },
+    popoverText: { flex: 1, color: p.text, fontSize: 13 },
+    popoverChevron: { color: p.muted, fontSize: 20 },
+    switchTrack: { width: 34, height: 20, borderRadius: 10, padding: 2, backgroundColor: p.dark ? '#3D434B' : '#D7DBE1' },
+    switchTrackActive: { backgroundColor: '#24935B' },
+    switchThumb: { width: 16, height: 16, borderRadius: 8, backgroundColor: '#FFFFFF' },
+    switchThumbActive: { transform: [{ translateX: 14 }] },
+
+    chatContent: { flex: 1, minHeight: 0, backgroundColor: p.background },
+    contactStageScroll: { flex: 1 },
+    contactStage: { paddingHorizontal: 16, paddingTop: 18, paddingBottom: 24 },
+    contactCard: { padding: 18, borderWidth: 1, borderColor: p.border, borderRadius: 18, backgroundColor: p.surface, ...shadow },
+    contactTitle: { color: p.text, fontSize: 14, lineHeight: 20, marginBottom: 13 },
+    label: { color: p.text, fontSize: 12, lineHeight: 16, marginBottom: 5, marginTop: 9 },
+    input: { minHeight: 42, borderWidth: 1, borderColor: p.dark ? '#555B64' : '#B7BDC7', borderRadius: 8, backgroundColor: p.surface, color: p.text, paddingHorizontal: 11, paddingVertical: 9, fontSize: 13 },
+    inlineError: { color: '#B42318', fontSize: 11, lineHeight: 15, marginTop: 8 },
+    primaryButton: { minHeight: 40, borderRadius: 9, backgroundColor: p.primary, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', marginTop: 12 },
+    primaryButtonCompact: { flex: 1, minHeight: 40, borderRadius: 9, backgroundColor: p.primary, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center' },
+    primaryButtonText: { color: '#FFFFFF', fontSize: 13, fontWeight: '700', textAlign: 'center' },
+    secondaryButton: { flex: 1, minHeight: 40, borderWidth: 1, borderColor: p.dark ? '#555B64' : '#C7CCD4', borderRadius: 9, backgroundColor: p.surface, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center' },
+    secondaryButtonText: { color: p.text, fontSize: 13, fontWeight: '700', textAlign: 'center' },
+    dangerButton: { flex: 1, minHeight: 40, borderRadius: 9, backgroundColor: p.danger, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center' },
     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 },
+
+    messageList: { flex: 1, minHeight: 0 },
+    messageListContent: { paddingHorizontal: 16, paddingTop: 18, paddingBottom: 12, flexGrow: 1 },
+    historyLoader: { minHeight: 34, alignItems: 'center', justifyContent: 'center', paddingBottom: 10 },
+    emptyState: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 30, paddingVertical: 20 },
+    emptyText: { maxWidth: 260, paddingHorizontal: 16, paddingVertical: 14, borderRadius: 15, backgroundColor: p.dark ? p.surface : 'rgba(255,255,255,0.84)', color: p.muted, fontSize: 13, lineHeight: 19, textAlign: 'center' },
+    messageRow: { width: '100%', marginBottom: 11, flexDirection: 'row' },
+    messageRowLeft: { justifyContent: 'flex-start', paddingRight: 52 },
+    messageRowRight: { justifyContent: 'flex-end', paddingLeft: 52 },
+    bubble: { maxWidth: '100%', paddingHorizontal: 12, paddingTop: 10, paddingBottom: 8, borderRadius: 15, shadowColor: '#172236', shadowOffset: { width: 0, height: 4 }, shadowOpacity: p.dark ? 0.16 : 0.07, shadowRadius: 7, elevation: 2 },
     customerBubble: { backgroundColor: p.customerBubble, borderBottomRightRadius: 5 },
-    agentBubble: { backgroundColor: p.agentBubble, borderBottomLeftRadius: 5, borderWidth: StyleSheet.hairlineWidth, borderColor: p.border },
+    agentBubble: { backgroundColor: p.agentBubble, borderBottomLeftRadius: 5 },
     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' },
+    messageText: { fontSize: 14, lineHeight: 20 },
+    messageMeta: { minHeight: 13, marginTop: 5, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 },
+    messageSender: { flex: 1, fontSize: 10, lineHeight: 12, fontWeight: '600', opacity: 0.62 },
+    timeText: { fontSize: 10, lineHeight: 12, opacity: 0.62 },
     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 },
+    systemText: { color: p.muted, fontSize: 11, lineHeight: 15, textAlign: 'center' },
+    attachmentImage: { width: 220, maxWidth: '100%', height: 180, borderRadius: 10, marginBottom: 4, backgroundColor: p.surfaceAlt },
+    fileAttachment: { paddingVertical: 4 },
+    fileAttachmentText: { fontSize: 13, fontWeight: '600' },
+    typingRow: { flex: 0, paddingHorizontal: 18, paddingTop: 8, paddingBottom: 7 },
+    typingText: { color: p.muted, fontSize: 11, lineHeight: 15 },
+
+    closedStage: { flex: 0, paddingHorizontal: 12, paddingTop: 10, paddingBottom: 12, borderTopWidth: 1, borderTopColor: p.border, backgroundColor: p.background },
+    closedText: { color: p.muted, fontSize: 11, lineHeight: 15, textAlign: 'center' },
+    composerArea: { position: 'relative', flex: 0, paddingHorizontal: 12, paddingTop: 10, paddingBottom: 12, backgroundColor: p.background },
+    composer: { minHeight: 54, flexDirection: 'row', alignItems: 'flex-end', gap: 8, paddingLeft: 13, paddingRight: 7, paddingVertical: 7, borderWidth: 1, borderColor: p.border, borderRadius: 18, backgroundColor: p.surface, shadowColor: '#172236', shadowOffset: { width: 0, height: 8 }, shadowOpacity: p.dark ? 0.22 : 0.10, shadowRadius: 12, elevation: 4 },
+    composerButton: { width: 34, height: 38, borderRadius: 19, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center' },
+    composerPlus: { color: p.text, fontSize: 25, lineHeight: 27, fontWeight: '300', marginTop: -2 },
+    composerEmoji: { color: p.text, fontSize: 23, lineHeight: 25 },
+    composerInput: { flex: 1, minWidth: 0, minHeight: 38, maxHeight: 110, backgroundColor: 'transparent', color: p.text, paddingHorizontal: 0, paddingTop: 9, paddingBottom: 7, fontSize: 14, lineHeight: 19, textAlignVertical: 'top' },
+    sendButton: { width: 38, height: 38, borderRadius: 19, backgroundColor: p.primary, alignItems: 'center', justifyContent: 'center' },
+    sendIcon: { color: '#FFFFFF', fontSize: 17, lineHeight: 18, transform: [{ rotate: '-3deg' }] },
+    aiCompliance: { color: p.muted, fontSize: 9, lineHeight: 13, textAlign: 'center', paddingHorizontal: 5, paddingBottom: 8 },
+    attachmentMenu: { position: 'absolute', zIndex: 12, left: 12, bottom: 72, width: 210, padding: 7, borderWidth: 1, borderColor: p.border, borderRadius: 14, backgroundColor: p.surface, ...shadow },
+    attachmentAction: { minHeight: 40, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, borderRadius: 9 },
+    attachmentActionIcon: { width: 26, color: p.text, fontSize: 15 },
+    attachmentActionText: { flex: 1, color: p.text, fontSize: 13 },
+    emojiPicker: { position: 'absolute', zIndex: 12, left: 12, right: 12, bottom: 72, flexDirection: 'row', flexWrap: 'wrap', gap: 5, padding: 10, borderWidth: 1, borderColor: p.border, borderRadius: 16, backgroundColor: p.surface, ...shadow },
+    emojiButton: { width: '11%', aspectRatio: 1, minHeight: 34, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
+    emojiText: { fontSize: 20, lineHeight: 22 },
+
+    poweredBy: { flex: 0, minHeight: 17, alignItems: 'center', justifyContent: 'center', paddingBottom: 5, backgroundColor: p.background },
+    poweredByText: { color: '#9398A2', fontSize: 9, lineHeight: 11, textAlign: 'center' },
+    poweredByBrand: { color: p.text, fontWeight: '700' },
+
+    modalBackdrop: { flex: 1, backgroundColor: 'rgba(16,20,27,0.55)', justifyContent: 'flex-end', padding: 16 },
+    modalBackdropTop: { flex: 1, backgroundColor: 'rgba(16,20,27,0.55)', justifyContent: 'flex-start', padding: 16 },
+    modalCard: { width: '100%', maxHeight: '82%', marginTop: 34, paddingHorizontal: 16, paddingTop: 24, paddingBottom: 16, borderRadius: 14, backgroundColor: p.surface, ...shadow },
+    modalIcon: { width: 48, height: 48, borderRadius: 24, alignSelf: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: p.surfaceAlt },
+    modalIconText: { color: p.text, fontSize: 22 },
+    modalText: { marginHorizontal: 4, marginVertical: 16, color: p.text, fontSize: 14, lineHeight: 20, textAlign: 'center' },
+    modalTitle: { color: p.text, fontSize: 16, fontWeight: '700', textAlign: 'center' },
+    modalActions: { flexDirection: 'row', gap: 8, marginTop: 12 },
+    modalStatus: { color: p.muted, fontSize: 11, lineHeight: 15, marginTop: 9, textAlign: 'center' },
+    sheet: { maxHeight: '72%', borderRadius: 18, paddingHorizontal: 14, paddingTop: 14, paddingBottom: 8, backgroundColor: p.surface, ...shadow },
+    sheetTitle: { color: p.text, fontSize: 16, fontWeight: '700', marginBottom: 8 },
+    languageList: { maxHeight: 360 },
+    languageRow: { minHeight: 46, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 8, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: p.border },
+    optionText: { flex: 1, 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 },
+    ratingLabel: { color: p.muted, fontSize: 11, lineHeight: 15, textAlign: 'center', marginTop: 3 },
+    ratingButtons: { flexDirection: 'row', gap: 12, justifyContent: 'center', marginVertical: 12 },
+    ratingButton: { width: 60, height: 48, borderWidth: 1, borderColor: p.border, borderRadius: 12, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    ratingIcon: { fontSize: 24 },
+    commentInput: { minHeight: 72, textAlignVertical: 'top', marginTop: 6 },
   });
 }
 

package/src/defaults.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   DEFAULT_SERVER_URL: 'https://www.crm.regantis.technology',
-  SDK_VERSION: '0.1.1',
+  SDK_VERSION: '0.1.2',
   DEFAULT_SETTINGS: {
     operator_name: 'Operator',
     use_profile_names: 0,