@regantis-sdk/react-native-chat 0.1.3 → 0.1.5

package/README.md

@@ -34,7 +34,7 @@ To use the built-in camera action, add a camera usage description to the host ap
 <string>Take photos to attach to support chat messages.</string>
 ```
 
-Android opens the system camera app and does not require an additional app permission for this SDK flow.
+Android declares `CAMERA` in the SDK manifest and requests the permission only when the visitor chooses **Take photo**. If permission was denied permanently, the SDK offers a shortcut to the app settings.
 
 ## Basic usage
 
@@ -123,19 +123,20 @@ Server configuration remains the default. Per-app overrides are optional:
 - WebSocket realtime updates with HTTP polling fallback
 - typing state
 - customer-side translation selector
-- image gallery, file picker and direct camera capture
-- in-chat image lightbox with pinch zoom and pan
-- native incoming-message sound
+- image gallery, file picker and direct camera capture with runtime permission handling
+- in-chat image lightbox with pinch zoom, pan, reset and +/- zoom controls
+- native incoming-message sound with persisted user preference
 - close/reopen conversation
 - rating and rating comment
 - transcript email flow
 - read state and unread callback
 - light/dark mode
-- basic/advanced color configuration
-- logo, agent photo toggle and white-label behavior
+- basic/advanced color configuration including background opacity
+- custom logo with fallback, agent photo toggle, profile-name display and white-label behavior
+- mobile welcome screen with the same soft blurred-glow treatment as the web widget
 - CRM-managed localized UI texts
 
-The web-only launcher settings such as desktop/mobile corner placement and minimized bubble/bar mode are still returned in the settings object for configuration parity, but they do not change a full-page React Native component because there is no browser launcher to position.
+The web-only launcher settings such as desktop/mobile corner placement, launcher visibility and minimized bubble/bar mode are still returned in the settings object for configuration parity, but they do not change a full-page React Native component because there is no browser launcher to position. `before_you_go_enabled` is also intentionally not used in native because that feature is a desktop mouse-exit prompt in the web loader.
 
 ## Headless client
 

package/RegantisReactNativeChat.podspec

@@ -12,6 +12,6 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => "15.1" }
   s.source       = { :git => "https://github.com/regantis/react-native-chat.git", :tag => "#{s.version}" }
   s.source_files = "ios/**/*.{h,m,mm}"
-  s.frameworks   = "AudioToolbox", "UniformTypeIdentifiers"
+  s.frameworks   = "AudioToolbox", "AVFoundation", "UniformTypeIdentifiers"
   s.dependency "React-Core"
 end

package/android/src/main/AndroidManifest.xml

@@ -1,4 +1,13 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
+
+    <queries>
+        <intent>
+            <action android:name="android.media.action.IMAGE_CAPTURE" />
+        </intent>
+    </queries>
+
     <application>
         <provider
             android:name="androidx.core.content.FileProvider"

package/android/src/main/java/technology/regantis/chat/RegantisChatNativeModule.java

@@ -1,10 +1,12 @@
 package technology.regantis.chat;
 
+import android.Manifest;
 import android.app.Activity;
 import android.content.ClipData;
 import android.content.Context;
 import android.content.Intent;
 import android.content.SharedPreferences;
+import android.content.pm.PackageManager;
 import android.content.pm.ResolveInfo;
 import android.database.Cursor;
 import android.media.Ringtone;
@@ -16,6 +18,7 @@ import android.webkit.MimeTypeMap;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.content.ContextCompat;
 import androidx.core.content.FileProvider;
 
 import com.facebook.react.bridge.ActivityEventListener;
@@ -26,6 +29,8 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.PermissionAwareActivity;
+import com.facebook.react.modules.core.PermissionListener;
 
 import java.io.File;
 import java.util.List;
@@ -35,10 +40,12 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
     private static final String STORAGE_NAME = "regantis_react_native_chat";
     private static final int PICK_ATTACHMENT_REQUEST = 17841;
     private static final int TAKE_PHOTO_REQUEST = 17842;
+    private static final int CAMERA_PERMISSION_REQUEST = 17843;
 
     private final ReactApplicationContext reactContext;
     private Promise pickerPromise;
     private Promise cameraPromise;
+    private Promise cameraPermissionPromise;
     private File cameraFile;
     private Uri cameraOutputUri;
 
@@ -178,18 +185,58 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
             promise.reject("NO_ACTIVITY", "No active Android Activity");
             return;
         }
-        if (cameraPromise != null || pickerPromise != null) {
+        if (cameraPromise != null || cameraPermissionPromise != null || pickerPromise != null) {
             promise.reject("PICKER_BUSY", "An attachment picker is already open");
             return;
         }
 
-        try {
-            Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
-            if (intent.resolveActivity(reactContext.getPackageManager()) == null) {
-                promise.reject("CAMERA_UNAVAILABLE", "No camera application is available");
+        if (ContextCompat.checkSelfPermission(reactContext, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
+            if (!(activity instanceof PermissionAwareActivity)) {
+                promise.reject("CAMERA_PERMISSION_UNAVAILABLE", "The current Activity cannot request camera permission");
                 return;
             }
 
+            cameraPermissionPromise = promise;
+            PermissionAwareActivity permissionActivity = (PermissionAwareActivity) activity;
+            permissionActivity.requestPermissions(
+                new String[]{Manifest.permission.CAMERA},
+                CAMERA_PERMISSION_REQUEST,
+                new PermissionListener() {
+                    @Override
+                    public boolean onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
+                        if (requestCode != CAMERA_PERMISSION_REQUEST) return false;
+
+                        Promise pendingPromise = cameraPermissionPromise;
+                        cameraPermissionPromise = null;
+                        if (pendingPromise == null) return true;
+
+                        boolean granted = grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED;
+                        if (!granted) {
+                            pendingPromise.reject("CAMERA_PERMISSION_DENIED", "Camera permission is required to take a photo");
+                            return true;
+                        }
+
+                        Activity currentActivity = getCurrentActivity();
+                        if (currentActivity == null) {
+                            pendingPromise.reject("NO_ACTIVITY", "No active Android Activity");
+                            return true;
+                        }
+
+                        launchCamera(currentActivity, pendingPromise);
+                        return true;
+                    }
+                }
+            );
+            return;
+        }
+
+        launchCamera(activity, promise);
+    }
+
+    private void launchCamera(Activity activity, Promise promise) {
+        try {
+            Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
+
             File directory = new File(reactContext.getCacheDir(), "regantis-chat/camera");
             if (!directory.exists() && !directory.mkdirs()) {
                 promise.reject("CAMERA_FAILED", "Unable to create camera directory");
@@ -217,6 +264,12 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
             cameraFile = file;
             cameraOutputUri = outputUri;
             activity.startActivityForResult(intent, TAKE_PHOTO_REQUEST);
+        } catch (android.content.ActivityNotFoundException error) {
+            cameraPromise = null;
+            if (cameraFile != null) cameraFile.delete();
+            cameraFile = null;
+            cameraOutputUri = null;
+            promise.reject("CAMERA_UNAVAILABLE", "No camera application is available", error);
         } catch (Exception error) {
             cameraPromise = null;
             if (cameraFile != null) cameraFile.delete();
@@ -233,7 +286,7 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
             promise.reject("NO_ACTIVITY", "No active Android Activity");
             return;
         }
-        if (pickerPromise != null || cameraPromise != null) {
+        if (pickerPromise != null || cameraPromise != null || cameraPermissionPromise != null) {
             promise.reject("PICKER_BUSY", "An attachment picker is already open");
             return;
         }

package/ios/RegantisChatNative.m

@@ -1,5 +1,6 @@
 #import "RegantisChatNative.h"
 #import <AudioToolbox/AudioToolbox.h>
+#import <AVFoundation/AVFoundation.h>
 #import <React/RCTUtils.h>
 #import <UniformTypeIdentifiers/UniformTypeIdentifiers.h>
 
@@ -66,35 +67,65 @@ RCT_EXPORT_METHOD(playIncomingSound)
   AudioServicesPlaySystemSound(1007);
 }
 
+- (void)presentCameraWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject
+{
+  if (self.pickerResolve != nil) {
+    reject(@"PICKER_BUSY", @"An attachment picker is already open", nil);
+    return;
+  }
+
+  if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
+    reject(@"CAMERA_UNAVAILABLE", @"Camera is not available on this device", nil);
+    return;
+  }
+
+  UIViewController *controller = RCTPresentedViewController();
+  if (controller == nil) {
+    reject(@"NO_VIEW_CONTROLLER", @"No active iOS view controller", nil);
+    return;
+  }
+
+  UIImagePickerController *picker = [[UIImagePickerController alloc] init];
+  picker.sourceType = UIImagePickerControllerSourceTypeCamera;
+  picker.delegate = self;
+  picker.allowsEditing = NO;
+
+  self.pickerResolve = resolve;
+  self.pickerReject = reject;
+  [controller presentViewController:picker animated:YES completion:nil];
+}
+
 RCT_REMAP_METHOD(takePhoto,
                  takePhotoWithResolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
 {
   dispatch_async(dispatch_get_main_queue(), ^{
-    if (self.pickerResolve != nil) {
-      reject(@"PICKER_BUSY", @"An attachment picker is already open", nil);
+    NSString *usageDescription = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"NSCameraUsageDescription"];
+    if (![usageDescription isKindOfClass:[NSString class]] || usageDescription.length == 0) {
+      reject(@"CAMERA_USAGE_DESCRIPTION_MISSING", @"NSCameraUsageDescription is required in the host app Info.plist", nil);
       return;
     }
 
-    if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
-      reject(@"CAMERA_UNAVAILABLE", @"Camera is not available on this device", nil);
+    AVAuthorizationStatus status = [AVCaptureDevice authorizationStatusForMediaType:AVMediaTypeVideo];
+    if (status == AVAuthorizationStatusAuthorized) {
+      [self presentCameraWithResolver:resolve rejecter:reject];
       return;
     }
 
-    UIViewController *controller = RCTPresentedViewController();
-    if (controller == nil) {
-      reject(@"NO_VIEW_CONTROLLER", @"No active iOS view controller", nil);
+    if (status == AVAuthorizationStatusDenied || status == AVAuthorizationStatusRestricted) {
+      reject(@"CAMERA_PERMISSION_DENIED", @"Camera permission is required to take a photo", nil);
       return;
     }
 
-    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
-    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
-    picker.delegate = self;
-    picker.allowsEditing = NO;
-
-    self.pickerResolve = resolve;
-    self.pickerReject = reject;
-    [controller presentViewController:picker animated:YES completion:nil];
+    [AVCaptureDevice requestAccessForMediaType:AVMediaTypeVideo completionHandler:^(BOOL granted) {
+      dispatch_async(dispatch_get_main_queue(), ^{
+        if (!granted) {
+          reject(@"CAMERA_PERMISSION_DENIED", @"Camera permission is required to take a photo", nil);
+          return;
+        }
+        [self presentCameraWithResolver:resolve rejecter:reject];
+      });
+    }];
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regantis-sdk/react-native-chat",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Regantis customer support chat SDK for React Native Android and iOS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -11,6 +11,7 @@
     "src",
     "android",
     "ios",
+    "assets",
     "RegantisReactNativeChat.podspec",
     "README.md"
   ],

package/src/RegantisChat.js

@@ -13,7 +13,9 @@ const {
   PanResponder,
   Platform,
   Pressable,
+  SafeAreaView,
   ScrollView,
+  StatusBar,
   StyleSheet,
   Text,
   TextInput,
@@ -21,16 +23,21 @@ const {
 } = require('react-native');
 const { RegantisChatClient } = require('./client');
 
+const REGANTIS_LOGO_BLACK = require('../assets/regantis_logo_black.png');
+const REGANTIS_LOGO_WHITE = require('../assets/regantis_logo_white.png');
+const WELCOME_BACKGROUND_LIGHT = require('../assets/welcome_background_light.png');
+const WELCOME_BACKGROUND_DARK = require('../assets/welcome_background_dark.png');
+
 const EMOJIS = ['🙂', '😁', '😂', '😊', '😍', '😐', '🤔', '😞', '😢', '😭', '🎉', '❤️', '👌', '👍', '👎', '🙏'];
 
 
 const LOCAL_TEXTS = {
-  en: { attach_camera: 'Take photo', lightbox_close: 'Close', lightbox_reset: 'Reset zoom', back: 'Back' },
-  ro: { attach_camera: 'Fă o fotografie', lightbox_close: 'Închide', lightbox_reset: 'Resetează zoom', back: 'Înapoi' },
-  de: { attach_camera: 'Foto aufnehmen', lightbox_close: 'Schließen', lightbox_reset: 'Zoom zurücksetzen', back: 'Zurück' },
-  fr: { attach_camera: 'Prendre une photo', lightbox_close: 'Fermer', lightbox_reset: 'Réinitialiser le zoom', back: 'Retour' },
-  es: { attach_camera: 'Tomar una foto', lightbox_close: 'Cerrar', lightbox_reset: 'Restablecer zoom', back: 'Atrás' },
-  it: { attach_camera: 'Scatta una foto', lightbox_close: 'Chiudi', lightbox_reset: 'Reimposta zoom', back: 'Indietro' },
+  en: { attach_camera: 'Take photo', lightbox_close: 'Close', lightbox_reset: 'Reset zoom', lightbox_zoom_in: 'Zoom in', lightbox_zoom_out: 'Zoom out', back: 'Back', camera_permission_denied: 'Camera permission is required to take a photo.', camera_unavailable: 'Camera is not available on this device.', camera_setup_required: 'Camera access is not configured for this app.', open_settings: 'Open settings' },
+  ro: { attach_camera: 'Fă o fotografie', lightbox_close: 'Închide', lightbox_reset: 'Resetează zoom', lightbox_zoom_in: 'Mărește', lightbox_zoom_out: 'Micșorează', back: 'Înapoi', camera_permission_denied: 'Permisiunea pentru cameră este necesară pentru a face o fotografie.', camera_unavailable: 'Camera nu este disponibilă pe acest dispozitiv.', camera_setup_required: 'Accesul la cameră nu este configurat pentru această aplicație.', open_settings: 'Deschide setările' },
+  de: { attach_camera: 'Foto aufnehmen', lightbox_close: 'Schließen', lightbox_reset: 'Zoom zurücksetzen', lightbox_zoom_in: 'Vergrößern', lightbox_zoom_out: 'Verkleinern', back: 'Zurück', camera_permission_denied: 'Die Kameraberechtigung ist erforderlich, um ein Foto aufzunehmen.', camera_unavailable: 'Die Kamera ist auf diesem Gerät nicht verfügbar.', camera_setup_required: 'Der Kamerazugriff ist für diese App nicht konfiguriert.', open_settings: 'Einstellungen öffnen' },
+  fr: { attach_camera: 'Prendre une photo', lightbox_close: 'Fermer', lightbox_reset: 'Réinitialiser le zoom', lightbox_zoom_in: 'Agrandir', lightbox_zoom_out: 'Réduire', back: 'Retour', camera_permission_denied: 'L’autorisation de la caméra est nécessaire pour prendre une photo.', camera_unavailable: 'La caméra n’est pas disponible sur cet appareil.', camera_setup_required: 'L’accès à la caméra n’est pas configuré pour cette application.', open_settings: 'Ouvrir les réglages' },
+  es: { attach_camera: 'Tomar una foto', lightbox_close: 'Cerrar', lightbox_reset: 'Restablecer zoom', lightbox_zoom_in: 'Acercar', lightbox_zoom_out: 'Alejar', back: 'Atrás', camera_permission_denied: 'Se requiere permiso de cámara para tomar una foto.', camera_unavailable: 'La cámara no está disponible en este dispositivo.', camera_setup_required: 'El acceso a la cámara no está configurado para esta aplicación.', open_settings: 'Abrir ajustes' },
+  it: { attach_camera: 'Scatta una foto', lightbox_close: 'Chiudi', lightbox_reset: 'Reimposta zoom', lightbox_zoom_in: 'Ingrandisci', lightbox_zoom_out: 'Riduci', back: 'Indietro', camera_permission_denied: 'È necessaria l’autorizzazione della fotocamera per scattare una foto.', camera_unavailable: 'La fotocamera non è disponibile su questo dispositivo.', camera_setup_required: 'L’accesso alla fotocamera non è configurato per questa app.', open_settings: 'Apri impostazioni' },
 };
 
 function localText(language, key) {
@@ -45,29 +52,54 @@ function touchDistance(touches) {
   return Math.sqrt(dx * dx + dy * dy);
 }
 
-function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel }) {
+function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel, zoomInLabel, zoomOutLabel }) {
   const scale = React.useRef(new Animated.Value(1)).current;
   const translateX = React.useRef(new Animated.Value(0)).current;
   const translateY = React.useRef(new Animated.Value(0)).current;
   const current = React.useRef({ scale: 1, x: 0, y: 0 });
   const gesture = React.useRef({ mode: '', distance: 0, scale: 1, x: 0, y: 0, startX: 0, startY: 0 });
 
-  const resetZoom = React.useCallback((animated = true) => {
-    current.current = { scale: 1, x: 0, y: 0 };
-    gesture.current.mode = '';
-    const values = [
-      Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 8, tension: 70 }),
-      Animated.spring(translateX, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 }),
-      Animated.spring(translateY, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 }),
+  const applyZoom = React.useCallback((value, animated = true) => {
+    const next = Math.max(1, Math.min(5, Number(value) || 1));
+    current.current.scale = next;
+
+    if (next <= 1.01) {
+      current.current.x = 0;
+      current.current.y = 0;
+    }
+
+    if (!animated) {
+      scale.setValue(next);
+      if (next <= 1.01) {
+        translateX.setValue(0);
+        translateY.setValue(0);
+      }
+      return;
+    }
+
+    const animations = [
+      Animated.spring(scale, { toValue: next, useNativeDriver: true, friction: 8, tension: 70 }),
     ];
-    if (animated) Animated.parallel(values).start();
-    else {
-      scale.setValue(1);
-      translateX.setValue(0);
-      translateY.setValue(0);
+
+    if (next <= 1.01) {
+      animations.push(
+        Animated.spring(translateX, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 }),
+        Animated.spring(translateY, { toValue: 0, useNativeDriver: true, friction: 8, tension: 70 })
+      );
     }
+
+    Animated.parallel(animations).start();
   }, [scale, translateX, translateY]);
 
+  const resetZoom = React.useCallback((animated = true) => {
+    gesture.current.mode = '';
+    applyZoom(1, animated);
+  }, [applyZoom]);
+
+  const changeZoom = React.useCallback(delta => {
+    applyZoom(current.current.scale + delta, true);
+  }, [applyZoom]);
+
   React.useEffect(() => {
     if (visible) resetZoom(false);
   }, [visible, uri, resetZoom]);
@@ -151,14 +183,30 @@ function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel }) {
   return (
     <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose} statusBarTranslucent>
       <View style={lightboxStyles.root}>
-        <View style={lightboxStyles.toolbar}>
-          <Pressable accessibilityRole="button" accessibilityLabel={closeLabel} style={lightboxStyles.toolbarButton} onPress={onClose}>
-            <Text style={lightboxStyles.closeIcon}>‹</Text>
-          </Pressable>
-          <Pressable accessibilityRole="button" accessibilityLabel={resetLabel} style={lightboxStyles.resetButton} onPress={() => resetZoom(true)}>
-            <Text style={lightboxStyles.resetText}>1:1</Text>
-          </Pressable>
-        </View>
+        <SafeAreaView
+          pointerEvents="box-none"
+          style={[
+            lightboxStyles.safeArea,
+            Platform.OS === 'android' && { paddingTop: Math.max(10, Number(StatusBar.currentHeight || 24)) },
+          ]}
+        >
+          <View style={lightboxStyles.toolbar}>
+            <Pressable accessibilityRole="button" accessibilityLabel={closeLabel} style={lightboxStyles.toolbarButton} onPress={onClose}>
+              <Text style={lightboxStyles.closeIcon}>‹</Text>
+            </Pressable>
+            <View style={lightboxStyles.zoomControls}>
+              <Pressable accessibilityRole="button" accessibilityLabel={zoomOutLabel} style={lightboxStyles.zoomButton} onPress={() => changeZoom(-0.5)}>
+                <Text style={lightboxStyles.zoomText}>−</Text>
+              </Pressable>
+              <Pressable accessibilityRole="button" accessibilityLabel={resetLabel} style={lightboxStyles.resetButton} onPress={() => resetZoom(true)}>
+                <Text style={lightboxStyles.resetText}>1:1</Text>
+              </Pressable>
+              <Pressable accessibilityRole="button" accessibilityLabel={zoomInLabel} style={lightboxStyles.zoomButton} onPress={() => changeZoom(0.5)}>
+                <Text style={lightboxStyles.zoomText}>+</Text>
+              </Pressable>
+            </View>
+          </View>
+        </SafeAreaView>
         <View style={lightboxStyles.stage} {...panResponder.panHandlers}>
           {uri ? (
             <Animated.Image
@@ -178,10 +226,14 @@ function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel }) {
 
 const lightboxStyles = StyleSheet.create({
   root: { flex: 1, backgroundColor: 'rgba(0,0,0,0.96)' },
-  toolbar: { position: 'absolute', zIndex: 20, top: Platform.OS === 'ios' ? 48 : 18, left: 14, right: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  safeArea: { position: 'absolute', zIndex: 20, top: 0, left: 0, right: 0 },
+  toolbar: { minHeight: 64, paddingHorizontal: 14, paddingTop: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
   toolbarButton: { width: 44, height: 44, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
-  closeIcon: { color: '#FFFFFF', fontSize: 39, lineHeight: 40, marginTop: -6 },
-  resetButton: { minWidth: 50, height: 40, paddingHorizontal: 12, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
+  closeIcon: { color: '#FFFFFF', fontSize: 39, lineHeight: 40, transform: [{ translateY: -2 }] },
+  zoomControls: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  zoomButton: { width: 44, height: 44, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
+  zoomText: { color: '#FFFFFF', fontSize: 27, lineHeight: 30, fontWeight: '500' },
+  resetButton: { minWidth: 52, height: 44, paddingHorizontal: 12, borderRadius: 22, backgroundColor: 'rgba(255,255,255,0.14)', alignItems: 'center', justifyContent: 'center' },
   resetText: { color: '#FFFFFF', fontSize: 13, fontWeight: '700' },
   stage: { flex: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
   image: { width: '100%', height: '100%' },
@@ -199,26 +251,26 @@ function colorWithOpacity(hex, opacity) {
 
 function makePalette(settings) {
   const dark = settings.theme_mode === 'dark';
-  const primary = settings.color_mode === 'advanced' ? settings.primary_color : settings.theme_color;
+  const advanced = settings.color_mode === 'advanced';
+  const primary = advanced ? settings.primary_color : settings.theme_color;
+  const backgroundHex = advanced ? settings.chat_background : (dark ? '#111316' : '#F5F7FB');
+  const backgroundOpacity = advanced ? settings.chat_background_opacity : 100;
   return {
     dark,
     primary,
-    background: colorWithOpacity(settings.chat_background, settings.chat_background_opacity),
+    background: colorWithOpacity(backgroundHex, backgroundOpacity),
     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'),
+    muted: advanced ? settings.system_text : (dark ? '#AEB4BE' : '#6F7480'),
+    customerBubble: advanced ? settings.customer_bubble : primary,
+    customerText: advanced ? settings.customer_text : '#FFFFFF',
+    agentBubble: advanced ? settings.agent_bubble : (dark ? '#22262C' : '#FFFFFF'),
+    agentText: advanced ? settings.agent_text : (dark ? '#F5F6F7' : '#17181B'),
     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)',
+    heroBase: dark ? '#151B21' : '#EEF5FC',
   };
 }
 
@@ -234,6 +286,140 @@ function isSupportMessage(message) {
   return sender === 'agent' || sender === 'admin' || sender === 'chatbot';
 }
 
+
+function humanSize(bytes) {
+  const size = Number(bytes || 0);
+  if (!size) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.min(units.length - 1, Math.max(0, Math.floor(Math.log(size) / Math.log(1024))));
+  const value = size / Math.pow(1024, index);
+  return `${value.toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+function normalizeMarkdownSource(source) {
+  return String(source == null ? '' : source)
+    .replace(/\\([*_`#>\[\]()~+-])/g, '$1')
+    .replace(/\*{3,}([^*\n]+?)\*{3,}/g, '**$1**')
+    .replace(/^(\s*[-+*]\s+)\*([^*\n].*?)\*\*\s*$/gm, '$1**$2**');
+}
+
+function renderInlineMarkdown(value, textStyle, styles, keyPrefix) {
+  const text = String(value || '');
+  const pattern = /(\*\*[^*\n]+\*\*|__[^_\n]+__|`[^`\n]+`|\[[^\]\n]+\]\((?:https?:\/\/|mailto:|tel:)[^)\s]+\)|\*[^*\n]+\*|_[^_\n]+_)/g;
+  const nodes = [];
+  let last = 0;
+  let match;
+  let index = 0;
+
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > last) nodes.push(text.slice(last, match.index));
+    const token = match[0];
+    const key = `${keyPrefix}-${index++}`;
+
+    if ((token.startsWith('**') && token.endsWith('**')) || (token.startsWith('__') && token.endsWith('__'))) {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownStrong]}>{token.slice(2, -2)}</Text>);
+    } else if (token.startsWith('`')) {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownInlineCode]}>{token.slice(1, -1)}</Text>);
+    } else if (token.startsWith('[')) {
+      const linkMatch = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+      if (linkMatch) {
+        const url = linkMatch[2];
+        nodes.push(
+          <Text key={key} style={[textStyle, styles.markdownLink]} onPress={() => Linking.openURL(url).catch(() => {})}>
+            {linkMatch[1]}
+          </Text>
+        );
+      } else {
+        nodes.push(token);
+      }
+    } else {
+      nodes.push(<Text key={key} style={[textStyle, styles.markdownEm]}>{token.slice(1, -1)}</Text>);
+    }
+    last = pattern.lastIndex;
+  }
+
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+function SafeMarkdown({ source, textStyle, styles }) {
+  const lines = normalizeMarkdownSource(source).replace(/\r\n?/g, '\n').split('\n');
+  const blocks = [];
+  let codeLines = [];
+  let inCode = false;
+
+  const flushCode = key => {
+    if (!codeLines.length) return;
+    blocks.push(
+      <View key={key} style={styles.markdownCodeBlock}>
+        <Text style={[textStyle, styles.markdownCodeText]}>{codeLines.join('\n')}</Text>
+      </View>
+    );
+    codeLines = [];
+  };
+
+  lines.forEach((line, index) => {
+    if (/^```/.test(line.trim())) {
+      if (inCode) flushCode(`code-${index}`);
+      inCode = !inCode;
+      return;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      return;
+    }
+
+    if (!line.trim()) {
+      blocks.push(<View key={`space-${index}`} style={styles.markdownSpacer} />);
+      return;
+    }
+
+    const heading = line.match(/^\s*(#{1,6})\s+(.+)$/);
+    if (heading) {
+      blocks.push(
+        <Text key={`h-${index}`} style={[textStyle, styles.markdownHeading]}>
+          {renderInlineMarkdown(heading[2], textStyle, styles, `h-${index}`)}
+        </Text>
+      );
+      return;
+    }
+
+    const quote = line.match(/^\s*>\s?(.*)$/);
+    if (quote) {
+      blocks.push(
+        <View key={`q-${index}`} style={styles.markdownQuote}>
+          <Text style={textStyle}>{renderInlineMarkdown(quote[1], textStyle, styles, `q-${index}`)}</Text>
+        </View>
+      );
+      return;
+    }
+
+    const unordered = line.match(/^\s*[-+*]\s+(.+)$/);
+    const ordered = line.match(/^\s*(\d+)[.)]\s+(.+)$/);
+    if (unordered || ordered) {
+      const prefix = ordered ? `${ordered[1]}.` : '•';
+      const content = ordered ? ordered[2] : unordered[1];
+      blocks.push(
+        <View key={`li-${index}`} style={styles.markdownListRow}>
+          <Text style={[textStyle, styles.markdownListPrefix]}>{prefix}</Text>
+          <Text style={[textStyle, styles.markdownListText]}>{renderInlineMarkdown(content, textStyle, styles, `li-${index}`)}</Text>
+        </View>
+      );
+      return;
+    }
+
+    blocks.push(
+      <Text key={`p-${index}`} style={[textStyle, styles.markdownParagraph]}>
+        {renderInlineMarkdown(line, textStyle, styles, `p-${index}`)}
+      </Text>
+    );
+  });
+
+  if (codeLines.length) flushCode('code-last');
+  return <View style={styles.markdownRoot}>{blocks}</View>;
+}
+
 function RegantisChat(props) {
   const {
     apiKey,
@@ -286,13 +472,18 @@ function RegantisChat(props) {
   const [ratingComment, setRatingComment] = React.useState('');
   const [ratingStatus, setRatingStatus] = React.useState('');
   const [busyAction, setBusyAction] = React.useState('');
+  const [attachmentError, setAttachmentError] = React.useState('');
+  const [cameraSettingsNeeded, setCameraSettingsNeeded] = React.useState(false);
   const [lightboxUri, setLightboxUri] = React.useState('');
+  const [logoFailed, setLogoFailed] = React.useState(false);
   const listRef = React.useRef(null);
+  const previousStatusRef = React.useRef(null);
+  const activeViewRef = React.useRef(initialView === 'chat' ? 'chat' : 'home');
 
   React.useEffect(() => {
     const unsubscribe = client.subscribe(next => setState(next));
     client.start().catch(() => {});
-    const sub = AppState.addEventListener('change', value => client.setVisible(value === 'active'));
+    const sub = AppState.addEventListener('change', value => client.setVisible(value === 'active' && activeViewRef.current === 'chat'));
     return () => {
       if (sub && sub.remove) sub.remove();
       unsubscribe();
@@ -300,6 +491,15 @@ function RegantisChat(props) {
     };
   }, [client]);
 
+  React.useEffect(() => {
+    activeViewRef.current = activeView;
+    client.setVisible(AppState.currentState === 'active' && activeView === 'chat');
+  }, [activeView, client]);
+
+  React.useEffect(() => {
+    setLogoFailed(false);
+  }, [state.settings.logo_url]);
+
   React.useEffect(() => {
     const c = state.conversation || {};
     if (c.contact_name && !contactName) setContactName(c.contact_name);
@@ -341,9 +541,36 @@ function RegantisChat(props) {
   const homePreview = lastSupport
     ? String(lastSupport.message || '').trim() || (lastSupport.attachment ? `[${String(lastSupport.message_type || 'file')}]` : t('empty'))
     : t('empty');
+  const latestNamedAgent = Number(state.settings.use_profile_names || 0) === 1
+    ? [...state.messages].reverse().find(message => {
+        const sender = String(message && message.sender_type || '').toLowerCase();
+        return (sender === 'agent' || sender === 'admin') && String(message && message.sender_name || '').trim();
+      })
+    : null;
+  const operatorDisplayName = latestNamedAgent
+    ? String(latestNamedAgent.sender_name || '').trim()
+    : (state.settings.operator_name || t('support_name'));
+
+  React.useEffect(() => {
+    const nextStatus = Number(c.status || 0);
+    const previousStatus = previousStatusRef.current;
+    previousStatusRef.current = nextStatus;
+
+    if (
+      previousStatus === 1 &&
+      nextStatus === 0 &&
+      Number(state.settings.rating_enabled || 0) === 1 &&
+      contactConfirmed &&
+      !c.feedback_submitted
+    ) {
+      const timer = setTimeout(() => setRatingOpen(true), 120);
+      return () => clearTimeout(timer);
+    }
+  }, [c.status, c.feedback_submitted, contactConfirmed, state.settings.rating_enabled]);
 
   function showView(next) {
     const view = next === 'chat' ? 'chat' : 'home';
+    activeViewRef.current = view;
     setActiveView(view);
     setOptionsOpen(false);
     setLanguageOpen(false);
@@ -382,10 +609,23 @@ function RegantisChat(props) {
 
   async function pick(kind) {
     setAttachOpen(false);
+    setAttachmentError('');
+    setCameraSettingsNeeded(false);
     setBusyAction('upload');
     try {
       await client.pickAndUpload(kind);
-    } catch (_) {
+      setAttachmentError('');
+      setCameraSettingsNeeded(false);
+    } catch (error) {
+      const code = String(error && (error.code || error.message) || '');
+      if (code.includes('CAMERA_PERMISSION_DENIED')) {
+        setAttachmentError(t('camera_permission_denied'));
+        setCameraSettingsNeeded(true);
+      } else if (code.includes('CAMERA_USAGE_DESCRIPTION_MISSING') || code.includes('CAMERA_PERMISSION_UNAVAILABLE')) {
+        setAttachmentError(t('camera_setup_required'));
+      } else if (code.includes('CAMERA_UNAVAILABLE')) setAttachmentError(t('camera_unavailable'));
+      else setAttachmentError(error && error.message ? error.message : t('send_error'));
+      if (typeof onError === 'function') onError(error);
     } finally {
       setBusyAction('');
     }
@@ -463,8 +703,8 @@ 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" />;
+    if (state.settings.logo_url && !logoFailed) {
+      return <Image source={{ uri: state.settings.logo_url }} onError={() => setLogoFailed(true)} 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 }]}>
@@ -498,7 +738,11 @@ 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'));
+    const configuredName = state.settings.operator_name || t('support_name');
+    const senderName = sender === 'chatbot'
+      ? 'Chatbot'
+      : (Number(state.settings.use_profile_names || 0) === 1 ? (item.sender_name || configuredName) : configuredName);
+    const fileExt = String(attachment && attachment.ext || '').replace(/^\./, '').slice(0, 4).toUpperCase() || 'FILE';
 
     return (
       <View style={[styles.messageRow, visitor ? styles.messageRowRight : styles.messageRowLeft]}>
@@ -508,11 +752,21 @@ function RegantisChat(props) {
               <Image source={{ uri: attachment.url }} style={styles.attachmentImage} resizeMode="cover" />
             </Pressable>
           ) : attachment ? (
-            <Pressable style={styles.fileAttachment} onPress={() => Linking.openURL(attachment.url)}>
-              <Text style={[styles.fileAttachmentText, textStyle]}>📎 {attachment.name || t('attach_file')}</Text>
+            <Pressable style={styles.fileAttachment} onPress={() => Linking.openURL(attachment.url).catch(() => {})}>
+              <View style={[styles.fileAttachmentIcon, { borderColor: textStyle.color }]}>
+                <Text style={[styles.fileAttachmentIconText, textStyle]}>{fileExt}</Text>
+              </View>
+              <View style={styles.fileAttachmentCopy}>
+                <Text numberOfLines={1} style={[styles.fileAttachmentText, textStyle]}>{attachment.name || t('attach_file')}</Text>
+                <Text numberOfLines={1} style={[styles.fileAttachmentMeta, textStyle]}>{humanSize(attachment.size)}{attachment.ext ? ` · ${String(attachment.ext).toUpperCase()}` : ''}</Text>
+              </View>
             </Pressable>
           ) : null}
-          {item.message ? <Text style={[styles.messageText, textStyle]}>{item.message}</Text> : null}
+          {item.message ? (
+            sender === 'chatbot'
+              ? <SafeMarkdown source={item.message} textStyle={[styles.messageText, textStyle]} styles={styles} />
+              : <Text style={[styles.messageText, textStyle]}>{item.message}</Text>
+          ) : null}
           <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>
@@ -524,16 +778,24 @@ function RegantisChat(props) {
 
   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>;
+    return (
+      <View style={styles.poweredBy}>
+        <Text style={styles.poweredByText}>{t('powered_by')}</Text>
+        <Image source={palette.dark ? REGANTIS_LOGO_WHITE : REGANTIS_LOGO_BLACK} style={styles.poweredByLogo} resizeMode="contain" />
+      </View>
+    );
   }
 
   function renderHome() {
     return (
       <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} />
+          <Image
+            pointerEvents="none"
+            source={palette.dark ? WELCOME_BACKGROUND_DARK : WELCOME_BACKGROUND_LIGHT}
+            style={styles.homeHeroBackground}
+            resizeMode="cover"
+          />
 
           <View style={styles.homeTop}>
             <View style={styles.homeTopLeft}>
@@ -560,7 +822,7 @@ function RegantisChat(props) {
             <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.homeCardAgent}>{operatorDisplayName}</Text>
                 <Text numberOfLines={1} style={styles.homeCardPreview}>{homePreview}</Text>
               </View>
             </View>
@@ -595,20 +857,22 @@ function RegantisChat(props) {
             <Text style={styles.backIcon}>‹</Text>
           </Pressable>
           <Pressable accessibilityRole="button" accessibilityLabel={t('options')} style={styles.headerIconButton} onPress={() => setOptionsOpen(value => !value)}>
-            <Text style={styles.menuIcon}>•••</Text>
+            <View style={styles.menuDots}><View style={styles.menuDot} /><View style={styles.menuDot} /><View style={styles.menuDot} /></View>
           </Pressable>
         </View>
 
-        <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>
+        <View pointerEvents="box-none" style={styles.chatHeaderCenter}>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={operatorDisplayName}
+            style={styles.agentTrigger}
+            onPress={() => {
+              if (state.settings.rating_enabled && contactConfirmed) setRatingOpen(true);
+            }}
+          >
+            {renderAgentVisual()}
+          </Pressable>
+        </View>
 
         <View style={styles.chatHeaderRight}>
           {typeof onClose === 'function' ? (
@@ -640,7 +904,7 @@ function RegantisChat(props) {
                   <Text style={styles.popoverChevron}>›</Text>
                 </Pressable>
               ) : null}
-              {state.settings.sound_enabled !== undefined ? (
+              {state.soundAvailable ? (
                 <Pressable style={styles.popoverRow} onPress={() => client.setSoundEnabled(!state.settings.sound_enabled)}>
                   <Text style={styles.popoverIcon}>◖</Text>
                   <Text style={styles.popoverText}>{t('sounds')}</Text>
@@ -674,6 +938,20 @@ function RegantisChat(props) {
     );
   }
 
+  function renderContactInfoCard() {
+    if (!contactConfirmed || (!c.contact_name && !c.contact_email)) return null;
+    return (
+      <View style={styles.contactInfoRow}>
+        <View style={styles.contactInfoAvatar}><Text style={styles.contactInfoAvatarText}>i</Text></View>
+        <View style={styles.contactInfoBubble}>
+          <Text style={styles.contactInfoTitle}>{t('personal_details')}</Text>
+          {c.contact_name ? <Text style={styles.contactInfoLine}><Text style={styles.contactInfoLabel}>{t('name')}: </Text>{c.contact_name}</Text> : null}
+          {c.contact_email ? <Text style={styles.contactInfoLine}><Text style={styles.contactInfoLabel}>{t('email')}: </Text>{c.contact_email}</Text> : null}
+        </View>
+      </View>
+    );
+  }
+
   function renderComposer() {
     if (!active) {
       return (
@@ -710,6 +988,17 @@ function RegantisChat(props) {
           </View>
         ) : null}
 
+        {attachmentError ? (
+          <View style={styles.composerErrorRow}>
+            <Text style={styles.composerError}>{attachmentError}</Text>
+            {cameraSettingsNeeded ? (
+              <Pressable style={styles.composerErrorAction} onPress={() => Linking.openSettings().catch(() => {})}>
+                <Text style={styles.composerErrorActionText}>{t('open_settings')}</Text>
+              </Pressable>
+            ) : null}
+          </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>
@@ -749,7 +1038,12 @@ function RegantisChat(props) {
                 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}
+                ListHeaderComponent={(
+                  <>
+                    {state.hasMore ? <View style={styles.historyLoader}><ActivityIndicator size="small" color={palette.primary} /></View> : null}
+                    {renderContactInfoCard()}
+                  </>
+                )}
                 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}
@@ -825,7 +1119,7 @@ function RegantisChat(props) {
       <Modal transparent visible={ratingOpen} animationType="fade" onRequestClose={() => setRatingOpen(false)}>
         <View style={styles.modalBackdropTop}>
           <View style={styles.modalCard}>
-            <Text style={styles.modalTitle}>{state.settings.operator_name || t('support_name')}</Text>
+            <Text style={styles.modalTitle}>{operatorDisplayName}</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>
@@ -847,6 +1141,8 @@ function RegantisChat(props) {
         onClose={() => setLightboxUri('')}
         closeLabel={t('lightbox_close')}
         resetLabel={t('lightbox_reset')}
+        zoomInLabel={t('lightbox_zoom_in')}
+        zoomOutLabel={t('lightbox_zoom_out')}
       />
     </KeyboardAvoidingView>
   );
@@ -869,9 +1165,7 @@ function buildStyles(p) {
     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 },
+    homeHeroBackground: { ...StyleSheet.absoluteFillObject, width: '100%', height: '100%' },
     homeTop: { minHeight: 42, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 },
     homeTopLeft: { flexDirection: 'row', alignItems: 'center', gap: 9 },
     homeBackIcon: { color: p.text, fontSize: 37, lineHeight: 38, marginTop: -5 },
@@ -901,14 +1195,16 @@ function buildStyles(p) {
     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 },
+    chatHeader: { position: 'relative', zIndex: 20, minHeight: 64, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: p.border, backgroundColor: p.header, overflow: 'visible' },
+    chatHeaderLeft: { zIndex: 30, width: 76, height: 64, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 5 },
+    chatHeaderCenter: { position: 'absolute', zIndex: 18, top: 0, left: 0, right: 0, height: 64, alignItems: 'center', justifyContent: 'flex-start' },
+    chatHeaderRight: { zIndex: 30, width: 76, height: 64, 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 },
+    backIcon: { color: p.text, fontSize: 31, lineHeight: 31, transform: [{ translateY: -1 }] },
+    menuDots: { width: 24, height: 24, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 3 },
+    menuDot: { width: 3.5, height: 3.5, borderRadius: 2, backgroundColor: p.text },
+    closeIcon: { color: p.text, fontSize: 23, lineHeight: 24, transform: [{ translateY: -1 }] },
+    agentTrigger: { zIndex: 18, width: '100%', maxWidth: 218, height: 48, 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 },
@@ -942,6 +1238,13 @@ function buildStyles(p) {
     dangerButton: { flex: 1, minHeight: 40, borderRadius: 9, backgroundColor: p.danger, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center' },
     disabled: { opacity: 0.55 },
 
+    contactInfoRow: { width: '100%', flexDirection: 'row', alignItems: 'flex-start', marginBottom: 12, paddingRight: 44 },
+    contactInfoAvatar: { width: 28, height: 28, borderRadius: 14, marginRight: 8, marginTop: 2, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    contactInfoAvatarText: { color: p.muted, fontSize: 13, fontWeight: '800' },
+    contactInfoBubble: { flex: 1, minWidth: 0, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 14, borderBottomLeftRadius: 5, backgroundColor: p.agentBubble },
+    contactInfoTitle: { color: p.agentText, fontSize: 12, lineHeight: 16, fontWeight: '800', marginBottom: 5 },
+    contactInfoLine: { color: p.agentText, fontSize: 11, lineHeight: 16 },
+    contactInfoLabel: { fontWeight: '700' },
     messageList: { flex: 1, minHeight: 0 },
     messageListContent: { paddingHorizontal: 16, paddingTop: 18, paddingBottom: 12, flexGrow: 1 },
     historyLoader: { minHeight: 34, alignItems: 'center', justifyContent: 'center', paddingBottom: 10 },
@@ -962,8 +1265,26 @@ function buildStyles(p) {
     systemRow: { alignSelf: 'center', paddingHorizontal: 16, paddingVertical: 7, marginVertical: 3 },
     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 },
+    fileAttachment: { minWidth: 180, maxWidth: 260, flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 4 },
+    fileAttachmentIcon: { width: 34, height: 34, borderWidth: 1, borderRadius: 9, alignItems: 'center', justifyContent: 'center', opacity: 0.85 },
+    fileAttachmentIconText: { fontSize: 10, fontWeight: '800' },
+    fileAttachmentCopy: { flex: 1, minWidth: 0 },
     fileAttachmentText: { fontSize: 13, fontWeight: '600' },
+    fileAttachmentMeta: { marginTop: 2, fontSize: 10, opacity: 0.72 },
+    markdownRoot: { flexShrink: 1 },
+    markdownParagraph: { marginBottom: 2 },
+    markdownSpacer: { height: 7 },
+    markdownStrong: { fontWeight: '800' },
+    markdownEm: { fontStyle: 'italic' },
+    markdownInlineCode: { fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', fontSize: 12, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)' },
+    markdownLink: { textDecorationLine: 'underline' },
+    markdownHeading: { marginTop: 2, marginBottom: 4, fontSize: 15, lineHeight: 20, fontWeight: '800' },
+    markdownQuote: { marginVertical: 3, paddingLeft: 9, borderLeftWidth: 3, borderLeftColor: p.muted },
+    markdownListRow: { flexDirection: 'row', alignItems: 'flex-start', marginVertical: 1 },
+    markdownListPrefix: { width: 20, fontWeight: '700' },
+    markdownListText: { flex: 1, minWidth: 0 },
+    markdownCodeBlock: { marginVertical: 4, paddingHorizontal: 9, paddingVertical: 8, borderRadius: 8, backgroundColor: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)' },
+    markdownCodeText: { fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', fontSize: 12, lineHeight: 17 },
     typingRow: { flex: 0, paddingHorizontal: 18, paddingTop: 8, paddingBottom: 7 },
     typingText: { color: p.muted, fontSize: 11, lineHeight: 15 },
 
@@ -978,6 +1299,10 @@ function buildStyles(p) {
     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 },
+    composerErrorRow: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 8, paddingBottom: 7 },
+    composerError: { color: '#B42318', fontSize: 11, lineHeight: 15, textAlign: 'center' },
+    composerErrorAction: { marginTop: 5, minHeight: 28, paddingHorizontal: 10, borderRadius: 14, backgroundColor: p.surfaceAlt, alignItems: 'center', justifyContent: 'center' },
+    composerErrorActionText: { color: p.text, fontSize: 10, lineHeight: 13, fontWeight: '700' },
     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 },
@@ -986,9 +1311,9 @@ function buildStyles(p) {
     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 },
+    poweredBy: { flex: 0, minHeight: 22, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 4, paddingBottom: 5, backgroundColor: p.background },
     poweredByText: { color: '#9398A2', fontSize: 9, lineHeight: 11, textAlign: 'center' },
-    poweredByBrand: { color: p.text, fontWeight: '700' },
+    poweredByLogo: { width: 48, height: 15 },
 
     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 },

package/src/client.js

@@ -119,6 +119,7 @@ class RegantisChatClient {
       upload: null,
       realtime: null,
       realtimeConnected: false,
+      soundAvailable: false,
       remoteTyping: '',
       sending: false,
       uploading: false,
@@ -153,6 +154,10 @@ class RegantisChatClient {
     return `regantis_chat_visitor_${this.options.apiKey}`;
   }
 
+  soundStorageKey() {
+    return `regantis_chat_sound_${this.options.apiKey}`;
+  }
+
   async start() {
     this.destroyed = false;
     this.setState({ loading: true, error: '' });
@@ -190,7 +195,9 @@ class RegantisChatClient {
   }
 
   setSoundEnabled(enabled) {
-    this.setState({ settings: { ...this.state.settings, sound_enabled: enabled ? 1 : 0 } });
+    const value = this.state.soundAvailable && enabled ? 1 : 0;
+    this.setState({ settings: { ...this.state.settings, sound_enabled: value } });
+    if (this.state.soundAvailable) native.setItem(this.soundStorageKey(), value ? '1' : '0').catch(() => {});
   }
 
   async loadConfig() {
@@ -201,12 +208,20 @@ class RegantisChatClient {
 
     const settings = normalizeSettings({ ...(data.settings || {}), ...(this.options.theme || {}) });
     const texts = { ...(data.texts || {}), ...(this.options.texts || {}) };
+    const soundAvailable = Number(settings.sound_enabled || 0) === 1;
+    if (soundAvailable) {
+      const storedSound = await native.getItem(this.soundStorageKey());
+      if (storedSound !== null && storedSound !== undefined) settings.sound_enabled = String(storedSound) === '0' ? 0 : 1;
+    } else {
+      settings.sound_enabled = 0;
+    }
     this.setState({
       config: data,
       settings,
       texts,
       languages: Array.isArray(data.languages) ? data.languages : [],
       translationCustomerEnabled: Number(data.translation_customer_enabled || 0) === 1,
+      soundAvailable,
     });
     return data;
   }

package/src/defaults.js

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