@xapp/chat-widget 1.96.3 → 1.96.4

package/dist/index.js

@@ -79,7 +79,9 @@ 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.
  *
@@ -188,6 +190,19 @@ function isSupportedColor(color) {
     }
     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.
@@ -227,6 +242,77 @@ function hexToRgb(hex) {
         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;
@@ -239,7 +325,7 @@ function buildChatWidgetChannel(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;
+    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
@@ -253,7 +339,7 @@ function buildChatWidgetChannel(props) {
                 mode: "homeowner"
             }
         },
-        theme: buildChatTheme(primaryColor),
+        theme: buildChatTheme(primaryColor, props.secondaryColor),
         actionBar: buildActionBar({ apiUrl, formWidgetKey, phoneNumber })
     };
 }
@@ -304,19 +390,49 @@ function buildActionBar(props) {
     };
 }
 /**
- * A theme derived from the business's own colour.
+ * The theme a new chat widget starts with, 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.
+ * 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) {
-    const onPrimary = (0, color_1.readableTextOn)(primaryColor);
+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"
+            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,
@@ -324,18 +440,147 @@ function buildChatTheme(primaryColor) {
                 bottom: "10px",
                 left: "10px",
                 right: "10px",
-                top: "10px"
-            }
+                top: "10px",
+            },
         },
         content: {
-            background: "#ffffff"
+            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: onPrimary
-            }
-        }
+                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",
+        },
     };
 }