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

package/src/Chatbotsdk.tsx

@@ -0,0 +1,1299 @@
+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";
+import {
+  handleWebViewNavigationRequest,
+  CHATBOT_ORIGIN_WHITELIST,
+} from "./utils/webViewNavigation";
+import {
+  SESSION_UPDATED_MESSAGE_TYPE,
+  RESUME_SESSION_KEY,
+  SWITCH_SESSION_ACTION,
+  extractSessionId,
+} from "./utils/session";
+
+/**
+ * Host-app overrides for the branding the chat UI paints on its very first
+ * frame, before its own config call lands. Every field is optional and wins
+ * over the value the SDK fetched from /chat/chatbot/get/; anything omitted
+ * falls back to that fetched config.
+ */
+export interface ChatbotLoadingScreen {
+  /** Header avatar. */
+  image?: string;
+  /** Display name in the header. */
+  bot_name?: string;
+  /** Colour the header is tinted with. */
+  brand_color?: string;
+  /** Whether the "powered by" footer shows. */
+  powered_by?: boolean;
+  /**
+   * Sub-text shown under the header. Unlike the fields above, no brand_config
+   * field backs this one, so it ships only when the host app supplies it.
+   */
+  sub_text?: string;
+}
+
+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;
+  };
+  session_id?: string;
+  session_context?: Record<string, any>;
+  discrete?: boolean;
+  /**
+   * Overrides for the branding the chat UI paints before its own config call
+   * lands. Purely a first-paint concern: the chat UI reconciles to its own
+   * config afterwards, so these do not restyle the running chat.
+   */
+  loading_screen?: ChatbotLoadingScreen;
+  onEvent?: ChatbotEventHandler;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onReady?: () => void;
+  onSession?: (
+    session_id: string,
+    session_context?: Record<string, any>,
+  ) => void;
+}
+
+export interface ChatbotRef {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  isReady: () => boolean;
+  getSessionId: () => string | undefined;
+  openToSession: (
+    session_id: string,
+    session_context?: Record<string, any>,
+  ) => void;
+}
+
+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;
+  /**
+   * Bot display name, from brand_config.name. Not to be confused with
+   * chat_interface_config.display_name below, which reads a
+   * brand_config.display_name that the API does not return and which nothing
+   * in the SDK consumes.
+   */
+  name?: 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;
+    };
+    header_image_url?: {
+      url: string;
+    };
+  };
+  footer?: {
+    show_powered_by?: boolean;
+  };
+  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,
+      session_id,
+      session_context,
+      discrete = false,
+      onSession,
+      loading_screen,
+    },
+    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: "" });
+
+    // Session id pass-through. All four are refs so that client-supplied values
+    // never enter handleMessage's dependency array: adding them would rebuild
+    // the handler on every client re-render, omitting them without a ref would
+    // capture a stale closure.
+    // The imperative handle gates on these rather than on the state values it
+    // captured when it was built. A handle is only rebuilt on the render after
+    // a state change, so onReady — which fires in the same pass that sets
+    // isInitialized — used to hand out a handle whose open() was still gated
+    // shut. These mirror the state writes so the handle is never stale.
+    const isInitializedRef = useRef(false);
+    const isWebViewVisibleRef = useRef(false);
+
+    const sessionIdRef = useRef<string | undefined>(undefined);
+    const onSessionRef = useRef(onSession);
+    const sessionContextRef = useRef(session_context);
+    const resumeSessionRef = useRef(session_id);
+    const discreteRef = useRef(discrete);
+    const loadingScreenRef = useRef(loading_screen);
+    onSessionRef.current = onSession;
+    sessionContextRef.current = session_context;
+    resumeSessionRef.current = session_id;
+    discreteRef.current = discrete;
+    loadingScreenRef.current = loading_screen;
+
+    // openToSession's target, kept apart from the prop mirror above rather
+    // than written into it. That line reassigns on every render, so an
+    // imperative value stored there would be erased by the very state update
+    // that opens the WebView. This one outranks the prop while it is set.
+    const imperativeSessionRef = useRef<string | undefined>(undefined);
+    const resolveResumeTarget = () =>
+      imperativeSessionRef.current ?? resumeSessionRef.current;
+    // Same treatment for the context openToSession was called with. Writing it
+    // into sessionContextRef would be erased on the next render for the same
+    // reason, so a push-initiated switch would report the mounting screen's
+    // context instead of the one describing why the switch happened.
+    const imperativeContextRef = useRef<Record<string, any> | undefined>(
+      undefined,
+    );
+    // A session openToSession was asked to show before the SDK could act on it.
+    const pendingOpenRef = useRef<string | undefined>(undefined);
+    // The init effect runs above where these are declared and must not list
+    // them as dependencies, so it reaches them through refs kept in step below.
+    const openWebViewRef = useRef<(() => void) | undefined>(undefined);
+    const postSessionSwitchRef = useRef<((id: string) => void) | undefined>(
+      undefined,
+    );
+
+    // Same reasoning as above: the branding hint is read inside handleMessage,
+    // which does not list chatbotConfig among its dependencies.
+    const chatbotConfigRef = useRef<ChatbotConfig | null>(null);
+    chatbotConfigRef.current = chatbotConfig;
+
+    // The init_load_* hint rides the first registerUserId after the chat
+    // surface loads and no later one. A reopen re-triggers APP_READY, but by
+    // then the chat UI has its own config and the hint would be noise.
+    const hasSentInitLoadRef = useRef(false);
+
+    // 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 (isInitializedRef.current) {
+            openWebView();
+          }
+        },
+        close: () => {
+          if (isInitializedRef.current) {
+            closeWebView();
+          }
+        },
+        toggle: () => {
+          if (isInitializedRef.current) {
+            if (isWebViewVisibleRef.current) {
+              closeWebView();
+            } else {
+              openWebView();
+            }
+          }
+        },
+        isReady: () => isInitializedRef.current,
+        getSessionId: () => sessionIdRef.current,
+        openToSession: (
+          sessionId: string,
+          sessionContext?: Record<string, any>,
+        ) => {
+          if (typeof sessionId !== "string" || sessionId.length === 0) return;
+          // Armed before anything is injected. Opening the WebView for the
+          // first time boots the chat surface, and the registerUserId that
+          // follows has to carry the same target this switch asks for.
+          imperativeSessionRef.current = sessionId;
+          imperativeContextRef.current = sessionContext;
+          // Held rather than dropped when the chat surface has not finished
+          // booting. A notification tapped from a killed app arrives long
+          // before this component is ready, which is the most common way one
+          // is opened at all — returning silently there would land the user in
+          // whatever conversation the app happened to restore. Applied by the
+          // effect that watches isInitialized.
+          if (!isInitializedRef.current) {
+            pendingOpenRef.current = sessionId;
+            return;
+          }
+          openWebView();
+          postSessionSwitch(sessionId);
+        },
+      }),
+      [isInitialized, isWebViewVisible],
+    );
+
+    // Hands the session id to the client. Deduped so that a re-emission on
+    // reopen does not fire client side effects twice, and wrapped so that a
+    // throwing client handler cannot break message handling.
+    const emitSession = useCallback((data: any) => {
+      const sessionId = extractSessionId(data);
+      if (!sessionId) return;
+      // Captured before the clears below so the context that arrived with
+      // openToSession still reaches the handler for the session it described.
+      const context = imperativeContextRef.current ?? sessionContextRef.current;
+      // The imperative target is an intent about one initialization, matching
+      // the web app's own one-shot handling of it. Once a session id comes
+      // back — whether the backend honoured the target or quietly fell back to
+      // a fresh session — it is spent, so a later reopen cannot revive the
+      // conversation the user has since left. Cleared ahead of the dedupe
+      // below, which returns early when the switch resolved to the session
+      // already on screen.
+      imperativeSessionRef.current = undefined;
+      imperativeContextRef.current = undefined;
+      if (sessionId === sessionIdRef.current) return;
+      sessionIdRef.current = sessionId;
+
+      try {
+        onSessionRef.current?.(sessionId, context ?? {});
+      } catch (error) {
+        errorTracker.trackError(
+          error instanceof Error
+            ? error
+            : new Error("onSession handler threw an error"),
+          "ChatbotSDK",
+          {
+            // The session id itself is deliberately left out of the report so
+            // that it stays confined to the two opt-in client channels.
+            type: ErrorTypes.RUNTIME_ERROR,
+            context: { source: SESSION_UPDATED_MESSAGE_TYPE },
+          },
+        );
+      }
+    }, []);
+
+    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;
+      `);
+      }
+    };
+
+    // Asks the chat surface to abandon whatever conversation it is showing and
+    // re-initialize on this one. Sent alongside the resume target rather than
+    // instead of it: a WebView that has not booted yet reaches the chat surface
+    // through APP_READY -> registerUserId and resumes from there, while one
+    // that is already live needs this message, because by then its resume
+    // target is only read when a session is being created.
+    const postSessionSwitch = useCallback((sessionId: string) => {
+      if (!webViewRef.current) return;
+      const messageData = {
+        name: SWITCH_SESSION_ACTION,
+        action: SWITCH_SESSION_ACTION,
+        data: { [RESUME_SESSION_KEY]: sessionId },
+      };
+      // Not logged, even redacted: there is nothing in this payload but the
+      // session id.
+      webViewRef.current.injectJavaScript(`
+        window.postMessage(${JSON.stringify(messageData)}, '*');
+        true;
+      `);
+    }, []);
+
+    postSessionSwitchRef.current = postSessionSwitch;
+
+    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;
+          }
+
+          // Returns before the switch below so the session id never reaches
+          // emitEvent (and through it onEvent and /users/sdk/record-logs/) or
+          // the default branch's onMessage. Clients who registered neither
+          // onSession nor getSessionId cannot observe it.
+          if (parsedData?.type === SESSION_UPDATED_MESSAGE_TYPE) {
+            emitSession(parsedData?.data);
+            return;
+          }
+
+          if (parsedData?.type === "APP_READY") {
+            emitEvent(ChatbotEventType.CHATBOT_APP_READY);
+            if (webViewRef.current && isWebViewVisible) {
+              webViewRef.current?.injectJavaScript(getBrowserAndOSInfoScript());
+
+              // First-paint branding hint. The chat UI makes its own config
+              // call on boot and renders a skeleton until it lands; the SDK
+              // already holds the same branding from /chat/chatbot/get/, so
+              // passing it here lets the header paint immediately. A hint, not
+              // a source of truth: the chat UI keeps whatever its own call
+              // returns, and must stay correct when these are absent.
+              const brandConfig = chatbotConfigRef.current;
+              const loadingScreen = loadingScreenRef.current;
+
+              // Every key is dropped unless something actually backs it, so
+              // the chat UI never has to tell "the SDK knows it is blank" from
+              // "the SDK does not know" — a missing key and an empty one mean
+              // the same thing to it, and both fall back to its own config.
+              // ?? rather than || throughout, so a host app that deliberately
+              // passes powered_by: false still overrides a truthy config.
+              const hint: Record<string, string | boolean> = {};
+              const addHint = (
+                key: string,
+                value: string | boolean | undefined,
+              ) => {
+                if (value !== undefined && value !== "") {
+                  hint[key] = value;
+                }
+              };
+
+              addHint(
+                "init_load_image",
+                // Header image first, brand logo second, so orgs that set only
+                // a launcher logo still get a branded header.
+                loadingScreen?.image ??
+                  (brandConfig?.images?.header_image_url?.url ||
+                    brandConfig?.image_url),
+              );
+              addHint(
+                "init_load_bot_name",
+                loadingScreen?.bot_name ?? brandConfig?.name,
+              );
+              addHint(
+                "init_load_brand_color",
+                loadingScreen?.brand_color ?? brandConfig?.brand_colour,
+              );
+              addHint(
+                "init_load_powered_by",
+                loadingScreen?.powered_by ?? brandConfig?.footer?.show_powered_by,
+              );
+              // Prop-only: no brand_config field backs the sub-text.
+              addHint("init_load_sub_text", loadingScreen?.sub_text);
+
+              let initLoadHint: Record<string, string | boolean> | undefined;
+              // Left unlatched when there was nothing to send, so a later
+              // registration can still carry the hint once config arrives.
+              if (!hasSentInitLoadRef.current && Object.keys(hint).length > 0) {
+                initLoadHint = hint;
+                hasSentInitLoadRef.current = true;
+              }
+              const messageData = {
+                name: "registerUserId",
+                action: "registerUserId",
+                data: {
+                  userId: effectiveUserId,
+                  ...initLoadHint,
+                  [RESUME_SESSION_KEY]: resolveResumeTarget() || undefined,
+                  // Sent only when opted in. false is the default and is
+                  // conveyed by the key's absence, so integrations that do not
+                  // use it keep sending an unchanged payload.
+                  discrete: discreteRef.current ? true : undefined,
+                  token: user_token ? `${user_token}` : undefined,
+                  userProfile: {
+                    ...user_profile,
+                    ...getSystemInfo(systemInfoRef?.current),
+                    __INT_SYS_INFO__: {
+                      ...getSystemInfo(systemInfoRef?.current),
+                    },
+                  },
+                },
+              };
+              // logger.debug is an unconditional console.log, so the session id
+              // is redacted here rather than printed into every client's
+              // production console.
+              logger.debug(
+                "messageData====>",
+                JSON.stringify({
+                  ...messageData,
+                  data: {
+                    ...messageData.data,
+                    [RESUME_SESSION_KEY]: resolveResumeTarget()
+                      ? "[redacted]"
+                      : undefined,
+                  },
+                }),
+              );
+              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",
+                };
+                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,
+        emitSession,
+        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,
+            // Read from the ref rather than the prop so that a later change
+            // does not re-trigger the config fetch. Consistent with session_id
+            // being an initialization-time input. JSON.stringify drops the key
+            // when there is nothing to resume.
+            resumable_session_id: resolveResumeTarget() || undefined,
+            // See the registerUserId payload — omitted when false.
+            discrete: discreteRef.current ? true : undefined,
+            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 || "",
+              name: orgInfo.brand_config?.name || "",
+              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,
+                },
+                header_image_url: {
+                  url: orgInfo.brand_config?.images?.header_image_url?.url || "",
+                },
+              },
+              footer: {
+                // Left uncoerced so an org that never set it stays undefined
+                // and the init_load_powered_by key is dropped rather than
+                // asserting a false the backend never stated.
+                show_powered_by: orgInfo.brand_config?.footer?.show_powered_by,
+              },
+              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(() => {
+      // Idempotent. Integrations that worked around open()-inside-onReady not
+      // firing may now have both that call and their workaround run; without
+      // this guard the second one would replay the animation and emit a
+      // duplicate CHATBOT_OPENED.
+      if (isWebViewVisibleRef.current) return;
+
+      isWebViewVisibleRef.current = true;
+      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]);
+
+    openWebViewRef.current = openWebView;
+
+    // Handle closing the chatbot
+    const closeWebView = useCallback(() => {
+      if (webViewRef.current) {
+        webViewRef.current.postMessage(
+          JSON.stringify({
+            name: "closeFrame",
+            domain: "app-domain.com",
+          }),
+        );
+      }
+
+      // The ref mirrors each state write at the point it happens, so it stays
+      // true for the duration of the close animation exactly as the state does.
+      if (enableAnimation) {
+        animateWebViewClose(animatedValues, () => {
+          isWebViewVisibleRef.current = false;
+          setIsWebViewVisible(false);
+          externalOnClose?.();
+          emitEvent(ChatbotEventType.CHATBOT_CLOSED);
+        });
+      } else {
+        isWebViewVisibleRef.current = false;
+        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) {
+        // Set before onReady fires, so a client calling open() from inside it
+        // finds the handle already usable.
+        isInitializedRef.current = true;
+        setIsInitialized(true);
+        onReady?.();
+
+        // Apply a session the client asked for before the SDK could act on it.
+        // After onReady, so a client that also opens the chatbot from there
+        // has already run and this lands on top rather than being overwritten.
+        const pending = pendingOpenRef.current;
+        if (pending) {
+          pendingOpenRef.current = undefined;
+          openWebViewRef.current?.();
+          postSessionSwitchRef.current?.(pending);
+        }
+      }
+    }, [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">
+        {/*
+          This root view is flex: 1 and stays mounted while the chat is closed.
+          Left hit-testable, it sits invisibly over whatever the host renders
+          behind it and swallows every tap. "box-none" exempts the container
+          itself while leaving its children interactive, which is what the
+          floating button and the dev-only debug button need. The WebView
+          wrapper below manages its own pointerEvents.
+        */}
+        <View
+          style={styles?.mainContainer}
+          pointerEvents={isWebViewVisible ? "auto" : "box-none"}>
+          {!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}
+                      // The library's default whitelist is http/https, and it
+                      // answers anything outside it itself rather than calling
+                      // the handler below — which is why `tel:` used to die in
+                      // its canOpenURL check. This adds the handoff schemes to
+                      // that default instead of replacing it, so every other
+                      // scheme keeps the library's handling.
+                      originWhitelist={CHATBOT_ORIGIN_WHITELIST}
+                      onShouldStartLoadWithRequest={(request) =>
+                        handleWebViewNavigationRequest(request, [
+                          BASE_CHATBOT_URL,
+                          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;