@robylon/react-native-sdk 2.0.21-dev.1 → 2.0.21-staging.0

package/src/utils/debugConfig.ts

@@ -0,0 +1,56 @@
+import { Platform } from "react-native";
+
+declare global {
+  interface Window {
+    ReactNativeWebView: any;
+  }
+}
+
+declare let global: {
+  XMLHttpRequest: any;
+  FormData: any;
+  originalXMLHttpRequest: any;
+  originalFormData: any;
+};
+
+export const enableNetworkDebug = () => {
+  if (__DEV__) {
+    // Enable network request debugging
+    global.XMLHttpRequest =
+      global.originalXMLHttpRequest || global.XMLHttpRequest;
+    global.FormData = global.originalFormData || global.FormData;
+  }
+};
+
+export const enableWebViewDebug = (webViewRef: any) => {
+  if (__DEV__ && Platform.OS === "ios") {
+    // Enable console.log from WebView to show in native debugger
+    const script = `
+      window.onerror = function(message, sourcefile, lineno, colno, error) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'ERROR',
+          data: { message, sourcefile, lineno, colno, error: error?.toString() }
+        }));
+      };
+      
+      console = new Proxy(console, {
+        get: function(target, property) {
+          const origMethod = target[property];
+          return function(...args) {
+            const logData = args.map(arg => 
+              typeof arg === 'object' ? JSON.stringify(arg) : arg
+            ).join(' ');
+            
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'CONSOLE',
+              level: property,
+              data: logData
+            }));
+            origMethod.apply(target, args);
+          };
+        }
+      });
+    true;`;
+    webViewRef.current?.injectJavaScript(script);
+  }
+};

package/src/utils/debugMenu.ts

@@ -0,0 +1,14 @@
+import { Platform, NativeModules } from "react-native";
+
+export const openDebugMenu = () => {
+  if (Platform.OS === "ios") {
+    NativeModules.DevMenu.show();
+  }
+};
+
+export const openDebuggerFromApp = () => {
+  if (Platform.OS === "ios") {
+    // For iOS
+    NativeModules.DevSettings.setIsDebuggingRemotely(true);
+  }
+};

package/src/utils/errorHandler.ts

@@ -0,0 +1,58 @@
+import { logger } from "./logger";
+import { ErrorTypes } from "../constants/errorConstants";
+import { Platform } from "react-native";
+import { errorTracker } from "../services/ErrorTrackingService";
+
+// Global error handler for uncaught errors and promise rejections
+export const setupGlobalErrorHandlers = () => {
+  if (__DEV__) {
+    // Handle synchronous errors
+    const errorHandler = (error: Error, isFatal?: boolean) => {
+      errorTracker.trackError(error, "GlobalErrorHandler", {
+        isFatal,
+        type: ErrorTypes.RUNTIME_ERROR,
+        platform: Platform.OS,
+      });
+    };
+
+    // Handle promise rejections
+    const rejectionHandler = (event: any) => {
+      errorTracker.trackError(
+        event?.reason || new Error("Unknown Promise Error"),
+        "UnhandledPromiseRejection",
+        {
+          type: ErrorTypes.RUNTIME_ERROR,
+          platform: Platform.OS,
+        }
+      );
+    };
+
+    // Set up handlers
+    if ((global as any).ErrorUtils) {
+      const prevHandler = (global as any).ErrorUtils.getGlobalHandler();
+      (global as any).ErrorUtils.setGlobalHandler(
+        (error: Error, isFatal?: boolean) => {
+          errorHandler(error, isFatal);
+          prevHandler(error, isFatal);
+        }
+      );
+    }
+
+    // Handle promise rejections
+    const setupPromiseRejectionTracking = () => {
+      const tracking = require("promise/setimmediate/rejection-tracking");
+      tracking.enable({
+        allRejections: true,
+        onUnhandled: (id: number, error: Error) => {
+          rejectionHandler({ reason: error });
+        },
+      });
+    };
+
+    try {
+      setupPromiseRejectionTracking();
+    } catch (error) {
+      logger.warn("Promise rejection tracking setup failed:", error);
+    }
+  }
+};

package/src/utils/logger.ts

@@ -0,0 +1,14 @@
+export const logger = {
+  error: (message: string, error?: any) => {
+    console.error(message, error);
+  },
+  info: (message: string, data?: any) => {
+    console.info(message, data);
+  },
+  warn: (message: string, data?: any) => {
+    console.warn(message, data);
+  },
+  debug: (message: string, data?: any) => {
+    console.log(message, data);
+  },
+};

package/src/utils/systemInfo.ts

