@robylon/web-react-sdk 1.1.28-staging.2 → 1.1.28-staging.21

package/README.md

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

package/dist/cjs/index.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -716,11 +719,22 @@ var ChatbotEmbed = /** @class */ (function () {
 /**
  * Environment configuration for the SDK
  */
-// Default configuration values
+// Get current environment from build-time
+var NODE_ENV = "staging" ;
+// Default configuration values based on environment
 var DEFAULT_CONFIG = {
-    copilotUrl: "https://app.robylon.ai",
-    environment: "production",
-    apiUrl: "https://api.robylon.ai",
+    // Default URLs for each environment
+    copilotUrl: {
+        development: "https://dev.robylon.ai",
+        staging: "https://staging.d2s3wsqyyond1h.amplifyapp.com",
+        production: "https://app.robylon.ai",
+    },
+    environment: NODE_ENV,
+    apiUrl: {
+        development: "https://dev-api.robylon.ai",
+        staging: "https://stage-api.robylon.ai",
+        production: "https://api.robylon.ai",
+    },
 };
 // Store custom config values
 var customConfig = {};
@@ -734,10 +748,21 @@ var setEnvironmentConfig = function (config) {
  * Gets environment configuration with defaults
  */
 var getEnvironmentConfig = function () {
+    // Determine current environment
+    var environment = customConfig.environment || NODE_ENV;
+    // Ensure we pick URLs appropriate for the current environment
+    var envType = environment === "staging"
+        ? "staging"
+        : environment === "development"
+            ? "development"
+            : "production";
+    // Get default values for current environment
+    var defaultCopilotUrl = DEFAULT_CONFIG.copilotUrl[envType];
+    var defaultApiUrl = DEFAULT_CONFIG.apiUrl[envType];
     return {
-        copilotUrl: customConfig.copilotUrl || DEFAULT_CONFIG.copilotUrl,
-        environment: customConfig.environment || DEFAULT_CONFIG.environment,
-        apiUrl: customConfig.apiUrl || DEFAULT_CONFIG.apiUrl,
+        copilotUrl: customConfig.copilotUrl || defaultCopilotUrl,
+        environment: environment,
+        apiUrl: customConfig.apiUrl || defaultApiUrl,
     };
 };
 
@@ -1011,18 +1036,38 @@ var getSystemInfo = function () {
 };
 
 /**
- * Initialize the Robylon SDK with custom environment settings
+ * Initialize the SDK with custom environment settings
+ * @internal This is primarily for internal use and advanced debugging.
+ * Normal users should not need to call this function.
  */
 function init(config) {
-    // Make sure apiUrl is properly set when using init
-    var configWithDefaults = __assign(__assign({}, config), { apiUrl: config.apiUrl ||
-            (config.environment === "staging"
-                ? "https://stage-api.robylon.ai"
-                : config.environment === "development"
-                    ? "https://dev-api.robylon.ai"
-                    : "https://api.robylon.ai") });
-    setEnvironmentConfig(configWithDefaults);
-    logger.log("Robylon SDK environment initialized with custom config", configWithDefaults);
+    // For internal SDK initialization - not intended for general user use
+    // We prioritize built-in environment settings based on NODE_ENV
+    // Get current environment from build-time
+    var currentEnv = "staging" ;
+    // Default environment-specific API URLs
+    var defaultApiUrls = {
+        development: "https://dev-api.robylon.ai",
+        staging: "https://stage-api.robylon.ai",
+        production: "https://api.robylon.ai",
+    };
+    // Default environment-specific Copilot URLs
+    var defaultCopilotUrls = {
+        development: "https://dev.robylon.ai",
+        staging: "https://staging.d2s3wsqyyond1h.amplifyapp.com",
+        production: "https://app.robylon.ai",
+    };
+    // Only override with user values in non-production environments or if explicitly allowed
+    var isProduction = currentEnv === "production";
+    config.allowProductionOverride === "true" && isProduction;
+    {
+        // Use environment-specific defaults as fallbacks
+        var configWithDefaults = __assign(__assign({}, config), { apiUrl: config.apiUrl ||
+                defaultApiUrls[currentEnv], copilotUrl: config.copilotUrl ||
+                defaultCopilotUrls[currentEnv], environment: config.environment || currentEnv });
+        setEnvironmentConfig(configWithDefaults);
+        logger.log("Robylon SDK environment initialized with custom config", configWithDefaults);
+    }
 }
 /**
  * Create a new Robylon chatbot instance
@@ -1116,6 +1161,499 @@ function create(config) {
     });
 }
 
+/**
+ * Error Boundary component to catch and handle React rendering errors
+ */
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false,
+            error: null,
+        };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+            hasError: true,
+            error: error,
+        };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (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) {
+            // 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));
+
+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 api_key = _a.api_key, user_id = _a.user_id, user_token = _a.user_token, user_profile = _a.user_profile, onEvent = _a.onEvent;
+    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]);
+    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,
+            }
+            : 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;
+    }
+    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) {
+    return (prevProps.api_key === nextProps.api_key &&
+        prevProps.user_id === nextProps.user_id &&
+        prevProps.user_token === nextProps.user_token &&
+        JSON.stringify(prevProps.user_profile) ===
+            JSON.stringify(nextProps.user_profile));
+});
+/**
+ * Wrapped Chatbot component with error boundary
+ */
+var ChatbotWithErrorBoundary = function (props) { return (jsxRuntime.jsx(ErrorBoundary, { componentName: "RobylonChatbot", children: jsxRuntime.jsx(RobylonChatbot, __assign({}, props)) })); };
+
 // Expose the public API
 var Robylon = {
     /**
@@ -1147,6 +1685,7 @@ if (typeof window !== "undefined") {
     window.Robylon = Robylon;
 }
 
+exports.Chatbot = ChatbotWithErrorBoundary;
 exports.create = create;
 exports.default = Robylon;
 exports.init = init;