@robylon/react-native-sdk 2.0.16-staging.2 → 2.0.16-staging.3

package/src/Chatbotsdk.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useMemo,
+  useCallback,
+} from "react";
 import {
   View,
   StyleSheet,
@@ -6,32 +12,55 @@ import {
   Dimensions,
   Platform,
   StatusBar,
+  PixelRatio,
 } from "react-native";
 import { WebView, WebViewMessageEvent } from "react-native-webview";
 import FloatingButton from "./FloatingButton";
 import { API_URL, BASE_CHATBOT_URL } from "./constants";
+import { SDK_VERSION } from "./version";
+import { getSystemInfo, getBrowserAndOSInfoScript } from "./utils/systemInfo";
+import { useChatbotEvents } from "./hooks/useChatbotEvents";
+import { ChatbotEventType, ChatbotEventHandler } from "./types/events";
+import { logger } from "./utils/logger";
+import { enableNetworkDebug, enableWebViewDebug } from "./utils/debugConfig";
+import DebugButton from "./components/DebugButton";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import {
+  ErrorCodes,
+  ErrorTypes,
+  ErrorMessages,
+} from "./constants/errorConstants";
+import { setupGlobalErrorHandlers } from "./utils/errorHandler";
+import { errorTracker } from "./services/ErrorTrackingService";
+import { generateUUID } from "./utils/cookieUtils";
+import {
+  StorageMessageType,
+  StorageMessage,
+  getStorageScript,
+  createStorageMessage,
+} from "./utils/webViewStorage";
 
-interface ChatbotSDKProps {
+export interface ChatbotProps {
   api_key: string;
-  user_id?: string;
+  user_id?: string | null | number;
   user_token?: string;
-  additional_params?: Record<string, string>;
+  user_profile?: Record<string, any>;
+  onEvent?: ChatbotEventHandler;
+}
+
+interface InternalChatbotProps extends ChatbotProps {
   show_floating_button?: boolean;
   onMessage?: (message: any) => void;
   isFullScreen?: boolean;
   enableAnimation?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
-  user_info?: {
-    name?: string;
-    email?: string;
-    mobile?: string;
-  };
 }
 
 interface ChatbotMessage {
   type: string;
   data?: any;
+  level?: string;
 }
 
 interface ChatbotConfig {
@@ -40,18 +69,18 @@ interface ChatbotConfig {
   welcome_message: string;
 }
 
-const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
+const Chatbot: React.FC<InternalChatbotProps> = ({
   api_key,
   user_id,
   user_token,
-  additional_params = {},
   show_floating_button = true,
+  onEvent,
   onMessage,
   isFullScreen = true,
   enableAnimation = true,
   onOpen,
   onClose,
-  user_info,
+  user_profile,
 }) => {
   const [isWebViewVisible, setIsWebViewVisible] = useState(false);
   const [chatbotConfig, setChatbotConfig] = useState<ChatbotConfig | null>(
@@ -63,15 +92,31 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
   const isFirstLoadRef = useRef(true);
   const [toastVisible, setToastVisible] = useState(false);
   const [toastMessage, setToastMessage] = useState("");
-  const webViewUrl = useMemo(
-    () => constructUrl(),
-    [api_key, user_id, additional_params]
+  const [effectiveUserId, setEffectiveUserId] = useState<string>();
+  const [isStorageReady, setIsStorageReady] = useState(false);
+  const pendingStorageOps = useRef<Array<() => void>>([]);
+  const memoryCache = useRef<Record<string, string>>({});
+
+  const [systemInfo, setSystemInfo] = useState({ os: "", browser: "" });
+
+  // Create chatbotConfig object for events
+  const chatbotConfigForEvents = useMemo(
+    () => ({
+      userId: effectiveUserId,
+      isAnonymous: !user_id && user_id !== 0,
+      // Add other config properties as needed
+    }),
+    [effectiveUserId, user_id]
   );
 
-  const stableAdditionalParams = useMemo(
-    () => additional_params,
-    [JSON.stringify(additional_params)]
-  );
+  // Initialize event handling
+  const { emitEvent, onInternalEvent } = useChatbotEvents({
+    api_key,
+    chatbotConfig: chatbotConfigForEvents ?? {},
+    user_profile: user_profile,
+    onEvent: onEvent,
+    systemInfo: systemInfo ?? { os: "", browser: "" },
+  });
 
   const triggerAppInit = () => {
     if (webViewRef.current) {
@@ -83,15 +128,203 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
     }
   };
 
+  const executeStorageOp = useCallback(
+    (operation: () => void) => {
+      if (isStorageReady) {
+        operation();
+      } else {
+        pendingStorageOps.current.push(operation);
+      }
+    },
+    [isStorageReady]
+  );
+
+  // Handle WebView messages
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      const { data } = event.nativeEvent;
+
+      try {
+        const parsedData: ChatbotMessage = JSON.parse(data);
+
+        // Handle storage messages
+        if (
+          Object.values(StorageMessageType).includes(
+            parsedData.type as StorageMessageType
+          )
+        ) {
+          const storageMessage = parsedData as StorageMessage;
+          switch (storageMessage.type) {
+            case StorageMessageType.STORAGE_READY:
+              setIsStorageReady(true);
+              pendingStorageOps.current.forEach((op) => op());
+              pendingStorageOps.current = [];
+              // Try to get stored ID immediately after storage is ready
+              webViewRef.current?.injectJavaScript(
+                createStorageMessage(
+                  StorageMessageType.GET_STORAGE,
+                  "rblyn_anon"
+                )
+              );
+              break;
+            case StorageMessageType.STORAGE_RESPONSE:
+              if (storageMessage.key && storageMessage.value) {
+                memoryCache.current[storageMessage.key] = storageMessage.value;
+                if (storageMessage.key === "rblyn_anon") {
+                  setEffectiveUserId(storageMessage.value);
+                }
+              }
+              break;
+            case StorageMessageType.STORAGE_ERROR:
+              logger.error("WebView storage error:", storageMessage.error);
+              break;
+          }
+          return;
+        }
+
+        // Add debug logging
+        if (__DEV__) {
+          if (parsedData?.type === "CONSOLE") {
+            console.log(`WebView ${parsedData?.level}:`, parsedData?.data);
+            return;
+          }
+          if (parsedData?.type === "ERROR") {
+            console.error("WebView Error:", parsedData?.data);
+            return;
+          }
+        }
+
+        if (parsedData?.type === "SYSTEM_INFO") {
+          setSystemInfo(parsedData?.data ?? { os: "", browser: "" });
+          return;
+        }
+
+        if (parsedData?.type === "APP_READY") {
+          emitEvent(ChatbotEventType.CHATBOT_APP_READY);
+          if (webViewRef.current && isWebViewVisible) {
+            webViewRef.current?.injectJavaScript(getBrowserAndOSInfoScript());
+
+            const messageData = {
+              name: "registerUserId",
+              action: "registerUserId",
+              data: {
+                userId: effectiveUserId,
+                token: user_token ? `${user_token}` : undefined,
+                userProfile: {
+                  ...user_profile,
+                  ...getSystemInfo(systemInfo),
+                },
+              },
+            };
+            logger.debug("messageData====>", JSON.stringify(messageData));
+            webViewRef.current?.injectJavaScript(`
+            window.postMessage(${JSON.stringify({
+              name: "openFrame",
+              domain: "app-domain.com",
+            })}, '*');
+            window.postMessage(${JSON.stringify(messageData)}, '*');
+          `);
+          }
+        }
+
+        // Handle other message types
+        switch (parsedData?.type) {
+          case "close_chatbot":
+            closeWebView();
+            break;
+          case "CHATBOT_LOADED":
+            emitEvent(ChatbotEventType.CHATBOT_LOADED, parsedData?.data);
+            break;
+          case "CHAT_INITIALIZED":
+            emitEvent(ChatbotEventType.CHAT_INITIALIZED, parsedData?.data);
+            break;
+          case "SESSION_REFRESHED":
+            emitEvent(ChatbotEventType.SESSION_REFRESHED, parsedData?.data);
+            break;
+          case "CHAT_INITIALIZATION_FAILED":
+            emitEvent(
+              ChatbotEventType.CHAT_INITIALIZATION_FAILED,
+              parsedData?.data
+            );
+            break;
+          default:
+            if (onMessage) onMessage(parsedData ?? {});
+        }
+      } catch (error) {
+        errorTracker.trackError(
+          error instanceof Error
+            ? error
+            : new Error("Failed to parse WebView message"),
+          "ChatbotSDK",
+          {
+            type: ErrorTypes.RUNTIME_ERROR,
+            context: { messageData: data },
+          }
+        );
+      }
+    },
+    [
+      emitEvent,
+      isWebViewVisible,
+      onMessage,
+      systemInfo,
+      effectiveUserId,
+      user_token,
+      user_profile,
+    ]
+  );
+
+  // Initialize user ID
+  useEffect(() => {
+    const initializeUserId = async () => {
+      let userId = user_id ? String(user_id) : undefined;
+
+      if (!userId) {
+        // Try memory cache first
+        userId = memoryCache.current["rblyn_anon"];
+
+        if (!userId) {
+          userId = generateUUID();
+          executeStorageOp(() => {
+            webViewRef.current?.injectJavaScript(
+              createStorageMessage(
+                StorageMessageType.SET_STORAGE,
+                "rblyn_anon",
+                userId!
+              )
+            );
+          });
+        }
+      }
+
+      setEffectiveUserId(userId);
+    };
+
+    initializeUserId();
+  }, [user_id, executeStorageOp]);
+
+  // Initialize WebView storage
+  useEffect(() => {
+    if (webViewRef.current) {
+      webViewRef.current.injectJavaScript(getStorageScript());
+      // Try to get stored ID once storage is ready
+      executeStorageOp(() => {
+        webViewRef.current?.injectJavaScript(
+          createStorageMessage(StorageMessageType.GET_STORAGE, "rblyn_anon")
+        );
+      });
+    }
+  }, []);
+
   useEffect(() => {
     const fetchChatbotConfig = async () => {
       try {
         const endpointUrl = `${API_URL}/chat/chatbot/get/`;
         const payload = {
-          client_user_id: user_id,
+          client_user_id: effectiveUserId,
           org_id: api_key,
           token: user_token,
-          extra_info: stableAdditionalParams,
+          extra_info: {},
         };
 
         // setToastMessage(endpointUrl + " : " + BASE_CHATBOT_URL);
@@ -120,29 +353,37 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
           });
         }
       } catch (error) {
-        console.error("Error fetching chatbot configuration:", error);
+        errorTracker.trackError(
+          error instanceof Error
+            ? error
+            : new Error("Failed to fetch chatbot configuration"),
+          "ChatbotSDK",
+          {
+            type: ErrorTypes.NETWORK_ERROR,
+            context: { api_key, user_id },
+          }
+        );
       } finally {
         setLoading(false);
       }
     };
 
-    if (api_key && user_id) {
+    if (api_key && effectiveUserId) {
       fetchChatbotConfig();
     }
-  }, [api_key, user_id, user_token, stableAdditionalParams]);
+  }, [api_key, effectiveUserId, user_token]);
 
   function constructUrl(): string {
-    if (!user_id) return "";
+    if (!effectiveUserId) return "";
     const params = new URLSearchParams({
       id: api_key,
-      user_id,
-      ...additional_params,
     });
-    console.log("BASE_CHATBOT_URL", BASE_CHATBOT_URL);
+    console.log("BASE_CHATBOT_URL SDK_VERSION", BASE_CHATBOT_URL, SDK_VERSION);
     return `${BASE_CHATBOT_URL}?${params.toString()}`;
   }
 
