@xapp/chat-widget 1.84.3 → 1.85.1

package/dist/index.es.js

@@ -1,8 +1,391 @@
-import require$$1, { useRef, useEffect, useCallback, createContext, useContext, useMemo, memo, useState, useLayoutEffect } from 'react';
+import require$$1, { useCallback, useState, useRef, useEffect, createContext, useContext, useMemo, memo, useLayoutEffect } from 'react';
 export { default as React } from 'react';
-import require$$0, { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import require$$0, { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var lib = {};
+
+var ActionBar$1 = {};
+
+/*! Copyright (c) 2021, XAPPmedia */
+Object.defineProperty(ActionBar$1, "__esModule", { value: true });
+ActionBar$1.isActionBarChatButton = isActionBarChatButton;
+ActionBar$1.isActionBarFormButton = isActionBarFormButton;
+ActionBar$1.isActionBarScheduleButton = isActionBarScheduleButton;
+ActionBar$1.isActionBarPhoneButton = isActionBarPhoneButton;
+ActionBar$1.isActionBarUrlButton = isActionBarUrlButton;
+ActionBar$1.isActionBarEmailButton = isActionBarEmailButton;
+ActionBar$1.isActionBarHelpButton = isActionBarHelpButton;
+ActionBar$1.isActionBarPaymentButton = isActionBarPaymentButton;
+/**
+ * Type guard for ActionBarChatButton
+ */
+function isActionBarChatButton(button) {
+    return button.type === "chat";
+}
+/**
+ * Type guard for ActionBarFormButton
+ */
+function isActionBarFormButton(button) {
+    return button.type === "form";
+}
+/**
+ * Type guard for ActionBarScheduleButton
+ */
+function isActionBarScheduleButton(button) {
+    return button.type === "schedule";
+}
+/**
+ * Type guard for ActionBarPhoneButton
+ */
+function isActionBarPhoneButton(button) {
+    return button.type === "phone";
+}
+/**
+ * Type guard for ActionBarUrlButton
+ */
+function isActionBarUrlButton(button) {
+    return button.type === "url";
+}
+/**
+ * Type guard for ActionBarEmailButton
+ */
+function isActionBarEmailButton(button) {
+    return button.type === "email";
+}
+/**
+ * Type guard for ActionBarHelpButton
+ */
+function isActionBarHelpButton(button) {
+    return button.type === "help";
+}
+/**
+ * Type guard for ActionBarPaymentButton
+ */
+function isActionBarPaymentButton(button) {
+    return button.type === "payment";
+}
+
+var ChannelData = {};
+
+Object.defineProperty(ChannelData, "__esModule", { value: true });
+
+var Constants = {};
+
+Object.defineProperty(Constants, "__esModule", { value: true });
+Constants.CHAT_WIDGET_CHANNEL = void 0;
+Constants.CHAT_WIDGET_CHANNEL = "chat-widget";
+
+var Types = {};
+
+/*! Copyright (c) 2021, XAPPmedia */
+Object.defineProperty(Types, "__esModule", { value: true });
+
+var UserInfo = {};
+
+Object.defineProperty(UserInfo, "__esModule", { value: true });
+
+var WidgetEnv = {};
+
+Object.defineProperty(WidgetEnv, "__esModule", { value: true });
+
+var WidgetTheme = {};
+
+Object.defineProperty(WidgetTheme, "__esModule", { value: true });
+
+var guards = {};
+
+Object.defineProperty(guards, "__esModule", { value: true });
+guards.isStaticImageMenuItem = isStaticImageMenuItem;
+guards.isStaticTextMenuItem = isStaticTextMenuItem;
+guards.isStandardMenuItem = isStandardMenuItem;
+guards.isOpenURLMenuItem = isOpenURLMenuItem;
+function isStaticImageMenuItem(item) {
+    return !!item && !!item.imageUrl;
+}
+function isStaticTextMenuItem(item) {
+    return !!item && !!item.body;
+}
+function isStandardMenuItem(item) {
+    return !!item && !!item.label;
+}
+function isOpenURLMenuItem(item) {
+    return !!item && !!item.url;
+}
+
+(function (exports$1) {
+	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    var desc = Object.getOwnPropertyDescriptor(m, k);
+	    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+	      desc = { enumerable: true, get: function() { return m[k]; } };
+	    }
+	    Object.defineProperty(o, k2, desc);
+	}) : (function(o, m, k, k2) {
+	    if (k2 === undefined) k2 = k;
+	    o[k2] = m[k];
+	}));
+	var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports$1) {
+	    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
+	};
+	Object.defineProperty(exports$1, "__esModule", { value: true });
+	/*! Copyright (c) 2021, XAPPmedia */
+	__exportStar(ActionBar$1, exports$1);
+	__exportStar(ChannelData, exports$1);
+	__exportStar(Constants, exports$1);
+	__exportStar(Types, exports$1);
+	__exportStar(UserInfo, exports$1);
+	__exportStar(WidgetEnv, exports$1);
+	__exportStar(WidgetTheme, exports$1);
+	__exportStar(guards, exports$1);
+	
+} (lib));
+
+var ChatIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }) })); };
+var FormIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm2-6h8v2H8v-2zm0-3h8v2H8v-2zm0 6h5v2H8v-2z" }) })); };
+var ScheduleIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z" }) })); };
+var PhoneIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) })); };
+var LinkIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) })); };
+var EmailIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) })); };
+var HelpIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" }) })); };
+var PaymentIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" }) })); };
+// Default fallback icon for unsupported types
+var DefaultIcon = function () { return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) })); };
+var iconComponents = {
+    chat: ChatIcon,
+    form: FormIcon,
+    calendar: ScheduleIcon, // GraphQL schema uses "calendar"
+    schedule: ScheduleIcon, // Keep "schedule" for backwards compatibility
+    phone: PhoneIcon,
+    link: LinkIcon, // GraphQL schema uses "link"
+    url: LinkIcon, // Keep "url" for backwards compatibility
+    email: EmailIcon,
+    help: HelpIcon,
+    payment: PaymentIcon,
+    // "custom" type is handled via iconUrl, no need for a component
+};
+var ActionBarIcon = function (_a) {
+    var type = _a.type, icon = _a.icon, iconUrl = _a.iconUrl, className = _a.className;
+    if (iconUrl) {
+        return (jsx("div", { className: className, children: jsx("img", { src: iconUrl, alt: "".concat(icon || type, " icon") }) }));
+    }
+    // Use explicit icon override if provided, otherwise fall back to type
+    var iconType = icon || type;
+    var IconComponent = iconComponents[iconType] || DefaultIcon;
+    return (jsx("div", { className: className, children: jsx(IconComponent, {}) }));
+};
+
+/**
+ * Allowed URL protocols for security. Prevents javascript: and other potentially dangerous protocols.
+ */
+var ALLOWED_PROTOCOLS = ["http:", "https:", "tel:", "mailto:"];
+/**
+ * Validates a URL to ensure it uses an allowed protocol.
+ * Returns true if the URL is safe to navigate to.
+ */
+function isValidUrl(url) {
+    try {
+        var parsed = new URL(url, window.location.href);
+        return ALLOWED_PROTOCOLS.includes(parsed.protocol);
+    }
+    catch (_a) {
+        // Invalid URL
+        return false;
+    }
+}
+/**
+ * Safely navigates to a URL after validation.
+ * Returns false if the URL was invalid and navigation was blocked.
+ */
+function safeNavigate(url, target, windowOptions) {
+    if (!isValidUrl(url)) {
+        console.warn("[ActionBar] Blocked navigation to unsafe URL:", url);
+        return false;
+    }
+    if (target === "sameWindow") {
+        window.location.href = url;
+    }
+    else if (target === "newWindow" && windowOptions) {
+        var features = "width=".concat(windowOptions.width || 600, ",height=").concat(windowOptions.height || 400);
+        window.open(url, "_blank", features);
+    }
+    else {
+        // newTab (default)
+        window.open(url, "_blank", "noopener,noreferrer");
+    }
+    return true;
+}
+var defaultLabels = {
+    chat: "Chat",
+    form: "Contact",
+    schedule: "Book",
+    phone: "Call",
+    url: "Link",
+    email: "Email",
+    help: "Help",
+    payment: "Pay",
+};
+var ActionBarButton = function (_a) {
+    var _b;
+    var button = _a.button, chatActive = _a.chatActive, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, isMobile = _a.isMobile;
+    var handleClick = useCallback(function () {
+        if (lib.isActionBarChatButton(button)) {
+            // Toggle chat: if active, minimize; if not active, open
+            if (chatActive) {
+                onChatMinimize();
+            }
+            else {
+                onChatClick();
+            }
+        }
+        else if (lib.isActionBarFormButton(button) || lib.isActionBarScheduleButton(button)) {
+            // Both form and schedule buttons open the form widget modal
+            onFormClick(button);
+        }
+        else if (lib.isActionBarPhoneButton(button)) {
+            // Phone: Use tel: link
+            var phoneNumber = button.phoneNumber.replace(/\s/g, "");
+            window.location.href = "tel:".concat(phoneNumber);
+        }
+        else if (lib.isActionBarUrlButton(button)) {
+            // URL: Open according to target (with validation)
+            var url = button.url, _a = button.target, target = _a === void 0 ? "newTab" : _a, windowOptions = button.windowOptions;
+            safeNavigate(url, target, windowOptions);
+        }
+        else if (lib.isActionBarEmailButton(button)) {
+            // Email: Build mailto: link with optional subject and body
+            var emailAddress = button.emailAddress, subject = button.subject, body = button.body;
+            var mailto = "mailto:".concat(emailAddress);
+            var params = [];
+            if (subject) {
+                params.push("subject=".concat(encodeURIComponent(subject)));
+            }
+            if (body) {
+                params.push("body=".concat(encodeURIComponent(body)));
+            }
+            if (params.length > 0) {
+                mailto += "?".concat(params.join("&"));
+            }
+            window.location.href = mailto;
+        }
+        else if (lib.isActionBarHelpButton(button)) {
+            // Help: Open URL according to target (with validation)
+            var url = button.url, _b = button.target, target = _b === void 0 ? "newTab" : _b;
+            safeNavigate(url, target);
+        }
+        else if (lib.isActionBarPaymentButton(button)) {
+            // Payment: Open URL according to target (with validation)
+            var url = button.url, _c = button.target, target = _c === void 0 ? "newTab" : _c;
+            safeNavigate(url, target);
+        }
+    }, [button, chatActive, onChatClick, onChatMinimize, onFormClick]);
+    // Handle visibility
+    var visibility = button.visibility || "all";
+    if (visibility === "mobile-only" && !isMobile) {
+        return null;
+    }
+    if (visibility === "desktop-only" && isMobile) {
+        return null;
+    }
+    var ariaLabel = button.label || defaultLabels[button.type] || button.type;
+    var tabIndex = (_b = button.tabIndex) !== null && _b !== void 0 ? _b : 0;
+    // Chat button shows active state when chat is open
+    var isActive = lib.isActionBarChatButton(button) && chatActive;
+    var buttonClassName = [
+        "xapp-action-bar__button",
+        isActive ? "xapp-action-bar__button--active" : "",
+    ].filter(Boolean).join(" ");
+    return (jsxs("button", { className: buttonClassName, onClick: handleClick, "aria-label": ariaLabel, "aria-pressed": isActive, tabIndex: tabIndex, children: [jsx(ActionBarIcon, { type: button.type, icon: button.icon, iconUrl: button.iconUrl, className: "xapp-action-bar__icon" }), button.label && (jsx("span", { className: "xapp-action-bar__label", children: button.label }))] }));
+};
+
+var DEFAULT_MOBILE_BREAKPOINT = 768;
+var RESIZE_DEBOUNCE_MS = 150;
+var ActionBar = function (_a) {
+    var _b, _c;
+    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick;
+    var _d = useState(false), isMobile = _d[0], setIsMobile = _d[1];
+    var mobileBreakpoint = (_b = config.mobileBreakpoint) !== null && _b !== void 0 ? _b : DEFAULT_MOBILE_BREAKPOINT;
+    var position = (_c = config.position) !== null && _c !== void 0 ? _c : "right";
+    var resizeTimeoutRef = useRef(null);
+    // Debounced resize handler
+    var handleResize = useCallback(function () {
+        if (resizeTimeoutRef.current) {
+            window.clearTimeout(resizeTimeoutRef.current);
+        }
+        resizeTimeoutRef.current = window.setTimeout(function () {
+            setIsMobile(window.innerWidth <= mobileBreakpoint);
+        }, RESIZE_DEBOUNCE_MS);
+    }, [mobileBreakpoint]);
+    useEffect(function () {
+        // Initial check (immediate, not debounced)
+        setIsMobile(window.innerWidth <= mobileBreakpoint);
+        window.addEventListener("resize", handleResize);
+        return function () {
+            window.removeEventListener("resize", handleResize);
+            if (resizeTimeoutRef.current) {
+                window.clearTimeout(resizeTimeoutRef.current);
+            }
+        };
+    }, [mobileBreakpoint, handleResize]);
+    // Filter out chat buttons if chat is disabled
+    var filteredButtons = chatDisabled
+        ? config.buttons.filter(function (button) { return !lib.isActionBarChatButton(button); })
+        : config.buttons;
+    // Build class names - ActionBar stays visible even when chat is open
+    var classNames = [
+        "xapp-action-bar",
+        "xapp-action-bar--".concat(position),
+        isMobile ? "xapp-action-bar--mobile" : "xapp-action-bar--desktop",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (jsx("div", { className: classNames, role: "toolbar", "aria-label": "Chat actions", children: filteredButtons.map(function (button) { return (jsx(ActionBarButton, { button: button, chatActive: visible, onChatClick: onChatClick, onChatMinimize: onChatMinimize, onFormClick: onFormClick, isMobile: isMobile }, button.id)); }) }));
+};
+
+/**
+ * ActionBarPreview is a simplified version of ActionBar designed for use in Studio
+ * configuration UI. It renders a visual preview of the action bar without requiring
+ * interactive callbacks.
+ *
+ * This component provides no-op handlers for all button interactions, making it
+ * suitable for configuration previews where you want to show how the action bar
+ * will look without actual functionality.
+ *
+ * @example
+ * ```tsx
+ * <ActionBarPreview
+ *   config={{
+ *     enabled: true,
+ *     buttons: [
+ *       { id: '1', type: 'chat', label: 'Chat', icon: 'chat' },
+ *       { id: '2', type: 'phone', label: 'Call', icon: 'phone', phoneNumber: '555-1234' }
+ *     ],
+ *     position: 'right'
+ *   }}
+ * />
+ * ```
+ */
+var ActionBarPreview = function (_a) {
+    var config = _a.config, _b = _a.chatActive, chatActive = _b === void 0 ? false : _b;
+    // No-op handlers for preview mode
+    var handleChatClick = useCallback(function () {
+        // Preview only - no action
+    }, []);
+    var handleChatMinimize = useCallback(function () {
+        // Preview only - no action
+    }, []);
+    var handleFormClick = useCallback(function (_button) {
+        // Preview only - no action
+    }, []);
+    return (jsx(ActionBar, { config: config, visible: chatActive, chatDisabled: false, onChatClick: handleChatClick, onChatMinimize: handleChatMinimize, onFormClick: handleFormClick }));
+};
+
 var ActionButton = function (_a) {
     var label = _a.label, disable = _a.disable, type = _a.type, addClass = _a.addClass, onClick = _a.onClick;
     function handleClick(ev) {
@@ -304,6 +687,193 @@ function getTimeAgo(date) {
     return date.toLocaleString();
 }
 
+/*! Copyright (c) 2024, XAPPmedia */
+var FORM_WIDGET_SCRIPT_ID = "xapp-form-js";
+var FORM_WIDGET_BASE_URL = "https://form.xapp.ai/xapp-form-widget.js";
+/** Default retry configuration */
+var DEFAULT_MAX_RETRIES = 3;
+var DEFAULT_RETRY_DELAY_MS = 1000;
+/**
+ * Builds the form-widget script URL with the provided key
+ */
+function getFormWidgetScriptUrl(key) {
+    return "".concat(FORM_WIDGET_BASE_URL, "?key=").concat(encodeURIComponent(key));
+}
+/**
+ * Checks if the form-widget script is already loaded on the page.
+ * Checks both by ID and by src URL to handle various installation methods.
+ */
+function isFormWidgetScriptLoaded(key) {
+    // Check by standard form-widget ID
+    if (document.getElementById(FORM_WIDGET_SCRIPT_ID)) {
+        return true;
+    }
+    // Check by src URL if key is provided
+    if (key) {
+        var scriptUrl = getFormWidgetScriptUrl(key);
+        var scripts = document.querySelectorAll("script[src]");
+        for (var i = 0; i < scripts.length; i++) {
+            var src = scripts[i].getAttribute("src");
+            if (src && (src === scriptUrl || src.startsWith(FORM_WIDGET_BASE_URL))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Removes any failed script elements to allow retry
+ */
+function removeFailedScript() {
+    var existingScript = document.getElementById(FORM_WIDGET_SCRIPT_ID);
+    if (existingScript) {
+        existingScript.remove();
+    }
+}
+/**
+ * Delays execution for a specified number of milliseconds
+ */
+function delay(ms) {
+    return new Promise(function (resolve) { return setTimeout(resolve, ms); });
+}
+/**
+ * Attempts to load the script once
+ */
+function attemptScriptLoad(key) {
+    return new Promise(function (resolve, reject) {
+        var script = document.createElement("script");
+        script.id = FORM_WIDGET_SCRIPT_ID;
+        script.src = getFormWidgetScriptUrl(key);
+        script.async = true;
+        script.onload = function () {
+            resolve();
+        };
+        script.onerror = function () {
+            reject(new Error("Failed to load form-widget script: ".concat(script.src)));
+        };
+        document.head.appendChild(script);
+    });
+}
+/**
+ * Injects the form-widget script into the page with retry logic.
+ * Returns a promise that resolves when the script is loaded.
+ * Does nothing if the script is already loaded.
+ *
+ * @param key The form widget key
+ * @param maxRetries Maximum number of retry attempts (default: 3)
+ * @param retryDelayMs Delay between retries in milliseconds (default: 1000)
+ */
+function loadFormWidgetScript(key_1) {
+    return __awaiter$1(this, arguments, void 0, function (key, maxRetries, retryDelayMs) {
+        var lastError, attempt, error_1;
+        if (maxRetries === void 0) { maxRetries = DEFAULT_MAX_RETRIES; }
+        if (retryDelayMs === void 0) { retryDelayMs = DEFAULT_RETRY_DELAY_MS; }
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // Check if already loaded
+                    if (isFormWidgetScriptLoaded(key)) {
+                        return [2 /*return*/];
+                    }
+                    attempt = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(attempt <= maxRetries)) return [3 /*break*/, 8];
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 6, , 7]);
+                    if (!(attempt > 0)) return [3 /*break*/, 4];
+                    removeFailedScript();
+                    console.log("[chat-widget] Retrying form-widget script load (attempt ".concat(attempt + 1, "/").concat(maxRetries + 1, ")"));
+                    return [4 /*yield*/, delay(retryDelayMs)];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4: return [4 /*yield*/, attemptScriptLoad(key)];
+                case 5:
+                    _a.sent();
+                    return [2 /*return*/]; // Success
+                case 6:
+                    error_1 = _a.sent();
+                    lastError = error_1;
+                    if (attempt === maxRetries) {
+                        console.error("[chat-widget] Failed to load form-widget script after all retries:", error_1);
+                    }
+                    return [3 /*break*/, 7];
+                case 7:
+                    attempt++;
+                    return [3 /*break*/, 1];
+                case 8: throw lastError || new Error("Failed to load form-widget script");
+            }
+        });
+    });
+}
+/**
+ * Pre-loads the form-widget script if a key is provided.
+ * This is a fire-and-forget operation - errors are logged but not thrown.
+ */
+function preloadFormWidgetScript(key) {
+    if (!key) {
+        return;
+    }
+    loadFormWidgetScript(key).catch(function (error) {
+        console.warn("[chat-widget] Failed to preload form-widget script:", error);
+    });
+}
+/**
+ * Checks if the form-widget control API is available
+ */
+function isFormWidgetReady() {
+    var _a;
+    return typeof ((_a = window.xafwControl) === null || _a === void 0 ? void 0 : _a.openForm) === "function";
+}
+/**
+ * Opens the form widget if it's available.
+ * Returns true if the form was opened, false otherwise.
+ *
+ * @param options Optional configuration for opening the form
+ */
+function openFormWidget(options) {
+    if (isFormWidgetReady()) {
+        window.xafwControl.openForm(options);
+        return true;
+    }
+    return false;
+}
+/**
+ * Attempts to open the form widget, waiting for it to be ready if necessary.
+ * Useful when the script is still loading.
+ *
+ * @param options Optional configuration for opening the form
+ * @param maxAttempts Maximum number of attempts to check for readiness
+ * @param intervalMs Time between attempts in milliseconds
+ */
+function openFormWidgetWhenReady(options, maxAttempts, intervalMs) {
+    if (maxAttempts === void 0) { maxAttempts = 20; }
+    if (intervalMs === void 0) { intervalMs = 100; }
+    return new Promise(function (resolve) {
+        // Try immediately first
+        if (openFormWidget(options)) {
+            resolve(true);
+            return;
+        }
+        var attempts = 0;
+        var checkInterval = setInterval(function () {
+            attempts++;
+            if (openFormWidget(options)) {
+                clearInterval(checkInterval);
+                resolve(true);
+                return;
+            }
+            if (attempts >= maxAttempts) {
+                clearInterval(checkInterval);
+                console.warn("[chat-widget] Form widget not ready after waiting");
+                resolve(false);
+            }
+        }, intervalMs);
+    });
+}
+
 var EMAIL_REGEX = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
 // Initialize log level from localStorage on module load
 var STORAGE_KEY = 'xaLogLevel';
@@ -1404,12 +1974,6 @@ var LogChat = /** @class */ (function () {
     return LogChat;
 }());
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 var jsxRuntime = require$$0;
 var react = require$$1;
 
@@ -6542,11 +7106,11 @@ class BinaryReconstructor {
 }
 
 var parser = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Decoder: Decoder,
-    Encoder: Encoder,
-    get PacketType () { return PacketType; },
-    protocol: protocol
+	__proto__: null,
+	Decoder: Decoder,
+	Encoder: Encoder,
+	get PacketType () { return PacketType; },
+	protocol: protocol
 });
 
 function on(obj, ev, fn) {
@@ -8215,82 +8779,6 @@ var CancelButton = function (props) {
     return (jsx("div", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
 };
 
-var lib = {};
-
-var ChannelData = {};
-
-Object.defineProperty(ChannelData, "__esModule", { value: true });
-
-var Constants = {};
-
-Object.defineProperty(Constants, "__esModule", { value: true });
-Constants.CHAT_WIDGET_CHANNEL = void 0;
-Constants.CHAT_WIDGET_CHANNEL = "chat-widget";
-
-var Types = {};
-
-/*! Copyright (c) 2021, XAPPmedia */
-Object.defineProperty(Types, "__esModule", { value: true });
-
-var UserInfo = {};
-
-Object.defineProperty(UserInfo, "__esModule", { value: true });
-
-var WidgetEnv = {};
-
-Object.defineProperty(WidgetEnv, "__esModule", { value: true });
-
-var WidgetTheme = {};
-
-Object.defineProperty(WidgetTheme, "__esModule", { value: true });
-
-var guards = {};
-
-Object.defineProperty(guards, "__esModule", { value: true });
-guards.isStaticImageMenuItem = isStaticImageMenuItem;
-guards.isStaticTextMenuItem = isStaticTextMenuItem;
-guards.isStandardMenuItem = isStandardMenuItem;
-guards.isOpenURLMenuItem = isOpenURLMenuItem;
-function isStaticImageMenuItem(item) {
-    return !!item && !!item.imageUrl;
-}
-function isStaticTextMenuItem(item) {
-    return !!item && !!item.body;
-}
-function isStandardMenuItem(item) {
-    return !!item && !!item.label;
-}
-function isOpenURLMenuItem(item) {
-    return !!item && !!item.url;
-}
-
-(function (exports$1) {
-	var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-	    if (k2 === undefined) k2 = k;
-	    var desc = Object.getOwnPropertyDescriptor(m, k);
-	    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-	      desc = { enumerable: true, get: function() { return m[k]; } };
-	    }
-	    Object.defineProperty(o, k2, desc);
-	}) : (function(o, m, k, k2) {
-	    if (k2 === undefined) k2 = k;
-	    o[k2] = m[k];
-	}));
-	var __exportStar = (commonjsGlobal && commonjsGlobal.__exportStar) || function(m, exports$1) {
-	    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
-	};
-	Object.defineProperty(exports$1, "__esModule", { value: true });
-	/*! Copyright (c) 2021, XAPPmedia */
-	__exportStar(ChannelData, exports$1);
-	__exportStar(Constants, exports$1);
-	__exportStar(Types, exports$1);
-	__exportStar(UserInfo, exports$1);
-	__exportStar(WidgetEnv, exports$1);
-	__exportStar(WidgetTheme, exports$1);
-	__exportStar(guards, exports$1);
-	
-} (lib));
-
 var ChatMenuItem = function (props) {
     function handleClick() {
         if (props.onClick) {
@@ -9669,6 +10157,150 @@ var ChatFooter = function (props) {
                     onFileUpload: props.onFileUpload }) }), brandingEnabled && brandingText && jsx(ChatBranding, { text: brandingText })] }));
 };
 
