@xapp/chat-widget 1.96.1 → 1.96.3

package/dist/index.es.js

@@ -67,6 +67,277 @@ function isActionBarPaymentButton(button) {
     return button.type === "payment";
 }
 
+var buildChatWidgetChannel$1 = {};
+
+var color = {};
+
+/*! Copyright (c) 2026, XAPP AI */
+Object.defineProperty(color, "__esModule", { value: true });
+color.parseRgb = parseRgb;
+color.invertColorHEX = invertColorHEX;
+color.invertColorRgb = invertColorRgb;
+color.invertColor = invertColor;
+color.isSupportedColor = isSupportedColor;
+color.readableTextOn = readableTextOn;
+/**
+ * Colour maths for building a widget theme from a business's own branding.
+ *
+ * These lived in stentor-client, which meant the only way to work out a
+ * readable text colour was to be running in a browser. Studio needs the same
+ * answers when it builds an app server-side for a get.xapp.ai signup, and two
+ * implementations of "which colour reads on this background" would drift into
+ * two different-looking widgets.
+ *
+ * The inputs are colours scraped off a customer's website, so they are whatever
+ * their designer chose — any hex length, rgb or rgba, or nothing at all.
+ */
+/** Left-pads a hex component so "f" becomes "0f". */
+function padZero(value, length = 2) {
+    const zeros = new Array(length).join("0");
+    return (zeros + value).slice(-length);
+}
+function parseRgb(colorString) {
+    const rgba = /^rgba?\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/;
+    const rgb = /^rgb?\((\d+),\s*(\d+),\s*(\d+)\)$/;
+    const withAlpha = colorString === null || colorString === void 0 ? void 0 : colorString.match(rgba);
+    if (withAlpha) {
+        return {
+            r: parseInt(withAlpha[1], 10),
+            g: parseInt(withAlpha[2], 10),
+            b: parseInt(withAlpha[3], 10),
+            a: parseFloat(withAlpha[4])
+        };
+    }
+    const plain = colorString === null || colorString === void 0 ? void 0 : colorString.match(rgb);
+    if (plain) {
+        return { r: parseInt(plain[1], 10), g: parseInt(plain[2], 10), b: parseInt(plain[3], 10) };
+    }
+    return null;
+}
+/**
+ * Whether text should be black or white to read on this background.
+ *
+ * The weighting is perceived brightness, not an average: the eye is far more
+ * sensitive to green than to blue, so a pure blue is dark to us even though its
+ * numeric average is mid-range.
+ *
+ * @see http://stackoverflow.com/a/3943023/112731
+ */
+function isLight(r, g, b) {
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186;
+}
+/**
+ * Inverts a hex colour, or returns black/white for contrast when `bw` is set.
+ *
+ * Inverting is rarely what you want behind text — a mid-tone inverts to another
+ * mid-tone and neither reads. `bw` is the contrast answer.
+ */
+function invertColorHEX(hex, bw) {
+    if (!hex) {
+        return undefined;
+    }
+    let value = hex.indexOf("#") === 0 ? hex.slice(1) : hex;
+    if (value.length === 3) {
+        value = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
+    }
+    if (value.length !== 6) {
+        throw new Error("Invalid HEX color.");
+    }
+    const r = parseInt(value.slice(0, 2), 16);
+    const g = parseInt(value.slice(2, 4), 16);
+    const b = parseInt(value.slice(4, 6), 16);
+    if (bw) {
+        return isLight(r, g, b) ? "#000000" : "#FFFFFF";
+    }
+    return `#${padZero((255 - r).toString(16))}${padZero((255 - g).toString(16))}${padZero((255 - b).toString(16))}`;
+}
+/** As invertColorHEX, for rgb/rgba input. */
+function invertColorRgb(rgb, bw) {
+    const parsed = parseRgb(rgb);
+    if (!parsed) {
+        return rgb;
+    }
+    const { r, g, b } = parsed;
+    if (bw) {
+        return isLight(r, g, b) ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
+    }
+    return `rgba(${255 - r}, ${255 - g}, ${255 - b}, 1)`;
+}
+/** Inverts whichever colour notation was given. */
+function invertColor(color, bw) {
+    if (!color) {
+        return undefined;
+    }
+    return color.startsWith("#") ? invertColorHEX(color, bw) : invertColorRgb(color, bw);
+}
+/**
+ * Whether we can work out what text reads on this colour.
+ *
+ * Hex and rgb/rgba only. A CSS named colour like `orange`, or `hsl(...)`, is
+ * perfectly valid CSS — we simply cannot compute its brightness, and a
+ * background whose contrast we cannot compute is one we must not use.
+ */
+function isSupportedColor(color) {
+    if (!color) {
+        return false;
+    }
+    if (color.startsWith("#")) {
+        const value = color.slice(1);
+        return (value.length === 3 || value.length === 6) && /^[0-9a-f]+$/i.test(value);
+    }
+    return parseRgb(color) !== null;
+}
+/**
+ * The text colour that will read on this background: black or white, never
+ * anything else.
+ *
+ * That guarantee is the whole point. An earlier version leaned on invertColor,
+ * whose rgb path returns its input unchanged when it cannot parse it — so
+ * `readableTextOn("orange")` answered `"orange"`, and a header themed from a
+ * scraped named colour got text in exactly the background colour. Invisible,
+ * and by the one function meant to prevent it.
+ *
+ * Unparseable input falls back to black. That is a guess, so callers who
+ * control the background should check `isSupportedColor` first and use a
+ * colour whose contrast can actually be computed, rather than pairing a
+ * guessed foreground with an unknown background.
+ */
+function readableTextOn(background) {
+    if (!isSupportedColor(background)) {
+        return "#000000";
+    }
+    const rgb = background.startsWith("#") ? hexToRgb(background) : parseRgb(background);
+    if (!rgb) {
+        return "#000000";
+    }
+    return isLight(rgb.r, rgb.g, rgb.b) ? "#000000" : "#FFFFFF";
+}
+function hexToRgb(hex) {
+    let value = hex.slice(1);
+    if (value.length === 3) {
+        value = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
+    }
+    if (value.length !== 6) {
+        return null;
+    }
+    return {
+        r: parseInt(value.slice(0, 2), 16),
+        g: parseInt(value.slice(2, 4), 16),
+        b: parseInt(value.slice(4, 6), 16)
+    };
+}
+
+Object.defineProperty(buildChatWidgetChannel$1, "__esModule", { value: true });
+buildChatWidgetChannel$1.buildChatWidgetChannel = buildChatWidgetChannel;
+buildChatWidgetChannel$1.buildChatTheme = buildChatTheme;
+const color_1 = color;
+/** Fallback when a crawl found no branding. Deliberately neutral. */
+const DEFAULT_PRIMARY = "#1AA7DC";
+function buildChatWidgetChannel(props) {
+    const { appId, apiUrl, mcpUrl, formWidgetKey, phoneNumber } = props;
+    // 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.isSupportedColor)(props.primaryColor) ? props.primaryColor : DEFAULT_PRIMARY;
+    return {
+        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
+        // token on a public page is not a token.
+        connection: {
+            type: "mcp",
+            serverUrl: `${mcpUrl}/${appId}`,
+            mcp: {
+                mode: "homeowner"
+            }
+        },
+        theme: buildChatTheme(primaryColor),
+        actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber })
+    };
+}
+/**
+ * The dock of buttons that replaces the plain chat bubble.
+ *
+ * On by default, which is the part worth explaining: chat is not on the default
+ * tier, but the action bar is how someone reaches booking and the phone, and
+ * those are what the business is paying for.
+ *
+ * Order is deliberate. Booking is the thing we are selling, so it comes first;
+ * calling is the fallback for people who will not use a form; chat is last
+ * because it is the least likely to be enabled.
+ */
+function buildActionBar(props) {
+    const { apiUrl, formWidgetKey, phoneNumber } = props;
+    const buttons = [];
+    if (formWidgetKey) {
+        buttons.push({
+            id: "book",
+            type: "schedule",
+            label: "Book",
+            formConfig: {
+                api: {
+                    url: apiUrl,
+                    key: formWidgetKey
+                }
+            }
+        });
+    }
+    if (phoneNumber) {
+        buttons.push({
+            id: "call",
+            type: "phone",
+            label: "Call",
+            phoneNumber
+        });
+    }
+    buttons.push({
+        id: "chat",
+        type: "chat",
+        label: "Chat"
+    });
+    return {
+        enabled: true,
+        position: "right",
+        buttons
+    };
+}
+/**
+ * A theme derived from the business's own colour.
+ *
+ * Only the text colour is computed rather than chosen: which of black or white
+ * reads on a given background is arithmetic, and getting it wrong ships a
+ * widget nobody can read.
+ */
+function buildChatTheme(primaryColor) {
+    const onPrimary = (0, color_1.readableTextOn)(primaryColor);
+    return {
+        zIndex: "10000",
+        border: {
+            color: primaryColor,
+            radius: "10px"
+        },
+        chatButton: {
+            background: primaryColor,
+            margin: {
+                bottom: "10px",
+                left: "10px",
+                right: "10px",
+                top: "10px"
+            }
+        },
+        content: {
+            background: "#ffffff"
+        },
+        header: {
+            background: primaryColor,
+            text: {
+                color: onPrimary
+            }
+        }
+    };
+}
+
 var ChannelData = {};
 
 Object.defineProperty(ChannelData, "__esModule", { value: true });
