@robylon/react-native-sdk 2.0.22-staging.1 → 2.0.23-staging.0

package/src/Chatbotsdk.tsx

@@ -4,6 +4,8 @@ import React, {
   useRef,
   useMemo,
   useCallback,
+  useImperativeHandle,
+  forwardRef,
 } from "react";
 import {
   View,
@@ -52,6 +54,18 @@ export interface ChatbotProps {
     is_test_user?: boolean;
   };
   onEvent?: ChatbotEventHandler;
+  // Controlled component props
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onReady?: () => void;
+}
+
+export interface ChatbotRef {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  isReady: () => boolean;
 }
 
 interface InternalChatbotProps extends ChatbotProps {
@@ -59,8 +73,6 @@ interface InternalChatbotProps extends ChatbotProps {
   onMessage?: (message: any) => void;
   isFullScreen?: boolean;
   enableAnimation?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
 }
 
 interface ChatbotMessage {
@@ -114,537 +126,593 @@ export interface ChatbotConfig {
   };
 }
 
-const Chatbot: React.FC<InternalChatbotProps> = ({
-  api_key,
-  user_id,
-  user_token,
-  show_floating_button = true,
-  onEvent,
-  onMessage,
-  isFullScreen = true,
-  enableAnimation = true,
-  onOpen,
-  onClose,
-  user_profile,
-}) => {
-  const [isWebViewVisible, setIsWebViewVisible] = useState(false);
-  const [chatbotConfig, setChatbotConfig] = useState<ChatbotConfig | null>(
-    null
-  );
-  const [loading, setLoading] = useState(true);
-  const webViewRef = useRef<WebView>(null);
-  const 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: "" });
-
-  // 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: "" },
-  });
-
-  const triggerAppInit = () => {
-    if (webViewRef.current) {
-      webViewRef.current.injectJavaScript(`
+const Chatbot = forwardRef<ChatbotRef, InternalChatbotProps>(
+  (
+    {
+      api_key,
+      user_id,
+      user_token,
+      show_floating_button = true,
+      onEvent,
+      onMessage,
+      isFullScreen = true,
+      enableAnimation = true,
+      isOpen: externalIsOpen,
+      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: "" });
+
+    // 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(`
         // Trigger APP_READY equivalent
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'APP_READY' }));
         true;
       `);
-    }
-  };
-
-  const executeStorageOp = useCallback(
-    (operation: () => void) => {
-      if (isStorageReady) {
-        operation();
-      } else {
-        pendingStorageOps.current.push(operation);
       }
-    },
-    [isStorageReady]
-  );
-
-  // Handle WebView messages
-  const handleMessage = useCallback(
-    (event: WebViewMessageEvent) => {
-      const { data } = event.nativeEvent;
-
-      try {
-        const parsedData: ChatbotMessage = JSON.parse(data);
-
-        // Handle storage messages
-        if (
-          Object.values(StorageMessageType).includes(
-            parsedData.type as StorageMessageType
-          )
-        ) {
-          const storageMessage = parsedData as StorageMessage;
-          switch (storageMessage.type) {
-            case StorageMessageType.STORAGE_READY:
-              setIsStorageReady(true);
-              pendingStorageOps.current.forEach((op) => op());
-              pendingStorageOps.current = [];
-              // Try to get stored ID immediately after storage is ready
-              webViewRef.current?.injectJavaScript(
-                createStorageMessage(
-                  StorageMessageType.GET_STORAGE,
-                  "rblyn_anon"
-                )
-              );
-              break;
-            case StorageMessageType.STORAGE_RESPONSE:
-              if (storageMessage.key && storageMessage.value) {
-                memoryCache.current[storageMessage.key] = storageMessage.value;
-                if (storageMessage.key === "rblyn_anon") {
-                  setEffectiveUserId(storageMessage.value);
-                }
-              }
-              break;
-            case StorageMessageType.STORAGE_ERROR:
-              logger.error("WebView storage error:", storageMessage.error);
-              break;
-          }
-          return;
+    };
+
+    const executeStorageOp = useCallback(
+      (operation: () => void) => {
+        if (isStorageReady) {
+          operation();
+        } else {
+          pendingStorageOps.current.push(operation);
         }
+      },
+      [isStorageReady]
+    );
 
-        // Add debug logging
-        if (__DEV__) {
-          if (parsedData?.type === "CONSOLE") {
-            console.log(`WebView ${parsedData?.level}:`, parsedData?.data);
+    // Handle WebView messages
+    const handleMessage = useCallback(
+      (event: WebViewMessageEvent) => {
+        const { data } = event.nativeEvent;
+
+        try {
+          const parsedData: ChatbotMessage = JSON.parse(data);
+
+          // Handle storage messages
+          if (
+            Object.values(StorageMessageType).includes(
+              parsedData.type as StorageMessageType
+            )
+          ) {
+            const storageMessage = parsedData as StorageMessage;
+            switch (storageMessage.type) {
+              case StorageMessageType.STORAGE_READY:
+                setIsStorageReady(true);
+                pendingStorageOps.current.forEach((op) => op());
+                pendingStorageOps.current = [];
+                // Try to get stored ID immediately after storage is ready
+                webViewRef.current?.injectJavaScript(
+                  createStorageMessage(
+                    StorageMessageType.GET_STORAGE,
+                    "rblyn_anon"
+                  )
+                );
+                break;
+              case StorageMessageType.STORAGE_RESPONSE:
+                if (storageMessage.key && storageMessage.value) {
+                  memoryCache.current[storageMessage.key] =
+                    storageMessage.value;
+                  if (storageMessage.key === "rblyn_anon") {
+                    setEffectiveUserId(storageMessage.value);
+                  }
+                }
+                break;
+              case StorageMessageType.STORAGE_ERROR:
+                logger.error("WebView storage error:", storageMessage.error);
+                break;
+            }
             return;
           }
-          if (parsedData?.type === "ERROR") {
-            console.error("WebView Error:", parsedData?.data);
-            return;
+
+          // Add debug logging
+          if (__DEV__) {
+            if (parsedData?.type === "CONSOLE") {
+              console.log(`WebView ${parsedData?.level}:`, parsedData?.data);
+              return;
+            }
+            if (parsedData?.type === "ERROR") {
+              console.error("WebView Error:", parsedData?.data);
+              return;
+            }
           }
-        }
 
-        if (parsedData?.type === "SYSTEM_INFO") {
-          setSystemInfo(parsedData?.data ?? { os: "", browser: "" });
-          return;
-        }
+          if (parsedData?.type === "SYSTEM_INFO") {
+            setSystemInfo(parsedData?.data ?? { os: "", browser: "" });
+            return;
+          }
 
-        if (parsedData?.type === "APP_READY") {
-          emitEvent(ChatbotEventType.CHATBOT_APP_READY);
-          if (webViewRef.current && isWebViewVisible) {
-            webViewRef.current?.injectJavaScript(getBrowserAndOSInfoScript());
-
-            const messageData = {
-              name: "registerUserId",
-              action: "registerUserId",
-              data: {
-                userId: effectiveUserId,
-                token: user_token ? `${user_token}` : undefined,
-                userProfile: {
-                  ...user_profile,
+          if (parsedData?.type === "APP_READY") {
+            emitEvent(ChatbotEventType.CHATBOT_APP_READY);
+            if (webViewRef.current && isWebViewVisible) {
+              webViewRef.current?.injectJavaScript(getBrowserAndOSInfoScript());
+
+              const messageData = {
+                name: "registerUserId",
+                action: "registerUserId",
+                data: {
+                  userId: effectiveUserId,
+                  token: user_token ? `${user_token}` : undefined,
+                  userProfile: {
+                    ...user_profile,
+                    ...getSystemInfo(systemInfo),
+                  },
                 },
-              },
-            };
-            logger.debug("messageData====>", JSON.stringify(messageData));
-            webViewRef.current?.injectJavaScript(`
+              };
+              logger.debug("messageData====>", JSON.stringify(messageData));
+              webViewRef.current?.injectJavaScript(`
             window.postMessage(${JSON.stringify({
               name: "openFrame",
               domain: "app-domain.com",
             })}, '*');
             window.postMessage(${JSON.stringify(messageData)}, '*');
           `);
