@xapp/chat-widget 1.96.4 → 1.97.1

package/dist/index.es.js

@@ -320,13 +320,14 @@ const color_1 = color;
 /** Fallback when a crawl found no branding. Deliberately neutral. */
 const DEFAULT_PRIMARY = "#1AA7DC";
 function buildChatWidgetChannel(props) {
+    var _a;
     const { appId, apiUrl, mcpUrl, formWidgetKey, phoneNumber } = props;
+    const businessName = (_a = props.businessName) === null || _a === void 0 ? void 0 : _a.trim();
     // Only a colour whose contrast can actually be computed, so the background
     // and the text on it are always a matched pair rather than one scraped
     // value and one guess.
     const primaryColor = (0, color_1.usableColorOr)(props.primaryColor, DEFAULT_PRIMARY);
-    return {
-        type: "chat-widget",
+    return Object.assign({ type: "chat-widget", 
         // MCP by default. The widget runs on a public page, so homeowner mode
         // — which is unauthenticated and carries the appId in the url — is the
         // only one that can work there; business_owner needs a token, and a
@@ -337,10 +338,7 @@ function buildChatWidgetChannel(props) {
             mcp: {
                 mode: "homeowner"
             }
-        },
-        theme: buildChatTheme(primaryColor, props.secondaryColor),
-        actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber })
-    };
+        }, theme: buildChatTheme(primaryColor, props.secondaryColor), actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber }) }, (businessName ? { botName: businessName } : {}));
 }
 /**
  * The dock of buttons that replaces the plain chat bubble.
@@ -932,9 +930,39 @@ var MOBILE_MEDIA_QUERY = "(max-width: 640px), (max-height: 480px) and (pointer:
  * Two concurrent bars would fight over it, and either one unmounting would clear it.
  */
 var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
+/**
+ * Whether pressing this button ends up in the form widget.
+ *
+ * `schedule` is the same form-widget infrastructure with a calendar icon, so it is the
+ * same button as far as this question goes. XappMedia/chat-widget#1626.
+ */
+function opensFormWidget(button) {
+    return lib.isActionBarFormButton(button) || lib.isActionBarScheduleButton(button);
+}
+/**
+ * Which of a bar's configured buttons would actually render.
+ *
+ * Exported because the decision is needed in two places: here, to render, and in
+ * `ChatWidget`, to know whether the bar has anything left to show and whether anything on
+ * the page can still open the form widget. Two copies of this predicate would drift.
+ */
+function visibleActionBarButtons(buttons, options) {
+    if (buttons === void 0) { buttons = []; }
+    if (options === void 0) { options = {}; }
+    var chatDisabled = options.chatDisabled, formDisabled = options.formDisabled;
+    return buttons.filter(function (button) {
+        if (chatDisabled && lib.isActionBarChatButton(button)) {
+            return false;
+        }
+        if (formDisabled && opensFormWidget(button)) {
+            return false;
+        }
+        return true;
+    });
+}
 var ActionBar = function (_a) {
     var _b, _c;
-    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _d = _a.hasUserInteracted, hasUserInteracted = _d === void 0 ? false : _d, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
+    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, formDisabled = _a.formDisabled, _d = _a.hasUserInteracted, hasUserInteracted = _d === void 0 ? false : _d, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
     var _e = useState(false), isMobile = _e[0], setIsMobile = _e[1];
     // An explicit override can only be a width; without one we ask the same question the
     // stylesheets ask, so the two cannot disagree. A survey of production on 2026-08-19
@@ -1005,10 +1033,9 @@ var ActionBar = function (_a) {
             document.documentElement.style.removeProperty(ACTION_BAR_HEIGHT_VAR);
         };
     }, [isMobile]);
