@robylon/react-native-sdk 2.2.0 → 2.2.1-staging.0

package/src/hooks/useChatbotEvents.ts

@@ -0,0 +1,117 @@
+import { useCallback, useRef } from "react";
+import { getSystemInfo } from "../utils/systemInfo";
+import { logger } from "../utils/logger";
+import {
+  ChatbotEventType,
+  AllEventTypes,
+  ChatbotEventHandler,
+} from "../types/events";
+import { API_URL } from "../constants";
+
+interface EventHookProps {
+  api_key: string;
+  chatbotConfig: any;
+  user_profile?: Record<string, any>;
+  onEvent?: ChatbotEventHandler;
+  systemInfo: { os: string; browser: string }; // Add this to get system info from WebView
+}
+
+export const useChatbotEvents = ({
+  api_key,
+  chatbotConfig,
+  user_profile,
+  onEvent,
+  systemInfo,
+}: EventHookProps) => {
+  // Held in refs so that emitEvent keeps a stable identity across renders.
+  // Host apps routinely pass an inline onEvent and an inline user_profile
+  // object literal; with those in the dependency arrays, emitEvent changed
+  // identity on every render, which re-ran the effects keyed on it, which
+  // re-emitted events, which re-rendered the host. That loop also POSTed to
+  // /users/sdk/record-logs/ on every iteration.
+  const onEventRef = useRef(onEvent);
+  const chatbotConfigRef = useRef(chatbotConfig);
+  const userProfileRef = useRef(user_profile);
+  const systemInfoRef = useRef(systemInfo);
+  onEventRef.current = onEvent;
+  chatbotConfigRef.current = chatbotConfig;
+  userProfileRef.current = user_profile;
+  systemInfoRef.current = systemInfo;
+
+  const onInternalEvent = useCallback(
+    async (
+      eventType: AllEventTypes,
+      additionalData: Record<string, any> = {}
+    ) => {
+      if (!api_key) return;
+
+      const chatbotConfig = chatbotConfigRef.current;
+      const user_profile = userProfileRef.current;
+
+      try {
+        const apiUrl = API_URL;
+        const sysInfo = getSystemInfo(systemInfoRef.current);
+
+        const eventData = {
+          trigger_time: Date.now(),
+          channel: "CHATBOT",
+          org_id: api_key,
+          client_user_id: chatbotConfig?.isAnonymous
+            ? "Anonymous"
+            : String(chatbotConfig?.userId || ""),
+          event_type: eventType,
+          user_profile: { ...(user_profile || {}) },
+          ...additionalData,
+        };
+
+        const payload = {
+          org_id: api_key,
+          event_data: eventData,
+          metadata: {
+            timestamp: Date.now(),
+            ...sysInfo,
+          },
+          event_type: "INFO",
+          user_id: chatbotConfig?.userId,
+        };
+
+        logger.debug("Sending internal event:", payload);
+
+        const response = await fetch(`${apiUrl}/users/sdk/record-logs/`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to send internal event: ${response.statusText}`
+          );
+        }
+      } catch (error) {
+        logger.error("Failed to send internal event:", error);
+      }
+    },
+    [api_key]
+  );
+
+  const emitEvent = useCallback(
+    (type: ChatbotEventType, data?: any) => {
+      const timestamp = Date.now();
+      // Isolated so that a throwing host handler cannot prevent the internal
+      // event from being recorded, or break the caller.
+      try {
+        onEventRef.current?.({ type, timestamp, data });
+      } catch (error) {
+        logger.error("onEvent handler threw an error:", error);
+      }
+      onInternalEvent(type, { ...data, timestamp });
+    },
+    [onInternalEvent]
+  );
+
+  return {
+    emitEvent,
+    onInternalEvent,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,10 @@
+export { default as Chatbot } from "./Chatbotsdk";
+export { openChatbot } from "./openChatbot";
+export {
+  errorTracker,
+  ErrorTrackingService,
+} from "./services/ErrorTrackingService";
+export * from "./constants/errorConstants";
+export * from "./types/events";
+
+export type { ChatbotProps, ChatbotRef } from "./Chatbotsdk";

package/src/openChatbot.ts

@@ -0,0 +1,11 @@
+import { Linking } from "react-native";
+import { BASE_CHATBOT_URL } from "./constants";
+
+export const openChatbot = (
+  chatbotId: string,
+  additionalParams: Record<string, string> = {}
+): void => {
+  const params = new URLSearchParams({ id: chatbotId, ...additionalParams });
+  const url = `${BASE_CHATBOT_URL}?${params.toString()}`;
+  Linking.openURL(url);
+};

package/src/services/ErrorTrackingService.ts

@@ -0,0 +1,217 @@
+import { getSystemInfo } from "../utils/systemInfo";
+import { logger } from "../utils/logger";
+import { API_URL } from "../constants";
+import { Platform } from "react-native";
+
+export enum EventType {
+  ERROR = "ERROR",
+  INFO = "INFO",
+}
+
+export interface ErrorEvent {
+  message: string;
+  stack?: string;
+  componentName?: string | null | undefined;
+  additionalInfo?: Record<string, any>;
+  timestamp: number;
+}
+
+export interface LogPayload {
+  org_id: string;
+  event_data: ErrorEvent;
+  metadata: Record<string, any>;
+  event_type: EventType;
+  user_id?: string | number | null;
+}
+
+export class ErrorTrackingService {
+  private static instance: ErrorTrackingService;
+  private apiKey: string = "";
+  private userId: string | number | null | undefined = null;
+  private preInitQueue: Array<{
+    error: Error | string;
+    componentName?: string | null | undefined;
+    additionalInfo?: Record<string, any>;
+  }> = [];
+  private isInitialized = false;
+
+  private constructor() {}
+
+  static getInstance(): ErrorTrackingService {
+    if (!ErrorTrackingService.instance) {
+      ErrorTrackingService.instance = new ErrorTrackingService();
+    }
+    return ErrorTrackingService.instance;
+  }
+
+  initialize(apiKey: string, userId: string | number | null = null) {
+    try {
+      // Handle pre-init errors
+      if (this.preInitQueue.length > 0) {
+        const payload: LogPayload = {
+          org_id: "UNINITALIZED",
+          event_data: {
+            message: `SDK Initialization Failed: Required parameter 'api_key' is ${
+              apiKey === undefined
+                ? "undefined"
+                : apiKey === null
+                ? "null"
+                : apiKey === ""
+                ? "empty string"
+                : `invalid: ${apiKey}`
+            }`,
+            componentName: "ErrorTrackingService",
+            additionalInfo: {
+              preInitError: true,
+              apiKey,
+              userId,
+              timestamp: Date.now(),
+            },
+            timestamp: Date.now(),
+          },
+          metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+          event_type: EventType.ERROR,
+          user_id: userId,
+        };
+
+        this.sendLog(payload).catch((error) =>
+          logger.error("Send log error:", error)
+        );
+      }
+
+      this.apiKey = apiKey;
+      this.userId = userId;
+      this.isInitialized = true;
+
+      this.processPreInitQueue();
+    } catch (error) {
+      logger.error("Error during ErrorTrackingService initialization:", error);
+      this.preInitQueue.push({
+        error: error instanceof Error ? error : new Error(String(error)),
+        componentName: "ErrorTrackingService",
+        additionalInfo: { apiKey, userId },
+      });
+    }
+  }
+
+  private async processPreInitQueue() {
+    if (!this.preInitQueue.length) return;
+
+    logger.info(
+      `Processing ${this.preInitQueue.length} pre-initialization errors`
+    );
+
+    for (const item of this.preInitQueue) {
+      await this.trackError(item.error, item.componentName, {
+        ...item.additionalInfo,
+        preInitError: true,
+      });
+    }
+
+    this.preInitQueue = [];
+  }
+
+  private async sendLog(payload: LogPayload): Promise<void> {
+    try {
+      logger.debug("Sending error log:", payload);
+      const response = await fetch(`${API_URL}/users/sdk/record-logs/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        logger.error("Failed to send error log:", await response.text());
+      }
+    } catch (error) {
+      logger.error("Error sending log:", error);
+    }
+  }
+
+  async trackError(
+    error: Error | string,
+    componentName: string | null | undefined,
+    additionalInfo?: Record<string, any>
+  ) {
+    if (!this.isInitialized) {
+      const payload: LogPayload = {
+        org_id: "UNINITALIZED",
+        event_data: {
+          message: error instanceof Error ? error.message : error,
+          stack: error instanceof Error ? error.stack : undefined,
+          componentName,
+          additionalInfo: {
+            ...additionalInfo,
+            preInitError: true,
+            timestamp: Date.now(),
+          },
+          timestamp: Date.now(),
+        },
+        metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+        event_type: EventType.ERROR,
+        user_id: this.userId,
+      };
+
+      try {
+        await this.sendLog(payload);
+      } catch (sendError) {
+        this.preInitQueue.push({ error, componentName, additionalInfo });
+        logger.warn("Error tracked before initialization, queuing:", error);
+      }
+      return;
+    }
+
+    const errorEvent: ErrorEvent = {
+      message: error instanceof Error ? error.message : error,
+      stack: error instanceof Error ? error.stack : undefined,
+      componentName,
+      additionalInfo: {
+        ...additionalInfo,
+        timestamp: Date.now(),
+      },
+      timestamp: Date.now(),
+    };
+
+    const payload: LogPayload = {
+      org_id: this.apiKey || "UNINITALIZED",
+      event_data: errorEvent,
+      metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+      event_type: EventType.ERROR,
+      user_id: this.userId,
+    };
+
+    await this.sendLog(payload);
+  }
+
+  async trackInfo(
+    message: string,
+    componentName: string | null | undefined,
+    additionalInfo?: Record<string, any>
+  ) {
+    if (!this.apiKey) {
+      logger.error("Error tracking not initialized");
+      return;
+    }
+
+    const infoEvent: ErrorEvent = {
+      message,
+      componentName,
+      additionalInfo,
+      timestamp: Date.now(),
+    };
+
+    const payload: LogPayload = {
+      org_id: this.apiKey,
+      event_data: infoEvent,
+      metadata: getSystemInfo({ os: Platform.OS, browser: "React Native" }),
+      event_type: EventType.INFO,
+      user_id: this.userId,
+    };
+
+    await this.sendLog(payload);
+  }
+}
+
+export const errorTracker = ErrorTrackingService.getInstance();

package/src/types/events.ts

@@ -0,0 +1,28 @@
+export enum ChatbotEventType {
+  CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED",
+  CHATBOT_BUTTON_CLICKED = "CHATBOT_BUTTON_CLICKED",
+  CHATBOT_OPENED = "CHATBOT_OPENED",
+  CHATBOT_CLOSED = "CHATBOT_CLOSED",
+  CHATBOT_APP_READY = "CHATBOT_APP_READY",
+  CHATBOT_LOADED = "CHATBOT_LOADED",
+  CHAT_INITIALIZED = "CHAT_INITIALIZED",
+  SESSION_REFRESHED = "SESSION_REFRESHED",
+  CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED",
+  REQUEST_MIC_PERMISSION = "REQUEST_MIC_PERMISSION",
+  MIC_PERMISSION_GRANTED = "MIC_PERMISSION_GRANTED",
+  MIC_PERMISSION_DENIED = "MIC_PERMISSION_DENIED",
+}
+
+export enum InternalEventType {
+  CHAT_MOVED = "CHAT_MOVED",
+}
+
+export type AllEventTypes = ChatbotEventType | InternalEventType;
+
+export interface ChatbotEvent {
+  type: ChatbotEventType;
+  timestamp: number;
+  data?: any;
+}
+
+export type ChatbotEventHandler = (event: ChatbotEvent) => void;

package/src/types/react-native-flipper-performance-plugin.d.ts

@@ -0,0 +1,3 @@
+declare module "react-native-flipper-performance-plugin" {
+  export function addPlugin(): void;
+}

package/src/types/react-native-globals.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  interface Global {
+    ErrorUtils: {
+      setGlobalHandler(callback: (error: Error) => void): void;
+      getGlobalHandler(): (error: Error, isFatal?: boolean) => void;
+    };
+  }
+}
+
+export {};