+            }
           }
-        }
 
-        // Handle other message types
-        switch (parsedData?.type) {
-          case "close_chatbot":
-            closeWebView();
-            break;
-          case "CHATBOT_LOADED":
-            emitEvent(ChatbotEventType.CHATBOT_LOADED, parsedData?.data);
-            break;
-          case "CHAT_INITIALIZED":
-            emitEvent(ChatbotEventType.CHAT_INITIALIZED, parsedData?.data);
-            break;
-          case "SESSION_REFRESHED":
-            emitEvent(ChatbotEventType.SESSION_REFRESHED, parsedData?.data);
-            break;
-          case "CHAT_INITIALIZATION_FAILED":
-            emitEvent(
-              ChatbotEventType.CHAT_INITIALIZATION_FAILED,
-              parsedData?.data
-            );
-            break;
-          default:
-            if (onMessage) onMessage(parsedData ?? {});
+          // Handle other message types
+          switch (parsedData?.type) {
+            case "close_chatbot":
+              closeWebView();
+              break;
+            case "CHATBOT_LOADED":
+              emitEvent(ChatbotEventType.CHATBOT_LOADED, parsedData?.data);
+              break;
+            case "CHAT_INITIALIZED":
+              emitEvent(ChatbotEventType.CHAT_INITIALIZED, parsedData?.data);
+              break;
+            case "SESSION_REFRESHED":
+              emitEvent(ChatbotEventType.SESSION_REFRESHED, parsedData?.data);
+              break;
+            case "CHAT_INITIALIZATION_FAILED":
+              emitEvent(
+                ChatbotEventType.CHAT_INITIALIZATION_FAILED,
+                parsedData?.data
+              );
+              break;
+            default:
+              if (onMessage) onMessage(parsedData ?? {});
+          }
+        } catch (error) {
+          errorTracker.trackError(
+            error instanceof Error
+              ? error
+              : new Error("Failed to parse WebView message"),
+            "ChatbotSDK",
+            {
+              type: ErrorTypes.RUNTIME_ERROR,
+              context: { messageData: data },
+            }
+          );
         }
