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

package/src/Chatbotsdk.tsx

@@ -1,679 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useCallback,
-} from "react";
-import {
-  View,
-  StyleSheet,
-  Animated,
-  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";
-
-export interface ChatbotProps {
-  api_key: string;
-  user_id?: string | null | number;
-  user_token?: string;
-  user_profile?: {
-    email?: string;
-    name?: string;
-    mobile?: string;
-    is_test_user?: boolean;
-  };
-  onEvent?: ChatbotEventHandler;
-}
-
-interface InternalChatbotProps extends ChatbotProps {
-  show_floating_button?: boolean;
-  onMessage?: (message: any) => void;
-  isFullScreen?: boolean;
-  enableAnimation?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-}
-
-interface ChatbotMessage {
-  type: string;
-  data?: any;
-  level?: string;
-}
-
-interface ChatbotConfig {
-  brand_color: string;
-  image_url: string;
-  welcome_message: string;
-}
-
-const Chatbot: React.FC<InternalChatbotProps> = ({
-  api_key,
-  user_id,
-  user_token,
-  show_floating_button = true,
-  onEvent,
-  onMessage,
-  isFullScreen = true,
-  enableAnimation = true,
-  onOpen,
-  onClose,
-  user_profile,
-}) => {
-  const [isWebViewVisible, setIsWebViewVisible] = useState(false);
-  const [chatbotConfig, setChatbotConfig] = useState<ChatbotConfig | null>(
-    null
-  );
-  const [loading, setLoading] = useState(true);
-  const webViewRef = useRef<WebView>(null);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const isFirstLoadRef = useRef(true);
-  const [toastVisible, setToastVisible] = useState(false);
-  const [toastMessage, setToastMessage] = useState("");
-  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]
-  );
-
-  // 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) {
-      webViewRef.current.injectJavaScript(`
-        // Trigger APP_READY equivalent
-        window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'APP_READY' }));
-        true;
-      `);
-    }
-  };
-
-  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: effectiveUserId,
-          org_id: api_key,
-          token: user_token,
-          extra_info: {},
-        };
-
-        // setToastMessage(endpointUrl + " : " + BASE_CHATBOT_URL);
-        // setToastVisible(true);
-
-        const response = await fetch(endpointUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(payload),
-        });
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch chatbot configuration");
-        }
-
-        const data = await response.json();
-        const orgInfo = data?.user?.org_info;
-
-        if (orgInfo) {
-          setChatbotConfig({
-            brand_color: orgInfo?.config?.brand_colour || "#007AFF",
-            image_url: orgInfo?.brand_config?.launcher_logo_url || "",
-            welcome_message: orgInfo?.config?.welcome_message || "",
-          });
-        }
-      } catch (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 && effectiveUserId) {
-      fetchChatbotConfig();
-    }
-  }, [api_key, effectiveUserId, user_token]);
-
-  function constructUrl(): string {
-    if (!effectiveUserId) return "";
-    const params = new URLSearchParams({
-      id: api_key,
-    });
-    console.log("BASE_CHATBOT_URL SDK_VERSION", BASE_CHATBOT_URL, SDK_VERSION);
-    return `${BASE_CHATBOT_URL}?${params.toString()}`;
-  }
-
-  // Handle opening the chatbot
-  const openWebView = useCallback(() => {
-    setIsWebViewVisible(true);
-    if (enableAnimation) {
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true,
-      }).start(() => {
-        onOpen?.();
-        emitEvent(ChatbotEventType.CHATBOT_OPENED);
-        if (!isFirstLoadRef.current) {
-          setTimeout(triggerAppInit, 100);
-        }
-      });
-    } else {
-      fadeAnim.setValue(1);
-      requestAnimationFrame(() => {
-        onOpen?.();
-        emitEvent(ChatbotEventType.CHATBOT_OPENED);
-        if (!isFirstLoadRef.current) {
-          setTimeout(triggerAppInit, 100);
-        }
-      });
-    }
-  }, [enableAnimation, fadeAnim, onOpen, emitEvent]);
-
-  // Handle closing the chatbot
-  const closeWebView = useCallback(() => {
-    if (webViewRef.current) {
-      webViewRef.current.postMessage(
-        JSON.stringify({
-          name: "closeFrame",
-          domain: "app-domain.com",
-        })
-      );
-    }
-
-    const complete = () => {
-      setIsWebViewVisible(false);
-      onClose?.();
-      emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-    };
-
-    if (enableAnimation) {
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }).start(complete);
-    } else {
-      fadeAnim.setValue(0);
-      requestAnimationFrame(complete);
-    }
-  }, [enableAnimation, fadeAnim, onClose, emitEvent]);
-
-  // 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;
-    const windowWidth = Dimensions.get("window").width;
-    const statusBarHeight =
-      Platform.OS === "ios" ? 0 : StatusBar.currentHeight || 0;
-
-    return {
-      height: windowHeight - statusBarHeight,
-      width: windowWidth,
-    };
-  };
-
-  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 (
-    <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={[
-                styles.webViewWrapper,
-                { height: isWebViewVisible ? "100%" : 0 },
-              ]}
-              pointerEvents={isWebViewVisible ? "auto" : "none"}
-            >
-              <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);
-                    //                       }
-                    //                       webViewRef.current?.injectJavaScript(`
-                    //   if (!document.querySelector('meta[name="viewport"]')) {
-                    //     var meta = document.createElement('meta');
-                    //     meta.name = 'viewport';
-                    //     meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
-                    //     document.getElementsByTagName('head')[0].appendChild(meta);
-                    //   }
-
-                    //   if (!document.querySelector('#injectedStyle')) {
-                    //     const style = document.createElement('style');
-                    //     style.id = 'injectedStyle';
-                    //     style.textContent = \`
-                    //       html, body, #root, #__next {
-                    //         height: 100% !important;
-                    //         min-height: 100% !important;
-                    //         overflow: hidden !important;
-                    //       }
-                    //     \`;
-                    //     document.head.appendChild(style);
-                    //   }
-
-                    //   window.sendToChatbot = function(message) {
-                    //     window.ReactNativeWebView.postMessage(JSON.stringify(message));
-                    //   };
-
-                    //   // 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;
-                      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>
-  );
-};
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    position: "relative",
-  },
-  webViewWrapper: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    overflow: "hidden",
-    zIndex: 1000,
-  },
-  fullScreenContainer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "white",
-    zIndex: 1000,
-  },
-  inlineContainer: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  webview: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-});
-
-export default Chatbot;