@regantis-sdk/react-native-chat 0.1.0

package/README.md

@@ -0,0 +1,157 @@
+# @regantis/react-native-chat
+
+Native Regantis customer support chat for React Native Android and iOS.
+
+## Compatibility
+
+- React Native 0.77+
+- Android API 24+
+- iOS 15.1+
+- React Native New Architecture and interop-compatible apps
+- No runtime npm dependencies besides `react` and `react-native`
+
+## Install
+
+```bash
+npm install @regantis/react-native-chat
+```
+
+For iOS, install pods after adding the package:
+
+```bash
+cd ios
+pod install
+```
+
+Android is autolinked by React Native.
+
+## Basic usage
+
+```jsx
+import { RegantisChat } from '@regantis/react-native-chat';
+
+export default function SupportScreen() {
+  return <RegantisChat apiKey="YOUR_REACT_NATIVE_CHAT_API_KEY" />;
+}
+```
+
+The SDK downloads the Chat settings and UI texts from the CRM. Theme, colors, logo, agent display, sounds, ratings, transcript, translations and white-label settings do not need to be duplicated in the app.
+
+## Logged-in customer
+
+Do not put the customer identity signing secret in the mobile app. Generate the identity timestamp and HMAC signature on your server and return them through your authenticated app API.
+
+```jsx
+import { RegantisChat } from '@regantis/react-native-chat';
+
+export default function SupportScreen({ user, chatIdentity }) {
+  return (
+    <RegantisChat
+      apiKey="YOUR_REACT_NATIVE_CHAT_API_KEY"
+      language="ro"
+      screen="support"
+      customer={{
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        telephone: user.telephone,
+        identityTimestamp: chatIdentity.timestamp,
+        identitySignature: chatIdentity.signature,
+      }}
+    />
+  );
+}
+```
+
+The signing payload is identical to the web widget:
+
+```text
+timestamp
+customer_id
+name
+lowercase_email
+telephone
+```
+
+Use HMAC-SHA256 and a Unix timestamp in seconds. The CRM currently accepts signatures for 10 minutes.
+
+## Optional overrides
+
+Server configuration remains the default. Per-app overrides are optional:
+
+```jsx
+<RegantisChat
+  apiKey="YOUR_REACT_NATIVE_CHAT_API_KEY"
+  language="en"
+  translationLanguage="de"
+  screen="settings/support"
+  theme={{
+    theme_mode: 'dark',
+    primary_color: '#0B63E5',
+  }}
+  texts={{
+    placeholder: 'Write a message…',
+  }}
+  onMessage={message => {}}
+  onUnreadChange={count => {}}
+  onError={error => {}}
+/>
+```
+
+`language` controls the SDK UI language. `translationLanguage` controls conversation translation when customer translations are enabled in Chat.
+
+## Included features
+
+- persistent anonymous visitor/session identity
+- optional signed logged-in customer identity
+- contact form and prefilled verified customer flow
+- conversation restore
+- message history and older-history pagination
+- send/receive messages
+- chatbot replies and agent handoff
+- WebSocket realtime updates with HTTP polling fallback
+- typing state
+- customer-side translation selector
+- images and files
+- current-app screenshot attachment
+- native incoming-message sound
+- 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
+- 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.
+
+## Headless client
+
+The UI is optional. The same package exports the client if an app needs its own presentation layer:
+
+```js
+import { createRegantisChatClient } from '@regantis/react-native-chat';
+
+const chat = createRegantisChatClient({
+  apiKey: 'YOUR_REACT_NATIVE_CHAT_API_KEY',
+  language: 'ro',
+});
+
+const unsubscribe = chat.subscribe(state => {
+  console.log(state.messages);
+});
+
+await chat.start();
+await chat.sendMessage('Salut');
+
+unsubscribe();
+chat.stop();
+```
+
+## Publishing
+
+```bash
+npm login
+npm publish --access public
+```

package/RegantisReactNativeChat.podspec

@@ -0,0 +1,17 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "RegantisReactNativeChat"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = "https://regantis.technology"
+  s.license      = { :type => "UNLICENSED" }
+  s.author       = { "Regantis" => "info@regantis.technology" }
+  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.dependency "React-Core"
+end

package/android/build.gradle