-      } 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!
+                )
+              );
+            });
           }
-        );
-      }
-    },
-    [
-      emitEvent,
-      isWebViewVisible,
-      onMessage,
-      systemInfo,
-      effectiveUserId,
-      user_token,
-      user_profile,
-    ]
-  );
+        }
 
-  // Initialize user ID
-  useEffect(() => {
-    const initializeUserId = async () => {
-      let userId = user_id ? String(user_id) : undefined;
+        setEffectiveUserId(userId);
+      };
 
-      if (!userId) {
-        // Try memory cache first
-        userId = memoryCache.current["rblyn_anon"];
+      initializeUserId();
+    }, [user_id, executeStorageOp]);
 
-        if (!userId) {
-          userId = generateUUID();
-          executeStorageOp(() => {
-            webViewRef.current?.injectJavaScript(
-              createStorageMessage(
-                StorageMessageType.SET_STORAGE,
-                "rblyn_anon",
-                userId!
-              )
-            );
-          });
+    // Handle external isOpen prop changes
+    useEffect(() => {
+      if (externalIsOpen !== undefined && isInitialized) {
+        if (externalIsOpen && !isWebViewVisible) {
+          openWebView();
+        } else if (!externalIsOpen && isWebViewVisible) {
+          closeWebView();
         }
       }
-
-      setEffectiveUserId(userId);
-    };
-
-    initializeUserId();
-  }, [user_id, executeStorageOp]);
-
-  // Initialize WebView storage
-  useEffect(() => {
-    if (webViewRef.current) {
-      webViewRef.current.injectJavaScript(getStorageScript());
-      // Try to get stored ID once storage is ready
-      executeStorageOp(() => {
-        webViewRef.current?.injectJavaScript(
-          createStorageMessage(StorageMessageType.GET_STORAGE, "rblyn_anon")
-        );
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    const fetchChatbotConfig = async () => {
-      try {
-        const endpointUrl = `${API_URL}/chat/chatbot/get/`;
-        const payload = {
-          client_user_id: effectiveUserId,
-          org_id: api_key,
-          token: user_token,
-          extra_info: {},
-        };
-
-        // setToastMessage(endpointUrl + " : " + BASE_CHATBOT_URL);
-        // setToastVisible(true);
-
-        const response = await fetch(endpointUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(payload),
+    }, [externalIsOpen, isInitialized, isWebViewVisible]);
+
+    // 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")
+          );
         });
+      }
+    }, []);
 
-        if (!response.ok) {
-          throw new Error("Failed to fetch chatbot configuration");
-        }
+    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: {},
+          };
 
