@robylon/web-react-sdk 1.1.28-staging.14 → 1.1.28-staging.15

package/README.md

@@ -13,7 +13,7 @@ npm install @robylon/web-react-sdk
 ### Vanilla JavaScript
 
 ```html
-<script src="https://staging-cdn.robylon.com/1.1.28-staging.13/robylon.min.js"></script>
+<script src="https://staging-cdn.robylon.com/1.1.28-staging.14/robylon.min.js"></script>
 ```
 
 Or via npm:

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1166,147 +1166,483 @@ function create(config) {
  */
 var ErrorBoundary = /** @class */ (function (_super) {
     __extends(ErrorBoundary, _super);
-    function ErrorBoundary() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
             hasError: false,
+            error: null,
         };
         return _this;
     }
-    ErrorBoundary.getDerivedStateFromError = function (_) {
-        return { hasError: true };
+    ErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+            hasError: true,
+            error: error,
+        };
     };
     ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
-        // Log the error
-        logger.error("Error in ".concat(this.props.componentName || "unknown", " component:"), error, errorInfo);
+        var componentName = this.props.componentName;
+        logger.error("[Robylon Error] Error in ".concat(componentName, " component:"), error, errorInfo);
+        // You could also log to an error reporting service here
+        console.error({
+            componentStack: errorInfo.componentStack,
+        });
     };
     ErrorBoundary.prototype.render = function () {
         if (this.state.hasError) {
-            return null;
+            // You can render any custom fallback UI
+            return null; // Silently fail to not disrupt the user experience
         }
         return this.props.children;
     };
     return ErrorBoundary;
