@robylon/web-react-sdk 1.1.28-staging.58 → 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.57/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

@@ -454,35 +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: "fixed", // Use fixed positioning
-            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,
         });
-        // Always append to document.body for consistent positioning
+        // 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));
-        // Setup visibility observer
-        this.setupContainerVisibilityObserver();
-        // 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;
@@ -669,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";
@@ -1207,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*/];
             }
         });
     }); }, [
@@ -1290,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;
@@ -1330,11 +1385,14 @@ var RobylonChatbot = React.memo(function (_a) {
     }, [user_profile, isInitialized, chatbotConfig]);
     // CRITICAL CHANGE: Return a minimal container div
     return (jsxRuntime.jsx("div", { ref: containerRef, className: "robylon-chatbot-container", style: {
-            width: "0",
-            height: "0",
-            overflow: "visible",
-            display: "inline-block",
-        } }));
+            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 &&