-        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 || "",
-              },
+          // setToastMessage(endpointUrl + " : " + BASE_CHATBOT_URL);
+          // setToastVisible(true);
+
+          const response = await fetch(endpointUrl, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
             },
-          };
-          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 },
+            body: JSON.stringify(payload),
+          });
+
+          if (!response.ok) {
+            throw new Error("Failed to fetch chatbot configuration");
           }
-        );
-      } finally {
-        setLoading(false);
-      }
-    };
 
-    if (api_key && effectiveUserId) {
-      fetchChatbotConfig();
-    }
-  }, [api_key, effectiveUserId, user_token]);
+          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 || "",
+                },
+              },
+            };
+            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);
+        }
+      };
 
-  function constructUrl(): string {
-    if (!effectiveUserId) return "";
-    const params = new URLSearchParams({
-      id: api_key,
-    });
-    console.log("BASE_CHATBOT_URL SDK_VERSION", BASE_CHATBOT_URL);
-    return `${BASE_CHATBOT_URL}?${params.toString()}`;
-  }
+      if (api_key && effectiveUserId) {
+        fetchChatbotConfig();
+      }
+    }, [api_key, effectiveUserId, user_token]);
 
-  // Handle opening the chatbot
-  const openWebView = useCallback(() => {
-    setIsWebViewVisible(true);
-    if (enableAnimation) {
-      animateWebViewOpen(animatedValues, () => {
-        onOpen?.();
-        emitEvent(ChatbotEventType.CHATBOT_OPENED);
-        if (!isFirstLoadRef.current) {
-          setTimeout(triggerAppInit, 100);
-        }
-      });
-    } else {
-      requestAnimationFrame(() => {
-        onOpen?.();
-        emitEvent(ChatbotEventType.CHATBOT_OPENED);
-        if (!isFirstLoadRef.current) {
-          setTimeout(triggerAppInit, 100);
-        }
+    function constructUrl(): string {
+      if (!effectiveUserId) return "";
+      const params = new URLSearchParams({
+        id: api_key,
       });
+      console.log("BASE_CHATBOT_URL SDK_VERSION", BASE_CHATBOT_URL);
+      return `${BASE_CHATBOT_URL}?${params.toString()}`;
     }
-  }, [enableAnimation, animatedValues, onOpen, emitEvent]);
-
-  // NOt Needed
-  // 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, () => {
+    // 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);
-        onClose?.();
+        externalOnClose?.();
         emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-      });
-    } else {
-      setIsWebViewVisible(false);
-      onClose?.();
-      emitEvent(ChatbotEventType.CHATBOT_CLOSED);
-    }
-  }, [enableAnimation, animatedValues, onClose, emitEvent]);
-
-  // Emit button loaded event when component mounts
-  useEffect(() => {
-    if (show_floating_button && chatbotConfig) {
-      emitEvent(ChatbotEventType.CHATBOT_BUTTON_LOADED);
-    }
-  }, [show_floating_button, chatbotConfig, emitEvent]);
+      }
+    }, [enableAnimation, animatedValues, externalOnClose, emitEvent]);
 