package/src/utils/animations.ts

@@ -0,0 +1,120 @@
+import { Animated, Easing } from "react-native";
+
+// Custom easing function that matches the web version
+export const customEasing = Easing.bezier(0.2, 1.27, 0.29, 0.97);
+
+export const ANIMATION_CONFIG = {
+  DURATION: {
+    ENTER: {
+      TRANSFORM: 200, // 0.2 seconds for enter
+      OPACITY: 150, // 0.15 seconds for enter
+    },
+    EXIT: {
+      TRANSFORM: 100, // 0.1 seconds for exit (faster)
+      OPACITY: 80, // 0.08 seconds for exit (faster)
+    },
+  },
+  SCALE: {
+    BUTTON: {
+      DEFAULT: 1,
+      ACTIVE: 0.85,
+    },
+    IFRAME: {
+      HIDDEN: 0.3,
+      VISIBLE: 1,
+    },
+  },
+  TRANSLATE: {
+    Y: 40, // translateY value for animations
+  },
+};
+
+interface AnimatedValues {
+  scale: Animated.Value;
+  translateY: Animated.Value;
+  opacity: Animated.Value;
+}
+
+export const createAnimatedValues = (): AnimatedValues => ({
+  scale: new Animated.Value(1),
+  translateY: new Animated.Value(0),
+  opacity: new Animated.Value(1),
+});
+
+export const animateWebViewOpen = (
+  animatedValues: AnimatedValues,
+  callback?: () => void
+) => {
+  // Reset initial values
+  animatedValues.scale.setValue(ANIMATION_CONFIG.SCALE.IFRAME.HIDDEN);
+  animatedValues.translateY.setValue(ANIMATION_CONFIG.TRANSLATE.Y);
+  animatedValues.opacity.setValue(0);
+
+  Animated.parallel([
+    // Scale and translate animation
+    Animated.timing(animatedValues.scale, {
+      toValue: ANIMATION_CONFIG.SCALE.IFRAME.VISIBLE,
+      duration: ANIMATION_CONFIG.DURATION.ENTER.TRANSFORM,
+      easing: customEasing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(animatedValues.translateY, {
+      toValue: 0,
+      duration: ANIMATION_CONFIG.DURATION.ENTER.TRANSFORM,
+      easing: customEasing,
+      useNativeDriver: true,
+    }),
+    // Opacity animation
+    Animated.timing(animatedValues.opacity, {
+      toValue: 1,
+      duration: ANIMATION_CONFIG.DURATION.ENTER.OPACITY,
+      easing: Easing.ease,
+      useNativeDriver: true,
+    }),
+  ]).start(callback);
+};
+
+export const animateWebViewClose = (
+  animatedValues: AnimatedValues,
+  callback?: () => void
+) => {
+  Animated.parallel([
+    // Scale and translate animation
+    Animated.timing(animatedValues.scale, {
+      toValue: ANIMATION_CONFIG.SCALE.IFRAME.HIDDEN,
+      duration: ANIMATION_CONFIG.DURATION.EXIT.TRANSFORM,
+      easing: customEasing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(animatedValues.translateY, {
+      toValue: ANIMATION_CONFIG.TRANSLATE.Y,
+      duration: ANIMATION_CONFIG.DURATION.EXIT.TRANSFORM,
+      easing: customEasing,
+      useNativeDriver: true,
+    }),
+    // Opacity animation
+    Animated.timing(animatedValues.opacity, {
+      toValue: 0,
+      duration: ANIMATION_CONFIG.DURATION.EXIT.OPACITY,
+      easing: Easing.ease,
+      useNativeDriver: true,
+    }),
+  ]).start(callback);
+};
+
+export const animateButtonScale = (
+  scale: Animated.Value,
+  isActive: boolean,
+  callback?: () => void
+) => {
+  Animated.timing(scale, {
+    toValue: isActive
+      ? ANIMATION_CONFIG.SCALE.BUTTON.ACTIVE
+      : ANIMATION_CONFIG.SCALE.BUTTON.DEFAULT,
+    duration: isActive
+      ? ANIMATION_CONFIG.DURATION.ENTER.TRANSFORM
+      : ANIMATION_CONFIG.DURATION.EXIT.TRANSFORM,
+    easing: customEasing,
+    useNativeDriver: true,
+  }).start(callback);
+};

package/src/utils/colorUtils.ts

@@ -0,0 +1,35 @@
+export const getBestFontColor = (
+  backgroundColor: string,
+  contrastThreshold = 0.5
+): string => {
+  const whiteShade = "#FFFFFF"; // Light white shade
+  const blackShade = "#0E0E0F"; // Dark black shade
+
+  // Function to convert hex to RGB
+  const hexToRgb = (hex: string) => {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+        }
+      : { r: 0, g: 0, b: 0 };
+  };
+
+  // Function to calculate luminance
+  const luminance = (r: number, g: number, b: number) => {
+    const a = [r, g, b].map((v) => {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+  };
+
+  const { r, g, b } = hexToRgb(backgroundColor);
+  const bgLuminance = luminance(r, g, b);
+
+  return bgLuminance > contrastThreshold ? blackShade : whiteShade;
+};

package/src/utils/cookieUtils.ts

@@ -0,0 +1,7 @@
+export const generateUUID = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};

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);
+    }
+  }
+};