@morgan-and-morgan/intake-agent 1.0.0-alpha.18 → 1.0.0-alpha.19

package/README.md

@@ -52,6 +52,19 @@ modal is about to appear; the launcher and chat remain available. Set suppressio
 before loading the embed when using a zero-second delay, so the first display
 check sees the intended setting.
 
+## Chat launcher design
+
+The [Figma launcher](https://www.figma.com/design/0SxWl42gdhx08KFe2ldpd8/MM-Design-System-v4.0?node-id=21250-170681)
+is displayed at roughly 70% size as a 45 × 140 px tab on the right edge. It uses
+live HTML text and an accessible button name, with Nunito Sans loaded through the
+existing shared font registration.
+The original 199 × 64 px layout, typography, and spacing stay intact. One transform
+rotates and scales the content; `LAUNCHER_SCALE` also determines the rounded button
+dimensions so the click target and focus outline fit the visible tab.
+`launcher-chat.svg` is the original 48 × 48 vector export from node `21252:170716`,
+so it stays sharp at 3× and higher pixel densities. Keep the CDN and portal copies
+identical. Retain `button-text-us.png` for older deployed widget versions.
+
 ## Consultation prompt design
 
 The responsive prompt follows the [desktop and mobile Figma layouts](https://www.figma.com/design/0SxWl42gdhx08KFe2ldpd8/MM-Design-System-v4.0?node-id=21250-169311).

package/dist/launcher-chat.svg

@@ -0,0 +1,23 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chat 1" clip-path="url(#clip0_0_4)">
+<path id="Vector" d="M43.8261 40.2077C46.5258 37.3111 47.9976 33.7303 47.9976 29.9994C47.9976 25.3311 45.6915 21.1034 41.9982 18.1037C41.9138 28.7995 31.8555 37.4986 19.5005 37.4986H11.1388C14.3729 42.8325 20.9441 46.4977 28.4995 46.4977H46.4977C47.107 46.4977 47.6507 46.1321 47.8851 45.5697C48.1194 45.0072 47.9882 44.3604 47.557 43.9386L43.8261 40.2077Z" fill="url(#paint0_linear_0_4)"/>
+<path id="Vector_2" d="M19.5005 1.50228C8.74842 1.50228 0.00243725 8.89841 0.00243725 18.0006C0.00243725 21.7315 1.47416 25.303 4.17389 28.2089L0.443018 31.9398C0.0118113 32.371 -0.119425 33.0178 0.114926 33.5709C0.349277 34.1333 0.892972 34.4989 1.50228 34.4989H19.5005C30.2525 34.4989 38.9985 27.1028 38.9985 18.0006C38.9985 8.89841 30.2525 1.50228 19.5005 1.50228Z" fill="url(#paint1_linear_0_4)"/>
+<g id="Group">
+<path id="Vector_3" d="M28.4995 13.5011H10.5014C9.67645 13.5011 9.00152 14.176 9.00152 15.0009C9.00152 15.8258 9.67645 16.5008 10.5014 16.5008H28.4995C29.3245 16.5008 29.9994 15.8258 29.9994 15.0009C29.9994 14.176 29.3245 13.5011 28.4995 13.5011Z" fill="white"/>
+<path id="Vector_4" d="M22.5002 19.5005H10.5014C9.67645 19.5005 9.00152 20.1754 9.00152 21.0003C9.00152 21.8252 9.67645 22.5002 10.5014 22.5002H22.5002C23.3251 22.5002 24 21.8252 24 21.0003C24 20.1754 23.3251 19.5005 22.5002 19.5005Z" fill="white"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_4" x1="29.5694" y1="18.1037" x2="29.5694" y2="46.4977" gradientUnits="userSpaceOnUse">
+<stop offset="0.418269" stop-color="#FFEC00"/>
+<stop offset="1" stop-color="#E2D100"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_4" x1="-2.52862e-06" y1="18.0006" x2="38.9985" y2="18.0006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0163D2"/>
+<stop offset="1" stop-color="#4C9FFD"/>
+</linearGradient>
+<clipPath id="clip0_0_4">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/mm-intake-widget.js

@@ -161,7 +161,7 @@
     // 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. Kept in
-    // the protocol for a future unread affordance; the TEXT US sticky has no badge
+    // the protocol for a future unread affordance; the chat launcher 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",
@@ -236,8 +236,16 @@
   const designSystemColors = {
     // Colors/Base/black
     "base-black": "#000000",
+    // Colors/Base/white
+    "base-white": "#ffffff",
+    // Colors/Neutral/500
+    "neutral-500": "#737373",
+    // Colors/Neutral/900
+    "neutral-900": "#171717",
     // Colors/Primary/100
     "primary-100": "#f3f8ff",
+    // Colors/Primary/600
+    "primary-600": "#135ebf",
     // Colors/Primary/800
     "primary-800": "#132a4e",
     // Colors/Primary/900
@@ -245,7 +253,9 @@
     // Colors/Secondary/500
     "secondary-500": "#ffec00",
     // Colors/Secondary/700
-    "secondary-700": "#e2d100"
+    "secondary-700": "#e2d100",
+    // Component colors/Alpha/alpha-black-20
+    "alpha-black-20": "#00000033"
   };
   const PROMPT_FONTS = [
     {
@@ -377,6 +387,9 @@
   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 OPEN_CLOSE_ICON = lucideIcon("x", "mm-icon mm-icon-close");
+  const LAUNCHER_SCALE = 0.7;
+  const LAUNCHER_WIDTH = Math.ceil(64 * LAUNCHER_SCALE);
+  const LAUNCHER_HEIGHT = Math.ceil(199 * LAUNCHER_SCALE);
   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}",
@@ -388,26 +401,26 @@
     "@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)}}",
-    // 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: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}",
+    // The same button becomes the close control while the chat is open.
+    `.mm-launcher{position:fixed;right:0;top:42%;top:max(0px,min(42%,calc(100dvh - ${String(LAUNCHER_HEIGHT + 8)}px)));z-index:2147482999;display:grid;place-items:center;width:${String(LAUNCHER_WIDTH)}px;height:${String(LAUNCHER_HEIGHT)}px;padding:0;border:0;border-radius:${String(16 * LAUNCHER_SCALE)}px 0 0 ${String(16 * LAUNCHER_SCALE)}px;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:filter .15s ease,background-color .15s ease}`,
     ".mm-launcher *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}",
-    ".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-text-us{display:block;width:38px;height:auto;pointer-events:none}",
+    ".mm-launcher:hover{filter:brightness(.97)}",
+    ".mm-launcher:active{filter:none}",
+    ".mm-launcher:focus-visible{outline:3px solid var(--mm-blue);outline-offset:-3px}",
+    // Keep Figma's original horizontal layout; rotate and scale it as one unit.
+    `.mm-launcher-content{position:absolute;top:50%;left:50%;display:flex;align-items:center;gap:12px;width:199px;height:64px;padding:8px 12px 8px 8px;transform:translate(-50%,-50%) rotate(90deg) scale(${String(LAUNCHER_SCALE)});border-radius:0 0 16px 16px;background:${designSystemColors["base-white"]};box-shadow:0 0 0 .5px ${designSystemColors["neutral-500"]},inset 0 0 0 .5px ${designSystemColors["neutral-500"]},0 4px 12px ${designSystemColors["alpha-black-20"]};pointer-events:none}`,
+    ".mm-launcher-chat-icon{display:block;flex:none;width:48px;height:48px}",
+    `.mm-launcher-copy{display:flex;flex:none;flex-direction:column;width:119px;height:46px;text-align:left;white-space:nowrap;font-family:"MMIntakeNunitoSans",var(--mm-font);font-weight:700;font-variation-settings:"YTLC" 500,"wdth" 100;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:${designSystemColors["neutral-900"]}}`,
+    ".mm-launcher-title{font-size:20px;line-height:27px;margin-bottom:-2px}",
+    `.mm-launcher-subtitle{font-size:14px;line-height:21px;color:${designSystemColors["primary-600"]}}`,
+    "@media(forced-colors:active){.mm-launcher-content{outline:1px solid ButtonText}.mm-launcher:focus-visible{outline-color:Highlight}}",
     ".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"]:focus-visible{outline-offset:3px}',
+    '.mm-launcher[aria-expanded="true"] .mm-launcher-content{display:none}',
     '.mm-launcher[aria-expanded="true"] .mm-icon-close{display:block}',
     ".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)}',
@@ -426,7 +439,7 @@
   ].join("");
   const widgetMarkup = (assetUrl) => [
     `<style>${WIDGET_STYLES}</style>`,
-    `<button class="mm-launcher" type="button" aria-label="Open intake chat" aria-expanded="false" draggable="false"><img class="mm-text-us" src="${assetUrl("button-text-us.png")}" alt="" width="38" height="147" decoding="async" />${OPEN_CLOSE_ICON}</button>`,
+    `<button class="mm-launcher" type="button" aria-label="Chat now, see if you qualify" aria-expanded="false" draggable="false"><span class="mm-launcher-content" aria-hidden="true"><img class="mm-launcher-chat-icon" src="${assetUrl("launcher-chat.svg")}" alt="" width="48" height="48" decoding="async" /><span class="mm-launcher-copy"><span class="mm-launcher-title">CHAT NOW</span><span class="mm-launcher-subtitle">See if you qualify</span></span></span>${OPEN_CLOSE_ICON}</button>`,
     '<section class="mm-chat" role="dialog" aria-label="Morgan and Morgan intake chat" inert hidden>',
     '<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>",
@@ -526,7 +539,7 @@
     const syncLauncherLabel = () => {
       const isOpen = elements.chatDialog.dataset.state === "open";
       elements.launcher.setAttribute("aria-expanded", String(isOpen));
-      elements.launcher.setAttribute("aria-label", isOpen ? "Close intake chat" : "Open intake chat");
+      elements.launcher.setAttribute("aria-label", isOpen ? "Close intake chat" : "Chat now, see if you qualify");
     };
     const postToChat = (message) => {
       var _a2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morgan-and-morgan/intake-agent",
-  "version": "1.0.0-alpha.18",
+  "version": "1.0.0-alpha.19",
   "description": "Embeddable chat widget loader.",
   "license": "UNLICENSED",
   "files": [