@robylon/web-react-sdk 1.1.28-staging.53 → 1.1.28-staging.55

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.52/robylon.min.js"></script>
+<script src="https://staging-cdn.robylon.com/1.1.28-staging.54/robylon.min.js"></script>
 ```
 
 Or via npm:

package/dist/cjs/index.js

@@ -226,12 +226,13 @@ var getCookies = function (isTeachmint) {
  * Core ChatbotEmbed class - provides the main functionality for both React and vanilla JS implementations
  */
 var ChatbotEmbed = /** @class */ (function () {
-    function ChatbotEmbed(config) {
+    function ChatbotEmbed(config, options) {
         var _this = this;
-        this.logoContainer = null;
         this.iframe = null;
-        this.bubblePromptContainer = null;
+        this.logoContainer = null;
         this.chatBtnImage = null;
+        this.bubblePromptContainer = null;
+        this.bubblePromptTimeouts = [];
         this.eventHandlers = new Map();
         this.isInitialized = false;
         this.onMessageListener = function (event) {
@@ -282,6 +283,8 @@ var ChatbotEmbed = /** @class */ (function () {
             }
         };
         this.config = config;
+        // Use provided container or default to document.body
+        this.containerElement = (options === null || options === void 0 ? void 0 : options.containerElement) || document.body;
         // Normalize the config
         if (typeof this.config.userId === "number") {
             this.config.userId = String(this.config.userId);
@@ -423,7 +426,7 @@ var ChatbotEmbed = /** @class */ (function () {
             cursor: "pointer",
             overflow: "hidden",
         });
-        document.body.appendChild(div);
+        this.containerElement.appendChild(div);
         this.logoContainer = div;
         this.loadImage(this.logoContainer);
         this.createChatBubblContainer();
@@ -481,7 +484,7 @@ var ChatbotEmbed = /** @class */ (function () {
             chatbaseContainer.appendChild(messageBubble);
         });
         chatbaseContainer.appendChild(closeButton);
-        document.body.appendChild(chatbaseContainer);
+        this.containerElement.appendChild(chatbaseContainer);
     };
     ChatbotEmbed.prototype.createMessageBubble = function (message) {
         var bubble = document.createElement("div");
@@ -557,7 +560,8 @@ var ChatbotEmbed = /** @class */ (function () {
             display: "none",
         });
         iframe.src = "".concat(this.config.domain, "/chatbot-plugin?id=").concat(this.config.chatbotId);
-        document.body.appendChild(iframe);
+        // CRITICAL CHANGE: Append to container instead of body
+        this.containerElement.appendChild(iframe);
         this.iframe = iframe;
         // Media Query Handling
         var applyStylesBasedOnScreenWidth = function () {
@@ -713,59 +717,24 @@ var ChatbotEmbed = /** @class */ (function () {
         };
         (_b = this.iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(data, this.config.domain || "*");
     };
+    // Add method to update container
+    ChatbotEmbed.prototype.setContainer = function (container) {
+        if (!container)
+            return;
+        // Move existing elements to new container if they exist
+        if (this.iframe && this.iframe.parentElement) {
+            this.iframe.parentElement.removeChild(this.iframe);
+            container.appendChild(this.iframe);
+        }
+        if (this.logoContainer && this.logoContainer.parentElement) {
+            this.logoContainer.parentElement.removeChild(this.logoContainer);
+            container.appendChild(this.logoContainer);
+        }
+        this.containerElement = container;
+    };
     return ChatbotEmbed;
 }());
 
-/**
- * Environment configuration for the SDK
- */
-// Get current environment from build-time
-var NODE_ENV = "staging" ;
-// Default configuration values based on environment
-var DEFAULT_CONFIG = {
-    // 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 = {};
-/**
- * Set custom environment configuration
- */
-var setEnvironmentConfig = function (config) {
-    customConfig = __assign(__assign({}, customConfig), 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 || defaultCopilotUrl,
-        environment: environment,
-        apiUrl: customConfig.apiUrl || defaultApiUrl,
-    };
-};
-
 /**
  * Simple logger class with configurable log level
  */
@@ -849,6 +818,126 @@ var Logger = /** @class */ (function () {
  */
 var logger = new Logger();
 
+/**
+ * Environment configuration for the SDK
+ */
+// Get current environment from build-time
+var NODE_ENV = "staging" ;
+// Default configuration values based on environment
+var DEFAULT_CONFIG = {
+    // 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 = {};
+/**
+ * Set custom environment configuration
+ */
+var setEnvironmentConfig = function (config) {
+    customConfig = __assign(__assign({}, customConfig), 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 || defaultCopilotUrl,
+        environment: environment,
+        apiUrl: customConfig.apiUrl || defaultApiUrl,
+    };
+};
+
+/**
+ * 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) {
+    try {
+        setEnvironmentConfig({
+            environment: config.environment || "",
+            apiUrl: config.apiUrl || "",
+            copilotUrl: config.copilotUrl || "",
+        });
+        logger.debug("Robylon SDK initialized with custom environment", config);
+    }
+    catch (error) {
+        logger.error("Error initializing Robylon SDK:", error);
+    }
+}
+/**
+ * Normalize the user configuration
+ */
+function normalizeConfig(config) {
+    return {
+        chatbotId: config.api_key || "",
+        userId: config.user_id ? String(config.user_id) : null,
+        token: config.user_token,
+        userProfile: config.user_profile,
+    };
+}
+/**
+ * Create a new Robylon chatbot instance
+ */
+function create(config) {
+    return new Promise(function (resolve) {
+        try {
+            var normalizedConfig = normalizeConfig(config);
+            // Create the chatbot with container if specified
+            var chatbotEmbed_1 = new ChatbotEmbed(normalizedConfig, {
+                containerElement: config.container || undefined,
+            });
+            // Set up event handling
+            if (config.onEvent) {
+                chatbotEmbed_1.on("*", function (event) {
+                    var _a;
+                    (_a = config.onEvent) === null || _a === void 0 ? void 0 : _a.call(config, event);
+                });
+            }
+            // Resolve with the public API
+            resolve({
+                show: function () { return chatbotEmbed_1.show(); },
+                hide: function () { return chatbotEmbed_1.hide(); },
+                toggle: function () { return chatbotEmbed_1.toggle(); },
+                update: function (newConfig) {
+                    return chatbotEmbed_1.updateConfig(normalizeConfig(newConfig));
+                },
+                destroy: function () { return chatbotEmbed_1.destroy(); },
+                setContainer: function (container) {
+                    if (container instanceof HTMLElement) {
+                        chatbotEmbed_1.setContainer(container);
+                    }
+                },
+            });
+        }
+        catch (error) {
+            logger.error("Error creating Robylon chatbot:", error);
+            throw error;
+        }
+    });
+}
+
 /**
  * Error codes for API operations
  */
@@ -1035,132 +1124,6 @@ var getSystemInfo = function () {
     };
 };
 
-/**
- * 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) {
-    // 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
- */
-function create(config) {
-    return __awaiter(this, void 0, void 0, function () {
-        var userId, isAnonymous, systemInfo_1, apiResponse, userProfile, chatbotConfig, chatbotEmbed_1, error_1;
-        var _a, _b, _c, _d, _e, _f, _g;
-        return __generator(this, function (_h) {
-            switch (_h.label) {
-                case 0:
-                    if (!config.api_key) {
-                        throw new Error("api_key is required to create a chatbot instance");
-                    }
-                    _h.label = 1;
-                case 1:
-                    _h.trys.push([1, 3, , 4]);
-                    userId = config.user_id;
-                    isAnonymous = false;
-                    // Handle anonymous users
-                    if (!userId) {
-                        userId = getCookie("rblyn_anon") || generateUUID();
-                        setCookie("rblyn_anon", String(userId), 365);
-                        isAnonymous = true;
-                    }
-                    systemInfo_1 = getSystemInfo();
-                    return [4 /*yield*/, fetchChatbotConfig(config.api_key, userId, config.user_token)];
-                case 2:
-                    apiResponse = _h.sent();
-                    userProfile = __assign(__assign({}, systemInfo_1), config.user_profile);
-                    chatbotConfig = {
-                        chatbotId: config.api_key,
-                        userId: userId,
-                        token: config.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: userProfile,
-                        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) || "",
-                        },
-                    };
-                    chatbotEmbed_1 = new ChatbotEmbed(chatbotConfig);
-                    // Set up event handler
-                    if (config.onEvent) {
-                        chatbotEmbed_1.on("*", config.onEvent);
-                    }
-                    // Return public API
-                    return [2 /*return*/, {
-                            show: function () { return chatbotEmbed_1.show(); },
-                            hide: function () { return chatbotEmbed_1.hide(); },
-                            toggle: function () { return chatbotEmbed_1.toggle(); },
-                            update: function (newConfig) {
-                                // Handle profile updates
-                                if (newConfig.user_profile) {
-                                    chatbotEmbed_1.updateConfig({
-                                        userProfile: __assign(__assign({}, systemInfo_1), newConfig.user_profile),
-                                    });
-                                }
-                                // Handle user_id updates
-                                if (newConfig.user_id !== undefined) {
-                                    chatbotEmbed_1.updateConfig({
-                                        userId: newConfig.user_id ? String(newConfig.user_id) : null,
-                                    });
-                                }
-                                // Handle token updates
-                                if (newConfig.user_token !== undefined) {
-                                    chatbotEmbed_1.updateConfig({
-                                        token: newConfig.user_token,
-                                    });
-                                }
-                            },
-                            destroy: function () { return chatbotEmbed_1.destroy(); },
-                        }];
-                case 3:
-                    error_1 = _h.sent();
-                    logger.error("Failed to create chatbot instance:", error_1);
-                    if (error_1 instanceof ApiError) {
-                        throw new Error("Robylon SDK initialization failed: ".concat(error_1.message, " (").concat(error_1.code, ")"));
-                    }
-                    throw new Error("Robylon SDK initialization failed: ".concat(error_1 instanceof Error ? error_1.message : String(error_1)));
-                case 4: return [2 /*return*/];
-            }
-        });
-    });
-}
-
 /**
  * Error Boundary component to catch and handle React rendering errors
  */
@@ -1196,10 +1159,12 @@ 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);
+    // Add container ref
+    var containerRef = 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 _d = React.useState(null); _d[0]; var setError = _d[1];
     var _e = React.useState(null), chatbotConfig = _e[0], setChatbotConfig = _e[1];
     // Stabilize onEvent callback
     var stableOnEvent = React.useCallback(function (event) {
@@ -1255,8 +1220,16 @@ var RobylonChatbot = React.memo(function (_a) {
                     };
                     // Store the config
                     setChatbotConfig(config);
-                    // Create the ChatbotEmbed instance
-                    chatbotRef.current = new ChatbotEmbed(config);
+                    // CRITICAL CHANGE: Pass container element to ChatbotEmbed
+                    if (containerRef.current) {
+                        chatbotRef.current = new ChatbotEmbed(config, {
+                            containerElement: containerRef.current,
+                        });
+                    }
+                    else {
+                        // Fallback to body if container not available
+                        chatbotRef.current = new ChatbotEmbed(config);
+                    }
                     // Register event handler
                     if (stableOnEvent) {
                         chatbotRef.current.on("*", stableOnEvent);
@@ -1275,7 +1248,14 @@ var RobylonChatbot = React.memo(function (_a) {
                 case 5: return [2 /*return*/];
             }
         });
-    }); }, [api_key, user_id, user_token, stableOnEvent]);
+    }); }, [
+        api_key,
+        user_id,
+        user_token,
+        stableOnEvent,
+        isInitialized,
+        isInitializing,
+    ]);
     // Initialize on component mount
     React.useEffect(function () {
         if (api_key) {
@@ -1289,6 +1269,12 @@ var RobylonChatbot = React.memo(function (_a) {
             }
         };
     }, [initializeChatbot]);
+    // If container reference changes, update the ChatbotEmbed
+    React.useEffect(function () {
+        if (containerRef.current && chatbotRef.current && isInitialized) {
+            chatbotRef.current.setContainer(containerRef.current);
+        }
+    }, [containerRef.current, isInitialized]);
     // Update chatbot when user profile changes
     React.useEffect(function () {
         if (chatbotRef.current && isInitialized && chatbotConfig) {
@@ -1297,14 +1283,9 @@ var RobylonChatbot = React.memo(function (_a) {
                 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) {
-        return null;
-    }
-    // The ChatbotEmbed handles all rendering via DOM manipulation,
-    // so we don't need to return any visible elements here
-    return null;
+    }, [user_profile, isInitialized, chatbotConfig]);
+    // CRITICAL CHANGE: Return a container div
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "robylon-chatbot-container", style: { position: "relative", width: "100%", height: "100%" } }));
 }, function (prevProps, nextProps) {
     // Memoization comparison
     return (prevProps.api_key === nextProps.api_key &&