@xapp/chat-widget 1.96.2 → 1.96.4

package/dist/index.es.js

@@ -67,6 +67,522 @@ 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.usableColorOr = usableColorOr;
+color.readableTextOn = readableTextOn;
+color.darkenColor = darkenColor;
+/**
+ * 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 colour to theme with: the one given, or the fallback when we cannot work
+ * out what text reads on it.
+ *
+ * Every builder needs this and each was doing it by hand, which is how the
+ * chat widget ended up guarded and the other two not. A background whose
+ * contrast cannot be computed is one we must not use — the foreground would be
+ * a guess paired with an unknown, and on a dark unparseable colour that is
+ * invisible text.
+ */
+function usableColorOr(color, fallback) {
+    return isSupportedColor(color) ? color : fallback;
+}
+/**
+ * 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)
+    };
+}
+/**
+ * A shade of the input colour, darkened by `amount` percent (negative
+ * lightens). Ported alongside the rest so the form widget's theme does not
+ * need its own copy of it.
+ */
+function darkenColor(colorIn, amount) {
+    if (!colorIn) {
+        return colorIn;
+    }
+    let r, g, b, a;
+    let colorOut;
+    try {
+        // Parse the color format
+        if (colorIn.startsWith('#')) {
+            // Hex format
+            const hexMatch = colorIn.match(/\w\w/g);
+            if (hexMatch) {
+                [r, g, b] = hexMatch.map(x => parseInt(x, 16));
+            }
+        }
+        else if (colorIn.startsWith('rgb')) {
+            // RGB or RGBA format
+            const rgba = parseRgb(colorIn);
+            if (rgba) {
+                ({ r, g, b, a } = rgba);
+            }
+        }
+        if (r === undefined || g === undefined || b === undefined) {
+            console.error(`Unsupported color format: ${colorIn}`);
+            return colorIn;
+        }
+        if (a !== undefined) {
+            // Adjust luminance for RGBA
+            // Luminance is on the 0-255 scale the channels are, so the clamp
+            // has to be too. Bounding it to 0-1 collapsed it to 1 for every
+            // real colour, which made the ratio tiny and crushed the result to
+            // near-black instead of darkening it: rgba(20, 52, 204, 0.8) at 20%
+            // came back rgba(0, 1, 3, 1).
+            const luminance = 0.3 * r + 0.59 * g + 0.11 * b;
+            let newLuminance = luminance * (1 - amount / 100);
+            newLuminance = Math.max(0, Math.min(255, newLuminance));
+            const ratio = newLuminance / (luminance || 1); // no division by zero
+            r = Math.round(r * ratio);
+            g = Math.round(g * ratio);
+            b = Math.round(b * ratio);
+            // Adjust alpha
+            a = a + amount / 100;
+            a = Math.max(0, Math.min(1, a)); // within 0 and 1
+            colorOut = `rgba(${r}, ${g}, ${b}, ${a})`;
+        }
+        else {
+            // Adjust the color for RGB or Hex
+            if (amount > 0) {
+                r = Math.max(0, r - amount);
+                g = Math.max(0, g - amount);
+                b = Math.max(0, b - amount);
+            }
+            else {
+                amount = Math.abs(amount); // positive for lightening
+                r = Math.min(255, r + amount);
+                g = Math.min(255, g + amount);
+                b = Math.min(255, b + amount);
+            }
+            colorOut = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        }
+    }
+    catch (e) {
+        console.error(`Unsupported color format: ${colorIn} - Error: ${e}`);
+    }
+    return colorOut;
+}
+
+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.usableColorOr)(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, props.secondaryColor),
+        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
+    };
+}
+/**
+ * The theme a new chat widget starts with, from the business's own colour.
+ *
+ * A faithful port of stentor-client's buildDefaultChatTheme, deliberately: the
+ * point of moving it is that onboarding can call this instead of its own copy,
+ * and that migration should not restyle every widget created afterwards. A
+ * thinner theme would have quietly dropped the CTA, message, input, footer and
+ * button styling that new widgets have today.
+ *
+ * The one change is how the contrast colour is derived — see below.
+ */
+function buildChatTheme(primaryColor, secondaryColor) {
+    const fontFamily = "RobotoRegular";
+    // secondaryColor is the colour of text sitting ON primaryColor — header
+    // title, subtitle, footer branding. Left unset it is computed, which is
+    // what makes the theme readable against whatever colour was scraped off
+    // the business's own site.
+    if (!secondaryColor) {
+        secondaryColor = (0, color_1.readableTextOn)(primaryColor);
+    }
+    return {
+        zIndex: "10000",
+        border: {
+            color: primaryColor,
+            radius: "10px",
+        },
+        carousel: {
+            button: {
+                color: primaryColor,
+            },
+            subtitle: {
+                color: "#979797",
+                fontFamily,
+                fontSize: "12px",
+                fontStyle: "normal",
+                fontWeight: "normal",
+            },
+            title: {
+                color: "#000",
+                fontFamily,
+                fontSize: "14px",
+                fontStyle: "normal",
+                fontWeight: "bold",
+            },
+        },
+        chatButton: {
+            background: primaryColor,
+            margin: {
+                bottom: "10px",
+                left: "10px",
+                right: "10px",
+                top: "10px",
+            },
+        },
+        content: {
+            background: "#ffffff",
+        },
+        cta: {
+            background: "#e1e2e1",
+            text: {
+                // Use a dark color that contrasts well with the light grey background
+                // instead of primaryColor which may not have sufficient contrast
+                color: "#333333",
+                fontFamily,
+                fontSize: "14px",
+            },
+        },
+        footer: {
+            background: primaryColor,
+            border: {
+                color: primaryColor,
+                radius: "0px",
+                width: "0px",
+            },
+            branding: {
+                text: {
+                    color: "#ffffff",
+                    fontFamily,
+                    fontSize: "14px",
+                    fontWeight: "normal",
+                    fontStyle: "normal",
+                },
+            },
+        },
+        header: {
+            background: primaryColor,
+            avatarBackground: "transparent",
+            border: {
+                color: primaryColor,
+                radius: "0px",
+                width: "0px",
+            },
+            text: {
+                color: secondaryColor,
+                fontFamily,
+                fontSize: "16px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+            subtitle: {
+                color: secondaryColor,
+                fontFamily,
+                fontSize: "10px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        input: {
+            background: "#ffffff",
+            border: {
+                radius: "20px",
+            },
+            text: {
+                color: "#000000",
+                fontFamily,
+                fontSize: "14px",
+            },
+            placeholder: {
+                color: "#e1e2e1",
+                fontFamily,
+                fontSize: "14px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        textTypingStatus: {
+            text: {
+                color: "#bfbfbf",
+                fontFamily,
+                fontSize: "14px",
+                fontWeight: "normal",
+                fontStyle: "normal",
+            },
+        },
+        menu: {
+            item: {
+                height: "24px",
+                text: {
+                    fontSize: "14px",
+                },
+            },
+        },
+        menuButton: {
+            color: "#ffffff",
+        },
+        messages: {
+            maxWidth: "400px",
+            mine: {
+                bubbleColor: "#f2f2f2",
+                text: {
+                    color: "#454545",
+                    fontFamily,
+                    fontSize: "18px",
+                    fontStyle: "normal",
+                    fontWeight: "normal",
+                },
+            },
+            others: {
+                bubbleColor: "#e1e2e1",
+                text: {
+                    color: "#262726",
+                    fontFamily,
+                    fontSize: "18px",
+                    fontStyle: "normal",
+                    fontWeight: "normal",
+                },
+            },
+            padding: {
+                bottom: "0px",
+                left: "20px",
+                right: "16px",
+                top: "16px",
+            },
+        },
+        refreshButton: {
+            color: secondaryColor,
+        },
+        minimizeButton: {
+            color: secondaryColor,
+        },
+        cancelButton: {
+            color: secondaryColor,
+        },
+        primaryColor: primaryColor,
+        sendButton: {
+            color: "#505050",
+            width: "20px",
+        },
+        size: {
+            width: "500px",
+            height: "700px",
+        },
+    };
+}
+
 var ChannelData = {};
 
 Object.defineProperty(ChannelData, "__esModule", { value: true });
@@ -132,7 +648,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);