@morgan-and-morgan/intake-agent 1.0.0-alpha.1 → 1.0.0-alpha.11

package/README.md

@@ -21,6 +21,10 @@ placeholder, don't bump it by hand.
 | `release/**` | `x.y.z-beta.N` | `beta` |
 | `main` | `x.y.z` | `latest` |
 
+Each bundle also carries its matching chat environment: development for
+`alpha`, UAT for `beta`, and production for `latest`. `data-chat-url` remains
+an explicit override.
+
 `fix:` bumps the patch, `feat:` the minor, a `BREAKING CHANGE:` footer the
 major. Every release is tagged `intake-agent-vx.y.z`.
 
@@ -28,5 +32,11 @@ major. Every release is tagged `intake-agent-vx.y.z`.
 
 | Attribute | Default | Purpose |
 | --- | --- | --- |
-| `data-chat-url` | `/embed/intake` | Chat iframe target (resolved against the loader's origin) |
+| `data-chat-url` | Release environment URL | Chat iframe target |
 | `data-auto-open` | `false` | Open the chat immediately after mount |
+
+The consultation modal reads `window.drupalSettings.mxPopup`, falling back to
+`window.mxChatbotSettings.mxPopup` when the Drupal field is absent. Only the
+boolean `false` suppresses the modal, including calls to `showPrompt()`.
+Missing settings preserve the usual display rules. Settings are read when the
+modal is about to appear; the launcher and chat remain available.

package/dist/mm-intake-widget.js

@@ -1,45 +1,133 @@
 (function() {
   "use strict";
-  const DEFAULT_CHAT_PATH = "/embed/intake";
   const readLoaderConfig = (script, baseUri) => {
     var _a;
     const scriptUrl = new URL(script.src, baseUri);
-    const chatUrl = new URL((_a = script.dataset.chatUrl) != null ? _a : DEFAULT_CHAT_PATH, scriptUrl).href;
+    const bundledChatUrl = "https://chat.mx2.dev/embed/intake";
+    const chatUrl = new URL((_a = script.dataset.chatUrl) != null ? _a : bundledChatUrl, scriptUrl).href;
     return {
+      assetBaseUrl: new URL(".", scriptUrl).href,
       autoOpen: script.dataset.autoOpen === "true",
       chatOrigin: new URL(chatUrl).origin,
       chatUrl
     };
   };
-  const OPEN_STATE_KEY = "mm-intake-widget-open";
-  const UNREAD_STATE_KEY = "mm-intake-widget-unread";
-  const readFlag = (key, storage) => {
+  const ATTRIBUTION_FIELD_MAX_LENGTH = {
+    tracked_landing_page: 4096,
+    tracked_landing_timestamp: 255,
+    conversion_page: 255,
+    ga_client_id: 255,
+    gclid_value: 255,
+    marketing_source: 255,
+    marketing_sub_source: 255
+  };
+  const ATTRIBUTION_FIELDS = Object.keys(ATTRIBUTION_FIELD_MAX_LENGTH);
+  const sanitizeIntakeChatAttribution = (value) => {
+    if (value === null || typeof value !== "object" || Array.isArray(value)) {
+      return null;
+    }
+    const record = value;
+    const sanitized = {};
+    for (const field of ATTRIBUTION_FIELDS) {
+      const fieldValue = record[field];
+      const trimmed = typeof fieldValue === "string" ? fieldValue.trim() : "";
+      if (trimmed !== "") {
+        sanitized[field] = trimmed.slice(0, ATTRIBUTION_FIELD_MAX_LENGTH[field]);
+      }
+    }
+    return Object.keys(sanitized).length === 0 ? null : sanitized;
+  };
+  const LANDING_PAGE_COOKIES = ["trackedLandingPage", "tracked_landing_page"];
+  const LANDING_TIMESTAMP_COOKIES = ["trackedLandingPageTimestamp", "tracked_landing_timestamp"];
+  const readTimestampCookie = (cookie) => {
+    const raw = readFirstCookie(cookie, LANDING_TIMESTAMP_COOKIES);
+    return raw === void 0 ? void 0 : decodeCookieValue(raw);
+  };
+  const readCookie = (cookie, name) => {
+    var _a;
+    const raw = (_a = cookie.split(";").map((entry) => entry.trim()).find((entry) => entry.startsWith(`${name}=`))) == null ? void 0 : _a.slice(name.length + 1);
+    return raw === void 0 || raw === "" ? void 0 : raw;
+  };
+  const readFirstCookie = (cookie, names) => {
+    for (const name of names) {
+      const raw = readCookie(cookie, name);
+      if (raw !== void 0) {
+        return raw;
+      }
+    }
+    return void 0;
+  };
+  const decodeCookieValue = (raw) => {
     try {
-      return storage.getItem(key) === "true";
+      return decodeURIComponent(raw);
     } catch {
-      return false;
+      return raw;
     }
   };
-  const writeFlag = (key, value, storage) => {
+  const parseUrl = (value) => {
     try {
-      storage.setItem(key, String(value));
+      return new URL(value);
     } catch {
+      return null;
+    }
+  };
+  const readLandingPage = (cookie) => {
+    const raw = readFirstCookie(cookie, LANDING_PAGE_COOKIES);
+    if (raw === void 0 || parseUrl(raw) !== null) {
+      return raw;
+    }
+    const decoded = decodeCookieValue(raw);
+    return parseUrl(decoded) === null ? raw : decoded;
+  };
+  const readGaClientId = (cookie) => {
+    const raw = readCookie(cookie, "_ga");
+    if (raw === void 0) {
+      return void 0;
     }
+    const value = decodeCookieValue(raw);
+    const parts = value.split(".");
+    return parts.length >= 4 ? parts.slice(-2).join(".") : value;
   };
-  const readOpenState = (storage = sessionStorage) => readFlag(OPEN_STATE_KEY, storage);
-  const writeOpenState = (isOpen, storage = sessionStorage) => writeFlag(OPEN_STATE_KEY, isOpen, storage);
-  const readUnreadState = (storage = sessionStorage) => {
+  const readGclid = (landingUrl) => {
+    var _a, _b;
+    return landingUrl === void 0 ? void 0 : (_b = (_a = parseUrl(landingUrl)) == null ? void 0 : _a.searchParams.get("gclid")) != null ? _b : void 0;
+  };
+  const readPathname = (url) => {
+    var _a;
+    return (_a = parseUrl(url)) == null ? void 0 : _a.pathname;
+  };
+  const buildHostAttribution = (currentUrl = globalThis.location.href, cookie = document.cookie) => {
+    var _a;
+    const landingPage = readLandingPage(cookie);
+    return (_a = sanitizeIntakeChatAttribution({
+      tracked_landing_page: landingPage,
+      tracked_landing_timestamp: readTimestampCookie(cookie),
+      conversion_page: readPathname(currentUrl),
+      ga_client_id: readGaClientId(cookie),
+      gclid_value: readGclid(landingPage)
+    })) != null ? _a : {};
+  };
+  const OPEN_STATE_KEY = "mm-intake-widget-open";
+  const readOpenState = (storage = sessionStorage) => {
     try {
-      return storage.getItem(UNREAD_STATE_KEY) !== "false";
+      return storage.getItem(OPEN_STATE_KEY) === "true";
     } catch {
       return false;
     }
   };
-  const writeUnreadState = (hasUnread, storage = sessionStorage) => writeFlag(UNREAD_STATE_KEY, hasUnread, storage);
+  const writeOpenState = (isOpen, storage = sessionStorage) => {
+    try {
+      storage.setItem(OPEN_STATE_KEY, String(isOpen));
+    } catch {
+    }
+  };
   const EMBED_PROTOCOL_VERSION = 1;
   const EMBED_MESSAGE_TYPE = Object.freeze({
     HOST_READY: "mm:intake:host-ready",
     CHILD_READY: "mm:intake:child-ready",
+    // Host asks the embedded chat to put the caret in its composer. Kept
+    // separate from HOST_READY so signing-card handshakes never steal focus.
+    FOCUS_COMPOSER: "mm:intake:focus-composer",
     SIGNING_REQUESTED: "mm:intake:signing-requested",
     SIGNING_RECORDED: "mm:intake:signing-recorded",
     // Chat asks the host page for a signed-in token; the host answers with
@@ -57,11 +145,18 @@
     // belongs to the focused field, so losing it means the keyboard is already
     // leaving — which the host's own visual viewport only admits ~500ms later.
     CARET_STATE: "mm:intake:caret-state",
-    // Chat tells the host an inbound AI or operator message just landed, so the
-    // launcher's unread dot can mean something. Payload-free: the dot is a dot,
-    // and only the chat knows a message arrived while only the host knows whether
-    // the panel was closed at the time.
-    MESSAGE_RECEIVED: "mm:intake:message-received"
+    // Chat tells the host an inbound AI or operator message just landed. Kept in
+    // the protocol for a future unread affordance; the TEXT US sticky has no badge
+    // today. Payload-free: only the chat knows a message arrived while only the
+    // host knows whether the panel was closed at the time.
+    MESSAGE_RECEIVED: "mm:intake:message-received",
+    // Chat asks the host for a fresh attribution snapshot right before a /chat
+    // turn; the host answers with ATTRIBUTION as `{ attribution }`. The snapshot
+    // sent with HOST_READY is read once at mount and races the marketing site's
+    // async first-touch cookie write (MX2-26181), so the landing URL — and the
+    // gclid parsed out of it — can only be caught by re-reading at send time.
+    GET_ATTRIBUTION: "mm:intake:get-attribution",
+    ATTRIBUTION: "mm:intake:attribution"
   });
   const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
   const isEmbedProtocolMessage = (value, type) => isRecord(value) && value.type === type && value.version === EMBED_PROTOCOL_VERSION && isRecord(value.payload);
@@ -116,6 +211,13 @@
       return null;
     }
   };
+  const hasCompletedSigningEvent = (currentUrl = globalThis.location.href) => {
+    try {
+      return new URL(currentUrl).searchParams.get("event") === SIGNING_COMPLETE_EVENT;
+    } catch {
+      return false;
+    }
+  };
   const LUCIDE_ICON_PATHS = {
     "message-circle": '<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',
     "x": '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
@@ -130,98 +232,75 @@
   };
   const FULL_PAGE_PANEL_QUERY = "(max-width:600px),(max-height:500px)";
   const lucideIcon = (name, className, strokeWidth = 2) => `<svg class="${className}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${String(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${LUCIDE_ICON_PATHS[name]}</svg>`;
-  const CHAT_ICON = lucideIcon("message-circle", "mm-icon mm-icon-chat");
   const OPEN_CLOSE_ICON = lucideIcon("x", "mm-icon mm-icon-close");
+  const PROMPT_CLOSE_ICON = lucideIcon("x", "mm-prompt-close-icon", 2.5);
   const WIDGET_STYLES = [
     ':host{all:initial;color-scheme:light;--mm-yellow:#fdeb01;--mm-yellow-hover:#f5de00;--mm-yellow-pressed:#e6cc00;--mm-blue:#115099;--mm-blue-hover:#0b3568;--mm-ink:#111;--mm-white:#fff;--mm-surface-blue:#f3f8ff;--mm-chrome:#e8eef2;--mm-line:#e2e8f0;--mm-muted:#545454;--mm-green:#0f9d58;--mm-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}',
     "*,*::before,*::after{box-sizing:border-box}",
     "button{font:inherit}",
-    "@keyframes mm-launcher-in{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}",
+    "@keyframes mm-launcher-in{from{opacity:0;transform:translateX(8px) scale(.94)}to{opacity:1;transform:none}}",
+    "@keyframes mm-close-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}",
     "@keyframes mm-panel-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}",
     "@keyframes mm-panel-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.98)}}",
-    "@keyframes mm-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}",
-    // Same register as the chat's own typing dots (typing-indicator.tsx): rest at
-    // .4 opacity, pulse to full with a 1.2x scale, each dot a beat behind the last.
+    "@keyframes mm-prompt-backdrop-in{from{opacity:0}to{opacity:1}}",
+    "@keyframes mm-prompt-card-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}",
     "@keyframes mm-dot{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}",
-    // The launcher stacks above the chat panel: it is the only close affordance
-    // (the panel is chrome-free), so the full-screen mobile panel must not cover it.
+    // Closed: LivePerson TEXT US sticky under the chat layer. Open: swap for a
+    // blue X disc above the chat so there is always a clear close control.
+    // Same asset as forthepeople.com (button-text-us-white-bg), already rotated
+    // 90deg CW like GTM. Placement matches #messaging_gbm: top 42%, ~38px thick,
+    // no translateY(-50%). right:10px keeps a small inset from the viewport edge.
     // Against the host page the near-max z-index is only the fallback for
     // browsers without the Popover API — everywhere else the mount rides the top
     // layer (widget.ts) and outranks any host z-index.
-    ".mm-launcher{position:fixed;right:24px;bottom:24px;z-index:2147483001;display:grid;width:64px;height:64px;place-items:center;border:2px solid var(--mm-white);border-radius:999px;outline:none;background:var(--mm-yellow);color:var(--mm-ink);box-shadow:0 10px 28px rgba(17,17,17,.24);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;animation:mm-launcher-in .25s ease-out;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}",
+    ".mm-launcher{position:fixed;right:10px;top:42%;z-index:2147482999;display:grid;place-items:center;width:auto;height:auto;padding:0;border:0;border-radius:0;outline:none;background:transparent;color:var(--mm-ink);box-shadow:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform:none;animation:mm-launcher-in .28s cubic-bezier(.23,1,.32,1) both;transition:transform .15s cubic-bezier(.23,1,.32,1),filter .15s ease,background-color .15s ease}",
     ".mm-launcher *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}",
-    ".mm-launcher:hover{background:var(--mm-yellow-hover);box-shadow:0 12px 32px rgba(17,17,17,.28);transform:translateY(-1px)}",
-    ".mm-launcher:active{background:var(--mm-yellow-pressed);transform:translateY(0)}",
+    ".mm-launcher:hover{transform:translateX(-2px);filter:drop-shadow(0 4px 10px rgba(17,17,17,.18))}",
+    ".mm-launcher:active{transform:none;filter:none}",
     ".mm-launcher:focus-visible{outline:3px solid var(--mm-blue);outline-offset:3px}",
-    ".mm-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border:2px solid var(--mm-white);border-radius:999px;background:var(--mm-blue)}",
-    '.mm-badge::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:var(--mm-blue);animation:mm-ping 2.4s ease-out infinite}',
-    ".mm-icon{position:absolute;top:50%;left:50%;display:block;width:28px;height:28px;pointer-events:none;transform:translate(-50%,-50%)}",
-    ".mm-icon-close{display:none}",
-    '.mm-launcher[aria-expanded="true"] .mm-icon-chat{display:none}',
+    ".mm-text-us{display:block;width:38px;height:auto;pointer-events:none}",
+    ".mm-icon{position:absolute;top:50%;left:50%;display:none;width:22px;height:22px;pointer-events:none;transform:translate(-50%,-50%)}",
+    // Open on desktop: X sits on the chat's top-right corner (chat is bottom:24,
+    // height min(640px, 100vh - 48px)).
+    '.mm-launcher[aria-expanded="true"]{top:calc(100vh - 24px - min(640px,100vh - 48px) + 12px);right:36px;bottom:auto;z-index:2147483001;width:44px;height:44px;border-radius:999px;background:var(--mm-blue);color:var(--mm-white);box-shadow:0 4px 14px rgba(17,17,17,.2);transform:none;animation:mm-close-in .2s cubic-bezier(.23,1,.32,1) both;filter:none}',
+    '.mm-launcher[aria-expanded="true"]:hover,.mm-launcher[aria-expanded="true"]:active{transform:none;filter:none;background:var(--mm-blue-hover)}',
+    '.mm-launcher[aria-expanded="true"] .mm-text-us{display:none}',
     '.mm-launcher[aria-expanded="true"] .mm-icon-close{display:block}',
-    // The panel wears the chat's header/trust-line tint, not its conversation
-    // tint. Measured on iOS 26: while the panel is full-page, Safari takes the
-    // colour of its own status-bar and URL-bar bands straight off this background
-    // — ahead of the host page's `theme-color` and root background, which it
-    // ignores outright once the chat frame has committed a navigation. So this is
-    // the lever that decides what the bands look like, and the bands sit right
-    // against the chat's header and trust line.
-    // Two flat halves rather than one colour, because the two bands are sampled
-    // independently: the top one always sits against the chat header, while the
-    // bottom one sits against the trust line or, with a keyboard up, the composer.
-    ".mm-chat{position:fixed;right:24px;bottom:100px;z-index:2147483000;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 132px));overflow:hidden;border:1px solid var(--mm-line);border-radius:20px;background:linear-gradient(to bottom,var(--mm-chrome) 0 50%,var(--mm-panel-bottom,var(--mm-chrome)) 50% 100%);box-shadow:0 5px 25px rgba(0,0,0,.2);animation:mm-panel-in .18s ease-out both;font-family:var(--mm-font)}",
-    // Keyboard up, the chat drops its trust line and the composer becomes the
-    // bottom-most surface, so the bottom band has to follow the composer. Only
-    // the bottom: the header is still up there against the top one.
+    ".mm-chat{position:fixed;right:24px;bottom:24px;z-index:2147483000;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100vh - 48px));overflow:hidden;border:1px solid var(--mm-line);border-radius:20px;background:linear-gradient(to bottom,var(--mm-chrome) 0 50%,var(--mm-panel-bottom,var(--mm-chrome)) 50% 100%);box-shadow:0 5px 25px rgba(0,0,0,.2);animation:mm-panel-in .18s ease-out both;font-family:var(--mm-font)}",
     '.mm-chat[data-keyboard="open"]{--mm-panel-bottom:var(--mm-surface-blue)}',
     '.mm-chat[data-state="closing"]{pointer-events:none;animation-name:mm-panel-out}',
     '.mm-chat[data-state="closed"]{visibility:hidden;animation-name:none}',
     ".mm-frame-wrap{position:relative;min-height:0;flex:1;background:linear-gradient(to bottom,var(--mm-chrome) 0 50%,var(--mm-panel-bottom,var(--mm-chrome)) 50% 100%)}",
-    // A chat tone, never white: the frame paints this in the gap between the
-    // document's load event and the app's first frame, and on a phone that gap is
-    // the whole screen.
     ".mm-frame{display:block;width:100%;height:100%;border:0;background:var(--mm-chrome)}",
     ".mm-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--mm-chrome)}",
     ".mm-dot{width:8px;height:8px;border-radius:999px;background:var(--mm-muted);animation:mm-dot 1.2s ease-in-out infinite}",
     ".mm-dot:nth-child(2){animation-delay:.15s}",
     ".mm-dot:nth-child(3){animation-delay:.3s}",
+    ".mm-prompt-backdrop{position:fixed;inset:0;z-index:2147483002;display:grid;place-items:center;padding:16px;overscroll-behavior:contain;touch-action:none;background:rgba(0,0,0,.64);animation:mm-prompt-backdrop-in .25s cubic-bezier(.23,1,.32,1) both;font-family:var(--mm-font)}",
+    ".mm-prompt-card{position:relative;width:min(632px,calc(100vw - 32px),calc((100vh - 32px)*1.26148));aspect-ratio:632/501;animation:mm-prompt-card-in .25s cubic-bezier(.23,1,.32,1) both}",
+    ".mm-prompt-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}",
+    ".mm-prompt-open,.mm-prompt-close{position:absolute;border:0;outline:none;background:transparent;cursor:pointer}",
+    ".mm-prompt-open{inset:0;border-radius:24px}",
+    ".mm-prompt-close{top:4.5%;right:3.1%;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--mm-white)}",
+    '.mm-prompt-close::before{content:"";position:absolute;width:28px;height:28px;border-radius:999px;background:#050505;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:background-color .12s ease}',
+    ".mm-prompt-close-icon{position:relative;display:block;width:16px;height:16px;pointer-events:none}",
+    ".mm-prompt-close:hover::before{background:#252525}",
+    ".mm-prompt-open:focus-visible{outline:3px solid var(--mm-yellow);outline-offset:-8px}",
+    ".mm-prompt-close:focus-visible{outline:none}",
+    ".mm-prompt-close:focus-visible::before{background:#050505;box-shadow:inset 0 0 0 2px var(--mm-yellow),0 1px 4px rgba(0,0,0,.35)}",
     "[hidden]{display:none!important}",
-    // The close affordance rides the same tracked viewport as the panel: iOS
-    // Safari pans the page when the keyboard opens, and a launcher pinned to the
-    // layout viewport's top would be panned clean off the screen with it.
-    //
-    // `min-height:0` on the panel so a short landscape viewport shrinks it all the
-    // way down instead of overflowing the screen and clipping the chat's own
-    // rotate-your-phone overlay.
-    //
-    // 16px from the corner is right for a normal host site, which has nothing of
-    // its own down there. A host that mounts its own bottom chrome — the client
-    // portal and its tab bar — sets `--mm-launcher-bottom` on any ancestor of the
-    // mount (custom properties reach into the shadow tree) to lift the launcher
-    // clear of it. Only the closed launcher: open, it moves to the top corner and
-    // tracks the viewport instead.
-    // `left:0;right:0` rather than `width:100vw`: `100vw` counts the classic
-    // scrollbar the host page still has behind us, so a right-anchored panel that
-    // wide starts a scrollbar's width off the left edge and clips its own header.
-    //
-    // The shadow fills the strip below the panel. Safari's bottom bar is
-    // translucent once it collapses — scrolled down, or any time the keyboard is
-    // up — and `visualViewport.height` stops short of it, so the host page shows
-    // through underneath the chat. `lvh - svh` is exactly that bar's height, and
-    // it is 0 wherever the browser has no collapsing bar, so this costs nothing
-    // there. A shadow rather than extra height: the trust line and composer must
-    // stay above the bar, not slide under it.
-    `@media ${FULL_PAGE_PANEL_QUERY}{.mm-launcher{right:16px;bottom:var(--mm-launcher-bottom,16px)}.mm-launcher[aria-expanded="true"]{top:calc(var(--mm-viewport-top,0px) + 10px);right:10px;bottom:auto;width:44px;height:44px;box-shadow:0 4px 14px rgba(17,17,17,.2)}.mm-launcher[aria-expanded="true"] .mm-icon{width:22px;height:22px}.mm-chat{left:0;right:0;top:var(--mm-viewport-top,auto);bottom:0;width:auto;height:var(--mm-viewport-height,100dvh);min-height:0;border:0;border-radius:0;box-shadow:0 calc(100lvh - 100svh) 0 var(--mm-panel-bottom,var(--mm-chrome))}}`,
-    "@media(prefers-reduced-motion:reduce){.mm-launcher,.mm-chat{animation:none;transition:none}.mm-badge::after,.mm-dot{animation:none}}"
+    `@media ${FULL_PAGE_PANEL_QUERY}{.mm-launcher[aria-expanded="true"]{top:calc(var(--mm-viewport-top,0px) + 10px);right:10px;bottom:auto;width:44px;height:44px}.mm-chat{left:0;right:0;top:var(--mm-viewport-top,auto);bottom:0;width:auto;height:var(--mm-viewport-height,100dvh);min-height:0;border:0;border-radius:0;box-shadow:0 calc(100lvh - 100svh) 0 var(--mm-panel-bottom,var(--mm-chrome))}}`,
+    "@media(forced-colors:active){.mm-prompt-close:focus-visible{outline:2px solid ButtonText;outline-offset:-9px}}",
+    "@media(prefers-reduced-motion:reduce){.mm-launcher,.mm-chat{animation:none;transition:none}.mm-prompt-card{animation-name:mm-prompt-backdrop-in}.mm-dot{animation:none}}"
   ].join("");
-  const WIDGET_MARKUP = [
+  const widgetMarkup = (launcherImageUrl, promptImageUrl) => [
     `<style>${WIDGET_STYLES}</style>`,
-    `<button class="mm-launcher" type="button" aria-label="Open intake chat" aria-expanded="false" draggable="false">${CHAT_ICON}${OPEN_CLOSE_ICON}<span class="mm-badge" aria-hidden="true" hidden></span></button>`,
+    `<button class="mm-launcher" type="button" aria-label="Open intake chat" aria-expanded="false" draggable="false"><img class="mm-text-us" src="${launcherImageUrl}" alt="" width="38" height="147" decoding="async" />${OPEN_CLOSE_ICON}</button>`,
     '<section class="mm-chat" role="dialog" aria-label="Morgan and Morgan intake chat" inert hidden>',
-    // Dots rather than a sentence: the panel is up for a second or two and a line
-    // of copy reads like an error the visitor has to act on. The label carries the
-    // same information for a screen reader.
     '<div class="mm-frame-wrap"><div class="mm-loading" role="status" aria-label="Loading secure chat"><span class="mm-dot"></span><span class="mm-dot"></span><span class="mm-dot"></span></div><iframe class="mm-frame mm-chat-frame" title="Morgan and Morgan intake chat" referrerpolicy="strict-origin-when-cross-origin"></iframe></div>',
+    "</section>",
+    '<section class="mm-prompt-backdrop" role="dialog" aria-modal="true" aria-label="Start your free consultation" inert hidden>',
+    `<div class="mm-prompt-card"><img class="mm-prompt-image" src="${promptImageUrl}" alt="Our team is available 24/7. Chat with a real person. Click to start your free consultation." width="632" height="501" decoding="async" /><button class="mm-prompt-open" type="button" aria-label="Message us about a free consultation"></button><button class="mm-prompt-close" type="button" aria-label="Dismiss consultation prompt">${PROMPT_CLOSE_ICON}</button></div>`,
     "</section>"
   ].join("");
   const requireElement = (shadow, selector) => {
@@ -231,38 +310,66 @@
     }
     return element;
   };
-  const renderWidgetShell = (shadow) => {
-    shadow.innerHTML = WIDGET_MARKUP;
+  const renderWidgetShell = (shadow, launcherImageUrl, promptImageUrl) => {
+    shadow.innerHTML = widgetMarkup(launcherImageUrl, promptImageUrl);
     return {
       chatDialog: requireElement(shadow, ".mm-chat"),
       chatFrame: requireElement(shadow, ".mm-chat-frame"),
       chatLoading: requireElement(shadow, ".mm-loading"),
       launcher: requireElement(shadow, ".mm-launcher"),
-      unreadBadge: requireElement(shadow, ".mm-badge")
+      promptBackdrop: requireElement(shadow, ".mm-prompt-backdrop"),
+      promptClose: requireElement(shadow, ".mm-prompt-close"),
+      promptOpen: requireElement(shadow, ".mm-prompt-open")
     };
   };
   const PANEL_ANIMATION_MS = 180;
+  const PROMPT_DELAY_MS = 5e3;
+  const PROMPT_COOLDOWN_MS = 24 * 60 * 60 * 1e3;
+  const PROMPT_COOLDOWN_KEY = "mm-intake-widget-prompt-dismissed-at";
+  const PROMPT_SESSION_KEY = "mm-intake-widget-prompt-dismissed";
   const CHAT_CHROME_COLOR = "#e8eef2";
   const KEYBOARD_MIN_SHRINK_PX = 100;
   const CHAT_READY_FALLBACK_MS = 4e3;
-  const getLauncherLabel = (isOpen, hasUnread) => {
-    if (isOpen) {
-      return "Close intake chat";
-    }
-    return hasUnread ? "Open intake chat, new message" : "Open intake chat";
-  };
   const cleanSigningReturnUrl = () => {
     const cleanedReturnUrl = buildSigningReturnUrl();
     if (cleanedReturnUrl !== null) {
       globalThis.history.replaceState(globalThis.history.state, "", cleanedReturnUrl);
     }
   };
+  const hasPromptCooldown = () => {
+    try {
+      if (globalThis.sessionStorage.getItem(PROMPT_SESSION_KEY) === "true") {
+        return true;
+      }
+    } catch {
+    }
+    try {
+      const dismissedAt = Number(globalThis.localStorage.getItem(PROMPT_COOLDOWN_KEY));
+      return Number.isFinite(dismissedAt) && dismissedAt > 0 && Date.now() - dismissedAt < PROMPT_COOLDOWN_MS;
+    } catch {
+      return false;
+    }
+  };
+  const rememberPromptDismissal = () => {
+    try {
+      globalThis.sessionStorage.setItem(PROMPT_SESSION_KEY, "true");
+    } catch {
+    }
+    try {
+      globalThis.localStorage.setItem(PROMPT_COOLDOWN_KEY, String(Date.now()));
+    } catch {
+    }
+  };
   const mountIntakeWidget = (config, onDestroy) => {
     var _a;
     const mount = document.createElement("div");
     mount.dataset.mmIntakeWidget = "";
     const shadow = mount.attachShadow({ mode: "open" });
-    const elements = renderWidgetShell(shadow);
+    const assetUrl = (fileName) => {
+      var _a2;
+      return new URL(fileName, (_a2 = config.assetBaseUrl) != null ? _a2 : `${config.chatOrigin}/intake-widget/`).href;
+    };
+    const elements = renderWidgetShell(shadow, assetUrl("button-text-us.png"), assetUrl("consultation-prompt.webp"));
     document.body.append(mount);
     if (typeof mount.showPopover === "function") {
       mount.setAttribute("popover", "manual");
@@ -272,26 +379,18 @@
       } catch {
       }
     }
-    const completedSigningEnvelopeId = readCompletedSigningEnvelopeId();
+    const returnedFromSigning = hasCompletedSigningEvent();
     let chatHasLoaded = false;
     let chatCloseTimer;
     let chatReadyTimer;
+    let promptTimer;
+    let promptReturnFocus = null;
     let isKeyboardOpen = false;
     let hasReleasedKeyboardEarly = false;
-    let hasUnread = readUnreadState();
-    const loadUnreadIndicator = () => {
-      elements.unreadBadge.hidden = !hasUnread;
-      syncLauncherLabel();
-    };
-    const setHasUnread = (next) => {
-      hasUnread = next;
-      writeUnreadState(next);
-      loadUnreadIndicator();
-    };
     const syncLauncherLabel = () => {
       const isOpen = elements.chatDialog.dataset.state === "open";
       elements.launcher.setAttribute("aria-expanded", String(isOpen));
-      elements.launcher.setAttribute("aria-label", getLauncherLabel(isOpen, hasUnread));
+      elements.launcher.setAttribute("aria-label", isOpen ? "Close intake chat" : "Open intake chat");
     };
     const postToChat = (message) => {
       var _a2;
@@ -303,11 +402,25 @@
       const hostUrl = buildSigningReturnUrl(currentUrl);
       postToChat(
         createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.HOST_READY, {
+          // Marketing attribution (MX2-25162): the marketing site's first-touch
+          // cookies and the page the chat opened on are only visible from this
+          // page, never from the cross-origin chat frame. The chat forwards them
+          // on its first /chat turn and Salesforce builds the intake's
+          // Marketing_Tracking_Info__c record from them.
+          attribution: buildHostAttribution(),
           ...hostUrl === null ? {} : { hostUrl },
-          ...completedEnvelopeId === null ? {} : { completedEnvelopeId }
+          ...completedEnvelopeId === null ? {} : { completedEnvelopeId },
+          // Sent even without an envelope id: the Salesforce service is what
+          // appends `envelope_id` to the return URL, and the prod org has shipped
+          // without that append. The chat's signing card falls back to its own
+          // envelope id on this flag.
+          ...hasCompletedSigningEvent(currentUrl) ? { signingComplete: true } : {}
         })
       );
     };
+    const focusChatComposer = () => {
+      postToChat(createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.FOCUS_COMPOSER));
+    };
     const answerAuthTokenRequest = async () => {
       var _a2;
       let token;
@@ -330,6 +443,33 @@
       chatReadyTimer = void 0;
       elements.chatLoading.hidden = true;
     };
+    const dismissPrompt = (returnFocus = false) => {
+      globalThis.clearTimeout(promptTimer);
+      promptTimer = void 0;
+      const wasVisible = !elements.promptBackdrop.hidden;
+      elements.promptBackdrop.hidden = true;
+      elements.promptBackdrop.setAttribute("inert", "");
+      rememberPromptDismissal();
+      if (returnFocus && wasVisible) {
+        const focusTarget = (promptReturnFocus == null ? void 0 : promptReturnFocus.isConnected) === true ? promptReturnFocus : elements.launcher;
+        promptReturnFocus = null;
+        focusTarget.focus();
+      }
+    };
+    const showPrompt = () => {
+      var _a2, _b, _c;
+      globalThis.clearTimeout(promptTimer);
+      promptTimer = void 0;
+      const host = globalThis;
+      const mxPopup = (_c = (_a2 = host.drupalSettings) == null ? void 0 : _a2.mxPopup) != null ? _c : (_b = host.mxChatbotSettings) == null ? void 0 : _b.mxPopup;
+      if (mxPopup === false || hasPromptCooldown() || elements.chatDialog.dataset.state === "open") {
+        return;
+      }
+      promptReturnFocus = document.activeElement instanceof HTMLElement && document.activeElement !== mount ? document.activeElement : null;
+      elements.promptBackdrop.hidden = false;
+      elements.promptBackdrop.removeAttribute("inert");
+      elements.promptClose.focus();
+    };
     const syncViewport = () => {
       const viewport = globalThis.visualViewport;
       if (!viewport || viewport.height === 0) {
@@ -448,19 +588,21 @@
       stopViewportTracking();
     };
     const openChat = () => {
+      dismissPrompt();
       globalThis.clearTimeout(chatCloseTimer);
       chatCloseTimer = void 0;
       elements.chatDialog.hidden = false;
       elements.chatDialog.dataset.state = "open";
       elements.chatDialog.removeAttribute("aria-hidden");
       elements.chatDialog.removeAttribute("inert");
-      setHasUnread(false);
+      syncLauncherLabel();
       startViewportTracking();
       ensureChatLoaded();
       elements.chatFrame.focus();
       writeOpenState(true);
       if (chatHasLoaded) {
         postHostReady();
+        focusChatComposer();
       }
     };
     const closeChat = () => {
@@ -496,12 +638,19 @@
         if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.CHILD_READY)) {
           revealChat();
           postHostReady();
+          if (elements.chatDialog.dataset.state === "open") {
+            focusChatComposer();
+          }
           return;
         }
         if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.AUTH_TOKEN_REQUEST)) {
           void answerAuthTokenRequest();
           return;
         }
+        if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.GET_ATTRIBUTION)) {
+          postToChat(createEmbedProtocolMessage(EMBED_MESSAGE_TYPE.ATTRIBUTION, { attribution: buildHostAttribution() }));
+          return;
+        }
         if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.CARET_STATE)) {
           if (message.payload.isFocused === true) {
             hasReleasedKeyboardEarly = false;
@@ -511,9 +660,6 @@
           return;
         }
         if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.MESSAGE_RECEIVED)) {
-          if (elements.chatDialog.dataset.state !== "open") {
-            setHasUnread(true);
-          }
           return;
         }
         if (isEmbedProtocolMessage(message, EMBED_MESSAGE_TYPE.SIGNING_REQUESTED)) {
@@ -526,9 +672,24 @@
       }
     };
     const handleKeydown = (event) => {
+      if (event.key === "Tab" && !elements.promptBackdrop.hidden) {
+        const { activeElement } = shadow;
+        if (!event.shiftKey && activeElement === elements.promptClose) {
+          event.preventDefault();
+          elements.promptOpen.focus();
+        } else if (event.shiftKey && activeElement === elements.promptOpen) {
+          event.preventDefault();
+          elements.promptClose.focus();
+        }
+        return;
+      }
       if (event.key !== "Escape") {
         return;
       }
+      if (!elements.promptBackdrop.hidden) {
+        dismissPrompt(true);
+        return;
+      }
       if (elements.chatDialog.dataset.state === "open") {
         closeChat();
       }
@@ -537,6 +698,7 @@
       stopViewportTracking();
       globalThis.clearTimeout(chatCloseTimer);
       globalThis.clearTimeout(chatReadyTimer);
+      globalThis.clearTimeout(promptTimer);
       globalThis.removeEventListener("message", handleMessage);
       document.removeEventListener("keydown", handleKeydown);
       mount.remove();
@@ -549,6 +711,13 @@
         openChat();
       }
     });