@@ -0,0 +1,84 @@
+import { Platform, Dimensions, PixelRatio } from "react-native";
+import { SDK_VERSION } from "../version";
+
+interface ScreenSize {
+  width: number;
+  height: number;
+}
+
+interface SystemInfo {
+  platform: string;
+  os: string;
+  browser: string;
+  sdk_version: string;
+  device: string;
+  screen_size: ScreenSize;
+}
+
+// Get device type based on platform and screen dimensions
+const getDeviceType = (): string => {
+  const { width, height } = Dimensions.get("window");
+  const aspectRatio = height / width;
+
+  if (Platform.OS === "ios") {
+    return Platform.isPad ? "iPad" : "iPhone";
+  } else if (Platform.OS === "android") {
+    return aspectRatio < 1.6 ? "Android Tablet" : "Android Phone";
+  }
+  return "Desktop";
+};
+
+// Get screen dimensions with pixel ratio
+const getScreenSize = (): ScreenSize => {
+  return {
+    width: Math.round(Dimensions.get("window").width * PixelRatio.get()),
+    height: Math.round(Dimensions.get("window").height * PixelRatio.get()),
+  };
+};
+
+// Get browser detection script
+export const getBrowserAndOSInfoScript = (): string => {
+  return `
+    function getOSAndBrowser() {
+      const userAgent = navigator.userAgent;
+      
+      // OS Detection
+      let os = "unknown";
+      if (userAgent.indexOf("Win") !== -1) os = "Windows";
+      else if (userAgent.indexOf("Mac") !== -1) os = "MacOS";
+      else if (userAgent.indexOf("Linux") !== -1) os = "Linux";
+      else if (userAgent.indexOf("Android") !== -1) os = "Android";
+      else if (userAgent.indexOf("like Mac") !== -1) os = "iOS";
+
+      // Browser Detection
+      let browser = "unknown";
+      if (userAgent.indexOf("Chrome") !== -1) browser = "Chrome";
+      else if (userAgent.indexOf("Safari") !== -1) browser = "Safari";
+      else if (userAgent.indexOf("Firefox") !== -1) browser = "Firefox";
+      else if (userAgent.indexOf("Edge") !== -1) browser = "Edge";
+      else if (userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1) browser = "IE";
+
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'SYSTEM_INFO',
+        data: { os, browser }
+      }));
+    }
+    getOSAndBrowser();
+    true;
+  `;
+};
+
+// Get complete system information
+export const getSystemInfo = (webViewSystemInfo: {
+  os: string;
+  browser: string;
+}): SystemInfo => {
+  return {
+    platform: Platform.OS,
+    os: webViewSystemInfo.os || Platform.OS,
+    browser: webViewSystemInfo.browser || "WebView",
+    sdk_version: SDK_VERSION,
+    device: getDeviceType(),
+    screen_size: getScreenSize(),
+  };
+};

package/src/utils/webViewStorage.ts

@@ -0,0 +1,62 @@
+import { logger } from "./logger";
+
+export enum StorageMessageType {
+  GET_STORAGE = "GET_STORAGE",
+  SET_STORAGE = "SET_STORAGE",
+  STORAGE_READY = "STORAGE_READY",
+  STORAGE_ERROR = "STORAGE_ERROR",
+  STORAGE_RESPONSE = "STORAGE_RESPONSE",
+}
+
+export interface StorageMessage {
+  type: StorageMessageType;
+  key?: string;
+  value?: string;
+  error?: string;
+}
+
+export const getStorageScript = () => `
+  window.handleStorageOperation = function(message) {
+    try {
+      switch(message.type) {
+        case '${StorageMessageType.GET_STORAGE}':
+          const value = localStorage.getItem(message.key);
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: '${StorageMessageType.STORAGE_RESPONSE}',
+            key: message.key,
+            value: value
+          }));
+          break;
+        case '${StorageMessageType.SET_STORAGE}':
+          localStorage.setItem(message.key, message.value);
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: '${StorageMessageType.STORAGE_RESPONSE}',
+            key: message.key,
+            value: message.value
+          }));
+          break;
+      }
+    } catch (error) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: '${StorageMessageType.STORAGE_ERROR}',
+        error: error.message
+      }));
+    }
+  };
+
+  window.ReactNativeWebView.postMessage(JSON.stringify({
+    type: '${StorageMessageType.STORAGE_READY}'
+  }));
+`;
+
+export const createStorageMessage = (
+  type: StorageMessageType,
+  key?: string,
+  value?: string
+): string => {
+  return `window.handleStorageOperation(${JSON.stringify({
+    type,
+    key,
+    value,
+  })});`;
+};

package/src/version.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export { SDK_VERSION } from './versions/version.staging';

package/src/versions/version.dev.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = '2.0.21-dev.2';

package/src/versions/version.production.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = "0.0.0";

package/src/versions/version.staging.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not modify it manually.
+export const SDK_VERSION = '2.0.21-staging.0';

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "./lib/typescript"
+  },
+  "exclude": [
+    "**/__tests__",
+    "**/__mocks__",
+    "**/__fixtures__",
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext"],
+    "jsx": "react-native",
+    "strict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "types": ["react-native", "node"]
+  },
+  "exclude": [
+    "node_modules",
+    "babel.config.js",
+    "metro.config.js",
+    "jest.config.js"
+  ]
+}

package/usage/react-native-ios-docs.md