@@ -132,7 +403,9 @@ function isOpenURLMenuItem(item) {
 	Object.defineProperty(exports, "__esModule", { value: true });
 	/*! Copyright (c) 2021, XAPPmedia */
 	__exportStar(ActionBar$1, exports);
+	__exportStar(buildChatWidgetChannel$1, exports);
 	__exportStar(ChannelData, exports);
+	__exportStar(color, exports);
 	__exportStar(Constants, exports);
 	__exportStar(Types, exports);
 	__exportStar(UserInfo, exports);
@@ -390,8 +663,19 @@ var ActionBarCta = function (_a) {
         }, children: [jsx("span", { className: "xapp-action-bar-cta__message", children: message }), dismissible && (jsx("button", { className: "xapp-action-bar-cta__dismiss", onClick: handleDismiss, "aria-label": "Dismiss", type: "button", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M13 1L1 13M1 1L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
 };
 
-var DEFAULT_MOBILE_BREAKPOINT = 768;
-var RESIZE_DEBOUNCE_MS = 150;
+/**
+ * The same query the stylesheets use, as a string rather than a number.
+ *
+ * A bare width could not express this. A phone on its side is 740-863px wide, so any
+ * width-only threshold either excludes landscape phones or catches tablets - #1592 moved
+ * the stylesheets to `(max-width: 640px), (max-height: 480px) and (pointer: coarse)` for
+ * exactly that reason, and a JS constant of 640 or 768 cannot mirror it either way.
+ *
+ * Sharing the query text is what keeps the two halves from drifting: matchMedia evaluates
+ * the identical condition the CSS does, so there is one definition of "phone" and it lives
+ * in `_mixins.scss`. Keep this in step with the `mobile()` mixin. XappMedia/chat-widget#1594.
+ */
+var MOBILE_MEDIA_QUERY = "(max-width: 640px), (max-height: 480px) and (pointer: coarse)";
 /**
  * ChatWidget.scss sizes the chat panel against this variable. Nothing used to set it, so it always
  * fell back to the hardcoded 80px in the SCSS - and the real mobile bar is taller than that once
@@ -404,33 +688,43 @@ var RESIZE_DEBOUNCE_MS = 150;
  */
 var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
 var ActionBar = function (_a) {
-    var _b, _c, _d;
-    var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _e = _a.hasUserInteracted, hasUserInteracted = _e === void 0 ? false : _e, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
-    var _f = useState(false), isMobile = _f[0], setIsMobile = _f[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);
+    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 _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
+    // found the override set by nobody - zero of 971 bundles, against 18 configured
+    // ActionBars - so in practice every bar takes the shared query.
+    // `!= null`, not a truthy check: 0 is a legitimate override meaning "never mobile", and
+    // treating it as unset would hand back the default responsive query - the opposite of
+    // what was asked for.
+    var mediaQuery = config.mobileBreakpoint != null
+        ? "(max-width: ".concat(config.mobileBreakpoint, "px)")
+        : MOBILE_MEDIA_QUERY;
+    var position = (_b = config.position) !== null && _b !== void 0 ? _b : "right";
     var barRef = 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);
-            }
+        // matchMedia fires only when the answer actually changes, so there is nothing to
+        // debounce - unlike a resize listener, which fires continuously through a drag.
+        // Guarded because jsdom does not implement matchMedia, and a widget that throws on
+        // mount in a consumer's test suite is a worse failure than one that assumes desktop.
+        if (typeof window.matchMedia !== "function") {
+            return undefined;
+        }
+        var query = window.matchMedia(mediaQuery);
+        setIsMobile(query.matches);
+        var onChange = function (event) {
+            setIsMobile(event.matches);
         };
-    }, [mobileBreakpoint, handleResize]);
+        // addListener is the pre-2021 Safari spelling. Still worth carrying: this widget
+        // runs on whatever browser a customer's visitor brings.
+        if (typeof query.addEventListener === "function") {
+            query.addEventListener("change", onChange);
+            return function () { return query.removeEventListener("change", onChange); };
+        }
+        query.addListener(onChange);
+        return function () { return query.removeListener(onChange); };
+    }, [mediaQuery]);
     // Publish the bar's real height so the chat panel can size around it.
     //
     // useLayoutEffect, not useEffect: this commits before paint, so the panel never gets a
@@ -483,7 +777,7 @@ var ActionBar = function (_a) {
     // - Chat must not be visible (user hasn't opened it)
     // - Chat must not be disabled
     var hasChatButton = config.buttons.some(lib.isActionBarChatButton);
-    var showCta = ((_d = config.cta) === null || _d === void 0 ? void 0 : _d.message) && !visible && !chatDisabled && hasChatButton;
+    var showCta = ((_c = config.cta) === null || _c === void 0 ? void 0 : _c.message) && !visible && !chatDisabled && hasChatButton;
     var handleCtaClick = function () {
         onChatClick();
     };