-  const getScreenDimensions = () => {
-    const windowHeight = Dimensions.get("window").height;
-    const windowWidth = Dimensions.get("window").width;
-    const statusBarHeight =
-      Platform.OS === "ios" ? 0 : StatusBar.currentHeight || 0;
+    // Emit button loaded event when component mounts
+    useEffect(() => {
+      if (show_floating_button && chatbotConfig) {
+        emitEvent(ChatbotEventType.CHATBOT_BUTTON_LOADED);
+      }
+    }, [show_floating_button, chatbotConfig, emitEvent]);
 
-    return {
-      height: windowHeight - statusBarHeight,
-      width: windowWidth,
+    // 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 screenDimensions = getScreenDimensions();
+    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
+    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.fullScreenContainer,
-                  {
-                    opacity: animatedValues.opacity,
-                    transform: [
-                      { scale: animatedValues.scale },
-                      { translateY: animatedValues.translateY },
-                    ],
-                  },
+                  styles.webViewWrapper,
+                  { height: isWebViewVisible ? "100%" : 0 },
                 ]}
+                pointerEvents={isWebViewVisible ? "auto" : "none"}
               >
-                <ErrorBoundary componentName="ChatbotWebView">
-                  <WebView
-                    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);
-                    }}
-                    startInLoadingState={isFirstLoadRef.current}
-                    onLoadEnd={() => {
-                      if (__DEV__) {
-                        enableWebViewDebug(webViewRef);
+                <Animated.View
+                  style={[
+                    styles.fullScreenContainer,
+                    {
+                      opacity: animatedValues.opacity,
+                      transform: [
+                        { scale: animatedValues.scale },
+                        { translateY: animatedValues.translateY },
+                      ],
+                    },
+                  ]}
+                >
+                  <ErrorBoundary componentName="ChatbotWebView">
+                    <WebView
+                      ref={webViewRef}
+                      source={{
+                        uri: constructUrl(),
+                      }}
+                      onMessage={handleMessage}
+                      style={styles.webview}
+                      containerStyle={
+                        isFullScreen
+                          ? {
+                              width: screenDimensions.width,
+                              height: screenDimensions.height - 40,
+                            }
+                          : undefined
                       }
-                      webViewRef.current?.injectJavaScript(`
+                      allowsInlineMediaPlayback={true}
+                      mediaPlaybackRequiresUserAction={false}
+                      allowFileAccess={false}
+                      geolocationEnabled={false}
+                      javaScriptEnabled={true}
+                      domStorageEnabled={true}
+                      cacheEnabled={true}
+                      scrollEnabled={true}
+                      bounces={false}
+                      onShouldStartLoadWithRequest={(request) => {
+                        return request.url.startsWith(BASE_CHATBOT_URL);
+                      }}
+                      startInLoadingState={isFirstLoadRef.current}
+                      onLoadEnd={() => {
+                        if (__DEV__) {
+                          enableWebViewDebug(webViewRef);
+                        }
+                        webViewRef.current?.injectJavaScript(`
   if (!document.querySelector('meta[name="viewport"]')) {
     var meta = document.createElement('meta');
     meta.name = 'viewport';
@@ -712,34 +780,37 @@ const Chatbot: React.FC<InternalChatbotProps> = ({
 
   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>
-  );
-};
+                        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: {