@robylon/react-native-sdk 2.0.31-staging.6 → 2.1.0

package/src/Chatbotsdk.tsx

@@ -1,946 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useCallback,
-  useImperativeHandle,
-  forwardRef,
-} from "react";
-import {
-  View,
-  StyleSheet,
-  Animated,
-  Dimensions,
-  Platform,
-  StatusBar,
-  PixelRatio,
-  FlexAlignType,
-  PermissionsAndroid,
-  Alert,
-} from "react-native";
-import { WebView, WebViewMessageEvent } from "react-native-webview";
-import FloatingButton from "./FloatingButton";
-import { API_URL, BASE_CHATBOT_URL, DEFAULT_LAUNCHER_IMAGE } from "./constants";
-import { getSystemInfo, getBrowserAndOSInfoScript } from "./utils/systemInfo";
-import { useChatbotEvents } from "./hooks/useChatbotEvents";
-import {
-  ChatbotEventType,
-  ChatbotEventHandler,
-  InternalEventType,
-} 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";
-import { animateWebViewOpen, animateWebViewClose } from "./utils/animations";
-import { handleDownloadRequest, DownloadRequest } from "./utils/fileDownload";
-
-export interface ChatbotProps {
-  api_key: string;
-  user_id?: string | null | number;
-  user_token?: string;
-  user_profile?: {
-    email?: string;
-    name?: string;
-    mobile?: string | number;
-    is_test_user?: boolean;
-    [key: string | number]: any;
-  };
-  onEvent?: ChatbotEventHandler;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onReady?: () => void;
-}
-
-export interface ChatbotRef {
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
-  isReady: () => boolean;
-}
-
-interface InternalChatbotProps extends ChatbotProps {
-  show_floating_button?: boolean;
-  onMessage?: (message: any) => void;
-  isFullScreen?: boolean;
-  enableAnimation?: boolean;
-}
-
-interface ChatbotMessage {
-  type: string;
-  data?: any;
-  level?: string;
-  url?: string;
-  filename?: string;
-  inPlace?: boolean;
-}
-
-export enum ChatbotInterfaceType {
-  WIDGET = "WIDGET",
-  POPOVER = "POPOVER",
-  EMBED = "EMBED",
-}
-
-export enum WidgetPositionEnums {
-  RIGHT = "Right",
-  LEFT = "Left",
-}
-
-export interface WidgetInterfaceProperties {
-  position: WidgetPositionEnums;
-  side_spacing?: number;
-  bottom_spacing?: number;
-}
-
-export enum LauncherType {
-  TEXT = "TEXT",
-  IMAGE = "IMAGE",
-  TEXTUAL_IMAGE = "TEXTUAL_IMAGE",
-}
-
-export interface ChatbotConfig {
-  brand_colour: string;
-  image_url?: string;
-  chat_interface_config?: {
-    chat_bubble_prompts?: string[];
-    display_name?: string;
-    welcome_message?: string;
-    redirect_url?: string;
-  };
-  interface_type?: ChatbotInterfaceType;
-  interface_properties?: WidgetInterfaceProperties;
-  launcher_type: LauncherType;
-  launcher_properties: {
-    text?: string;
-  };
-  images: {
-    launcher_image_url?: {
-      url: string;
-    };
-  };
-  chat_iframe_url: string;
-}
-
-const Chatbot = forwardRef<ChatbotRef, InternalChatbotProps>(
-  (
-    {
-      api_key,
-      user_id,
-      user_token,
-      show_floating_button = true,
-      onEvent,
-      onMessage,
-      isFullScreen = true,
-      enableAnimation = true,
-      onOpen: externalOnOpen,
-      onClose: externalOnClose,
-      onReady,
-      user_profile,
-    },
-    ref
-  ) => {
-    const [isWebViewVisible, setIsWebViewVisible] = useState(false);
-    const [chatbotConfig, setChatbotConfig] = useState<ChatbotConfig | null>(
-      null
-    );
-    const [loading, setLoading] = useState(true);
-    const [isInitialized, setIsInitialized] = useState(false);
-    const webViewRef = useRef<WebView>(null);
-    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: "" });
-    const systemInfoRef = useRef({ os: "", browser: "" });
-
-    // Initialize animated values
-    const animatedValues = useRef({
-      scale: new Animated.Value(1),
-      translateY: new Animated.Value(0),
-      opacity: new Animated.Value(1),
-    }).current;
-
-    // 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: "" },
-    });
-
-    // Expose ref methods
-    useImperativeHandle(
-      ref,
-      () => ({
-        open: () => {
-          if (isInitialized) {
-            openWebView();
-          }
-        },
-        close: () => {
-          if (isInitialized) {
-            closeWebView();
-          }
-        },
-        toggle: () => {
-          if (isInitialized) {
-            if (isWebViewVisible) {
-              closeWebView();
-            } else {
-              openWebView();
-            }
-          }
-        },
-        isReady: () => isInitialized,
-      }),
-      [isInitialized, isWebViewVisible]
-    );
-
-    const triggerAppInit = () => {
-      if (webViewRef.current) {
-        webViewRef.current?.injectJavaScript(getBrowserAndOSInfoScript());
-        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(
-      async (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: "" });
-            systemInfoRef.current = parsedData?.data;
-            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(systemInfoRef?.current),
-                    __INT_SYS_INFO__: {
-                      ...getSystemInfo(systemInfoRef?.current),
-                    },
-                  },
-                },
-              };
-              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;
-            // Download file is not being used currently. This event would come from the iframe chatbot if download file problem need to be solved
-            case "download_file":
-              if (
-                parsedData?.data ||
-                (parsedData?.url && parsedData?.filename)
-              ) {
-                // Handle both formats: { data: { url, filename } } or { url, filename }
-                const downloadData: DownloadRequest = parsedData?.data || {
-                  url: parsedData?.url,
-                  filename: parsedData?.filename,
-                  inPlace: parsedData?.inPlace,
-                };
-                handleDownloadRequest(downloadData);
-              }
-              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;
-            case "REQUEST_MIC_PERMISSION":
-              const granted = await requestAndroidMicPermission();
-              if (webViewRef.current && isWebViewVisible) {
-                const messageData = {
-                  name: "requestMicPermission",
-                  action: "requestMicPermission",
-                  type: granted
-                    ? "MIC_PERMISSION_GRANTED"
-                    : "MIC_PERMISSION_DENIED",
-                };
-                logger.debug("messageData====>", JSON.stringify(messageData));
-                webViewRef.current?.injectJavaScript(`
-                  window.postMessage(${JSON.stringify(messageData)}, '*');`);
-              }
-              // if (granted) {
-              //   emitEvent(ChatbotEventType.MIC_PERMISSION_GRANTED);
-              // } else {
-              //   emitEvent(ChatbotEventType.MIC_PERMISSION_DENIED);
-              // }
-              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]);
-
-    // Removed controlled isOpen syncing to avoid desync issues. Using ref API instead.
-
-    // 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) {
-            const config: ChatbotConfig = {
-              brand_colour: orgInfo.brand_config?.colors?.brand_color || "",
-              image_url: orgInfo.brand_config?.launcher_logo_url || "",
-              chat_interface_config: {
-                chat_bubble_prompts: [],
-                display_name: orgInfo.brand_config?.display_name || "",
-                welcome_message:
-                  orgInfo.brand_config?.welcome_message ||
-                  "Hey! What can we help you with today?",
-                redirect_url: orgInfo.brand_config?.redirect_url || "",
-              },
-              interface_properties: {
-                position:
-                  orgInfo.brand_config?.interface_properties?.position ||
-                  WidgetPositionEnums.RIGHT,
-                side_spacing:
-                  orgInfo.brand_config?.interface_properties?.side_spacing ??
-                  20,
-                bottom_spacing:
-                  orgInfo.brand_config?.interface_properties?.bottom_spacing ??
-                  20,
-              },
-              interface_type:
-                orgInfo.brand_config?.interface_type ||
-                ChatbotInterfaceType.WIDGET,
-              launcher_type:
-                orgInfo.brand_config?.launcher_type || LauncherType.IMAGE,
-              launcher_properties: {
-                text: orgInfo.brand_config?.launcher_properties?.text || "",
-              },
-              images: {
-                launcher_image_url: {
-                  url:
-                    orgInfo.brand_config?.images?.launcher_image_url?.url ||
-                    DEFAULT_LAUNCHER_IMAGE,
-                },
-              },
-              chat_iframe_url: orgInfo.brand_config?.chat_iframe_url || "",
-            };
-            setChatbotConfig(config);
-          }
-        } 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,
-      });
-      // const iFrameUrlFromBackend = chatbotConfig?.chat_iframe_url;
-      // if (iFrameUrlFromBackend) {
-      //   return `${iFrameUrlFromBackend}`;
-      // }
-      return `${BASE_CHATBOT_URL}?${params.toString()}`;
-    }
-
-    // Handle opening the chatbot
-    const openWebView = useCallback(() => {
-      setIsWebViewVisible(true);
-      if (enableAnimation) {
-        animateWebViewOpen(animatedValues, () => {
-          externalOnOpen?.();
-          emitEvent(ChatbotEventType.CHATBOT_OPENED);
-          if (!isFirstLoadRef.current) {
-            setTimeout(triggerAppInit, 100);
-          }
-        });
-      } else {
-        requestAnimationFrame(() => {
-          externalOnOpen?.();
-          emitEvent(ChatbotEventType.CHATBOT_OPENED);
-          if (!isFirstLoadRef.current) {
-            setTimeout(triggerAppInit, 100);
-          }
-        });
-      }
-    }, [enableAnimation, animatedValues, externalOnOpen, emitEvent]);
-
-    // Handle closing the chatbot
-    const closeWebView = useCallback(() => {
-      if (webViewRef.current) {
-        webViewRef.current.postMessage(
-          JSON.stringify({
-            name: "closeFrame",
-            domain: "app-domain.com",
-          })
-        );
-      }
-
-      if (enableAnimation) {
-        animateWebViewClose(animatedValues, () => {
-          setIsWebViewVisible(false);
-          externalOnClose?.();
-          emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-        });
-      } else {
-        setIsWebViewVisible(false);
-        externalOnClose?.();
-        emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-      }
-    }, [enableAnimation, animatedValues, externalOnClose, emitEvent]);
-
-    // Emit button loaded event when component mounts
-    useEffect(() => {
-      if (show_floating_button && chatbotConfig) {
-        emitEvent(ChatbotEventType.CHATBOT_BUTTON_LOADED);
-      }
-    }, [show_floating_button, chatbotConfig, emitEvent]);
-
-    // Set initialization state when chatbot is ready
-    useEffect(() => {
-      if (!loading && chatbotConfig && effectiveUserId && !isInitialized) {
-        setIsInitialized(true);
-        onReady?.();
-      }
-    }, [loading, chatbotConfig, effectiveUserId, isInitialized, onReady]);
-
-    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 requestAndroidMicPermission = useCallback(async () => {
-      try {
-        if (Platform.OS === "ios") {
-          return true;
-        }
-        // Check if already granted
-        const alreadyGranted = await PermissionsAndroid.check(
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
-        );
-
-        if (alreadyGranted) {
-          return true;
-        }
-
-        const result = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
-          {
-            title: "Microphone permission",
-            message: "This app uses your microphone for voice features.",
-            buttonPositive: "Allow",
-            buttonNegative: "Deny",
-          }
-        );
-
-        const granted = result === PermissionsAndroid.RESULTS.GRANTED;
-
-        if (!granted) {
-          // Optional UX
-          Alert.alert(
-            "Microphone required",
-            "Voice features will not work unless you allow microphone access."
-          );
-        }
-
-        return granted;
-      } catch (err) {
-        console.warn("Error requesting mic permission", err);
-        return false;
-      }
-    }, []);
-
-    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);
-    //   }
-    // }, []);
-
-    const position = chatbotConfig?.interface_properties?.position || "Right";
-    const sideSpacing = chatbotConfig?.interface_properties?.side_spacing ?? 20;
-    const bottomSpacing =
-      chatbotConfig?.interface_properties?.bottom_spacing ?? 20;
-
-    // const mainContainerStyle = useMemo(() => {
-    //   return {
-    //     ...styles.mainContainer,
-    //     [position.toLowerCase()]: `${sideSpacing ?? 20}px`,
-    //     alignItems:
-    //       position === "Right" ? "flex-end" : ("flex-start" as FlexAlignType),
-    //     // Explicitly clear mobile-specific styles
-    //     top: undefined,
-    //     [position === "Right" ? "left" : "right"]: undefined,
-    //     backgroundColor: "green",
-    //   };
-    // }, [position, sideSpacing, styles.mainContainer]);
-
-    return (
-      <ErrorBoundary componentName="ChatbotSDK">
-        <View style={styles?.mainContainer}>
-          {!loading && (
-            <>
-              <ErrorBoundary componentName="FloatingButton">
-                {show_floating_button && api_key && chatbotConfig && (
-                  <FloatingButton
-                    chatbotConfig={chatbotConfig}
-                    isWebViewVisible={isWebViewVisible}
-                    onPress={() => {
-                      emitEvent(ChatbotEventType.CHATBOT_BUTTON_CLICKED);
-                      openWebView();
-                    }}
-                    brandColor={chatbotConfig.brand_colour}
-                    imageUrl={chatbotConfig.image_url}
-                  />
-                )}
-              </ErrorBoundary>
-              <View
-                style={[
-                  styles.webViewWrapper,
-                  { height: isWebViewVisible ? "100%" : 0 },
-                ]}
-                pointerEvents={isWebViewVisible ? "auto" : "none"}
-              >
-                <Animated.View
-                  style={[
-                    styles.fullScreenContainer,
-                    {
-                      opacity: animatedValues.opacity,
-                      transform: [
-                        { scale: animatedValues.scale },
-                        { translateY: animatedValues.translateY },
-                      ],
-                    },
-                  ]}
-                >
-                  <ErrorBoundary componentName="ChatbotWebView">
-                    <WebView
-                      mediaCapturePermissionGrantType={"grant"}
-                      webviewDebuggingEnabled={true}
-                      ref={webViewRef}
-                      source={{
-                        uri: constructUrl(),
-                      }}
-                      onMessage={handleMessage}
-                      style={styles.webview}
-                      containerStyle={
-                        isFullScreen
-                          ? {
-                              width: screenDimensions.width,
-                              height: screenDimensions.height - 40,
-                            }
-                          : 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) ||
-                          request.url.startsWith(
-                            chatbotConfig?.chat_iframe_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>
-    );
-  }
-);
-
-Chatbot.displayName = "Chatbot";
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    position: "relative",
-    overflow: "visible",
-  },
-  webViewWrapper: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    overflow: "visible",
-    zIndex: 10000,
-    backgroundColor: "#ffffff",
-  },
-  fullScreenContainer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "white",
-    zIndex: 10000,
-    overflow: "visible",
-    // height: Platform.OS === "android" ? "100%" : "100%",
-  },
-  inlineContainer: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  webview: {
-    flex: 1,
-    backgroundColor: "white",
-    zIndex: 10000,
-  },
-});
-
-export default Chatbot;