@@ -0,0 +1,24 @@
+apply plugin: "com.android.library"
+
+def safeExtGet(prop, fallback) {
+    return rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+android {
+    namespace "technology.regantis.chat"
+    compileSdkVersion safeExtGet("compileSdkVersion", 35)
+
+    defaultConfig {
+        minSdkVersion safeExtGet("minSdkVersion", 24)
+        targetSdkVersion safeExtGet("targetSdkVersion", 35)
+    }
+}
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

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

@@ -0,0 +1,244 @@
+package technology.regantis.chat;
+
+import android.app.Activity;
+import android.content.Context;
+import android.content.Intent;
+import android.content.SharedPreferences;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.database.Cursor;
+import android.media.Ringtone;
+import android.media.RingtoneManager;
+import android.net.Uri;
+import android.provider.OpenableColumns;
+import android.view.View;
+import android.webkit.MimeTypeMap;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ActivityEventListener;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.BaseActivityEventListener;
+import com.facebook.react.bridge.Promise;
+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 java.io.File;
+import java.io.FileOutputStream;
+
+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 final ReactApplicationContext reactContext;
+    private Promise pickerPromise;
+
+    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;
+
+            Promise promise = pickerPromise;
+            pickerPromise = null;
+
+            if (resultCode != Activity.RESULT_OK || data == null || data.getData() == null) {
+                promise.resolve(null);
+                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);
+                }
+            } 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);
+        }
+    };
+
+    public RegantisChatNativeModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+        reactContext.addActivityEventListener(activityEventListener);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    private SharedPreferences storage() {
+        return reactContext.getSharedPreferences(STORAGE_NAME, Context.MODE_PRIVATE);
+    }
+
+    @ReactMethod
+    public void getItem(String key, Promise promise) {
+        promise.resolve(storage().getString(key, null));
+    }
+
+    @ReactMethod
+    public void setItem(String key, String value, Promise promise) {
+        storage().edit().putString(key, value).apply();
+        promise.resolve(null);
+    }
+
+    @ReactMethod
+    public void removeItem(String key, Promise promise) {
+        storage().edit().remove(key).apply();
+        promise.resolve(null);
+    }
+
+    @ReactMethod
+    public void getAppInfo(Promise promise) {
+        WritableMap result = Arguments.createMap();
+        result.putString("appId", reactContext.getPackageName());
+        result.putString("platform", "android");
+        try {
+            String versionName = reactContext.getPackageManager()
+                .getPackageInfo(reactContext.getPackageName(), 0)
+                .versionName;
+            result.putString("appVersion", versionName == null ? "" : versionName);
+        } catch (Exception ignored) {
+            result.putString("appVersion", "");
+        }
+        promise.resolve(result);
+    }
+
+    @ReactMethod
+    public void playIncomingSound() {
+        try {
+            Uri soundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
+            Ringtone ringtone = RingtoneManager.getRingtone(reactContext, soundUri);
+            if (ringtone != null) ringtone.play();
+        } catch (Exception ignored) {
+        }
+    }
+
+    @ReactMethod
+    public void captureScreenshot(Promise promise) {
+        Activity activity = getCurrentActivity();
+        if (activity == null) {
+            promise.reject("NO_ACTIVITY", "No active Android Activity");
+            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;
+                }
+
+                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");
+                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();
+                }
+
+                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);
+            }
+        });
+    }
+
+    @ReactMethod
+    public void pickAttachment(String kind, Promise promise) {
+        Activity activity = getCurrentActivity();
+        if (activity == null) {
+            promise.reject("NO_ACTIVITY", "No active Android Activity");
+            return;
+        }
+        if (pickerPromise != null) {
+            promise.reject("PICKER_BUSY", "An attachment picker is already open");
+            return;
+        }
+
+        Intent intent = new Intent(Intent.ACTION_OPEN_DOCUMENT);
+        intent.addCategory(Intent.CATEGORY_OPENABLE);
+        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_PERSISTABLE_URI_PERMISSION);
+        if ("image".equals(kind)) {
+            intent.setType("image/*");
+        } else {
+            intent.setType("*/*");
+        }
+
+        pickerPromise = promise;
+        try {
+            activity.startActivityForResult(intent, PICK_ATTACHMENT_REQUEST);
+        } catch (Exception error) {
+            pickerPromise = null;
+            promise.reject("PICKER_FAILED", error);
+        }
+    }
+
+    private String getDisplayName(Uri uri) {
+        String name = null;
+        try (Cursor cursor = reactContext.getContentResolver().query(uri, null, null, null, null)) {
+            if (cursor != null && cursor.moveToFirst()) {
+                int index = cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME);
+                if (index >= 0) name = cursor.getString(index);
+            }
+        } catch (Exception ignored) {
+        }
+        if (name == null || name.trim().isEmpty()) {
+            String segment = uri.getLastPathSegment();
+            name = segment == null || segment.trim().isEmpty() ? "attachment" : segment;
+        }
+        return name;
+    }
+
+    private double getSize(Uri uri) {
+        try (Cursor cursor = reactContext.getContentResolver().query(uri, null, null, null, null)) {
+            if (cursor != null && cursor.moveToFirst()) {
+                int index = cursor.getColumnIndex(OpenableColumns.SIZE);
+                if (index >= 0 && !cursor.isNull(index)) return cursor.getLong(index);
+            }
+        } catch (Exception ignored) {
+        }
+        return 0;
+    }
+
+    private String getMimeType(Uri uri) {
+        String type = reactContext.getContentResolver().getType(uri);
+        if (type != null && !type.trim().isEmpty()) return type;
+
+        String extension = MimeTypeMap.getFileExtensionFromUrl(uri.toString());
+        if (extension != null && !extension.isEmpty()) {
+            String guessed = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension.toLowerCase());
+            if (guessed != null) return guessed;
+        }
+        return "application/octet-stream";
+    }
+}

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