-  const openWebView = () => {
+  // Handle opening the chatbot
+  const openWebView = useCallback(() => {
     setIsWebViewVisible(true);
     if (enableAnimation) {
       Animated.timing(fadeAnim, {
@@ -151,8 +392,8 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
         useNativeDriver: true,
       }).start(() => {
         onOpen?.();
+        emitEvent(ChatbotEventType.CHATBOT_OPENED);
         if (!isFirstLoadRef.current) {
-          // If not first load, manually trigger initialization
           setTimeout(triggerAppInit, 100);
         }
       });
@@ -160,16 +401,17 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
       fadeAnim.setValue(1);
       requestAnimationFrame(() => {
         onOpen?.();
+        emitEvent(ChatbotEventType.CHATBOT_OPENED);
         if (!isFirstLoadRef.current) {
           setTimeout(triggerAppInit, 100);
         }
       });
     }
-  };
+  }, [enableAnimation, fadeAnim, onOpen, emitEvent]);
 
-  const closeWebView = () => {
+  // Handle closing the chatbot
+  const closeWebView = useCallback(() => {
     if (webViewRef.current) {
-      console.log("closeWebView");
       webViewRef.current.postMessage(
         JSON.stringify({
           name: "closeFrame",
@@ -181,6 +423,7 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
     const complete = () => {
       setIsWebViewVisible(false);
       onClose?.();
+      emitEvent(ChatbotEventType.CHATBOT_CLOSED);
     };
 
     if (enableAnimation) {
@@ -193,58 +436,14 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
       fadeAnim.setValue(0);
       requestAnimationFrame(complete);
     }
-  };
-
-  const handleMessage = (event: WebViewMessageEvent) => {
-    const { data } = event.nativeEvent;
-
-    try {
-      const parsedData: ChatbotMessage = JSON.parse(data);
+  }, [enableAnimation, fadeAnim, onClose, emitEvent]);
 
-      if (parsedData.type === "APP_READY") {
-        console.log("APP_READY", webViewRef.current && isWebViewVisible);
-        if (webViewRef.current && isWebViewVisible) {
-          webViewRef.current.injectJavaScript(`
-            window.postMessage(${JSON.stringify({
-              name: "openFrame",
-              domain: "app-domain.com",
-            })}, '*');
-            window.postMessage(${JSON.stringify({
-              name: "registerUserId",
-              action: "registerUserId",
-              domain: "app-domain.com",
-              data: {
-                userId: `${user_id}`,
-                token: `${user_token}`,
-                user_info: {
-                  ...user_info,
-                  platform: Platform.OS,
-                  SDK_VERSION: "${SDK_VERSION}",
-                  OS: Platform.OS,
-                  browser: Platform.OS,
-                },
-              },
-            })}, '*');
-          `);
-        }
-      }
-
-      if (typeof parsedData !== "object" || !parsedData.type) {
-        console.warn("Invalid message structure");
-        return;
-      }
-
-      switch (parsedData.type) {
-        case "close_chatbot":
-          closeWebView();
-          break;
-        default:
-          if (onMessage) onMessage(parsedData);
-      }
-    } catch (error) {
-      console.error("Failed to parse or process WebView message:", error);
+  // Emit button loaded event when component mounts
+  useEffect(() => {
+    if (show_floating_button && chatbotConfig) {
+      emitEvent(ChatbotEventType.CHATBOT_BUTTON_LOADED);
     }
-  };
+  }, [show_floating_button, chatbotConfig, emitEvent]);
 
   const getScreenDimensions = () => {
     const windowHeight = Dimensions.get("window").height;
@@ -260,60 +459,89 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
 
   const screenDimensions = getScreenDimensions();
 
+  useEffect(() => {
+    if (__DEV__) {
+      enableNetworkDebug();
+    }
+  }, []);
+
+  // Deliberate error for testing error boundary
+  // useEffect(() => {
+  //   if (__DEV__) {
+  //     // Set up global error handlers
+  //     setupGlobalErrorHandlers();
+
+  //     // Test async error
+  //     setTimeout(() => {
+  //       Promise.reject(new Error("Test async error"));
+  //     }, 1000);
+
+  //     // Test sync error
+  //     setTimeout(() => {
+  //       throw new Error("Test sync error");
+  //     }, 2000);
+  //   }
+  // }, []);
+
   return (
-    <View style={styles.mainContainer}>
-      {!loading && (
-        <>
-          {show_floating_button && api_key && chatbotConfig && (
-            <FloatingButton
-              onPress={openWebView}
-              brandColor={chatbotConfig.brand_color}
-              imageUrl={chatbotConfig.image_url}
-            />
-          )}
-          <View
-            style={[
-              styles.webViewWrapper,
-              { height: isWebViewVisible ? "100%" : 0 },
-            ]}
-            pointerEvents={isWebViewVisible ? "auto" : "none"}
-          >
-            <Animated.View
+    <ErrorBoundary componentName="ChatbotSDK">
+      <View style={styles.mainContainer}>
+        {!loading && (
+          <>
+            <ErrorBoundary componentName="FloatingButton">
+              {show_floating_button && api_key && chatbotConfig && (
+                <FloatingButton
+                  onPress={() => {
+                    emitEvent(ChatbotEventType.CHATBOT_BUTTON_CLICKED);
+                    openWebView();
+                  }}
+                  brandColor={chatbotConfig.brand_color}
+                  imageUrl={chatbotConfig.image_url}
+                />
+              )}
+            </ErrorBoundary>
+            <View
               style={[
-                isFullScreen
-                  ? styles.fullScreenContainer
-                  : styles.inlineContainer,
-                { opacity: fadeAnim },
+                styles.webViewWrapper,
+                { height: isWebViewVisible ? "100%" : 0 },
               ]}
+              pointerEvents={isWebViewVisible ? "auto" : "none"}
             >
-              <WebView
-                ref={webViewRef}
-                source={{ uri: webViewUrl }}
-                onMessage={handleMessage}
-                style={styles.webview}
-                containerStyle={
-                  isFullScreen
-                    ? {
-                        width: screenDimensions.width,
-                        height: screenDimensions.height,
+              <Animated.View
+                style={[styles.fullScreenContainer, { opacity: fadeAnim }]}
+              >
+                <ErrorBoundary componentName="ChatbotWebView">
+                  <WebView
+                    ref={webViewRef}
+                    source={{ uri: constructUrl() }}
+                    onMessage={handleMessage}
+                    style={styles.webview}
+                    containerStyle={
+                      isFullScreen
+                        ? {
+                            width: screenDimensions.width,
+                            height: screenDimensions.height,
+                          }
+                        : undefined
+                    }
+                    allowsInlineMediaPlayback={true}
+                    mediaPlaybackRequiresUserAction={false}
+                    allowFileAccess={false}
+                    geolocationEnabled={false}
+                    javaScriptEnabled={true}
+                    domStorageEnabled={true}
+                    cacheEnabled={true}
+                    scrollEnabled={true}
+                    bounces={false}
+                    onShouldStartLoadWithRequest={(request) => {
+                      return request.url.startsWith(BASE_CHATBOT_URL);
+                    }}
+                    startInLoadingState={isFirstLoadRef.current}
+                    onLoadEnd={() => {
+                      if (__DEV__) {
+                        enableWebViewDebug(webViewRef);
                       }
-                    : undefined
-                }
-                allowsInlineMediaPlayback={true}
-                mediaPlaybackRequiresUserAction={false}
-                allowFileAccess={false}
-                geolocationEnabled={false}
-                javaScriptEnabled={true}
-                domStorageEnabled={true}
-                cacheEnabled={true}
-                scrollEnabled={true}
-                bounces={false}
-                onShouldStartLoadWithRequest={(request) => {
-                  return request.url.startsWith(BASE_CHATBOT_URL);
-                }}
-                startInLoadingState={isFirstLoadRef.current}
-                onLoadEnd={() => {
-                  webViewRef.current?.injectJavaScript(`
+                      webViewRef.current?.injectJavaScript(`
   if (!document.querySelector('meta[name="viewport"]')) {
     var meta = document.createElement('meta');
     meta.name = 'viewport';
@@ -338,28 +566,75 @@ const ChatbotSDK: React.FC<ChatbotSDKProps> = ({
     window.ReactNativeWebView.postMessage(JSON.stringify(message));
   };
 
-  var closeButton = document.querySelector('.chatbot-close-button');
-  if (closeButton) {
-    closeButton.addEventListener('click', () => {
-      window.sendToChatbot({ type: 'close_chatbot' });
+  // Only create observer if it doesn't exist
+  if (!window.closeButtonObserver) {
+    // Setup mutation observer to watch for close button
+    window.closeButtonObserver = new MutationObserver(function(mutations) {
+      const closeButton = document.querySelector('.chatbot-close-button');
+      if (closeButton && !closeButton.hasAttribute('listener-attached')) {
+        closeButton.setAttribute('listener-attached', 'true');
+        closeButton.addEventListener('click', () => {
+          try {
+            const message = { type: 'close_chatbot' };
+            window.ReactNativeWebView.postMessage(JSON.stringify(message));
+          } catch (error) {
+            console.error('Error sending close message:', error);
+          }
+        });
+        console.log('Close button listener attached');
+      }
+    });
+
+    // Start observing
+    window.closeButtonObserver.observe(document.body, {
+      childList: true,
+      subtree: true
     });
+
+    // Initial check for existing button
+    const existingButton = document.querySelector('.chatbot-close-button');
+    if (existingButton && !existingButton.hasAttribute('listener-attached')) {
+      existingButton.setAttribute('listener-attached', 'true');
+      existingButton.addEventListener('click', () => {
+        try {
+          const message = { type: 'close_chatbot' };
+          window.ReactNativeWebView.postMessage(JSON.stringify(message));
+        } catch (error) {
+          console.error('Error sending close message:', error);
+        }
+      });
+      console.log('Close button listener attached to existing button');
+    }
   }
-  
+
   true;
 `);
-                  isFirstLoadRef.current = false;
-                }}
-                onError={(syntheticEvent) => {
-                  const { nativeEvent } = syntheticEvent;
-                  console.warn("WebView error:", nativeEvent);
-                }}
-              />
-            </Animated.View>
-          </View>
-        </>
-      )}
-      {/* <Toast message={toastMessage} visible={toastVisible} duration={10000} /> */}
-    </View>
+                      isFirstLoadRef.current = false;
+                    }}
+                    onError={(syntheticEvent) => {
+                      const { nativeEvent } = syntheticEvent;
+                      errorTracker.trackError(
+                        new Error(nativeEvent.description),
+                        "ChatbotWebView",
+                        {
+                          type: ErrorTypes.RUNTIME_ERROR,
+                          context: {
+                            url: nativeEvent.url,
+                            code: nativeEvent.code,
+                          },
+                        }
+                      );
+                    }}
+                  />
+                </ErrorBoundary>
+              </Animated.View>
+            </View>
+          </>
+        )}
+        {/* <Toast message={toastMessage} visible={toastVisible} duration={10000} /> */}
+        {__DEV__ && <DebugButton />}
+      </View>
+    </ErrorBoundary>
   );
 };
 
@@ -396,4 +671,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ChatbotSDK;
+export default Chatbot;