@xapp/chat-widget 1.96.2 → 1.96.3

package/dist/index.js

@@ -68,6 +68,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 });
@@ -133,7 +404,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);