@@ -0,0 +1,28 @@
+package technology.regantis.chat;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class RegantisChatPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new RegantisChatNativeModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

package/index.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type RegantisChatCustomer = {
+  id?: string | number;
+  customerId?: string | number;
+  name?: string;
+  email?: string;
+  telephone?: string;
+  phone?: string;
+  identityTimestamp?: string | number;
+  identitySignature?: string;
+};
+
+export type RegantisChatTheme = Partial<{
+  operator_name: string;
+  use_profile_names: 0 | 1;
+  minimized_type: 'bubble' | 'bar';
+  theme_mode: 'light' | 'dark';
+  color_mode: 'theme' | 'advanced';
+  theme_color: string;
+  primary_color: string;
+  chat_background: string;
+  chat_background_opacity: number;
+  customer_bubble: string;
+  customer_text: string;
+  agent_bubble: string;
+  agent_text: string;
+  system_text: string;
+  launcher_background: string;
+  launcher_icon_color: string;
+  desktop_align: 'left' | 'right';
+  desktop_side_spacing: number;
+  desktop_bottom_spacing: number;
+  desktop_visibility: string;
+  mobile_enabled: 0 | 1;
+  mobile_same_as_desktop: 0 | 1;
+  mobile_minimized_type: 'bubble' | 'bar';
+  mobile_align: 'left' | 'right';
+  mobile_side_spacing: number;
+  mobile_bottom_spacing: number;
+  mobile_visibility: string;
+  show_logo: 0 | 1;
+  logo_url: string;
+  show_agent_photo: 0 | 1;
+  sound_enabled: 0 | 1;
+  rating_enabled: 0 | 1;
+  transcript_enabled: 0 | 1;
+  before_you_go_enabled: 0 | 1;
+  white_label: 0 | 1;
+}>;
+
+export type RegantisChatProps = {
+  apiKey: string;
+  serverUrl?: string;
+  language?: string;
+  translationLanguage?: string;
+  customer?: RegantisChatCustomer;
+  theme?: RegantisChatTheme;
+  texts?: Record<string, string>;
+  screen?: string;
+  style?: StyleProp<ViewStyle>;
+  keyboardVerticalOffset?: number;
+  onMessage?: (message: any) => void;
+  onUnreadChange?: (count: number) => void;
+  onError?: (error: Error) => void;
+};
+
+export class RegantisChatClient {
+  constructor(config: RegantisChatProps);
+  start(): Promise<any>;
+  stop(): void;
+  subscribe(listener: (state: any) => void): () => void;
+  getState(): any;
+  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>;
+  setTranslationLanguage(languageCode: string): Promise<void>;
+  closeChat(): Promise<any>;
+  reopenChat(): Promise<any>;
+  rate(rating: 0 | 1): Promise<any>;
+  rateComment(comment: string): Promise<any>;
+  sendTranscript(email: string): Promise<any>;
+  markRead(): Promise<void>;
+  setVisible(visible: boolean): void;
+  setSoundEnabled(enabled: boolean): void;
+}
+
+export const RegantisChat: React.ComponentType<RegantisChatProps>;
+export function createRegantisChatClient(config: RegantisChatProps): RegantisChatClient;

package/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const RegantisChat = require('./src/RegantisChat');
+const { RegantisChatClient } = require('./src/client');
+
+module.exports = {
+  RegantisChat,
+  RegantisChatClient,
+  createRegantisChatClient: config => new RegantisChatClient(config),
+};

package/ios/RegantisChatNative.h

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