@robylon/web-react-sdk 1.1.28-staging.57 → 1.1.28-staging.59

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

package/dist/cjs/index.js

@@ -235,6 +235,7 @@ var ChatbotEmbed = /** @class */ (function () {
         this.bubblePromptTimeouts = [];
         this.eventHandlers = new Map();
         this.isInitialized = false;
+        this._visibilityObserver = null;
         this.onMessageListener = function (event) {
             if (event.origin === _this.config.domain) {
                 if (event.data === "closeChatbot") {
@@ -283,7 +284,7 @@ var ChatbotEmbed = /** @class */ (function () {
             }
         };
         this.config = config;
-        // Use provided container or default to document.body
+        // Always maintain a reference to the container for visibility tracking
         this.containerElement = (options === null || options === void 0 ? void 0 : options.containerElement) || document.body;
         // Normalize the config
         if (typeof this.config.userId === "number") {
@@ -369,6 +370,15 @@ var ChatbotEmbed = /** @class */ (function () {
         var wildcardHandlers = this.eventHandlers.get("*") || [];
         wildcardHandlers.forEach(function (handler) { return handler(event); });
     };
+    // Add method to update container
+    ChatbotEmbed.prototype.setContainer = function (container) {
+        if (!container)
+            return;
+        // Only track the container for visibility
+        this.containerElement = container;
+        // Watch for container visibility changes
+        this.setupContainerVisibilityObserver();
+    };
     // Cleanup
     ChatbotEmbed.prototype.destroy = function () {
         // Remove DOM elements
@@ -385,6 +395,11 @@ var ChatbotEmbed = /** @class */ (function () {
             this.bubblePromptContainer.parentElement.removeChild(this.bubblePromptContainer);
             this.bubblePromptContainer = null;
         }
+        // Disconnect intersection observer
+        if (this._visibilityObserver) {
+            this._visibilityObserver.disconnect();
+            this._visibilityObserver = null;
+        }
         // Remove event listeners
         window === null || window === void 0 ? void 0 : window.removeEventListener("message", this.onMessageListener);
         // Clear event handlers
@@ -402,6 +417,35 @@ var ChatbotEmbed = /** @class */ (function () {
     ChatbotEmbed.prototype.setupEventListeners = function () {
         window === null || window === void 0 ? void 0 : window.addEventListener("message", this.onMessageListener);
     };
+    ChatbotEmbed.prototype.setupContainerVisibilityObserver = function () {
+        var _this = this;
+        // Watch for container visibility changes
+        if ("IntersectionObserver" in window &&
+            this.containerElement !== document.body) {
+            // Disconnect existing observer if any
+            if (this._visibilityObserver) {
+                this._visibilityObserver.disconnect();
+            }
+            this._visibilityObserver = new IntersectionObserver(function (entries) {
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    // If container is not visible, hide chatbot elements
+                    if (!entry.isIntersecting) {
+                        if (_this.iframe)
+                            _this.iframe.style.display = "none";
+                        if (_this.logoContainer)
+                            _this.logoContainer.style.display = "none";
+                    }
+                    else {
+                        // Restore button visibility when container becomes visible
+                        if (_this.logoContainer)
+                            _this.logoContainer.style.display = "flex";
+                    }
+                }
+            });
+            this._visibilityObserver.observe(this.containerElement);
+        }
+    };
     ChatbotEmbed.prototype.init = function () {
         this.createIframe();
         this.createFloatingButton();
@@ -410,32 +454,41 @@ var ChatbotEmbed = /** @class */ (function () {
         var _this = this;
         var div = document.createElement("div");
         div.classList.add("message-bubble-container");
-        Object.assign(div.style, {
-            position: "absolute",
-            bottom: "1.5rem",
-            right: "1.5rem",
-            zIndex: "1000",
-            width: "48px",
-            height: "48px",
-            display: "flex",
-            flexDirection: "column-reverse",
-            backgroundColor: this.config.brand_colour,
-            color: getBestFontColor(this.config.brand_colour),
-            borderRadius: "50%",
-            alignItems: "center",
-            justifyContent: "center",
-            cursor: "pointer",
-            overflow: "hidden",
+        // Force styles with !important to override any potential conflicts
+        div.setAttribute("style", "\n      position: fixed !important;\n      bottom: 20px !important;\n      right: 20px !important;\n      z-index: 2147483647 !important;\n      width: 60px !important;\n      height: 60px !important;\n      display: flex !important;\n      flex-direction: column-reverse !important;\n      background-color: ".concat(this.config.brand_colour, " !important;\n      color: ").concat(getBestFontColor(this.config.brand_colour), " !important;\n      border-radius: 50% !important;\n      align-items: center !important;\n      justify-content: center !important;\n      cursor: pointer !important;\n      overflow: hidden !important;\n      box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;\n    "));
+        // Explicitly log button creation
+        console.log("ROBYLON DEBUG: Creating button", {
+            time: new Date().toISOString(),
+            color: this.config.brand_colour,
         });
-        this.containerElement.appendChild(div);
+        // Always append to body
+        document.body.appendChild(div);
         this.logoContainer = div;
         this.loadImage(this.logoContainer);
         this.createChatBubblContainer();
-        this.logoContainer.addEventListener("click", this.toggleIframe.bind(this));
-        // Emit button loaded event
+        // Ensure button is clickable
+        this.logoContainer.addEventListener("click", function () {
+            console.log("ROBYLON DEBUG: Button clicked");
+            _this.toggleIframe();
+        });
+        // Add a backup timeout to check button visibility
         setTimeout(function () {
-            _this.emit("CHATBOT_BUTTON_LOADED");
-        }, 0);
+            if (_this.logoContainer) {
+                console.log("ROBYLON DEBUG: Button visibility check", {
+                    exists: !!_this.logoContainer,
+                    isConnected: _this.logoContainer.isConnected,
+                    offsetParent: !!_this.logoContainer.offsetParent,
+                    computedDisplay: window === null || window === void 0 ? void 0 : window.getComputedStyle(_this.logoContainer).display,
+                    rect: _this.logoContainer.getBoundingClientRect(),
+                });
+                // Force visibility again if needed
+                if ((window === null || window === void 0 ? void 0 : window.getComputedStyle(_this.logoContainer).display) === "none") {
+                    _this.logoContainer.style.display = "flex !important";
+                }
+            }
+        }, 1000);
+        // Emit button loaded event
+        this.emit("CHATBOT_BUTTON_LOADED");
     };
     ChatbotEmbed.prototype.createChatBubblContainer = function () {
         var _this = this;
@@ -443,7 +496,7 @@ var ChatbotEmbed = /** @class */ (function () {
         var chatbaseContainer = document.createElement("div");
         chatbaseContainer.id = "chatbase-message-bubbles";
         Object.assign(chatbaseContainer.style, {
-            position: "absolute",
+            position: "fixed", // Use fixed positioning
             bottom: "80px",
             borderRadius: "10px",
             fontFamily: "sans-serif",
@@ -543,7 +596,7 @@ var ChatbotEmbed = /** @class */ (function () {
         var _this = this;
         var iframe = document.createElement("iframe");
         Object.assign(iframe.style, {
-            position: "absolute",
+            position: "fixed", // Use fixed positioning
             right: "32px",
             bottom: "86px",
             minWidth: "400px",
@@ -561,8 +614,8 @@ var ChatbotEmbed = /** @class */ (function () {
             display: "none",
         });
         iframe.src = "".concat(this.config.domain, "/chatbot-plugin?id=").concat(this.config.chatbotId);
-        // CRITICAL CHANGE: Append to container instead of body
-        this.containerElement.appendChild(iframe);
+        // Always append to document.body for consistent positioning
+        document.body.appendChild(iframe);
         this.iframe = iframe;
         // Media Query Handling
         var applyStylesBasedOnScreenWidth = function () {
@@ -622,19 +675,26 @@ var ChatbotEmbed = /** @class */ (function () {
     };
     ChatbotEmbed.prototype.loadImage = function (containerElement) {
         var image = document.createElement("img");
+        // Log image loading
+        console.log("ROBYLON DEBUG: Loading image", {
+            src: this.config.image_url || "".concat(this.config.domain, "/chatbubble.png"),
+        });
         image.src = this.config.image_url || "".concat(this.config.domain, "/chatbubble.png");
         image.alt = "Chat";
-        Object.assign(image.style, {
-            zIndex: "1000",
-            cursor: "pointer",
-            borderRadius: "50%",
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-        });
+        // Force image visibility
+        image.setAttribute("style", "\n      z-index: 2147483647 !important;\n      cursor: pointer !important;\n      border-radius: 50% !important;\n      object-fit: cover !important;\n      width: 100% !important;\n      height: 100% !important;\n      display: block !important;\n    ");
         this.chatBtnImage = image;
         containerElement.innerHTML = ""; // Clear any existing content
         containerElement.appendChild(image);
+        // Add image load error handling
+        image.onerror = function (err) {
+            console.error("ROBYLON DEBUG: Image failed to load", {
+                src: image.src,
+                error: err,
+            });
+            // Add fallback content
+            containerElement.innerHTML = "Chat";
+        };
     };
     ChatbotEmbed.prototype.loadSvgInline = function (containerElement) {
         var svgChevronDown = "\n<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"Chevron_Down\">\n  <path id=\"Vector\" d=\"M19 9L12 16L5 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </g>\n</svg>\n";
@@ -720,21 +780,6 @@ 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;
 }());
 
@@ -1175,80 +1220,109 @@ var RobylonChatbot = React.memo(function (_a) {
     }, [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) {
+        var tryInitialize;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0:
                     if (!api_key) {
                         setError("API key is required");
+                        console.error("ROBYLON DEBUG: API key is required");
                         return [2 /*return*/];
                     }
-                    if (isInitializing || isInitialized)
+                    if (isInitializing || isInitialized) {
+                        console.log("ROBYLON DEBUG: Already initializing or initialized");
                         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);
-                    // CRITICAL CHANGE: Pass container element to ChatbotEmbed
-                    if (containerRef.current) {
-                        chatbotRef.current = new ChatbotEmbed(config, {
-                            containerElement: containerRef.current,
+                    setIsInitializing(true);
+                    console.log("ROBYLON DEBUG: Starting initialization");
+                    tryInitialize = function () {
+                        var args_1 = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args_1[_i] = arguments[_i];
+                        }
+                        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (attempt) {
+                            var userId, isAnonymous, apiResponse, systemInfo, finalUserProfile, config, err_1, errorMessage;
+                            var _a, _b, _c, _d, _e, _f, _g, _h;
+                            if (attempt === void 0) { attempt = 1; }
+                            return __generator(this, function (_j) {
+                                switch (_j.label) {
+                                    case 0:
+                                        _j.trys.push([0, 2, , 3]);
+                                        userId = user_id;
+                                        isAnonymous = false;
+                                        // Handle anonymous users
+                                        if (!userId) {
+                                            userId = getCookie("rblyn_anon") || generateUUID();
+                                            setCookie("rblyn_anon", String(userId), 365);
+                                            isAnonymous = true;
+                                        }
+                                        console.log("ROBYLON DEBUG: Fetching chatbot config", {
+                                            userId: userId,
+                                            isAnonymous: isAnonymous,
+                                        });
+                                        return [4 /*yield*/, fetchChatbotConfig(api_key, userId, user_token)];
+                                    case 1:
+                                        apiResponse = _j.sent();
+                                        console.log("ROBYLON DEBUG: API response received", {
+                                            success: !!apiResponse,
+                                            hasOrgInfo: !!((_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.user) === null || _a === void 0 ? void 0 : _a.org_info),
+                                        });
+                                        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: ((_c = (_b = apiResponse.user.org_info.brand_config) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.brand_color) ||
+                                                "#6a26cd",
+                                            image_url: ((_e = (_d = apiResponse.user.org_info) === null || _d === void 0 ? void 0 : _d.brand_config) === null || _e === void 0 ? void 0 : _e.launcher_logo_url) || "",
+                                            userProfile: finalUserProfile,
+                                            chat_interface_config: {
+                                                chat_bubble_prompts: [],
+                                                display_name: ((_f = apiResponse.user.org_info.brand_config) === null || _f === void 0 ? void 0 : _f.display_name) || "",
+                                                welcome_message: ((_g = apiResponse.user.org_info.brand_config) === null || _g === void 0 ? void 0 : _g.welcome_message) ||
+                                                    "Hey! What can we help you with today?",
+                                                redirect_url: ((_h = apiResponse.user.org_info.brand_config) === null || _h === void 0 ? void 0 : _h.redirect_url) || "",
+                                            },
+                                        };
+                                        // Store the config
+                                        setChatbotConfig(config);
+                                        console.log("ROBYLON DEBUG: Creating ChatbotEmbed instance", config);
+                                        // Create the chatbot instance and always use document.body first
+                                        chatbotRef.current = new ChatbotEmbed(config);
+                                        // Register event handler
+                                        if (stableOnEvent) {
+                                            chatbotRef.current.on("*", stableOnEvent);
+                                        }
+                                        setIsInitialized(true);
+                                        console.log("ROBYLON DEBUG: Initialization complete");
+                                        return [3 /*break*/, 3];
+                                    case 2:
+                                        err_1 = _j.sent();
+                                        errorMessage = err_1 instanceof Error ? err_1.message : "Failed to initialize chatbot";
+                                        console.error("ROBYLON DEBUG: Error during initialization (attempt ".concat(attempt, ")"), err_1);
+                                        // Retry up to 3 times with increasing delay
+                                        if (attempt < 3) {
+                                            console.log("ROBYLON DEBUG: Retrying initialization (attempt ".concat(attempt + 1, ")"));
+                                            setTimeout(function () { return tryInitialize(attempt + 1); }, attempt * 1000);
+                                        }
+                                        else {
+                                            setError(errorMessage);
+                                            logger.error("Chatbot initialization failed:", err_1);
+                                        }
+                                        return [3 /*break*/, 3];
+                                    case 3: return [2 /*return*/];
+                                }
+                            });
                         });
-                    }
-                    else {
-                        // Fallback to body if container not available
-                        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:
+                    };
+                    return [4 /*yield*/, tryInitialize()];
+                case 1:
+                    _a.sent();
                     setIsInitializing(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+                    return [2 /*return*/];
             }
         });
     }); }, [
@@ -1258,14 +1332,27 @@ var RobylonChatbot = React.memo(function (_a) {
         stableOnEvent,
         isInitialized,
         isInitializing,
+        user_profile,
     ]);
     // Initialize on component mount
     React.useEffect(function () {
+        // Add explicit debugging
+        console.log("ROBYLON DEBUG: Initializing React component", {
+            apiKeyProvided: !!api_key,
+            userIdProvided: !!user_id,
+        });
         if (api_key) {
-            initializeChatbot();
+            // Force immediate initialization
+            try {
+                initializeChatbot();
+            }
+            catch (err) {
+                console.error("ROBYLON DEBUG: Initialization error", err);
+            }
         }
         // Cleanup on unmount
         return function () {
+            console.log("ROBYLON DEBUG: Cleaning up React component");
             if (chatbotRef.current) {
                 chatbotRef.current.destroy();
                 chatbotRef.current = null;
@@ -1275,6 +1362,15 @@ var RobylonChatbot = React.memo(function (_a) {
     // If container reference changes, update the ChatbotEmbed
     React.useEffect(function () {
         if (containerRef.current && chatbotRef.current && isInitialized) {
+            // Log container dimensions to help debug positioning issues
+            var rect = containerRef.current.getBoundingClientRect();
+            logger.debug("Container dimensions:", {
+                width: rect.width,
+                height: rect.height,
+                top: rect.top,
+                left: rect.left,
+                position: window.getComputedStyle(containerRef.current).position,
+            });
             chatbotRef.current.setContainer(containerRef.current);
         }
     }, [containerRef.current, isInitialized]);
@@ -1287,13 +1383,16 @@ var RobylonChatbot = React.memo(function (_a) {
             });
         }
     }, [user_profile, isInitialized, chatbotConfig]);
-    // CRITICAL CHANGE: Return a container div
+    // CRITICAL CHANGE: Return a minimal container div
     return (jsxRuntime.jsx("div", { ref: containerRef, className: "robylon-chatbot-container", style: {
-            position: "relative",
-            width: "100%",
-            height: "100%",
-            minHeight: "500px", // Add minimum height to ensure visibility
-        } }));
+            display: "block",
+            position: "fixed",
+            bottom: 0,
+            right: 0,
+            width: "1px",
+            height: "1px",
+            pointerEvents: "none",
+        }, "data-testid": "robylon-chatbot" }));
 }, function (prevProps, nextProps) {
     // Memoization comparison
     return (prevProps.api_key === nextProps.api_key &&