-}(React.Component));
+}(react.Component));
+
+var ChatbotEventType;
+(function (ChatbotEventType) {
+    ChatbotEventType["CHATBOT_BUTTON_LOADED"] = "CHATBOT_BUTTON_LOADED";
+    ChatbotEventType["CHATBOT_BUTTON_CLICKED"] = "CHATBOT_BUTTON_CLICKED";
+    ChatbotEventType["CHATBOT_OPENED"] = "CHATBOT_OPENED";
+    ChatbotEventType["CHATBOT_CLOSED"] = "CHATBOT_CLOSED";
+    ChatbotEventType["CHATBOT_APP_READY"] = "CHATBOT_APP_READY";
+    ChatbotEventType["CHATBOT_LOADED"] = "CHATBOT_LOADED";
+    ChatbotEventType["CHAT_INITIALIZED"] = "CHAT_INITIALIZED";
+    ChatbotEventType["SESSION_REFRESHED"] = "SESSION_REFRESHED";
+    ChatbotEventType["CHAT_INITIALIZATION_FAILED"] = "CHAT_INITIALIZATION_FAILED";
+})(ChatbotEventType || (ChatbotEventType = {}));
+var InternalEventType;
+(function (InternalEventType) {
+    InternalEventType["CHAT_MOVED"] = "CHAT_MOVED";
+    InternalEventType["CHATBOT_TOKEN_EXHAUSTED"] = "CHATBOT_TOKEN_EXHAUSTED";
+})(InternalEventType || (InternalEventType = {}));
+
+function useChatbotState(props) {
+    var _this = this;
+    var api_key = props.api_key, user_id = props.user_id, user_token = props.user_token, user_profile = props.user_profile;
+    var _a = react.useState(false), isInitializing = _a[0], setIsInitializing = _a[1];
+    var _b = react.useState(false), isInitialized = _b[0], setIsInitialized = _b[1];
+    var _c = react.useState(null), error = _c[0], setError = _c[1];
+    var _d = react.useState(null), chatbotConfig = _d[0], setChatbotConfig = _d[1];
+    var _e = react.useState(false), isIframeVisible = _e[0], setIsIframeVisible = _e[1];
+    // Initialize the chatbot
+    react.useEffect(function () {
+        var initChatbot = function () { return __awaiter(_this, void 0, void 0, function () {
+            var userId, isAnonymous, apiResponse, systemInfo, finalUserProfile, config, err_1, errorMessage;
+            var _a, _b, _c, _d, _e, _f, _g;
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        if (!api_key) {
+                            setError("API key is required");
+                            return [2 /*return*/];
+                        }
+                        if (isInitializing || isInitialized)
+                            return [2 /*return*/];
+                        setIsInitializing(true);
+                        _h.label = 1;
+                    case 1:
+                        _h.trys.push([1, 3, 4, 5]);
+                        userId = user_id;
+                        isAnonymous = false;
+                        // Handle anonymous users
+                        if (!userId) {
+                            userId = getCookie("rblyn_anon") || generateUUID();
+                            setCookie("rblyn_anon", String(userId), 365);
+                            isAnonymous = true;
+                        }
+                        return [4 /*yield*/, fetchChatbotConfig(api_key, userId, user_token)];
+                    case 2:
+                        apiResponse = _h.sent();
+                        systemInfo = getSystemInfo();
+                        finalUserProfile = __assign(__assign({}, systemInfo), user_profile);
+                        config = {
+                            chatbotId: api_key,
+                            userId: userId ? String(userId) : null,
+                            token: user_token,
+                            isAnonymous: isAnonymous,
+                            domain: getEnvironmentConfig().copilotUrl,
+                            brand_colour: ((_b = (_a = apiResponse.user.org_info.brand_config) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.brand_color) ||
+                                "#6a26cd",
+                            image_url: ((_d = (_c = apiResponse.user.org_info) === null || _c === void 0 ? void 0 : _c.brand_config) === null || _d === void 0 ? void 0 : _d.launcher_logo_url) || "",
+                            userProfile: finalUserProfile,
+                            chat_interface_config: {
+                                chat_bubble_prompts: [],
+                                display_name: ((_e = apiResponse.user.org_info.brand_config) === null || _e === void 0 ? void 0 : _e.display_name) || "",
+                                welcome_message: ((_f = apiResponse.user.org_info.brand_config) === null || _f === void 0 ? void 0 : _f.welcome_message) ||
+                                    "Hey! What can we help you with today?",
+                                redirect_url: ((_g = apiResponse.user.org_info.brand_config) === null || _g === void 0 ? void 0 : _g.redirect_url) || "",
+                            },
+                        };
+                        // Store the config
+                        setChatbotConfig(config);
+                        setIsInitialized(true);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        err_1 = _h.sent();
+                        errorMessage = err_1 instanceof Error ? err_1.message : "Failed to initialize chatbot";
+                        setError(errorMessage);
+                        logger.error("Chatbot initialization failed:", err_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setIsInitializing(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); };
+        initChatbot();
+    }, [api_key, user_id, user_token, user_profile]);
+    var toggleIframeVisibility = function () {
+        setIsIframeVisible(function (prev) { return !prev; });
+    };
+    var closeIframe = function () {
+        setIsIframeVisible(false);
+    };
+    return {
+        isInitialized: isInitialized,
+        isInitializing: isInitializing,
+        error: error,
+        chatbotConfig: chatbotConfig,
+        isIframeVisible: isIframeVisible,
+        toggleIframeVisibility: toggleIframeVisibility,
+        closeIframe: closeIframe,
+    };
+}
+
+function useChatbotEvents(props) {
+    var onEvent = props.onEvent;
+    var emitEvent = react.useCallback(function (type, data) {
+        var event = {
+            type: type,
+            timestamp: Date.now(),
+            data: data,
+        };
+        onEvent === null || onEvent === void 0 ? void 0 : onEvent(event);
+    }, [onEvent]);
+    var onInternalEvent = react.useCallback(function (eventType, additionalData) {
+        // Handle internal events if needed
+        // This can be expanded based on requirements
+    }, []);
+    return {
+        emitEvent: emitEvent,
+        onInternalEvent: onInternalEvent,
+    };
+}
+
+var ChatbotFloatingButton = function (_a) {
+    var config = _a.config, toggleIframe = _a.toggleIframe, isIframeVisible = _a.isIframeVisible, onEvent = _a.onEvent, onInternalEvent = _a.onInternalEvent;
+    // If config is null, don't render anything
+    if (!config)
+        return null;
+    var buttonRef = react.useRef(null);
+    var copilotUrl = getEnvironmentConfig().copilotUrl;
+    react.useEffect(function () {
+        if (buttonRef.current) {
+            requestAnimationFrame(function () {
+                onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                    type: ChatbotEventType.CHATBOT_BUTTON_LOADED,
+                    timestamp: Date.now(),
+                });
+                onInternalEvent(ChatbotEventType.CHATBOT_BUTTON_LOADED);
+            });
+        }
+    }, [onEvent, onInternalEvent]);
+    var renderIcon = function () {
+        if (isIframeVisible) {
+            return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Chevron_Down", children: jsxRuntime.jsx("path", { id: "Vector", d: "M19 9L12 16L5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+        }
+        return (jsxRuntime.jsx("img", { src: config.image_url || "".concat(copilotUrl, "/chatbubble.png"), alt: "Chat", style: {
+                zIndex: 1000,
+                cursor: "pointer",
+                borderRadius: "50%",
+                objectFit: "cover",
+                width: "100%",
+                height: "100%",
+            } }));
+    };
+    logger.log("config chatbotfloatingbutton", config);
+    return (jsxRuntime.jsx("div", { ref: buttonRef, className: "message-bubble-container", style: {
+            position: "fixed",
+            bottom: "1.5rem",
+            right: "1.5rem",
+            zIndex: 1000,
+            width: "48px",
+            height: "48px",
+            display: "flex",
+            flexDirection: "column-reverse",
+            backgroundColor: config.brand_colour,
+            color: getBestFontColor(config.brand_colour),
+            borderRadius: "50%",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            overflow: "hidden",
+        }, onClick: toggleIframe, children: renderIcon() }));
+};
+var ChatbotFloatingButton$1 = react.memo(ChatbotFloatingButton);
+
+var ChatbotIframe = function (_a) {
+    var config = _a.config, isVisible = _a.isVisible, onClose = _a.onClose, onEvent = _a.onEvent, onInternalEvent = _a.onInternalEvent;
+    // If config is null, don't render anything
+    if (!config)
+        return null;
+    var iframeRef = react.useRef(null);
+    var isInitializedRef = react.useRef(false);
+    var hasRegisteredRef = react.useRef(false);
+    // Add responsive styles handler
+    var applyResponsiveStyles = react.useCallback(function () {
+        var iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        if ((window === null || window === void 0 ? void 0 : window.innerWidth) < 560) {
+            // Mobile styles
+            iframe.style.width = "100vw";
+            iframe.style.minWidth = "300px";
+            iframe.style.right = "0";
+            iframe.style.bottom = "0";
+            iframe.style.height = "100vh";
+            iframe.style.flexDirection = "column";
+            iframe.style.flexGrow = "1";
+            iframe.style.borderRadius = "0";
+            iframe.style.top = "0";
+            iframe.style.maxHeight = "100%";
+        }
+        else {
+            // Desktop styles
+            iframe.style.width = "26%";
+            iframe.style.minWidth = "400px";
+            iframe.style.right = "32px";
+            iframe.style.bottom = "86px";
+            iframe.style.height = "calc(100vh - 3rem - 10vh)";
+            iframe.style.borderRadius = "1rem";
+            iframe.style.top = "calc(10vh - 32px)";
+            iframe.style.maxHeight = "45rem";
+        }
+    }, []);
+    // Add resize listener
+    react.useEffect(function () {
+        window === null || window === void 0 ? void 0 : window.addEventListener("resize", applyResponsiveStyles);
+        applyResponsiveStyles(); // Apply initial styles
+        return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener("resize", applyResponsiveStyles); };
+    }, [applyResponsiveStyles]);
+    // Initialize iframe only once
+    react.useEffect(function () {
+        var iframe = iframeRef.current;
+        if (!iframe || isInitializedRef.current)
+            return;
+        var copilotUrl = getEnvironmentConfig().copilotUrl;
+        iframe.src = "".concat(copilotUrl, "/chatbot-plugin?id=").concat(config.chatbotId);
+        isInitializedRef.current = true;
+        var handleIframeLoad = function () {
+            var _a, _b;
+            var targetOrigin = new URL(iframe.src).origin || copilotUrl;
+            (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                domain: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.hostname,
+                name: "checkDomain",
+            }, targetOrigin);
+        };
+        iframe.addEventListener("load", handleIframeLoad);
+        return function () { return iframe.removeEventListener("load", handleIframeLoad); };
+    }, [config.chatbotId]);
+    // Handle visibility changes in separate effect
+    react.useEffect(function () {
+        var _a, _b, _c, _d;
+        var iframe = iframeRef.current;
+        if (!iframe || !isInitializedRef.current)
+            return;
+        var copilotUrl = getEnvironmentConfig().copilotUrl;
+        iframe.style.display = isVisible ? "block" : "none";
+        if (iframe.contentWindow && isVisible) {
+            var targetOrigin = new URL(iframe.src).origin || copilotUrl;
+            (_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+                domain: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.hostname,
+                name: "openFrame",
+            }, targetOrigin);
+            if (!(hasRegisteredRef === null || hasRegisteredRef === void 0 ? void 0 : hasRegisteredRef.current)) {
+                (_c = iframe.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage({
+                    domain: (_d = window === null || window === void 0 ? void 0 : window.location) === null || _d === void 0 ? void 0 : _d.hostname,
+                    action: "registerUserId",
+                    data: {
+                        userId: config === null || config === void 0 ? void 0 : config.userId,
+                        token: config === null || config === void 0 ? void 0 : config.token,
+                        userProfile: config === null || config === void 0 ? void 0 : config.userProfile,
+                        isAnonymous: config === null || config === void 0 ? void 0 : config.isAnonymous,
+                    },
+                }, targetOrigin);
+                hasRegisteredRef.current = true;
+            }
+        }
+    }, [isVisible, config.userId, config.token, config.userProfile]);
+    react.useEffect(function () {
+        var iframe = iframeRef.current;
+        if (!iframe || !isInitializedRef.current)
+            return;
+        var copilotUrl = getEnvironmentConfig().copilotUrl;
+        if (isVisible) {
+            onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                type: ChatbotEventType.CHATBOT_OPENED,
+                timestamp: Date.now(),
+            });
+            onInternalEvent(ChatbotEventType.CHATBOT_OPENED);
+        }
+        // Handle messages from iframe
+        var handleMessage = function (event) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (event.origin === copilotUrl) {
+                // Handle existing messages
+                if (event.data === "closeChatbot") {
+                    onClose();
+                    return;
+                }
+                if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === "CHATBOT_TOKEN_EXHAUSTED") {
+                    onInternalEvent(InternalEventType.CHATBOT_TOKEN_EXHAUSTED);
+                    return;
+                }
+                // Handle CHATBOT_LOADED message
+                if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.type) === "CHATBOT_LOADED") {
+                    onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                        type: ChatbotEventType.CHATBOT_LOADED,
+                        timestamp: Date.now(),
+                    });
+                    onInternalEvent(ChatbotEventType.CHATBOT_LOADED);
+                }
+                if (((_c = event.data) === null || _c === void 0 ? void 0 : _c.type) === "CHAT_INITIALIZED") {
+                    onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                        type: ChatbotEventType.CHAT_INITIALIZED,
+                        timestamp: Date.now(),
+                    });
+                    onInternalEvent(ChatbotEventType.CHAT_INITIALIZED);
+                }
+                if (((_d = event.data) === null || _d === void 0 ? void 0 : _d.type) === "CHAT_INITIALIZATION_FAILED") {
+                    onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                        type: ChatbotEventType.CHAT_INITIALIZATION_FAILED,
+                        timestamp: Date.now(),
+                    });
+                    onInternalEvent(ChatbotEventType.CHAT_INITIALIZATION_FAILED, {
+                        error: (_e = event.data) === null || _e === void 0 ? void 0 : _e.error,
+                    });
+                }
+                if (((_f = event.data) === null || _f === void 0 ? void 0 : _f.type) === "SESSION_REFRESHED") {
+                    onEvent === null || onEvent === void 0 ? void 0 : onEvent({
+                        type: ChatbotEventType.SESSION_REFRESHED,
+                        timestamp: Date.now(),
+                    });
+                    onInternalEvent(ChatbotEventType.SESSION_REFRESHED);
+                }
+                if (((_g = event.data) === null || _g === void 0 ? void 0 : _g.type) === "CHAT_MOVED") {
+                    onInternalEvent(InternalEventType.CHAT_MOVED, {
+                        from: event.data.from,
+                        to: event.data.to,
+                        trigger: event.data.trigger,
+                    });
+                }
+            }
+        };
+        window === null || window === void 0 ? void 0 : window.addEventListener("message", handleMessage);
+        return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener("message", handleMessage); };
+    }, [onClose, onEvent, onInternalEvent, config.chatbotId, isVisible]);
+    // Update iframe when user profile changes
+    react.useEffect(function () {
+        var _a;
+        if (!iframeRef.current || !config || !isVisible)
+            return;
+        var iframe = iframeRef.current;
+        var domain = getEnvironmentConfig().copilotUrl;
+        (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({
+            action: "updateUserProfile",
+            user_profile: config.userProfile,
+        }, domain);
+    }, [config.userProfile, isVisible]);
+    return (jsxRuntime.jsx("iframe", { ref: iframeRef, id: "chat-iframe-rbyln", style: {
+            position: "fixed",
+            zIndex: 20000000,
+            border: "none",
+            boxShadow: "0px 0px 40px 0px rgba(14, 14, 15, 0.24)",
+            transformOrigin: "bottom right",
+            transition: "transform 0.3s ease-out",
+            display: isVisible ? "block" : "none",
+        } }));
+};
+var ChatbotIframe$1 = react.memo(ChatbotIframe);
 
 /**
  * Main Chatbot component that renders the chatbot UI
  */