-    // Filter out chat buttons if chat is disabled
-    var filteredButtons = chatDisabled
-        ? config.buttons.filter(function (button) { return !lib.isActionBarChatButton(button); })
-        : config.buttons;
+    // Drop the buttons this page has no use for - chat when chat is disabled, form/schedule
+    // when the form already is the page.
+    var filteredButtons = visibleActionBarButtons(config.buttons, { chatDisabled: chatDisabled, formDisabled: formDisabled });
     // Build class names - ActionBar stays visible even when chat is open
     var classNames = [
         "xapp-action-bar",
@@ -1021,7 +1048,7 @@ var ActionBar = function (_a) {
     // - Must have CTA config with a message
     // - Chat must not be visible (user hasn't opened it)
     // - Chat must not be disabled
-    var hasChatButton = config.buttons.some(lib.isActionBarChatButton);
+    var hasChatButton = filteredButtons.some(lib.isActionBarChatButton);
     var showCta = ((_c = config.cta) === null || _c === void 0 ? void 0 : _c.message) && !visible && !chatDisabled && hasChatButton;
     var handleCtaClick = function () {
         onChatClick();
@@ -1029,6 +1056,13 @@ var ActionBar = function (_a) {
     var handleCtaDismiss = function () {
         onCtaDismiss === null || onCtaDismiss === void 0 ? void 0 : onCtaDismiss();
     };
+    // A bar with nothing in it is a bare strip of chrome the visitor cannot use. The bar
+    // renders on `actionBar.enabled` alone, so an App configured with only Form + Schedule
+    // filters down to zero on a form page - render nothing rather than an empty shell.
+    // This is after the hooks on purpose; bailing earlier would change the hook order.
+    if (filteredButtons.length === 0) {
+        return null;
+    }
     return (jsxs("div", { ref: barRef, className: classNames, role: "toolbar", "aria-label": "Chat actions", children: [showCta && (jsx("div", { className: "xapp-action-bar-cta-wrapper", children: jsx(ActionBarCta, { config: config.cta, isMobile: isMobile, onClick: handleCtaClick, onDismiss: handleCtaDismiss, hasUserInteracted: hasUserInteracted }) })), jsx("div", { className: "xapp-action-bar__buttons", children: filteredButtons.map(function (button) { return (jsx(ActionBarButton, { button: button, chatActive: visible, onChatClick: onChatClick, onChatMinimize: onChatMinimize, onFormClick: onFormClick, isMobile: isMobile }, button.id)); }) })] }));
 };
 
@@ -12797,6 +12831,64 @@ function getSrcId(url) {
     return res;
 }
 
+/*! Copyright (c) 2026, XAPPmedia */
+/**
+ * Body attribute a host page sets to declare "a form widget already *is* this page".
+ *
+ * The standalone contact/booking page (contact.xapp.ai, book.xapp.ai, sche.dule.pro)
+ * renders a docked form-widget as its whole content and then injects the chat widget on
+ * top of it. Without a signal, the injected widget cheerfully offers two more ways into
+ * the same form - an ActionBar Contact/Book button and the form-widget's own side button.
+ *
+ * This is a declaration, not a detection: the page knows what it renders, the widget does
+ * not. Sniffing the DOM for a docked form would be guesswork, and it would also fire on
+ * pages that legitimately embed a form *and* want a separate one from the bar.
+ *
+ * The writer is `@xapp/form-widget`'s `useFormPageMarker` (used by `@xapp/contact-app`).
+ * The two packages ship independently, so this string is the contract between them -
+ * the same arrangement `[data-xapp-form-side-button]` already uses. Do not rename it on
+ * one side only. XappMedia/chat-widget#1626.
+ */
+var FORM_PAGE_ATTRIBUTE = "data-xapp-form-page";
+/**
+ * Whether a form widget is already the page, per the marker above.
+ */
+function isFormPage() {
+    if (typeof document === "undefined" || !document.body) {
+        return false;
+    }
+    return document.body.getAttribute(FORM_PAGE_ATTRIBUTE) === "true";
+}
+/**
+ * Reactive form of {@link isFormPage}.
+ *
+ * The marker and the chat widget mount independently - the widget arrives from a
+ * `<script>` tag, so it can win or lose the race against the page's own React tree.
+ * Observing the attribute rather than reading it once means the filter settles correctly
+ * whichever order they land in.
+ */
+function useIsFormPage() {
+    var _a = useState(isFormPage), formPage = _a[0], setFormPage = _a[1];
+    useEffect(function () {
+        if (typeof document === "undefined" || !document.body) {
+            return undefined;
+        }
+        // Re-read on mount: the marker may have appeared between the initial state and here.
+        setFormPage(isFormPage());
+        // jsdom has MutationObserver, but a customer's browser might not - an old browser
+        // that reads the marker once is still better than one that throws on mount.
+        if (typeof MutationObserver === "undefined") {
+            return undefined;
+        }
+        var observer = new MutationObserver(function () {
+            setFormPage(isFormPage());
+        });
+        observer.observe(document.body, { attributes: true, attributeFilter: [FORM_PAGE_ATTRIBUTE] });
+        return function () { return observer.disconnect(); };
+    }, []);
+    return formPage;
+}
+
 function useChatServerVisitorId() {
     var dispatch = useChatServerDispatch();
     var clientVisitorId = useSelector(function (state) {
@@ -37041,6 +37133,21 @@ var ChatWidgetUI = function (props) {
     log("Rendering - accountStatus: \"".concat(chatState.accountStatus, "\", connectionStatus: \"").concat(chatState.connection.connectionStatus, "\""));
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
     var actionBarEnabled = ((_s = config === null || config === void 0 ? void 0 : config.actionBar) === null || _s === void 0 ? void 0 : _s.enabled) === true;
+    // The host page declares this; the widget cannot work it out. On the standalone
+    // contact/booking page the form already *is* the page, which makes every button that
+    // only opens one redundant. XappMedia/chat-widget#1626.
+    var isFormPage = useIsFormPage();
+    var actionBarButtons = useMemo(function () {
+        return actionBarEnabled && (config === null || config === void 0 ? void 0 : config.actionBar)
+            ? visibleActionBarButtons(config.actionBar.buttons, {
+                chatDisabled: config.disabled,
+                formDisabled: isFormPage,
+            })
+            : [];
+    }, [actionBarEnabled, config === null || config === void 0 ? void 0 : config.actionBar, config === null || config === void 0 ? void 0 : config.disabled, isFormPage]);
+    // A bar that filters down to nothing is a bare strip of chrome. Treat it as if the bar
+    // were off, so the visitor still gets the plain chat button rather than an empty shell.
+    var actionBarVisible = actionBarEnabled && actionBarButtons.length > 0;
     // Disable greeting in preview mode
     useGreeting(!isOffline && !props.preChatFormEnabled && visible && !previewMode);
     var connectionStatus = chatState.connection.connectionStatus;
@@ -37050,23 +37157,31 @@ var ChatWidgetUI = function (props) {
         }
     }, [connectionStatus, onConnectionStatusChange]);
     useExternalScript((_t = props.config) === null || _t === void 0 ? void 0 : _t.middlewareUrl);
-    // Pre-load form-widget script if formWidgetKey is provided
+    // Only reach for form.xapp.ai when something on this page can still open the form.
+    //
+    // Loading it is not free: the script mounts a second form-widget instance whose wrapper
+    // renders its own sticky "Contact Us" side button. On a page that already is the form
+    // that button is a third way into the same thing, so not loading the script at all is
+    // what actually removes it - hiding it in CSS only papers over the second instance.
+    //
+    // With no bar configured the side button IS the entry point, so that case still loads.
+    var formWidgetNeeded = !isFormPage && (!actionBarEnabled || actionBarButtons.some(opensFormWidget));
     useEffect(function () {
-        if (config === null || config === void 0 ? void 0 : config.formWidgetKey) {
+        if ((config === null || config === void 0 ? void 0 : config.formWidgetKey) && formWidgetNeeded) {
             preloadFormWidgetScript(config.formWidgetKey);
         }
-    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey]);
+    }, [config === null || config === void 0 ? void 0 : config.formWidgetKey, formWidgetNeeded]);
     // 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) {
+        if (actionBarVisible) {
             // 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) {
+            if (actionBarVisible) {
                 // Decrement reference count
                 var currentCount = parseInt(document.body.getAttribute("data-xapp-action-bar-count") || "0", 10);
                 var newCount = Math.max(0, currentCount - 1);
@@ -37079,7 +37194,7 @@ var ChatWidgetUI = function (props) {
                 }
             }
         };
-    }, [actionBarEnabled]);
+    }, [actionBarVisible]);
     // 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) ||
         (config === null || config === void 0 ? void 0 : config.agent) || {
@@ -37087,9 +37202,9 @@ var ChatWidgetUI = function (props) {
         avatarPath: config.avatarUrl,
         display_name: "Agent",
     };
-    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, debugMode: (_x = (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.connection) === null || _w === void 0 ? void 0 : _w.mcp) === null || _x === void 0 ? void 0 : _x.debugMode, 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: (_z = (_y = props.config) === null || _y === void 0 ? void 0 : _y.typingStatus) === null || _z === void 0 ? void 0 : _z.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: (_0 = config === null || config === void 0 ? void 0 : config.input) === null || _0 === void 0 ? void 0 : _0.placeholder, sendButtonIcon: (_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.icon, sendButtonIconHover: (_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.iconHover, sendButtonIconDisabled: (_6 = (_5 = config === null || config === void 0 ? void 0 : config.footer) === null || _5 === void 0 ? void 0 : _5.sendButton) === null || _6 === void 0 ? void 0 : _6.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_7 = props.config) === null || _7 === void 0 ? void 0 : _7.menu, footerConfig: (_8 = props.config) === null || _8 === void 0 ? void 0 : _8.footer, inputConfig: (_9 = props.config) === null || _9 === void 0 ? void 0 : _9.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: __assign(__assign({}, config.actionBar), { 
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()).concat(actionBarVisible ? " 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, debugMode: (_x = (_w = (_v = props.config) === null || _v === void 0 ? void 0 : _v.connection) === null || _w === void 0 ? void 0 : _w.mcp) === null || _x === void 0 ? void 0 : _x.debugMode, 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: (_z = (_y = props.config) === null || _y === void 0 ? void 0 : _y.typingStatus) === null || _z === void 0 ? void 0 : _z.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: (_0 = config === null || config === void 0 ? void 0 : config.input) === null || _0 === void 0 ? void 0 : _0.placeholder, sendButtonIcon: (_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.icon, sendButtonIconHover: (_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.iconHover, sendButtonIconDisabled: (_6 = (_5 = config === null || config === void 0 ? void 0 : config.footer) === null || _5 === void 0 ? void 0 : _5.sendButton) === null || _6 === void 0 ? void 0 : _6.iconDisabled, visible: visible, hasWsButton: !!chatState.wsButton, menuConfig: (_7 = props.config) === null || _7 === void 0 ? void 0 : _7.menu, footerConfig: (_8 = props.config) === null || _8 === void 0 ? void 0 : _8.footer, inputConfig: (_9 = props.config) === null || _9 === void 0 ? void 0 : _9.input, disabled: previewMode, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload }), jsx("div", { className: "restartModal", ref: modalRef, onClick: handleRestartModalCloseClick, children: jsx(ModalContent, { onClose: handleRestartModalCloseClick, onReset: handleReset }) })] }), actionBarVisible && config.actionBar ? (jsxs(Fragment, { children: [jsx(ActionBar, { config: __assign(__assign({}, config.actionBar), { 
                             // Use actionBar.cta if set, otherwise fall back to widget-level cta
-                            cta: (_10 = config.actionBar.cta) !== null && _10 !== void 0 ? _10 : config.cta }), visible: visible, chatDisabled: config.disabled, hasUserInteracted: (_11 = chatState.visuals) === null || _11 === void 0 ? void 0 : _11.hasInteracted, onChatClick: chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible ? "visible" : "", onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_12 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _12 === void 0 ? void 0 : _12.imageUrl, visible: visible, hasInteracted: (_13 = chatState.visuals) === null || _13 === void 0 ? void 0 : _13.hasInteracted, onCtaDismiss: handleCtaDismiss })), jsx(ErrorOverlay, { enableErrorOverlay: config === null || config === void 0 ? void 0 : config.enableErrorOverlay })] }));
+                            cta: (_10 = config.actionBar.cta) !== null && _10 !== void 0 ? _10 : config.cta }), visible: visible, chatDisabled: config.disabled, formDisabled: isFormPage, hasUserInteracted: (_11 = chatState.visuals) === null || _11 === void 0 ? void 0 : _11.hasInteracted, onChatClick: chatButtonOnClick, onChatMinimize: handleMinimizeClick, onFormClick: handleFormButtonClick, onCtaDismiss: handleCtaDismiss }), formModalOpen && activeFormConfig && (jsx(FormModal, { config: activeFormConfig, widgetEnv: config, onClose: handleFormModalClose }))] })) : (jsx(ChatButton, { addClass: visible ? "visible" : "", onClick: chatButtonOnClick, config: config === null || config === void 0 ? void 0 : config.cta, imageUrl: (_12 = config === null || config === void 0 ? void 0 : config.chatButton) === null || _12 === void 0 ? void 0 : _12.imageUrl, visible: visible, hasInteracted: (_13 = chatState.visuals) === null || _13 === void 0 ? void 0 : _13.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.