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

package/README.md

@@ -25,6 +25,17 @@ pod install
 
 Android is autolinked by React Native.
 
+### iOS camera
+
+To use the built-in camera action, add a camera usage description to the host app `Info.plist`:
+
+```xml
+<key>NSCameraUsageDescription</key>
+<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.
+
 ## Basic usage
 
 ```jsx
@@ -112,8 +123,8 @@ Server configuration remains the default. Per-app overrides are optional:
 - WebSocket realtime updates with HTTP polling fallback
 - typing state
 - customer-side translation selector
-- images and files
-- current-app screenshot attachment
+- image gallery, file picker and direct camera capture
+- in-chat image lightbox with pinch zoom and pan
 - native incoming-message sound
 - close/reopen conversation
 - rating and rating comment
@@ -167,4 +178,12 @@ The React Native component now mirrors the mobile web widget flow: it opens on t
 />
 ```
 
-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.
+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. `onBack` controls the top-left back button on the welcome screen.
+
+```jsx
+<RegantisChat
+  apiKey="YOUR_REACT_NATIVE_CHAT_API_KEY"
+  onBack={() => navigation.goBack()}
+  onClose={() => navigation.goBack()}
+/>
+```

package/android/build.gradle

@@ -21,4 +21,5 @@ repositories {
 
 dependencies {
     implementation "com.facebook.react:react-android"
+    implementation "androidx.core:core:1.13.1"
 }

package/android/src/main/AndroidManifest.xml

@@ -1 +1,13 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android" />
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <application>
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.regantis.chat.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/regantis_chat_file_paths" />
+        </provider>
+    </application>
+</manifest>

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

@@ -1,21 +1,22 @@
 package technology.regantis.chat;
 
 import android.app.Activity;
+import android.content.ClipData;
 import android.content.Context;
 import android.content.Intent;
 import android.content.SharedPreferences;
-import android.graphics.Bitmap;
-import android.graphics.Canvas;
+import android.content.pm.ResolveInfo;
 import android.database.Cursor;
 import android.media.Ringtone;
 import android.media.RingtoneManager;
 import android.net.Uri;
+import android.provider.MediaStore;
 import android.provider.OpenableColumns;
-import android.view.View;
 import android.webkit.MimeTypeMap;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.content.FileProvider;
 
 import com.facebook.react.bridge.ActivityEventListener;
 import com.facebook.react.bridge.Arguments;
@@ -27,44 +28,87 @@ import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.WritableMap;
 
 import java.io.File;
-import java.io.FileOutputStream;
+import java.util.List;
 
 public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
     private static final String MODULE_NAME = "RegantisChatNative";
     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 final ReactApplicationContext reactContext;
     private Promise pickerPromise;
+    private Promise cameraPromise;
+    private File cameraFile;
+    private Uri cameraOutputUri;
 
     private final ActivityEventListener activityEventListener = new BaseActivityEventListener() {
         @Override
         public void onActivityResult(Activity activity, int requestCode, int resultCode, @Nullable Intent data) {
-            if (requestCode != PICK_ATTACHMENT_REQUEST || pickerPromise == null) return;
+            if (requestCode == PICK_ATTACHMENT_REQUEST && pickerPromise != null) {
+                Promise promise = pickerPromise;
+                pickerPromise = null;
 
-            Promise promise = pickerPromise;
-            pickerPromise = null;
+                if (resultCode != Activity.RESULT_OK || data == null || data.getData() == null) {
+                    promise.resolve(null);
+                    return;
+                }
 
-            if (resultCode != Activity.RESULT_OK || data == null || data.getData() == null) {
-                promise.resolve(null);
+                Uri uri = data.getData();
+                try {
+                    int flags = data.getFlags() & (Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
+                    if ((flags & Intent.FLAG_GRANT_READ_URI_PERMISSION) != 0) {
+                        reactContext.getContentResolver().takePersistableUriPermission(uri, Intent.FLAG_GRANT_READ_URI_PERMISSION);
+                    }
+                } catch (Exception ignored) {
+                }
+
+                WritableMap result = Arguments.createMap();
+                result.putString("uri", uri.toString());
+                result.putString("name", getDisplayName(uri));
+                result.putString("type", getMimeType(uri));
+                result.putDouble("size", getSize(uri));
+                promise.resolve(result);
                 return;
             }
 
-            Uri uri = data.getData();
-            try {
-                int flags = data.getFlags() & (Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
-                if ((flags & Intent.FLAG_GRANT_READ_URI_PERMISSION) != 0) {
-                    reactContext.getContentResolver().takePersistableUriPermission(uri, Intent.FLAG_GRANT_READ_URI_PERMISSION);
+            if (requestCode == TAKE_PHOTO_REQUEST && cameraPromise != null) {
+                Promise promise = cameraPromise;
+                File file = cameraFile;
+                Uri outputUri = cameraOutputUri;
+                cameraPromise = null;
+                cameraFile = null;
+                cameraOutputUri = null;
+
+                if (outputUri != null) {
+                    try {
+                        reactContext.revokeUriPermission(
+                            outputUri,
+                            Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION
+                        );
+                    } catch (Exception ignored) {
+                    }
+                }
+
+                if (resultCode != Activity.RESULT_OK) {
+                    if (file != null) file.delete();
+                    promise.resolve(null);
+                    return;
+                }
+
+                if (file == null || !file.exists() || file.length() < 1) {
+                    if (file != null) file.delete();
+                    promise.reject("CAMERA_FAILED", "Camera did not return an image");
+                    return;
                 }
-            } catch (Exception ignored) {
-            }
 
-            WritableMap result = Arguments.createMap();
-            result.putString("uri", uri.toString());
-            result.putString("name", getDisplayName(uri));
-            result.putString("type", getMimeType(uri));
-            result.putDouble("size", getSize(uri));
-            promise.resolve(result);
+                WritableMap result = Arguments.createMap();
+                result.putString("uri", Uri.fromFile(file).toString());
+                result.putString("name", file.getName());
+                result.putString("type", "image/jpeg");
+                result.putDouble("size", file.length());
+                promise.resolve(result);
+            }
         }
     };
 
@@ -128,49 +172,58 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void captureScreenshot(Promise promise) {
+    public void takePhoto(Promise promise) {
         Activity activity = getCurrentActivity();
         if (activity == null) {
             promise.reject("NO_ACTIVITY", "No active Android Activity");
             return;
         }
+        if (cameraPromise != null || pickerPromise != null) {
+            promise.reject("PICKER_BUSY", "An attachment picker is already open");
+            return;
+        }
 
-        activity.runOnUiThread(() -> {
-            try {
-                View root = activity.getWindow().getDecorView().getRootView();
-                int width = root.getWidth();
-                int height = root.getHeight();
-                if (width < 1 || height < 1) {
-                    promise.reject("SCREENSHOT_FAILED", "Invalid app window size");
-                    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");
+                return;
+            }
 
-                Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
-                Canvas canvas = new Canvas(bitmap);
-                root.draw(canvas);
+            File directory = new File(reactContext.getCacheDir(), "regantis-chat/camera");
+            if (!directory.exists() && !directory.mkdirs()) {
+                promise.reject("CAMERA_FAILED", "Unable to create camera directory");
+                return;
+            }
 
-                File directory = new File(reactContext.getCacheDir(), "regantis-chat");
-                if (!directory.exists() && !directory.mkdirs()) {
-                    promise.reject("SCREENSHOT_FAILED", "Unable to create screenshot directory");
-                    return;
-                }
-                File file = new File(directory, "screenshot-" + System.currentTimeMillis() + ".png");
-                try (FileOutputStream stream = new FileOutputStream(file)) {
-                    bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
-                } finally {
-                    bitmap.recycle();
-                }
+            File file = File.createTempFile("camera-", ".jpg", directory);
+            String authority = reactContext.getPackageName() + ".regantis.chat.fileprovider";
+            Uri outputUri = FileProvider.getUriForFile(reactContext, authority, file);
 
-                WritableMap result = Arguments.createMap();
-                result.putString("uri", Uri.fromFile(file).toString());
-                result.putString("name", file.getName());
-                result.putString("type", "image/png");
-                result.putDouble("size", file.length());
-                promise.resolve(result);
-            } catch (Exception error) {
-                promise.reject("SCREENSHOT_FAILED", error);
+            intent.putExtra(MediaStore.EXTRA_OUTPUT, outputUri);
+            intent.setClipData(ClipData.newRawUri("RegantisChatCamera", outputUri));
+            intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);
+
+            List<ResolveInfo> cameraActivities = reactContext.getPackageManager().queryIntentActivities(intent, 0);
+            for (ResolveInfo info : cameraActivities) {
+                reactContext.grantUriPermission(
+                    info.activityInfo.packageName,
+                    outputUri,
+                    Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION
+                );
             }
-        });
+
+            cameraPromise = promise;
+            cameraFile = file;
+            cameraOutputUri = outputUri;
+            activity.startActivityForResult(intent, TAKE_PHOTO_REQUEST);
+        } catch (Exception error) {
+            cameraPromise = null;
+            if (cameraFile != null) cameraFile.delete();
+            cameraFile = null;
+            cameraOutputUri = null;
+            promise.reject("CAMERA_FAILED", error);
+        }
     }
 
     @ReactMethod
@@ -180,7 +233,7 @@ public class RegantisChatNativeModule extends ReactContextBaseJavaModule {
             promise.reject("NO_ACTIVITY", "No active Android Activity");
             return;
         }
-        if (pickerPromise != null) {
+        if (pickerPromise != null || cameraPromise != null) {
             promise.reject("PICKER_BUSY", "An attachment picker is already open");
             return;
         }

package/android/src/main/res/xml/regantis_chat_file_paths.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <cache-path name="regantis_chat_cache" path="regantis-chat/" />
+</paths>

package/index.d.ts

@@ -62,6 +62,7 @@ export type RegantisChatProps = {
   style?: StyleProp<ViewStyle>;
   initialView?: 'home' | 'chat';
   onClose?: () => void;
+  onBack?: () => void;
   onViewChange?: (view: 'home' | 'chat') => void;
   keyboardVerticalOffset?: number;
   onMessage?: (message: any) => void;
@@ -78,7 +79,7 @@ export class RegantisChatClient {
   sendMessage(message: string): Promise<any>;
   saveContact(name: string, email: string): Promise<any>;
   uploadAttachment(file: { uri: string; name?: string; type?: string }, kind: 'image' | 'file'): Promise<any>;
-  pickAndUpload(kind: 'image' | 'file' | 'screenshot'): Promise<any>;
+  pickAndUpload(kind: 'image' | 'file' | 'camera'): Promise<any>;
   setTranslationLanguage(languageCode: string): Promise<void>;
   closeChat(): Promise<any>;
   reopenChat(): Promise<any>;

package/ios/RegantisChatNative.h

@@ -1,5 +1,5 @@
 #import <React/RCTBridgeModule.h>
 #import <UIKit/UIKit.h>
 
-@interface RegantisChatNative : NSObject <RCTBridgeModule, UIDocumentPickerDelegate>
+@interface RegantisChatNative : NSObject <RCTBridgeModule, UIDocumentPickerDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate>
 @end

package/ios/RegantisChatNative.m

@@ -66,50 +66,35 @@ RCT_EXPORT_METHOD(playIncomingSound)
   AudioServicesPlaySystemSound(1007);
 }
 
-RCT_REMAP_METHOD(captureScreenshot,
-                 captureScreenshotWithResolver:(RCTPromiseResolveBlock)resolve
+RCT_REMAP_METHOD(takePhoto,
+                 takePhotoWithResolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
 {
   dispatch_async(dispatch_get_main_queue(), ^{
-    UIViewController *controller = RCTPresentedViewController();
-    UIWindow *window = controller.view.window ?: UIApplication.sharedApplication.keyWindow;
-    if (window == nil) {
-      reject(@"SCREENSHOT_FAILED", @"No active iOS window", nil);
+    if (self.pickerResolve != nil) {
+      reject(@"PICKER_BUSY", @"An attachment picker is already open", nil);
       return;
     }
 
-    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithBounds:window.bounds];
-    UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
-      [window drawViewHierarchyInRect:window.bounds afterScreenUpdates:YES];
-    }];
-    NSData *data = UIImagePNGRepresentation(image);
-    if (data == nil) {
-      reject(@"SCREENSHOT_FAILED", @"Unable to encode screenshot", nil);
+    if (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
+      reject(@"CAMERA_UNAVAILABLE", @"Camera is not available on this device", nil);
       return;
     }
 
-    NSString *filename = [NSString stringWithFormat:@"screenshot-%lld.png", (long long)(NSDate.date.timeIntervalSince1970 * 1000.0)];
-    NSString *directory = [NSTemporaryDirectory() stringByAppendingPathComponent:@"regantis-chat"];
-    NSError *directoryError = nil;
-    [[NSFileManager defaultManager] createDirectoryAtPath:directory withIntermediateDirectories:YES attributes:nil error:&directoryError];
-    if (directoryError != nil) {
-      reject(@"SCREENSHOT_FAILED", directoryError.localizedDescription, directoryError);
+    UIViewController *controller = RCTPresentedViewController();
+    if (controller == nil) {
+      reject(@"NO_VIEW_CONTROLLER", @"No active iOS view controller", nil);
       return;
     }
 
-    NSString *path = [directory stringByAppendingPathComponent:filename];
-    NSError *writeError = nil;
-    if (![data writeToFile:path options:NSDataWritingAtomic error:&writeError]) {
-      reject(@"SCREENSHOT_FAILED", writeError.localizedDescription, writeError);
-      return;
-    }
+    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
+    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
+    picker.delegate = self;
+    picker.allowsEditing = NO;
 
-    resolve(@{
-      @"uri": [NSURL fileURLWithPath:path].absoluteString ?: @"",
-      @"name": filename,
-      @"type": @"image/png",
-      @"size": @(data.length)
-    });
+    self.pickerResolve = resolve;
+    self.pickerReject = reject;
+    [controller presentViewController:picker animated:YES completion:nil];
   });
 }
 
@@ -146,6 +131,71 @@ RCT_REMAP_METHOD(pickAttachment,
   });
 }
 
+- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
+{
+  RCTPromiseResolveBlock resolve = self.pickerResolve;
+  self.pickerResolve = nil;
+  self.pickerReject = nil;
+  [picker dismissViewControllerAnimated:YES completion:^{
+    if (resolve) resolve(nil);
+  }];
+}
+
+- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<UIImagePickerControllerInfoKey,id> *)info
+{
+  RCTPromiseResolveBlock resolve = self.pickerResolve;
+  RCTPromiseRejectBlock reject = self.pickerReject;
+  self.pickerResolve = nil;
+  self.pickerReject = nil;
+
+  UIImage *image = info[UIImagePickerControllerOriginalImage];
+  if (image == nil) {
+    [picker dismissViewControllerAnimated:YES completion:^{
+      if (reject) reject(@"CAMERA_FAILED", @"Camera did not return an image", nil);
+    }];
+    return;
+  }
+
+  NSData *data = UIImageJPEGRepresentation(image, 0.92);
+  if (data == nil) {
+    [picker dismissViewControllerAnimated:YES completion:^{
+      if (reject) reject(@"CAMERA_FAILED", @"Unable to encode camera image", nil);
+    }];
+    return;
+  }
+
+  NSString *directory = [NSTemporaryDirectory() stringByAppendingPathComponent:@"regantis-chat/camera"];
+  NSError *directoryError = nil;
+  [[NSFileManager defaultManager] createDirectoryAtPath:directory withIntermediateDirectories:YES attributes:nil error:&directoryError];
+  if (directoryError != nil) {
+    [picker dismissViewControllerAnimated:YES completion:^{
+      if (reject) reject(@"CAMERA_FAILED", directoryError.localizedDescription, directoryError);
+    }];
+    return;
+  }
+
+  NSString *filename = [NSString stringWithFormat:@"camera-%lld.jpg", (long long)(NSDate.date.timeIntervalSince1970 * 1000.0)];
+  NSString *path = [directory stringByAppendingPathComponent:filename];
+  NSError *writeError = nil;
+  if (![data writeToFile:path options:NSDataWritingAtomic error:&writeError]) {
+    [picker dismissViewControllerAnimated:YES completion:^{
+      if (reject) reject(@"CAMERA_FAILED", writeError.localizedDescription, writeError);
+    }];
+    return;
+  }
+
+  NSDictionary *result = @{
+    @"uri": [NSURL fileURLWithPath:path].absoluteString ?: @"",
+    @"name": filename,
+    @"type": @"image/jpeg",
+    @"size": @(data.length)
+  };
+
+  [picker dismissViewControllerAnimated:YES completion:^{
+    if (resolve) resolve(result);
+  }];
+}
+
 - (void)documentPickerWasCancelled:(UIDocumentPickerViewController *)controller
 {
   if (self.pickerResolve) self.pickerResolve(nil);

package/package.json

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

package/src/RegantisChat.js

@@ -3,12 +3,14 @@
 const React = require('react');
 const {
   ActivityIndicator,
+  Animated,
   AppState,
   FlatList,
   Image,
   KeyboardAvoidingView,
   Linking,
   Modal,
+  PanResponder,
   Platform,
   Pressable,
   ScrollView,
@@ -21,6 +23,170 @@ const { RegantisChatClient } = require('./client');
 
 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' },
+};
+
+function localText(language, key) {
+  const code = String(language || 'en').trim().toLowerCase().split(/[-_]/)[0];
+  return (LOCAL_TEXTS[code] && LOCAL_TEXTS[code][key]) || LOCAL_TEXTS.en[key] || '';
+}
+
+function touchDistance(touches) {
+  if (!touches || touches.length < 2) return 0;
+  const dx = Number(touches[0].pageX || 0) - Number(touches[1].pageX || 0);
+  const dy = Number(touches[0].pageY || 0) - Number(touches[1].pageY || 0);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function ImageLightbox({ visible, uri, onClose, closeLabel, resetLabel }) {
+  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 }),
+    ];
+    if (animated) Animated.parallel(values).start();
+    else {
+      scale.setValue(1);
+      translateX.setValue(0);
+      translateY.setValue(0);
+    }
+  }, [scale, translateX, translateY]);
+
+  React.useEffect(() => {
+    if (visible) resetZoom(false);
+  }, [visible, uri, resetZoom]);
+
+  const panResponder = React.useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: event => {
+      const touches = event.nativeEvent.touches || [];
+      if (touches.length >= 2) {
+        gesture.current = {
+          mode: 'pinch',
+          distance: Math.max(1, touchDistance(touches)),
+          scale: current.current.scale,
+          x: current.current.x,
+          y: current.current.y,
+          startX: 0,
+          startY: 0,
+        };
+      } else if (touches.length === 1) {
+        gesture.current = {
+          mode: 'pan',
+          distance: 0,
+          scale: current.current.scale,
+          x: current.current.x,
+          y: current.current.y,
+          startX: Number(touches[0].pageX || 0),
+          startY: Number(touches[0].pageY || 0),
+        };
+      }
+    },
+    onPanResponderMove: event => {
+      const touches = event.nativeEvent.touches || [];
+      if (touches.length >= 2) {
+        const distance = Math.max(1, touchDistance(touches));
+        if (gesture.current.mode !== 'pinch') {
+          gesture.current.mode = 'pinch';
+          gesture.current.distance = distance;
+          gesture.current.scale = current.current.scale;
+        }
+        const nextScale = Math.max(1, Math.min(5, gesture.current.scale * (distance / Math.max(1, gesture.current.distance))));
+        current.current.scale = nextScale;
+        scale.setValue(nextScale);
+        if (nextScale <= 1.01) {
+          current.current.x = 0;
+          current.current.y = 0;
+          translateX.setValue(0);
+          translateY.setValue(0);
+        }
+        return;
+      }
+
+      if (touches.length === 1 && current.current.scale > 1.01) {
+        const x = Number(touches[0].pageX || 0);
+        const y = Number(touches[0].pageY || 0);
+        if (gesture.current.mode !== 'pan') {
+          gesture.current.mode = 'pan';
+          gesture.current.x = current.current.x;
+          gesture.current.y = current.current.y;
+          gesture.current.startX = x;
+          gesture.current.startY = y;
+        }
+        const nextX = gesture.current.x + (x - gesture.current.startX);
+        const nextY = gesture.current.y + (y - gesture.current.startY);
+        current.current.x = nextX;
+        current.current.y = nextY;
+        translateX.setValue(nextX);
+        translateY.setValue(nextY);
+      }
+    },
+    onPanResponderRelease: () => {
+      gesture.current.mode = '';
+      if (current.current.scale <= 1.05) resetZoom(true);
+    },
+    onPanResponderTerminate: () => {
+      gesture.current.mode = '';
+      if (current.current.scale <= 1.05) resetZoom(true);
+    },
+  }), [resetZoom, scale, translateX, translateY]);
+
+  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>
+        <View style={lightboxStyles.stage} {...panResponder.panHandlers}>
+          {uri ? (
+            <Animated.Image
+              source={{ uri }}
+              resizeMode="contain"
+              style={[
+                lightboxStyles.image,
+                { transform: [{ translateX }, { translateY }, { scale }] },
+              ]}
+            />
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+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' },
+  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' },
+  resetText: { color: '#FFFFFF', fontSize: 13, fontWeight: '700' },
+  stage: { flex: 1, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+  image: { width: '100%', height: '100%' },
+});
+
 function colorWithOpacity(hex, opacity) {
   const value = String(hex || '#F5F7FB').replace('#', '');
   if (!/^[0-9a-f]{6}$/i.test(value)) return hex;
@@ -81,6 +247,7 @@ function RegantisChat(props) {
     style,
     initialView = 'home',
     onClose,
+    onBack,
     onViewChange,
     onMessage,
     onUnreadChange,
@@ -119,6 +286,7 @@ function RegantisChat(props) {
   const [ratingComment, setRatingComment] = React.useState('');
   const [ratingStatus, setRatingStatus] = React.useState('');
   const [busyAction, setBusyAction] = React.useState('');
+  const [lightboxUri, setLightboxUri] = React.useState('');
   const listRef = React.useRef(null);
 
   React.useEffect(() => {
@@ -146,7 +314,7 @@ function RegantisChat(props) {
     }
   }, [activeView, state.messages.length]);
 
-  const t = key => state.texts[key] || key;
+  const t = key => state.texts[key] || localText(language, key) || key;
   const palette = makePalette(state.settings);
   const styles = React.useMemo(() => buildStyles(palette), [
     palette.primary,
@@ -336,7 +504,7 @@ function RegantisChat(props) {
       <View style={[styles.messageRow, visitor ? styles.messageRowRight : styles.messageRowLeft]}>
         <View style={[styles.bubble, bubbleStyle]}>
           {isImage ? (
-            <Pressable onPress={() => Linking.openURL(attachment.url)}>
+            <Pressable onPress={() => setLightboxUri(attachment.url)}>
               <Image source={{ uri: attachment.url }} style={styles.attachmentImage} resizeMode="cover" />
             </Pressable>
           ) : attachment ? (
@@ -368,7 +536,14 @@ function RegantisChat(props) {
           <View pointerEvents="none" style={styles.heroDecorationC} />
 
           <View style={styles.homeTop}>
-            <View>{renderLogo(42, 0)}</View>
+            <View style={styles.homeTopLeft}>
+              {typeof onBack === 'function' || typeof onClose === 'function' ? (
+                <Pressable accessibilityRole="button" accessibilityLabel={t('back')} style={styles.iconButton} onPress={typeof onBack === 'function' ? onBack : onClose}>
+                  <Text style={styles.homeBackIcon}>‹</Text>
+                </Pressable>
+              ) : null}
+              <View>{renderLogo(42, 0)}</View>
+            </View>
             {typeof onClose === 'function' ? (
               <Pressable accessibilityRole="button" accessibilityLabel={t('minimize')} style={styles.iconButton} onPress={onClose}>
                 <Text style={styles.minimizeIcon}>−</Text>
@@ -517,9 +692,11 @@ function RegantisChat(props) {
 
         {attachOpen ? (
           <View style={styles.attachmentMenu}>
+            {Platform.OS === 'android' || Platform.OS === 'ios' ? (
+              <Pressable style={styles.attachmentAction} onPress={() => pick('camera')}><Text style={styles.attachmentActionIcon}>◉</Text><Text style={styles.attachmentActionText}>{t('attach_camera')}</Text></Pressable>
+            ) : null}
             <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}
 
@@ -663,6 +840,14 @@ function RegantisChat(props) {
           </View>
         </View>
       </Modal>
+
+      <ImageLightbox
+        visible={!!lightboxUri}
+        uri={lightboxUri}
+        onClose={() => setLightboxUri('')}
+        closeLabel={t('lightbox_close')}
+        resetLabel={t('lightbox_reset')}
+      />
     </KeyboardAvoidingView>
   );
 }
@@ -688,6 +873,8 @@ function buildStyles(p) {
     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 },
+    homeTopLeft: { flexDirection: 'row', alignItems: 'center', gap: 9 },
+    homeBackIcon: { color: p.text, fontSize: 37, lineHeight: 38, marginTop: -5 },
     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 },

package/src/client.js

@@ -438,10 +438,10 @@ class RegantisChatClient {
   }
 
   async pickAndUpload(kind) {
-    const type = kind === 'image' ? 'image' : 'file';
-    const file = kind === 'screenshot' ? await native.captureScreenshot() : await native.pickAttachment(type);
+    const type = kind === 'image' || kind === 'camera' ? 'image' : 'file';
+    const file = kind === 'camera' ? await native.takePhoto() : await native.pickAttachment(type);
     if (!file) return null;
-    return this.uploadAttachment(file, kind === 'screenshot' ? 'image' : type);
+    return this.uploadAttachment(file, type);
   }
 
   async setTranslationLanguage(languageCode) {

package/src/defaults.js

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

package/src/native.js

@@ -32,11 +32,11 @@ async function pickAttachment(kind) {
   return native.pickAttachment(kind === 'image' ? 'image' : 'file');
 }
 
-async function captureScreenshot() {
-  if (!native || !native.captureScreenshot) {
-    throw new Error('NATIVE_SCREENSHOT_UNAVAILABLE');
+async function takePhoto() {
+  if (!native || !native.takePhoto) {
+    throw new Error('NATIVE_CAMERA_UNAVAILABLE');
   }
-  return native.captureScreenshot();
+  return native.takePhoto();
 }
 
 function playIncomingSound() {
@@ -51,6 +51,6 @@ module.exports = {
   removeItem,
   getAppInfo,
   pickAttachment,
-  captureScreenshot,
+  takePhoto,
   playIncomingSound,
 };