+    elements.promptOpen.addEventListener("click", openChat);
+    elements.promptClose.addEventListener("click", () => dismissPrompt(true));
+    elements.promptBackdrop.addEventListener("click", (event) => {
+      if (event.target === elements.promptBackdrop) {
+        dismissPrompt(true);
+      }
+    });
     elements.chatDialog.addEventListener("animationend", (event) => {
       if (event.target === elements.chatDialog) {
         finishChatClose();
@@ -562,14 +731,17 @@
     });
     globalThis.addEventListener("message", handleMessage);
     document.addEventListener("keydown", handleKeydown);
-    loadUnreadIndicator();
-    if (completedSigningEnvelopeId !== null || readOpenState()) {
+    syncLauncherLabel();
+    if (returnedFromSigning || readOpenState()) {
       openChat();
+    } else if (!hasPromptCooldown()) {
+      promptTimer = globalThis.setTimeout(showPrompt, PROMPT_DELAY_MS);
     }
     return Object.freeze({
       close: closeChat,
       destroy,
       open: openChat,
+      showPrompt,
       version: EMBED_PROTOCOL_VERSION
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morgan-and-morgan/intake-agent",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "description": "Embeddable chat widget loader.",
   "license": "UNLICENSED",
   "files": [
@@ -11,6 +11,7 @@
   "exports": {
     ".": "./dist/mm-intake-widget.js",
     "./widget": "./src/widget.ts",
+    "./attribution": "./src/attribution.ts",
     "./protocol": "./src/protocol.ts",
     "./signing": "./src/signing.ts",
     "./loader-config": "./src/loader-config.ts"
@@ -22,6 +23,7 @@
     "build": "pnpm run build:bundle",
     "build:bundle": "node scripts/generate-icons.mjs && vite build",
     "generate:icons": "node scripts/generate-icons.mjs",
+    "test": "node --test 'src/*.test.mjs'",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.ts\" --quiet",
     "lint:fix": "eslint \"src/**/*.ts\" --quiet --fix",