@robylon/react-native-sdk 2.2.1-staging.1 → 2.2.1

package/src/Chatbotsdk.tsx

@@ -1,1191 +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";
-import {
-  SESSION_UPDATED_MESSAGE_TYPE,
-  RESUME_SESSION_KEY,
-  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;
-}
-
-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;
-
-    // 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,
-      }),
-      [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 || sessionId === sessionIdRef.current) return;
-      sessionIdRef.current = sessionId;
-
-      try {
-        onSessionRef.current?.(sessionId, sessionContextRef.current ?? {});
-      } 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;
-      `);
-      }
-    };
-
-    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]: resumeSessionRef.current || 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]: resumeSessionRef.current
-                      ? "[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: resumeSessionRef.current || 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]);
-
-    // 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?.();
-      }
-    }, [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}
-                      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;