+/**
+ * Build the form-widget configuration from ActionBar button config
+ */
+function buildFormConfig(buttonConfig, widgetEnv) {
+    var _a;
+    // Option 1: Use dedicated form config if provided
+    if (buttonConfig.formConfig) {
+        return {
+            api: buttonConfig.formConfig.api,
+            intentId: buttonConfig.formConfig.intentId,
+            autoGreeting: buttonConfig.formConfig.autoGreeting,
+        };
+    }
+    // Option 2: Use shared chat-widget connection settings
+    if ((_a = widgetEnv === null || widgetEnv === void 0 ? void 0 : widgetEnv.connection) === null || _a === void 0 ? void 0 : _a.serverUrl) {
+        return {
+            api: {
+                url: widgetEnv.connection.serverUrl,
+                key: widgetEnv.connection.accountKey,
+            },
+            intentId: buttonConfig.intentId,
+            autoGreeting: buttonConfig.autoGreeting,
+        };
+    }
+    // No valid configuration available
+    return null;
+}
+var FormModal = function (_a) {
+    var _b, _c;
+    var config = _a.config, widgetEnv = _a.widgetEnv, onClose = _a.onClose;
+    var modalRef = useRef(null);
+    var contentRef = useRef(null);
+    var formConfig = buildFormConfig(config, widgetEnv);
+    var _d = useState("idle"), loadingState = _d[0], setLoadingState = _d[1];
+    var _e = useState(""), errorMessage = _e[0], setErrorMessage = _e[1];
+    // Get the form widget key from config or widgetEnv
+    var formWidgetKey = ((_c = (_b = config.formConfig) === null || _b === void 0 ? void 0 : _b.api) === null || _c === void 0 ? void 0 : _c.key) || (widgetEnv === null || widgetEnv === void 0 ? void 0 : widgetEnv.formWidgetKey);
+    // Attempt to load and open the form widget
+    var attemptOpenFormWidget = useCallback(function () { return __awaiter$1(void 0, void 0, void 0, function () {
+        var options, opened, options, opened;
+        return __generator$1(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isFormWidgetReady()) return [3 /*break*/, 2];
+                    options = config.preselectChipLabel
+                        ? { preselectChipLabel: config.preselectChipLabel }
+                        : undefined;
+                    return [4 /*yield*/, openFormWidgetWhenReady(options, 5, 100)];
+                case 1:
+                    opened = _a.sent();
+                    if (opened) {
+                        setLoadingState("success");
+                        onClose();
+                        return [2 /*return*/];
+                    }
+                    _a.label = 2;
+                case 2:
+                    if (!formWidgetKey) return [3 /*break*/, 8];
+                    setLoadingState("loading");
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 6, , 7]);
+                    return [4 /*yield*/, loadFormWidgetScript(formWidgetKey)];
+                case 4:
+                    _a.sent();
+                    options = config.preselectChipLabel
+                        ? { preselectChipLabel: config.preselectChipLabel }
+                        : undefined;
+                    return [4 /*yield*/, openFormWidgetWhenReady(options, 30, 100)];
+                case 5:
+                    opened = _a.sent();
+                    if (opened) {
+                        setLoadingState("success");
+                        onClose();
+                    }
+                    else {
+                        setLoadingState("error");
+                        setErrorMessage("Form widget loaded but failed to open. Please try again.");
+                    }
+                    return [3 /*break*/, 7];
+                case 6:
+                    _a.sent();
+                    setLoadingState("error");
+                    setErrorMessage("Failed to load form. Please check your connection and try again.");
+                    return [3 /*break*/, 7];
+                case 7: return [3 /*break*/, 9];
+                case 8:
+                    setLoadingState("error");
+                    setErrorMessage("Form widget key not configured. Please contact support.");
+                    _a.label = 9;
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [config.preselectChipLabel, formWidgetKey, onClose]);
+    // Attempt to open form widget on mount
+    useEffect(function () {
+        attemptOpenFormWidget();
+    }, [attemptOpenFormWidget]);
+    // Handle Escape key to close
+    useEffect(function () {
+        var handleKeyDown = function (event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function () {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [onClose]);
+    // Prevent body scroll when modal is open
+    useEffect(function () {
+        var originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return function () {
+            document.body.style.overflow = originalOverflow;
+        };
+    }, []);
+    // Focus trap - focus the modal content on mount
+    useEffect(function () {
+        if (contentRef.current) {
+            contentRef.current.focus();
+        }
+    }, []);
+    var handleBackdropClick = useCallback(function (event) {
+        // Only close if clicking the backdrop, not the content
+        if (event.target === modalRef.current) {
+            onClose();
+        }
+    }, [onClose]);
+    var handleRetry = useCallback(function () {
+        setLoadingState("idle");
+        setErrorMessage("");
+        attemptOpenFormWidget();
+    }, [attemptOpenFormWidget]);
+    // If form widget opened successfully, the modal will close automatically
+    // Show loading/error states in the modal
+    if (!formConfig && !formWidgetKey) {
+        // No valid configuration available at all
+        return (jsx("div", { className: "xapp-form-modal", ref: modalRef, onClick: handleBackdropClick, role: "dialog", "aria-modal": "true", "aria-label": "Form", children: jsxs("div", { className: "xapp-form-modal__content", ref: contentRef, tabIndex: -1, children: [jsx("button", { className: "xapp-form-modal__close", onClick: onClose, "aria-label": "Close form", children: "\u00D7" }), jsxs("div", { className: "xapp-form-modal__error", children: [jsx("p", { children: "Form configuration not available." }), jsx("p", { children: "Please configure the form button with valid settings." })] })] }) }));
+    }
+    return (jsx("div", { className: "xapp-form-modal", ref: modalRef, onClick: handleBackdropClick, role: "dialog", "aria-modal": "true", "aria-label": "Form", children: jsxs("div", { className: "xapp-form-modal__content", ref: contentRef, tabIndex: -1, children: [jsx("button", { className: "xapp-form-modal__close", onClick: onClose, "aria-label": "Close form", children: "\u00D7" }), jsxs("div", { className: "xapp-form-modal__form-container", children: [loadingState === "loading" && (jsxs("div", { className: "xapp-form-modal__loading", children: [jsx("div", { className: "xapp-form-modal__spinner", "aria-hidden": "true" }), jsx("p", { children: "Loading form..." })] })), loadingState === "error" && (jsxs("div", { className: "xapp-form-modal__error", children: [jsx("p", { children: errorMessage }), jsx("button", { className: "xapp-form-modal__retry", onClick: handleRetry, children: "Try Again" })] })), loadingState === "idle" && (jsxs("div", { className: "xapp-form-modal__loading", children: [jsx("div", { className: "xapp-form-modal__spinner", "aria-hidden": "true" }), jsx("p", { children: "Initializing..." })] }))] })] }) }));
+};
+
 var noop = function () { };
 var MiddlewareContextFactory = /** @class */ (function () {
     function MiddlewareContextFactory(template) {
@@ -31600,7 +32232,7 @@ var ServerOffline = function () {
 
 function buildStyleContent(theme) {
     var _a, _b, _c, _d, _e;
-    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
+    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta)), withPrefix("action-bar-", getActionBarStyle(theme === null || theme === void 0 ? void 0 : theme.actionBar))))), "\n}");
 }
 function WidgetStylesheet(props) {
     var theme = props.theme;
@@ -31914,6 +32546,18 @@ function getCtaStyle(style) {
     }
     return union(getBackgroundStyle(style.background), getTextStyle(style.text));
 }
+function getActionBarStyle(style) {
+    if (!style) {
+        return empty();
+    }
+    return union(getBackgroundStyle(style.background), getBorderStyle(style.border), getPaddings(style.padding), getMargins(style.margin), single("box-shadow", style.boxShadow), single("border-radius", style.borderRadius), withPrefix("button-", getActionBarButtonStyle(style.button)));
+}
+function getActionBarButtonStyle(style) {
+    if (!style) {
+        return empty();
+    }
+    return union(getBackgroundStyle(style.background), single("hover-background", style.hoverBackground), withPrefix("icon-", getSize(style.iconSize)), single("icon-color", style.iconColor), withPrefix("label-", getTextStyle(style.label)), single("gap", style.gap), single("border-radius", style.borderRadius), getPaddings(style.padding));
+}
 
 /**
  * Safely stringify objects, handling circular references and errors
@@ -32902,7 +33546,7 @@ var ChatWidgetConnected = function (props) {
  * Exported for use by StaticChatWidgetContainer to avoid infinite loops.
  */
 var ChatWidgetUI = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -32932,12 +33576,12 @@ var ChatWidgetUI = function (props) {
         chatState.visuals = {};
     }
     // Our state - pull from storage
-    var _9 = useState((!canMinimize && !canCancel) ||
+    var _10 = useState((!canMinimize && !canCancel) ||
         // !!get("visible") ||
         chatState.visuals.visible ||
         (((_m = props.config) === null || _m === void 0 ? void 0 : _m.autoOpenOnWidth) &&
-            window.matchMedia("(min-width: ".concat((_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnWidth, ")")).matches)), visible = _9[0], setVisibleState = _9[1];
-    var _10 = useState(false); _10[0]; var setTypingState = _10[1]; // false initially - state kept for potential external observers
+            window.matchMedia("(min-width: ".concat((_o = props.config) === null || _o === void 0 ? void 0 : _o.autoOpenOnWidth, ")")).matches)), visible = _10[0], setVisibleState = _10[1];
+    var _11 = useState(false); _11[0]; var setTypingState = _11[1]; // false initially - state kept for potential external observers
     // Ref to track typing state for use in timeout callbacks
     var typingRef = useRef(false);
     // Timeout ref for debouncing "stop typing" events
@@ -32983,7 +33627,7 @@ var ChatWidgetUI = function (props) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var _11 = useState(!document.hidden), isTabVisible = _11[0], setIsTabVisible = _11[1];
+    var _12 = useState(!document.hidden), isTabVisible = _12[0], setIsTabVisible = _12[1];
     useEffect(function () {
         var handleVisibilityChange = function () {
             setIsTabVisible(!document.hidden);
@@ -33185,6 +33829,28 @@ var ChatWidgetUI = function (props) {
             hasInteracted: true,
         }));
     }
+    // Action Bar state and handlers
+    var _13 = useState(false), formModalOpen = _13[0], setFormModalOpen = _13[1];
+    var _14 = useState(null), activeFormConfig = _14[0], setActiveFormConfig = _14[1];
+    var handleFormButtonClick = useCallback(function (formButton) {
+        // If form-widget is configured, use its openForm API
+        // The form-widget script should already be pre-loaded
+        var options = formButton.preselectChipLabel
+            ? { preselectChipLabel: formButton.preselectChipLabel }
+            : undefined;
+        openFormWidgetWhenReady(options).then(function (opened) {
+            if (!opened) {
+                // Fallback to modal if form-widget isn't available
+                log("Form widget not available, showing modal fallback");
+                setActiveFormConfig(formButton);
+                setFormModalOpen(true);
+            }
+        });
+    }, []);
+    var handleFormModalClose = useCallback(function () {
+        setFormModalOpen(false);
+        setActiveFormConfig(null);
+    }, []);
     function handleWsButtonPress(buttonId) {
         var _a, _b;
         log("WS Button pressed: ".concat(buttonId));
@@ -33232,6 +33898,7 @@ var ChatWidgetUI = function (props) {
     var messages = chatState && chatState.chats;
     log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
+    var actionBarEnabled = ((_t = config === null || config === void 0 ? void 0 : config.actionBar) === null || _t === void 0 ? void 0 : _t.enabled) === true;
     // Disable greeting in preview mode
     useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
     var connectionStatus = chatState.connection.connectionStatus;
@@ -33240,15 +33907,45 @@ var ChatWidgetUI = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
+    useExternalScript((_u = props.config) === null || _u === void 0 ? void 0 : _u.middlewareUrl);
+    // Pre-load form-widget script if formWidgetKey is provided
+    useEffect(function () {
+        if (config === null || config === void 0 ? void 0 : config.formWidgetKey) {
+            preloadFormWidgetScript(config.formWidgetKey);
+        }
+    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey]);
+    // Set body attribute when actionBar is enabled (used by CSS to hide form-widget side button on mobile)
+    // Uses reference counting to handle multiple widget instances
+    useEffect(function () {
+        if (actionBarEnabled) {
+            // Increment reference count
+            var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
+            document.body.setAttribute("data-xapp-action-bar-count", String(currentCount + 1));
+            document.body.setAttribute("data-xapp-action-bar-enabled", "true");
+        }
+        return function () {
+            if (actionBarEnabled) {
+                // Decrement reference count
+                var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
+                var newCount = Math.max(0, currentCount - 1);
+                if (newCount === 0) {
+                    document.body.removeAttribute("data-xapp-action-bar-enabled");
+                    document.body.removeAttribute("data-xapp-action-bar-count");
+                }
+                else {
+                    document.body.setAttribute("data-xapp-action-bar-count", String(newCount));
+                }
+            }
+        };
+    }, [actionBarEnabled]);
     // This is a pseudo agent. It represent's the widget (shown in the header avatar for instance)
-    var widgetAgent = ((_u = chatState.agents["agent:robot"]) === null || _u === void 0 ? void 0 : _u.user) ||
+    var widgetAgent = ((_v = chatState.agents["agent:robot"]) === null || _v === void 0 ? void 0 : _v.user) ||
         (config === null || config === void 0 ? void 0 : config.agent) || {
         nick: "agent:robot",
         avatarPath: config.avatarUrl,
         display_name: "Agent",
     };
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }), jsx(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, hasWsButton: !!chatState.wsButton, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.typingStatus) === null || _w === void 0 ? void 0 : _w.textTypingStatusEnabled, disableAutoScroll: props.disableAutoScroll, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }), jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && jsx(ServerOffline, {}), chatState.wsButton && visible && (jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), jsx(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_x = config === null || config === void 0 ? void 0 : config.input) === null || _x === void 0 ? void 0 : _x.placeholder, sendButtonIcon: (_z = (_y = config === null || config === void 0 ? void 0 : config.footer) === null || _y === void 0 ? void 0 : _y.sendButton) === null || _z === void 0 ? void 0 : _z.icon, sendButtonIconHover: (_1 = (_0 = config === null || config === void 0 ? void 0 : config.footer) === null || _0 === void 0 ? void 0 : _0.sendButton) === null || _1 === void 0 ? void 0 : _1.iconHover, sendButtonIconDisabled: (_3 = (_2 = config === null || config === void 0 ? void 0 : config.footer) === null || _2 === void 0 ? void 0 : _2.sendButton) === null || _3 === void 0 ? void 0 : _3.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_4 = props.config) === null || _4 === void 0 ? void 0 : _4.menu, footerConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.footer, inputConfig: (_6 = props.config) === null || _6 === void 0 ? void 0 : _6.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), jsx(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_7 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _7 === void 0 ? void 0 : _7.imageUrl, visible: visible, hasInteracted: (_8 = chatState.visuals) === null || _8 === void 0 ? void 0 : _8.hasInteracted, onCtaDismiss: handleCtaDismiss }), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarEnabled ? " widget-container--with-action-bar" : ""), children: [jsx(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }), jsx(ChatHeader, { accountStatus: chatState.accountStatus, refreshOnClick: handleRestartClick, minimizeOnClick: handleMinimizeClick, cancelOnClick: handleCancelClick, agent: widgetAgent, canRefresh: canRefresh, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header, menuConfig: config.menu, onSubmit: handleOnSubmit }), jsx(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, agent: config === null || config === void 0 ? void 0 : config.agent, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, hasWsButton: !!chatState.wsButton, messageMiddleware: props.messageMiddleware, textTypingStatusEnabled: (_x = (_w = props.config) === null || _w === void 0 ? void 0 : _w.typingStatus) === null || _x === void 0 ? void 0 : _x.textTypingStatusEnabled, disableAutoScroll: props.disableAutoScroll, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl, minimizeOnClick: handleMinimizeClick }), jsx("div", { className: "xa-spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : ""), children: jsx("div", { className: "xa-spinner" }) }), connectionStatus === "offline" && jsx(ServerOffline, {}), chatState.wsButton && visible && (jsx(WsButton, { button: chatState.wsButton, onPress: handleWsButtonPress })), jsx(ChatFooter, { isAdmin: config === null || config === void 0 ? void 0 : config.isAdmin, isChatting: chatState.isChatting, placeholder: (_y = config === null || config === void 0 ? void 0 : config.input) === null || _y === void 0 ? void 0 : _y.placeholder, sendButtonIcon: (_0 = (_z = config === null || config === void 0 ? void 0 : config.footer) === null || _z === void 0 ? void 0 : _z.sendButton) === null || _0 === void 0 ? void 0 : _0.icon, sendButtonIconHover: (_2 = (_1 = config === null || config === void 0 ? void 0 : config.footer) === null || _1 === void 0 ? void 0 : _1.sendButton) === null || _2 === void 0 ? void 0 : _2.iconHover, sendButtonIconDisabled: (_4 = (_3 = config === null || config === void 0 ? void 0 : config.footer) === null || _3 === void 0 ? void 0 : _3.sendButton) === null || _4 === void 0 ? void 0 : _4.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_5 = props.config) === null || _5 === void 0 ? void 0 : _5.menu, footerConfig: (_6 = props.config) === null || _6 === void 0 ? void 0 : _6.footer, inputConfig: (_7 = props.config) === null || _7 === void 0 ? void 0 : _7.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), actionBarEnabled && config.actionBar ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: config.actionBar, visible: visible, chatDisabled: config.disabled, onChatClick: chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_8 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _8 === void 0 ? void 0 : _8.imageUrl, visible: visible, hasInteracted: (_9 = chatState.visuals) === null || _9 === void 0 ? void 0 : _9.hasInteracted, onCtaDismiss: handleCtaDismiss })), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
 };
 /**
  * Top-level wrapper that dispatches between preview mode and connected mode.
@@ -33758,5 +34455,9 @@ var ChatWidgetContainer = function (props) {
     return jsx(ChatWidgetConnectedContainer, __assign({}, props));
 };
 
-export { ActionButton, Avatar, CardMiddleware, Carousel, CarouselItem, ChatWidgetContainer as Chat, ChatButton, ChatCard, ChatChip, ChatChips, ChatHeader, ChatMenu, ChatMessage, ChatMessageBubble, ChatMessagePart, ChatWidgetWrapper as ChatWidget, CtaBubble, CtaBubbleContainer, List, ListItem, ListMiddleware, MessageList, MiddlewareContextFactory, StaticChatWidgetContainer, StaticMessagesChatWidgetContainer, joinMiddlewares, responseToMessage, useLateMiddleware, useStandardMiddleware };
+var isActionBarChatButton$1 = lib.isActionBarChatButton;
+var isActionBarFormButton$1 = lib.isActionBarFormButton;
+var isActionBarPhoneButton$1 = lib.isActionBarPhoneButton;
+var isActionBarUrlButton$1 = lib.isActionBarUrlButton;
+export { ActionBar, ActionBarPreview, ActionButton, Avatar, CardMiddleware, Carousel, CarouselItem, ChatWidgetContainer as Chat, ChatButton, ChatCard, ChatChip, ChatChips, ChatHeader, ChatMenu, ChatMessage, ChatMessageBubble, ChatMessagePart, ChatWidgetWrapper as ChatWidget, CtaBubble, CtaBubbleContainer, FormModal, List, ListItem, ListMiddleware, MessageList, MiddlewareContextFactory, StaticChatWidgetContainer, StaticMessagesChatWidgetContainer, isActionBarChatButton$1 as isActionBarChatButton, isActionBarFormButton$1 as isActionBarFormButton, isActionBarPhoneButton$1 as isActionBarPhoneButton, isActionBarUrlButton$1 as isActionBarUrlButton, joinMiddlewares, responseToMessage, useLateMiddleware, useStandardMiddleware };
 //# sourceMappingURL=index.es.js.map