@@ -1,185 +0,0 @@
-# Robylon React Native SDK Documentation
-
-## Installation
-
-First, install the package using npm or yarn:
-
-```bash
-# Using npm
-npm install @robylon/react-native-sdk react-native-webview
-
-# Using yarn
-yarn add @robylon/react-native-sdk react-native-webview
-```
-
-## Prerequisites
-
-- React Native project set up for iOS
-- `react-native-webview` installed and configured
-- Valid Robylon API key
-
-## Basic Implementation
-
-### 1. Import the SDK
-
-```typescript
-import { ChatbotSDK } from "@robylon/react-native-sdk";
-```
-
-### 2. Basic Usage
-
-```typescript
-import React from "react";
-import { View } from "react-native";
-import { ChatbotSDK } from "@robylon/react-native-sdk";
-
-const App = () => {
-  return (
-    <View style={{ flex: 1 }}>
-      <ChatbotSDK
-        api_key="YOUR_API_KEY"
-        user_id="USER_ID"
-        user_token="USER_TOKEN"
-      />
-    </View>
-  );
-};
-
-export default App;
-```
-
-## Props Reference
-
-### Required Props
-
-| Prop      | Type   | Description                    |
-| --------- | ------ | ------------------------------ |
-| `api_key` | string | Your Robylon API key           |
-| `user_id` | string | Unique identifier for the user |
-
-### Optional Props
-
-| Prop                   | Type                   | Default   | Description                                  |
-| ---------------------- | ---------------------- | --------- | -------------------------------------------- |
-| `user_token`           | string                 | undefined | Authentication token for the user            |
-| `additional_params`    | Record<string, string> | {}        | Additional parameters to pass to the chatbot |
-| `show_floating_button` | boolean                | true      | Whether to show the floating button          |
-| `isFullScreen`         | boolean                | true      | Whether to display in fullscreen mode        |
-| `enableAnimation`      | boolean                | true      | Enable/disable animations                    |
-| `onMessage`            | (message: any) => void | undefined | Callback for chatbot messages                |
-| `onOpen`               | () => void             | undefined | Callback when chatbot opens                  |
-| `onClose`              | () => void             | undefined | Callback when chatbot closes                 |
-
-## Advanced Implementation
-
-### Custom Configuration Example
-
-```typescript
-import React from "react";
-import { View } from "react-native";
-import { ChatbotSDK } from "@robylon/react-native-sdk";
-
-const App = () => {
-  const handleMessage = (message) => {
-    console.log("Received message:", message);
-  };
-
-  const handleOpen = () => {
-    console.log("Chatbot opened");
-  };
-
-  const handleClose = () => {
-    console.log("Chatbot closed");
-  };
-
-  return (
-    <View style={{ flex: 1 }}>
-      <ChatbotSDK
-        api_key="YOUR_API_KEY"
-        user_id="USER_ID"
-        user_token="USER_TOKEN"
-        additional_params={{
-          theme: "light",
-          language: "en",
-        }}
-        show_floating_button={true}
-        isFullScreen={true}
-        enableAnimation={true}
-        onMessage={handleMessage}
-        onOpen={handleOpen}
-        onClose={handleClose}
-      />
-    </View>
-  );
-};
-
-export default App;
-```
-
-<!-- ### Handling Messages
-
-The `onMessage` callback receives messages in the following format:
-
-```typescript
-interface ChatbotMessage {
-  type: string;
-  data?: any;
-}
-```
-
-Example message handler:
-
-```typescript
-const handleMessage = (message: ChatbotMessage) => {
-  switch (message.type) {
-    case 'user_message':
-      console.log('User sent:', message.data);
-      break;
-    case 'bot_response':
-      console.log('Bot responded:', message.data);
-      break;
-    // Handle other message types
-  }
-};
-``` -->
-
-## Styling and Customization
-
-The SDK automatically fetches and applies your organization's branding configuration, including:
-
-- Brand color
-- Launcher logo
-- Welcome message
-
-<!-- These are fetched using the provided API key and user credentials. -->
-
-## Best Practices
-
-1. **Error Handling**: Always implement error handling for network requests and message processing.
-2. **User Authentication**: Ensure user_id and user_token are properly managed and updated.
-3. **Performance**: Consider using `useMemo` or `useCallback` for callback functions to optimize performance.
-4. **Testing**: Test the implementation across different iOS devices and orientations.
-
-## Troubleshooting
-
-Common issues and solutions:
-
-1. **WebView Not Loading**
-
-   - Verify internet connectivity
-   - Check if API key is valid
-   - Ensure WebView permissions are properly configured
-
-2. **Authentication Issues**
-
-   - Verify user_token is valid and not expired
-   - Check if user_id is correctly formatted
-
-3. **UI Issues**
-   - Ensure proper layout hierarchy
-   - Check for conflicts with other UI elements
-   - Verify styling properties
-
-## Support
-
-For additional support or to report issues, please contact Robylon support or refer to the official documentation.