-var RobylonChatbot = React.memo(function (_a) {
+var RobylonChatbot = react.memo(function (_a) {
     var api_key = _a.api_key, user_id = _a.user_id, user_token = _a.user_token, user_profile = _a.user_profile, onEvent = _a.onEvent;
-    // Reference to the ChatbotEmbed instance
-    var chatbotRef = React.useRef(null);
-    // Track initialization state
-    var _b = React.useState(false), isInitializing = _b[0], setIsInitializing = _b[1];
-    var _c = React.useState(false), isInitialized = _c[0], setIsInitialized = _c[1];
-    var _d = React.useState(null), error = _d[0], setError = _d[1];
-    var _e = React.useState(null), chatbotConfig = _e[0], setChatbotConfig = _e[1];
-    // Stabilize onEvent callback
-    var stableOnEvent = React.useCallback(function (event) {
+    react.useEffect(function () {
+    });
+    var stateProps = react.useMemo(function () { return ({
+        api_key: api_key,
+        user_id: user_id,
+        user_token: user_token,
+        user_profile: user_profile,
+    }); }, [api_key, user_id, user_token, user_profile]);
+    var stableOnEvent = react.useCallback(function (event) {
         onEvent === null || onEvent === void 0 ? void 0 : onEvent(event);
     }, [onEvent]);
-    // Initialize the chatbot
-    var initializeChatbot = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var userId, isAnonymous, apiResponse, systemInfo, finalUserProfile, config, err_1, errorMessage;
-        var _a, _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
-                case 0:
-                    if (!api_key) {
-                        setError("API key is required");
-                        return [2 /*return*/];
-                    }
-                    if (isInitializing || isInitialized)
-                        return [2 /*return*/];
-                    setIsInitializing(true);
-                    _h.label = 1;
-                case 1:
-                    _h.trys.push([1, 3, 4, 5]);
-                    userId = user_id;
-                    isAnonymous = false;
-                    // Handle anonymous users
-                    if (!userId) {
-                        userId = getCookie("rblyn_anon") || generateUUID();
-                        setCookie("rblyn_anon", String(userId), 365);
-                        isAnonymous = true;
-                    }
-                    return [4 /*yield*/, fetchChatbotConfig(api_key, userId, user_token)];
-                case 2:
-                    apiResponse = _h.sent();
-                    systemInfo = getSystemInfo();
-                    finalUserProfile = __assign(__assign({}, systemInfo), user_profile);
-                    config = {
-                        chatbotId: api_key,
-                        userId: userId ? String(userId) : null,
-                        token: user_token,
-                        isAnonymous: isAnonymous,
-                        domain: getEnvironmentConfig().copilotUrl,
-                        brand_colour: ((_b = (_a = apiResponse.user.org_info.brand_config) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.brand_color) ||
-                            "#6a26cd",
-                        image_url: ((_d = (_c = apiResponse.user.org_info) === null || _c === void 0 ? void 0 : _c.brand_config) === null || _d === void 0 ? void 0 : _d.launcher_logo_url) || "",
-                        userProfile: finalUserProfile,
-                        chat_interface_config: {
-                            chat_bubble_prompts: [],
-                            display_name: ((_e = apiResponse.user.org_info.brand_config) === null || _e === void 0 ? void 0 : _e.display_name) || "",
-                            welcome_message: ((_f = apiResponse.user.org_info.brand_config) === null || _f === void 0 ? void 0 : _f.welcome_message) ||
-                                "Hey! What can we help you with today?",
-                            redirect_url: ((_g = apiResponse.user.org_info.brand_config) === null || _g === void 0 ? void 0 : _g.redirect_url) || "",
-                        },
-                    };
-                    // Store the config
-                    setChatbotConfig(config);
-                    // Create the ChatbotEmbed instance
-                    chatbotRef.current = new ChatbotEmbed(config);
-                    // Register event handler
-                    if (stableOnEvent) {
-                        chatbotRef.current.on("*", stableOnEvent);
-                    }
-                    setIsInitialized(true);
-                    return [3 /*break*/, 5];
-                case 3:
-                    err_1 = _h.sent();
-                    errorMessage = err_1 instanceof Error ? err_1.message : "Failed to initialize chatbot";
-                    setError(errorMessage);
-                    logger.error("Chatbot initialization failed:", err_1);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setIsInitializing(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [api_key, user_id, user_token, stableOnEvent]);
-    // Initialize on component mount
-    React.useEffect(function () {
-        if (api_key) {
-            initializeChatbot();
-        }
-        // Cleanup on unmount
-        return function () {
-            if (chatbotRef.current) {
-                chatbotRef.current.destroy();
-                chatbotRef.current = null;
+    var _b = useChatbotState(stateProps), isInitialized = _b.isInitialized, error = _b.error, chatbotConfig = _b.chatbotConfig, isIframeVisible = _b.isIframeVisible, toggleIframeVisibility = _b.toggleIframeVisibility, closeIframe = _b.closeIframe;
+    var eventProps = react.useMemo(function () { return ({
+        api_key: api_key,
+        user_profile: stateProps.user_profile,
+        onEvent: stableOnEvent,
+        chatbotConfig: chatbotConfig
+            ? {
+                isAnonymous: chatbotConfig.isAnonymous,
+                userId: chatbotConfig.userId
+                    ? String(chatbotConfig.userId)
+                    : null,
             }
-        };
-    }, [initializeChatbot]);
-    // Update chatbot when user profile changes
-    React.useEffect(function () {
-        if (chatbotRef.current && isInitialized && chatbotConfig) {
-            var systemInfo = getSystemInfo();
-            chatbotRef.current.updateConfig({
-                userProfile: __assign(__assign({}, systemInfo), user_profile),
-            });
-        }
-    }, [user_profile, isInitialized]);
-    // Don't render anything if there are errors or not initialized
-    if (!api_key || error || !isInitialized) {
+            : null,
+    }); }, [
+        api_key,
+        stateProps.user_profile,
+        stableOnEvent,
+        chatbotConfig === null || chatbotConfig === void 0 ? void 0 : chatbotConfig.isAnonymous,
+        chatbotConfig === null || chatbotConfig === void 0 ? void 0 : chatbotConfig.userId,
+    ]);
+    var _c = useChatbotEvents(__assign({}, eventProps)), emitEvent = _c.emitEvent, onInternalEvent = _c.onInternalEvent;
+    var handleClose = react.useCallback(function () {
+        closeIframe();
+        emitEvent(ChatbotEventType.CHATBOT_CLOSED);
+    }, [closeIframe, emitEvent]);
+    var handleButtonClick = react.useCallback(function () {
+        toggleIframeVisibility();
+        emitEvent(isIframeVisible
+            ? ChatbotEventType.CHATBOT_CLOSED
+            : ChatbotEventType.CHATBOT_BUTTON_CLICKED);
+    }, [toggleIframeVisibility, emitEvent, isIframeVisible]);
+    var floatingButtonProps = react.useMemo(function () { return ({
+        config: chatbotConfig,
+        toggleIframe: handleButtonClick,
+        isIframeVisible: isIframeVisible,
+        onEvent: stableOnEvent,
+        onInternalEvent: onInternalEvent,
+    }); }, [
+        chatbotConfig,
+        handleButtonClick,
+        isIframeVisible,
+        stableOnEvent,
+        onInternalEvent,
+    ]);
+    var iframeProps = react.useMemo(function () { return ({
+        config: chatbotConfig,
+        isVisible: isIframeVisible,
+        onClose: handleClose,
+        onEvent: stableOnEvent,
+        onInternalEvent: onInternalEvent,
+    }); }, [
+        chatbotConfig,
+        isIframeVisible,
+        handleClose,
+        stableOnEvent,
+        onInternalEvent,
+    ]);
+    if (!api_key || error || !chatbotConfig) {
         return null;
     }
-    // The ChatbotEmbed handles all rendering via DOM manipulation,
-    // so we don't need to return any visible elements here
-    return null;
+    return (jsxRuntime.jsx(ErrorBoundary, { componentName: "RobylonChatbot", children: isInitialized ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorBoundary, { componentName: "ChatbotFloatingButton", children: jsxRuntime.jsx(ChatbotFloatingButton$1, __assign({}, floatingButtonProps)) }), jsxRuntime.jsx(ErrorBoundary, { componentName: "ChatbotIframe", children: jsxRuntime.jsx(ChatbotIframe$1, __assign({}, iframeProps)) })] })) : null }));
 }, function (prevProps, nextProps) {
-    // Memoization comparison
     return (prevProps.api_key === nextProps.api_key &&
         prevProps.user_id === nextProps.user_id &&
         prevProps.user_token === nextProps.user_token &&