@leadbot/components 2.21.1 → 2.24.1

package/dist/mount.d.ts

@@ -2,7 +2,11 @@ import { type ComponentType } from "preact";
 import { type LeadbotClient } from "@leadbot/core";
 export interface LeadbotComponentsConfig {
     domainKey?: string;
-    /** API server origin, e.g. "https://collector.example.com" — "/api" is appended. */
+    /**
+     * API server origin, e.g. "https://collector.example.com" — "/api" is
+     * appended. Optional: the build bakes the collector origin in, so only
+     * preview/staging overrides need to pass it.
+     */
     apiHost?: string;
     /** Id of the component leadbot these components belong to (dashboard → Settings → Components). */
     leadbotId?: number;
@@ -21,7 +25,11 @@ export interface LeadbotComponentsConfig {
      * to anyone reading the shipped JS.
      */
     previewToken?: string;
-    /** Base/primary color for buttons etc. — sets --leadbot-primary on the mount. */
+    /**
+     * Base/primary color for buttons etc. — sets --leadbot-primary on the
+     * mount. Optional: the colour configured in the dashboard arrives with the
+     * boot fetch and is used by default; this prop overrides it.
+     */
     baseColor?: string;
     /**
      * Test/preview mode. Submissions and chat turns run end-to-end (AI still
@@ -29,6 +37,12 @@ export interface LeadbotComponentsConfig {
      * the dashboard preview so test interactions never create real leads.
      */
     preview?: boolean;
+    /**
+     * Render a visible placeholder instead of nothing when an `id` resolves to
+     * no published step. On by default on localhost and in the dashboard
+     * preview; set it to force the placeholder on (or off) elsewhere.
+     */
+    debug?: boolean;
 }
 /**
  * Set module-level defaults; every mount accepts the same keys as overrides.
@@ -40,9 +54,31 @@ export interface LeadbotComponentsConfig {
  * fire. Pass the leadbot id to get the same tracking as the classic widget.
  */
 export declare function init(config: LeadbotComponentsConfig): void;
+/**
+ * What the boot fetch answered about the bot itself: the language its copy is
+ * written in and the colour configured in the dashboard. Mounts read these as
+ * defaults, so a Dutch bot on a `lang="en"` page speaks Dutch and a snippet
+ * that passes no `baseColor` still renders in the bot's colour.
+ *
+ * Only ever set from a flow response, so a mount that never loads a flow (an
+ * explicit `fields` list, no `id`) costs no extra request.
+ */
+export interface FlowSnapshot {
+    language?: string;
+    baseColor?: string;
+}
+export declare function getFlowSnapshot(leadbotId?: number): FlowSnapshot;
+/** Re-render on the next flow response; returns the unsubscribe. */
+export declare function subscribeFlowSnapshot(listener: () => void): () => void;
 /** Merge the `init()` defaults under explicitly-set option keys. */
 export declare function withDefaults(options: LeadbotComponentsConfig): LeadbotComponentsConfig;
 export declare function resolveClient(options: LeadbotComponentsConfig): LeadbotClient;
+/**
+ * Whether this mount's own boot fetch was refused with a 403 — a broken
+ * install rather than an unpublished bot. Only meaningful once that fetch has
+ * resolved.
+ */
+export declare function wasFlowForbidden(options: LeadbotComponentsConfig): boolean;
 /**
  * Boot fetch of the published flow: delivers the steps and bills the pageview.
  * Bumps the generation, so a response for a route the caller has already left

package/dist/mount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,QAAQ,CAAC;AACvD,OAAO,EAKN,KAAK,aAAa,EAIlB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAKD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,uBAAuB,GAAG,IAAI,CA2B1D;AAID,oEAAoE;AACpE,wBAAgB,YAAY,CAC3B,OAAO,EAAE,uBAAuB,GAC9B,uBAAuB,CAMzB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAK7E;AA2BD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,uBAAuB,yDAExD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC7B,OAAO,EAAE,uBAAuB,GAC9B,IAAI,CAAC,uBAAuB,EAAE,SAAS,GAAG,cAAc,CAAC,CAQ3D;AAED,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB;IAChE,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAClC,OAAO,IAAI,IAAI,CAAC;CAChB;AAED,oFAAoF;AACpF,eAAO,MAAM,UAAU,uBAAuB,CAAC;AAE/C,2EAA2E;AAC3E,eAAO,MAAM,UAAU,iBAAiB,CAAC;AAMzC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,gBAAgB,EACrD,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,CAAC,GACR,WAAW,CAAC,CAAC,CAAC,CA+BhB;AAED;;;GAGG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAa,MAAM,QAAQ,CAAC;AACvD,OAAO,EAON,KAAK,aAAa,EAIlB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB;AAaD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,uBAAuB,GAAG,IAAI,CA8B1D;AAID;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAkBD,wBAAgB,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,YAAY,CAEhE;AAED,oEAAoE;AACpE,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKtE;AAsBD,oEAAoE;AACpE,wBAAgB,YAAY,CAC3B,OAAO,EAAE,uBAAuB,GAC9B,uBAAuB,CAMzB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAK7E;AAqBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAG1E;AA8BD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,uBAAuB,yDAExD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC7B,OAAO,EAAE,uBAAuB,GAC9B,IAAI,CAAC,uBAAuB,EAAE,SAAS,GAAG,cAAc,CAAC,CAQ3D;AAED,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB;IAChE,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC7B,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAClC,OAAO,IAAI,IAAI,CAAC;CAChB;AAED,oFAAoF;AACpF,eAAO,MAAM,UAAU,uBAAuB,CAAC;AAE/C,2EAA2E;AAC3E,eAAO,MAAM,UAAU,iBAAiB,CAAC;AAMzC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,gBAAgB,EACrD,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,CAAC,GACR,WAAW,CAAC,CAAC,CAAC,CAqChB;AAED;;;GAGG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/dist/styles.css

@@ -18,6 +18,9 @@
        built around 320px; an embedded flow (@leadbot/components) can widen or
        narrow the whole conversation by overriding this one token. */
     --leadbot-flow-max-width: 320px;
+    /* Chat panel height. Fixed by design: the panel must not grow or shrink with
+       message count or starter count. Clamped by the viewport at render time. */
+    --leadbot-chat-height: 520px;
     /* Border radius */
     --leadbot-radius-sm: 6px;
     --leadbot-radius-md: 8px;
@@ -523,7 +526,7 @@
     border-radius: var(--leadbot-radius-card);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
     max-width: 360px;
-    max-height: max(0px, var(--leadbot-available-height));
+    height: min(var(--leadbot-chat-height), max(0px, var(--leadbot-available-height)));
     min-width: 360px;
     min-height: 0;
     overflow: hidden;
@@ -603,7 +606,9 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    flex: 1 1 360px;
+    /* Fills whatever the fixed-height panel leaves over; never sets the panel's
+       own height, so starters appearing or unmounting can't resize the card. */
+    flex: 1 1 auto;
   }
   .leadbot-components {
     /* ---- Message bubbles ---- */
@@ -641,7 +646,12 @@
     justify-content: flex-end;
     gap: 6px;
     padding: 4px 16px 8px;
-    flex-shrink: 0;
+    /* The starters are the only footer row that may give up space: on a short
+       viewport (landscape phone) the panel can't fit header + starters + composer,
+       and a clipped composer would make the chat unusable. They scroll instead. */
+    flex-shrink: 1;
+    min-height: 0;
+    overflow-y: auto;
   }
   .leadbot-components .leadbot-chatbot-starter-btn {
     background: var(--leadbot-color-surface);
@@ -1498,6 +1508,10 @@
   .leadbot-components .leadbot-whatsapp-chat {
     padding: 16px;
     min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
     background: linear-gradient(to bottom, var(--leadbot-whatsapp-wallpaper) 0%, var(--leadbot-whatsapp-wallpaper-end) 100%);
   }
   .leadbot-components .leadbot-whatsapp-message {
@@ -1507,18 +1521,74 @@
     max-width: 100%;
     position: relative;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    --leadbot-whatsapp-bubble-from: -24px;
+    animation: leadbot-whatsapp-bubble-in 0.28s var(--leadbot-ease-appear) backwards;
   }
   .leadbot-components .leadbot-whatsapp-message::before {
     content: "";
     position: absolute;
     left: -8px;
-    top: 16px;
+    top: 6px; /* ponytail: hugs the rounded corner and still fits short bubbles (typing dots) */
     width: 0;
     height: 0;
     border: 8px solid transparent;
     border-right-color: var(--leadbot-whatsapp-bubble);
     border-left: none;
   }
+  .leadbot-components {
+    /* Visitor's own message, echoed back while we ask for the phone number. */
+  }
+  .leadbot-components .leadbot-whatsapp-message-outgoing {
+    align-self: flex-end;
+    background: var(--leadbot-whatsapp-green);
+    --leadbot-whatsapp-bubble-from: 24px;
+  }
+  .leadbot-components .leadbot-whatsapp-message-outgoing::before {
+    left: auto;
+    right: -8px;
+    border-right: none;
+    border-left: 8px solid var(--leadbot-whatsapp-green);
+  }
+  .leadbot-components .leadbot-whatsapp-message-outgoing .leadbot-whatsapp-message-content {
+    color: var(--leadbot-whatsapp-on-green);
+  }
+  .leadbot-components {
+    /* Bubbles slide in from their own side, the way WhatsApp lands a message;
+       the side comes from --leadbot-whatsapp-bubble-from. */
+  }
+  @keyframes leadbot-whatsapp-bubble-in {
+    from {
+      opacity: 0;
+      transform: translateX(var(--leadbot-whatsapp-bubble-from));
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  .leadbot-components {
+    /* Reply-is-coming indicator, same bubble shape as a real message. */
+  }
+  .leadbot-components .leadbot-whatsapp-typing {
+    padding: 12px;
+  }
+  .leadbot-components .leadbot-whatsapp-typing-dots {
+    display: flex;
+    gap: 4px;
+  }
+  .leadbot-components .leadbot-whatsapp-typing-dots span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--leadbot-color-text-subtle);
+    animation: leadbot-typing-bounce 1.4s infinite var(--leadbot-ease-loop);
+  }
+  .leadbot-components .leadbot-whatsapp-typing-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  .leadbot-components .leadbot-whatsapp-typing-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
   .leadbot-components .leadbot-whatsapp-message-content {
     color: var(--leadbot-whatsapp-bubble-text);
     font-size: var(--leadbot-font-size);
@@ -1838,6 +1908,7 @@
     border: 0;
     border-radius: 0;
     box-shadow: none;
+    height: auto;
     max-height: none;
     max-width: none;
     overflow: visible;
@@ -1895,6 +1966,24 @@
     background: color-mix(in srgb, var(--leadbot-primary) 8%, var(--leadbot-color-surface));
     border-color: var(--leadbot-primary);
   }
+  .leadbot-step-stub {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 14px;
+    border: 1px dashed #d97706;
+    border-radius: var(--leadbot-radius-md, 8px);
+    background: #fffbeb;
+    color: #7c2d12;
+    font-family: inherit;
+    font-size: var(--leadbot-font-size-sm);
+    line-height: 1.4;
+  }
+  .leadbot-step-stub--quiet {
+    border-color: var(--leadbot-color-border, #e5e7eb);
+    background: transparent;
+    color: var(--leadbot-color-text-muted, #6b7280);
+  }
   @keyframes fadeSlide {
     from {
       opacity: 0;

package/dist/useStep.d.ts

@@ -1,4 +1,5 @@
-import { type Step, type StepAttributes } from "@leadbot/core";
+import { type VNode } from "preact";
+import { type Lang, type Step, type StepAttributes } from "@leadbot/core";
 import { type LeadbotComponentsConfig } from "./mount";
 export interface StepOptions extends LeadbotComponentsConfig {
     /**
@@ -9,6 +10,51 @@ export interface StepOptions extends LeadbotComponentsConfig {
     id: string;
 }
 export type PublishedStep = Step<Partial<StepAttributes>>;
+/**
+ * A resolved mount: the published step, plus whether the flow has come back
+ * without it. `missing` is what turns a typo'd id from "renders nothing" into
+ * something a developer can see — see {@link StepStub}.
+ */
+export interface StepResolution {
+    step: PublishedStep | null;
+    missing: boolean;
+    /** The flow was refused with a 403 — a broken install, not a paused bot. */
+    forbidden: boolean;
+}
+/**
+ * Placeholder for a mount whose `id` resolved to nothing. Two different
+ * placeholders, for two different audiences:
+ *
+ * - The developer one, naming the ids that resolved to nothing, on a dev host,
+ *   in the dashboard preview or with `debug: true` — never on a plain
+ *   production page, where an unpublished bot legitimately renders nothing.
+ * - The visitor one (`forbidden`), when the collector refused this install with
+ *   a 403. That is a broken install rather than an expected state, so it does
+ *   render in production — quietly, localized, and naming nothing.
+ */
+export declare function StepStub(options: {
+    id?: string;
+    leadbotId?: number;
+    preview?: boolean;
+    debug?: boolean;
+    forbidden?: boolean;
+    /** Language for the visitor-facing `forbidden` copy. */
+    lang?: Lang;
+}): VNode | null;
+/** The subset of a mount's options {@link StepStub} renders from, with the
+ * `init()` defaults merged in. */
+export declare function stubProps(options: {
+    id?: string;
+} & LeadbotComponentsConfig): {
+    id: string | undefined;
+    leadbotId: number | undefined;
+    preview: boolean | undefined;
+    debug: boolean | undefined;
+};
+/** {@link useStep} plus the "flow came back without it" flag. */
+export declare function usePublishedStep(options: Omit<StepOptions, "id"> & {
+    id?: string;
+}): StepResolution;
 /**
  * Resolves the published step behind `id` from the page's boot fetch. Null
  * while the fetch is pending, when no id is given, or when the flow has no

package/dist/useStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStep.d.ts","sourceRoot":"","sources":["../src/useStep.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,KAAK,uBAAuB,EAAY,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,WAAY,SAAQ,uBAAuB;IAC3D;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;AAE1D;;;;GAIG;AACH,wBAAgB,OAAO,CAEtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD,aAAa,GAAG,IAAI,CAkEtB"}
+{"version":3,"file":"useStep.d.ts","sourceRoot":"","sources":["../src/useStep.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAEN,KAAK,IAAI,EAET,KAAK,IAAI,EACT,KAAK,cAAc,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACN,KAAK,uBAAuB,EAI5B,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,WAAY,SAAQ,uBAAuB;IAC3D;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;AAE1D;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;CACnB;AAkBD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ,GAAG,KAAK,GAAG,IAAI,CAoCf;AAED;kCACkC;AAClC,wBAAgB,SAAS,CAAC,OAAO,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,uBAAuB;;;;;EAQ3E;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAC/B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD,cAAc,CA4EhB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAEtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD,aAAa,GAAG,IAAI,CAEtB"}

package/dist/whatsapp-B3GO1RDT.cjs

@@ -0,0 +1 @@
+const e=require("./jsxRuntime.module-CT7yzySL.cjs"),t=require("./i18n-gV6rxSod.cjs");let n=require("@leadbot/core");var r=t.a(`en`);function i(r){let i=t.i(r),{step:a,missing:o,forbidden:s}=e.i(r),c=a?.attributes??{},l=r.phoneNumber??c.sender_number??c.phone_number??``,u=c.text,d=r.eventLabel??a?.event_label??void 0,f=(0,n.formSchemaToFields)(c.form_schema)[0],p=t.a(i),m={...p,contactName:c.sender_name??p.contactName,...r.labels},[h,g]=e.l(r.prefilledMessage??``),[_,v]=e.l(null),[y,b]=e.l(!1);return l?e.t(`div`,{className:`leadbot-whatsapp-interface`,children:[e.t(`div`,{className:`leadbot-whatsapp-header`,children:e.t(`div`,{className:`leadbot-whatsapp-contact-info`,children:e.t(`div`,{className:`leadbot-whatsapp-contact-details`,children:[e.t(`div`,{className:`leadbot-whatsapp-name`,children:m.contactName}),e.t(`div`,{className:`leadbot-whatsapp-status`,children:m.status})]})})}),u&&e.t(`div`,{className:`leadbot-whatsapp-chat`,children:e.t(`div`,{className:`leadbot-whatsapp-message`,children:e.t(`div`,{className:`leadbot-whatsapp-message-content`,children:u})})}),e.t(`div`,{className:`leadbot-whatsapp-input-container`,children:[_&&e.t(`div`,{className:`leadbot-form-error`,children:_}),e.t(`form`,{onSubmit:async t=>{t.preventDefault();let i=h.trim();if(!i||y)return;v(null);let o={message:i};if(r.onSubmit&&await r.onSubmit(o)===!1)return;b(!0);let s=!0;try{let t=e.b(r),o=await t.postJson(`/client/submit`,(0,n.buildSubmitPayload)({domainKey:t.domainKey,leadbotId:r.leadbotId,stepUuid:r.id,stepType:`whatsapp`,visitorId:(0,n.getOrCreateVisitorId)(),userData:{[f?.uuid??`message`]:{value:i,type:`text`,label:f?.label??m.messageLabel,required:!0}},analytics:(0,n.buildAnalytics)(),components:!0,event_label:d,marks_as_qualified:r.marksAsQualified??a?.marks_as_qualified??void 0,chat_session_id:(0,n.getActiveChatSession)(),...e.y(r)}));if(!o.ok)throw Error(`Server error: ${o.status}`)}catch(e){s=!1,v(m.submitError),r.onError?.(e)}let c=(0,n.createWhatsAppUrl)(l,i);if(!c){v(m.redirectError),b(!1);return}s&&(0,n.getTracker)().trackWhatsAppRedirect({event_label:d}),window.open(c,`_blank`,`noopener,noreferrer`),r.onSuccess?.(o),g(``),b(!1)},children:e.t(`div`,{className:`leadbot-whatsapp-input-bar`,children:[e.t(`input`,{type:`text`,className:`leadbot-whatsapp-message-field`,placeholder:m.placeholder,value:h,disabled:y,onInput:e=>g(e.currentTarget.value)}),e.t(`button`,{type:`submit`,className:`leadbot-whatsapp-send-btn${y?` leadbot-whatsapp-send-disabled`:``}`,disabled:y,children:e.t(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`none`,children:e.t(`path`,{d:`M2.5 10L17.5 3.5L12.5 17L9.5 11L2.5 10Z`,stroke:`currentColor`,strokeWidth:`1.6`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]})})]})]}):o?e.t(e.n,{...e.r(r),forbidden:s,lang:i}):null}function a(t,n){return e.h(i,t,n)}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/dist/whatsapp-DGnyaume.js

@@ -0,0 +1,128 @@
+import { b as e, g as t, h as n, i as r, l as i, n as a, r as o, t as s, x as c } from "./jsxRuntime.module-DsRxbn3o.js";
+import { a as l, i as u } from "./i18n-DyDsn-Fk.js";
+import { buildSubmitPayload as d, createWhatsAppUrl as f, formSchemaToFields as p, getActiveChatSession as m, getOrCreateVisitorId as h, getTracker as g } from "@leadbot/core";
+//#region src/whatsapp.tsx
+var _ = l("en");
+function v(t) {
+	let _ = u(t), { step: v, missing: y, forbidden: b } = r(t), x = v?.attributes ?? {}, S = t.phoneNumber ?? x.sender_number ?? x.phone_number ?? "", C = x.text, w = t.eventLabel ?? v?.event_label ?? void 0, T = p(x.form_schema)[0], E = l(_), D = {
+		...E,
+		contactName: x.sender_name ?? E.contactName,
+		...t.labels
+	}, [O, k] = i(t.prefilledMessage ?? ""), [A, j] = i(null), [M, N] = i(!1);
+	return S ? /* @__PURE__ */ s("div", {
+		className: "leadbot-whatsapp-interface",
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "leadbot-whatsapp-header",
+				children: /* @__PURE__ */ s("div", {
+					className: "leadbot-whatsapp-contact-info",
+					children: /* @__PURE__ */ s("div", {
+						className: "leadbot-whatsapp-contact-details",
+						children: [/* @__PURE__ */ s("div", {
+							className: "leadbot-whatsapp-name",
+							children: D.contactName
+						}), /* @__PURE__ */ s("div", {
+							className: "leadbot-whatsapp-status",
+							children: D.status
+						})]
+					})
+				})
+			}),
+			C && /* @__PURE__ */ s("div", {
+				className: "leadbot-whatsapp-chat",
+				children: /* @__PURE__ */ s("div", {
+					className: "leadbot-whatsapp-message",
+					children: /* @__PURE__ */ s("div", {
+						className: "leadbot-whatsapp-message-content",
+						children: C
+					})
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "leadbot-whatsapp-input-container",
+				children: [A && /* @__PURE__ */ s("div", {
+					className: "leadbot-form-error",
+					children: A
+				}), /* @__PURE__ */ s("form", {
+					onSubmit: async (r) => {
+						r.preventDefault();
+						let i = O.trim();
+						if (!i || M) return;
+						j(null);
+						let a = { message: i };
+						if (t.onSubmit && await t.onSubmit(a) === !1) return;
+						N(!0);
+						let o = !0;
+						try {
+							let r = c(t), a = await r.postJson("/client/submit", d({
+								domainKey: r.domainKey,
+								leadbotId: t.leadbotId,
+								stepUuid: t.id,
+								stepType: "whatsapp",
+								visitorId: h(),
+								userData: { [T?.uuid ?? "message"]: {
+									value: i,
+									type: "text",
+									label: T?.label ?? D.messageLabel,
+									required: !0
+								} },
+								analytics: n(),
+								components: !0,
+								event_label: w,
+								marks_as_qualified: t.marksAsQualified ?? v?.marks_as_qualified ?? void 0,
+								chat_session_id: m(),
+								...e(t)
+							}));
+							if (!a.ok) throw Error(`Server error: ${a.status}`);
+						} catch (e) {
+							o = !1, j(D.submitError), t.onError?.(e);
+						}
+						let s = f(S, i);
+						if (!s) {
+							j(D.redirectError), N(!1);
+							return;
+						}
+						o && g().trackWhatsAppRedirect({ event_label: w }), window.open(s, "_blank", "noopener,noreferrer"), t.onSuccess?.(a), k(""), N(!1);
+					},
+					children: /* @__PURE__ */ s("div", {
+						className: "leadbot-whatsapp-input-bar",
+						children: [/* @__PURE__ */ s("input", {
+							type: "text",
+							className: "leadbot-whatsapp-message-field",
+							placeholder: D.placeholder,
+							value: O,
+							disabled: M,
+							onInput: (e) => k(e.currentTarget.value)
+						}), /* @__PURE__ */ s("button", {
+							type: "submit",
+							className: `leadbot-whatsapp-send-btn${M ? " leadbot-whatsapp-send-disabled" : ""}`,
+							disabled: M,
+							children: /* @__PURE__ */ s("svg", {
+								width: "20",
+								height: "20",
+								viewBox: "0 0 20 20",
+								fill: "none",
+								children: /* @__PURE__ */ s("path", {
+									d: "M2.5 10L17.5 3.5L12.5 17L9.5 11L2.5 10Z",
+									stroke: "currentColor",
+									strokeWidth: "1.6",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						})]
+					})
+				})]
+			})
+		]
+	}) : y ? /* @__PURE__ */ s(a, {
+		...o(t),
+		forbidden: b,
+		lang: _
+	}) : null;
+}
+function y(e, n) {
+	return t(v, e, n);
+}
+//#endregion
+export { _ as n, y as r, v as t };

package/dist/whatsapp.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./jsxRuntime.module-CT7yzySL.cjs"),t=require("./whatsapp-B3GO1RDT.cjs");let n=require("@leadbot/core");exports.ComponentsWhatsApp=t.t,exports.DEFAULT_WHATSAPP_LABELS=t.n,exports.ROOT_CLASS=e.m,Object.defineProperty(exports,"buildAnalytics",{enumerable:!0,get:function(){return n.buildAnalytics}}),exports.init=e._,exports.loadFlow=e.v,exports.mountWhatsApp=t.r,exports.useStep=e.a;

package/dist/whatsapp.d.ts

@@ -8,6 +8,7 @@ export interface WhatsAppLabels {
     submitError: string;
     redirectError: string;
 }
+/** English label set; every other language comes from the same table. */
 export declare const DEFAULT_WHATSAPP_LABELS: WhatsAppLabels;
 export interface WhatsAppOptions extends BaseMountOptions, StepOptions {
     /** Id of the component leadbot this component belongs to (dashboard → Settings → Components). */

package/dist/whatsapp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"whatsapp.d.ts","sourceRoot":"","sources":["../src/whatsapp.tsx"],"names":[],"mappings":"AAUA,OAAO,EACN,KAAK,gBAAgB,EAGrB,KAAK,WAAW,EAGhB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,KAAK,WAAW,EAAW,MAAM,WAAW,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,cASrC,CAAC;AAOF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,WAAW;IACrE,iGAAiG;IACjG,SAAS,EAAE,MAAM,CAAC;IAClB,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KACzB,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,uCAwIxD;AAED,wBAAgB,aAAa,CAC5B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,eAAe,GACtB,WAAW,CAAC,eAAe,CAAC,CAE9B"}
+{"version":3,"file":"whatsapp.d.ts","sourceRoot":"","sources":["../src/whatsapp.tsx"],"names":[],"mappings":"AAUA,OAAO,EACN,KAAK,gBAAgB,EAGrB,KAAK,WAAW,EAGhB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACN,KAAK,WAAW,EAIhB,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,cAAc;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACtB;AAED,yEAAyE;AACzE,eAAO,MAAM,uBAAuB,EAAE,cAAqC,CAAC;AAO5E,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,WAAW;IACrE,iGAAiG;IACjG,SAAS,EAAE,MAAM,CAAC;IAClB,iGAAiG;IACjG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KACzB,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,uCA8IxD;AAED,wBAAgB,aAAa,CAC5B,EAAE,EAAE,WAAW,EACf,OAAO,EAAE,eAAe,GACtB,WAAW,CAAC,eAAe,CAAC,CAE9B"}

package/dist/whatsapp.js

@@ -0,0 +1,3 @@
+import { a as e, h as t, m as n, v as r, y as i } from "./jsxRuntime.module-DsRxbn3o.js";
+import { n as a, r as o, t as s } from "./whatsapp-DGnyaume.js";
+export { s as ComponentsWhatsApp, a as DEFAULT_WHATSAPP_LABELS, n as ROOT_CLASS, t as buildAnalytics, r as init, i as loadFlow, o as mountWhatsApp, e as useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leadbot/components",
-  "version": "2.21.1",
+  "version": "2.24.1",
   "description": "LeadBot Components: mount agent chat, forms, callback/email requests and WhatsApp handoff into your own DOM.",
   "license": "MIT",
   "publishConfig": {
@@ -11,31 +11,59 @@
   "sideEffects": [
     "*.css"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./form": {
+      "types": "./dist/entries/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs"
+    },
+    "./chat": {
+      "types": "./dist/entries/chat.d.ts",
+      "import": "./dist/chat.js",
+      "require": "./dist/chat.cjs"
+    },
+    "./whatsapp": {
+      "types": "./dist/entries/whatsapp.d.ts",
+      "import": "./dist/whatsapp.js",
+      "require": "./dist/whatsapp.cjs"
+    },
+    "./buttons": {
+      "types": "./dist/entries/buttons.d.ts",
+      "import": "./dist/buttons.js",
+      "require": "./dist/buttons.cjs"
+    },
+    "./flow": {
+      "types": "./dist/entries/flow.d.ts",
+      "import": "./dist/flow.js",
+      "require": "./dist/flow.cjs"
     },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "dependencies": {
-    "@leadbot/core": "2.21.1"
+    "@leadbot/core": "2.24.1"
   },
   "devDependencies": {
-    "happy-dom": "^20.8.9",
-    "preact": "^10.29.1",
-    "sass-embedded": "^1.99.0",
+    "happy-dom": "^20.11.6",
+    "preact": "^10.29.8",
+    "sass-embedded": "^1.103.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4"
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.json && sass --no-source-map src/styles/index.scss dist/styles.css",
+    "build": "vite build && tsc -p tsconfig.json && rm -f dist/global.d.ts dist/global.d.ts.map && sass --no-source-map src/styles/index.scss dist/styles.css",
+    "build:cdn": "vite build --config vite.cdn.config.ts",
     "test": "vitest run"
   }
 }