@pmeweb/plugin-chat 1.0.0 → 1.2.0

package/src/strings.js

@@ -21,19 +21,21 @@ export const STRINGS = {
     messageLabel: 'Votre message',
     send: 'Envoyer',
     live: 'Vous répond en direct',
+    relay: '{name} a pris le relais',
+    relayGeneric: 'Une personne de l’équipe a pris le relais',
     connecting: 'Connexion…',
     reconnecting: 'Connexion perdue, reconnexion…',
     notSent: 'Non envoyé.',
     retry: 'Réessayer',
     ended: 'Cette conversation est terminée.',
     newConversation: 'Nouvelle conversation',
-    reload: 'Le clavardage a été mis à jour. Rechargez la page pour continuer.',
-    unavailable: 'Le clavardage n’est pas disponible pour le moment.',
-    turnstile: 'La vérification anti-robot n’a pas abouti. Réessayez.',
-    tooMany: 'Trop de messages en peu de temps. Réessayez dans une minute.',
+    reload: 'Rechargez la page pour continuer.',
+    unavailable: 'Un problème est survenu. Réessayez dans un moment.',
+    turnstile: 'L’envoi n’a pas abouti. Réessayez.',
+    tooMany: 'Un instant, puis réessayez.',
     fallbackTitle: 'Laissez-nous vos coordonnées',
-    fallbackCap: 'L’assistant ne peut plus répondre aujourd’hui. Laissez vos coordonnées et on vous recontactera.',
-    fallbackDown: 'L’assistant ne peut pas répondre pour le moment. Laissez vos coordonnées et on vous recontactera.',
+    fallbackCap: 'Laissez vos coordonnées et nous vous recontacterons.',
+    fallbackDown: 'Laissez vos coordonnées et nous vous recontacterons.',
     name: 'Votre nom',
     contact: 'Téléphone ou courriel',
     need: 'Votre demande',
@@ -66,19 +68,21 @@ export const STRINGS = {
     messageLabel: 'Your message',
     send: 'Send',
     live: 'Replying live',
+    relay: '{name} took over',
+    relayGeneric: 'A team member took over',
     connecting: 'Connecting…',
     reconnecting: 'Connection lost, reconnecting…',
     notSent: 'Not sent.',
     retry: 'Retry',
     ended: 'This conversation has ended.',
     newConversation: 'New conversation',
-    reload: 'The chat was updated. Reload the page to continue.',
-    unavailable: 'The chat is not available right now.',
-    turnstile: 'The anti-robot check did not go through. Try again.',
-    tooMany: 'Too many messages in a short time. Try again in a minute.',
+    reload: 'Reload the page to continue.',
+    unavailable: 'Something went wrong. Try again in a moment.',
+    turnstile: 'Sending did not go through. Try again.',
+    tooMany: 'One moment, then try again.',
     fallbackTitle: 'Leave us your details',
-    fallbackCap: 'The assistant cannot answer any more today. Leave your details and we will get back to you.',
-    fallbackDown: 'The assistant cannot answer right now. Leave your details and we will get back to you.',
+    fallbackCap: 'Leave your details and we will get back to you.',
+    fallbackDown: 'Leave your details and we will get back to you.',
     name: 'Your name',
     contact: 'Phone or email',
     need: 'Your request',

package/src/trigger.js

@@ -4,17 +4,31 @@
 // onInteraction: press, hover, focus, key) and opened on a click. Off the site's real hosts the
 // panel runs its demo (manifest preview: test); the widget decides that, not this file.
 //
+// THE DEMO FOLLOWS THE URL FRAGMENT, off the real hosts only (phase 4 spec 2.4), so the portal's
+// preview switches views without a rebuild: `#pmw-chat=panel` imports the widget at once and opens
+// the panel, `#pmw-chat=bubble` closes it; read on load and on `hashchange`. The name
+// (`pmw-chat-botName`) is the widget's to read. No opener is scheduled there: it would cover the
+// preview the portal is showing.
+//
 // The opener shows once per visit (sessionStorage), on the first of: 20 s on the page, 30 % of the
 // page scrolled, or exit intent (a fine pointer leaving through the top of the window). Never while
-// the panel is open, never again once dismissed or once the panel has been opened.
-import { onInteraction as interact } from '@pmeweb/loader'
+// the panel is open, never again once dismissed or once the panel has been opened, and never while
+// the footer is in view (it waits for the next trigger then). On a phone it fades out after 8 s:
+// that is chat.css (an animation), not code, to keep this file under its budget.
+//
+// OUT OF THE FOOTER'S WAY, on the real hosts only (off them the bubble is the preview's subject).
+// While the first `[data-pmw-chat-avoid]`, else the page's last `footer`, is in view, the root is
+// `inert` (out of the tab order and the accessibility tree): chat.css fades it out, then turns it
+// `visibility: hidden`. Never while the panel is open or while focus is inside the root: a focusout
+// re-checks, so closing the panel near the footer hides the bubble once focus moves on.
+import { isCanonical, onInteraction as interact } from '@pmeweb/loader'
 
 export const OPENER_KEY = 'pmw-chat-opener'
 export const OPENER_DELAY_MS = 20000
 export const OPENER_SCROLL = 0.3
 
 export function startChat({
-  doc = document, win = window, importLazy = (u) => import(/* @vite-ignore */ u), onInteraction = interact,
+  doc = document, win = window, hostname = win.location.hostname, importLazy = (u) => import(/* @vite-ignore */ u), onInteraction = interact,
 } = {}) {
   const root = doc.getElementById('pmw-chat')
   if (!root) return null
@@ -23,21 +37,40 @@ export function startChat({
   let widget = null
   const load = () => (widget ??= importLazy(root.dataset.pmwLazy).then((m) => m.mountChat(root), (e) => { widget = null; throw e }))
   onInteraction(root, () => load().catch(() => {}))
+  const canonical = isCanonical({ doc, hostname })
+  if (!canonical) {
+    const view = () => {
+      const v = new URLSearchParams(win.location.hash.slice(1)).get('pmw-chat')
+      if (v === 'panel' && !root.hasAttribute('data-open')) load().then((w) => w.open(), () => {})
+      else if (v === 'bubble' && widget) widget.then((w) => w.close(), () => {})
+    }
+    view()
+    win.addEventListener('hashchange', view)
+  }
+
+  let away = false
+  const sync = (f = doc.activeElement) => {
+    const h = away && !root.hasAttribute('data-open') && !root.contains(f)
+    root.toggleAttribute('inert', h)
+  }
+  const zone = doc.querySelector('[data-pmw-chat-avoid]') ?? [...doc.querySelectorAll('footer')].pop()
+  if (canonical && zone) {
+    new win.IntersectionObserver((l) => { away = l.at(-1).isIntersecting; sync() }).observe(zone)
+    root.addEventListener('focusout', (e) => sync(e.relatedTarget))
+  }
 
   const store = win.sessionStorage
   let done = false
   try { done = !!store?.getItem(OPENER_KEY) } catch { /* storage blocked: show once per page */ }
-  const listeners = []
-  const on = (t, ev, f) => { t.addEventListener(ev, f, { passive: true }); listeners.push([t, ev, f]) }
-  let timer
+  // The scroll and exit listeners stay after the opener is done: they return at once (no layout read).
+  const on = (t, ev, f) => t.addEventListener(ev, (e) => done || f(e), { passive: true })
+  // A timer that fires once the opener is done finds `done` and returns.
   const finish = () => {
     done = true
     try { store?.setItem(OPENER_KEY, '1') } catch { /* nothing to remember with */ }
-    win.clearTimeout(timer)
-    for (const [t, ev, f] of listeners) t.removeEventListener(ev, f)
   }
   const show = () => {
-    if (done || !teaser || root.hasAttribute('data-open')) return
+    if (done || away || !teaser || root.hasAttribute('data-open')) return
     finish()
     teaser.hidden = false
   }
@@ -48,8 +81,8 @@ export function startChat({
     finish()
     if (t.hasAttribute('data-pmw-chat-open')) load().then((w) => w.open(), () => {})
   })
-  if (!done && teaser) {
-    timer = win.setTimeout(show, OPENER_DELAY_MS)
+  if (!done && teaser && canonical) {
+    win.setTimeout(show, OPENER_DELAY_MS)
     on(win, 'scroll', () => {
       const room = doc.documentElement.scrollHeight - win.innerHeight
       if (room > 0 && win.scrollY / room >= OPENER_SCROLL) show()

package/src/widget.css

@@ -1,10 +1,13 @@
 /* @pmeweb/plugin-chat: the panel, injected by the lazy widget. Like chat.css, the --pmw-chat-*
    variables are not declared here: each use carries its AA default as a fallback
-   (a11y-tools/contrast.mjs): #1f2328 on #f1f3f6 14.21:1, #ffffff on #0a1b3d 16.98:1, #4b5563 on
-   #ffffff 7.56:1, #b42318 on #ffffff 6.57:1, #0a1b3d on #ffffff 16.98:1. Field borders #7d8590 on
-   #ffffff 3.73:1 (form borders need 3:1). The fields stay white with their own text colour
-   (--pmw-chat-field-fg), so a dark site's light ink never lands on them. Chat.astro sets the panel's
-   colours from the site's design.colors, each pair checked (src/colors.js panelTheme). */
+   (a11y-tools/contrast.mjs): #1f2328 on #ffffff 15.8:1 and on the thread #f7f8fb 14.88:1, on the
+   owner's #eef2fa 14.08:1; #ffffff on #0a1b3d 16.98:1; #4b5563 on #ffffff 7.56:1 and on #f7f8fb
+   7.12:1; #1a7f37 (live) on #ffffff 5.08:1 and on #f7f8fb 4.78:1; #b42318 on #ffffff 6.57:1 and on
+   #f7f8fb 6.19:1; #0a1b3d on #ffffff 16.98:1. The composer's field border #7d8590 on #ffffff 3.73:1
+   (form borders need 3:1). The fields stay white with their own text colour (--pmw-chat-field-fg),
+   so a dark site's light ink never lands on them. Chat.astro sets the panel's colours from the
+   site's design.colors, each pair checked (src/colors.js panelTheme). The lines (--pmw-chat-line,
+   --pmw-chat-rule) are decoration: no text is read off them. */
 .pmw-chat__panel {
   position: fixed; z-index: 81; inset: 0;
   display: flex; flex-direction: column;
@@ -17,86 +20,156 @@
     inset: auto;
     right: calc(env(safe-area-inset-right, 0px) + var(--pmw-chat-right, 16px));
     bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pmw-chat-bottom, 16px));
-    width: 380px; height: min(600px, calc(100dvh - 32px));
-    border: 1px solid var(--pmw-chat-border, #c9ced6); border-radius: 12px; overflow: hidden;
-    box-shadow: 0 12px 36px rgb(0 0 0 / 0.22);
+    width: 380px; height: min(600px, calc(100dvh - 16px - env(safe-area-inset-bottom, 0px) - var(--pmw-chat-bottom, 16px)));
+    border: 1px solid var(--pmw-chat-line, #e6e9f0); border-radius: 20px; overflow: hidden;
+    box-shadow: 0 18px 48px rgb(16 24 40 / 0.18);
   }
 }
-.pmw-chat__panel button { font: inherit; cursor: pointer; }
+/* :where() keeps this reset at one class, so .pmw-chat__send's weight (and every later button rule) wins. */
+.pmw-chat__panel :where(button) { font: inherit; cursor: pointer; }
 .pmw-chat__panel :focus-visible { outline: 3px solid var(--pmw-chat-focus, #0a1b3d); outline-offset: 2px; }
-.pmw-chat__head :focus-visible { outline-color: var(--pmw-chat-accent-fg, #ffffff); }
 
+/* The header: the panel's own colour, the face in its circle, the name, then one line under it
+   (the automated notice and the privacy link, or « Vous répond en direct » in green). */
 .pmw-chat__head {
-  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px;
-  background: var(--pmw-chat-accent, #0a1b3d); color: var(--pmw-chat-accent-fg, #ffffff);
+  display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px;
+  border-bottom: 1px solid var(--pmw-chat-line, #e6e9f0);
+}
+@media (max-width: 639.98px) {
+  .pmw-chat__head { padding: 12px 8px 12px 16px; }
 }
-.pmw-chat__head .pmw-chat__avatar { width: 40px; height: 40px; box-shadow: none; background: var(--pmw-chat-avatar-bg, var(--pmw-chat-accent-fg, #ffffff)); color: var(--pmw-chat-avatar-fg, var(--pmw-chat-accent, #0a1b3d)); }
-.pmw-chat__head .pmw-chat__avatar img { width: 40px; height: 40px; }
-.pmw-chat__who { flex: 1; min-width: 0; }
+.pmw-chat__face { position: relative; flex: none; display: flex; }
+.pmw-chat__head .pmw-chat__avatar { width: 44px; height: 44px; box-shadow: none; }
+.pmw-chat__head .pmw-chat__avatar--icon { box-shadow: 0 0 0 1.5px var(--pmw-chat-avatar-ring, transparent); }
+.pmw-chat__head .pmw-chat__avatar img { width: 44px; height: 44px; }
+.pmw-chat__head .pmw-chat__avatar--logo img { width: 32px; height: 32px; }
+.pmw-chat__head .pmw-chat__avatar svg { width: 100%; height: 100%; }
+.pmw-chat__dot {
+  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
+  background: var(--pmw-chat-live, #1a7f37); box-shadow: 0 0 0 2px var(--pmw-chat-panel-bg, #ffffff);
+}
+.pmw-chat__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .pmw-chat__name { margin: 0; font-weight: 600; font-size: 16px; }
-.pmw-chat__role { margin: 0; font-size: 14px; }
-.pmw-chat__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pmw-chat-live, #3fb950); box-shadow: 0 0 0 2px var(--pmw-chat-accent, #0a1b3d); }
+.pmw-chat__role, .pmw-chat__notice { margin: 0; font-size: 13px; line-height: 1.4; color: var(--pmw-chat-muted, #4b5563); }
+.pmw-chat__panel[data-mode="human"] .pmw-chat__role { color: var(--pmw-chat-live, #1a7f37); font-weight: 500; }
+.pmw-chat__notice a { color: var(--pmw-chat-link, #0a1b3d); text-decoration: underline; text-underline-offset: 2px; }
 .pmw-chat__close {
   flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
-  display: flex; align-items: center; justify-content: center; background: none; color: inherit;
+  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--pmw-chat-fg, #1f2328);
 }
+.pmw-chat__close:hover { background: var(--pmw-chat-thread-bg, #f7f8fb); }
 .pmw-chat__close svg { width: 18px; height: 18px; }
 
-.pmw-chat__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 10px 12px; }
-.pmw-chat__notice { margin: 0 0 8px; font-size: 14px; color: var(--pmw-chat-muted, #4b5563); }
-.pmw-chat__notice a { color: var(--pmw-chat-link, #0a1b3d); text-decoration: underline; text-underline-offset: 2px; }
-.pmw-chat__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-.pmw-chat__msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
-.pmw-chat__msg--bot, .pmw-chat__msg--owner { align-self: flex-start; background: var(--pmw-chat-other-bg, #f1f3f6); color: var(--pmw-chat-fg, #1f2328); border-bottom-left-radius: 4px; }
-.pmw-chat__msg--visitor { align-self: flex-end; background: var(--pmw-chat-accent, #0a1b3d); color: var(--pmw-chat-accent-fg, #ffffff); border-bottom-right-radius: 4px; }
+/* The thread: a light tint behind the bubbles. A speaker's messages in a row sit 6 px apart, a new
+   speaker 10 px down (the list's 6 px gap plus 4 px); the tail corner is on the speaker's side. */
+.pmw-chat__body {
+  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 18px 16px;
+  background: var(--pmw-chat-thread-bg, #f7f8fb);
+}
+.pmw-chat__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.pmw-chat__log > li { margin-top: 4px; }
+.pmw-chat__log > li:first-child,
+.pmw-chat__msg--bot + .pmw-chat__msg--bot, .pmw-chat__msg--bot + .pmw-chat__typing,
+.pmw-chat__msg--owner + .pmw-chat__msg--owner, .pmw-chat__msg--owner + .pmw-chat__typing,
+.pmw-chat__msg--visitor + .pmw-chat__msg--visitor { margin-top: 0; }
+.pmw-chat__msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.pmw-chat__msg--bot, .pmw-chat__msg--owner { align-self: flex-start; border-bottom-left-radius: 6px; color: var(--pmw-chat-fg, #1f2328); }
+.pmw-chat__msg--bot { background: var(--pmw-chat-other-bg, #ffffff); border: 1px solid var(--pmw-chat-line, #e6e9f0); }
+/* A person who took over: a light tint of the accent, so their words never pass for the bot's. */
+.pmw-chat__msg--owner { background: var(--pmw-chat-owner-bg, #eef2fa); border: 1px solid var(--pmw-chat-owner-border, #d5ddef); }
+.pmw-chat__msg--visitor { align-self: flex-end; background: var(--pmw-chat-accent, #0a1b3d); color: var(--pmw-chat-accent-fg, #ffffff); border-bottom-right-radius: 6px; }
+.pmw-chat__msg--bot + .pmw-chat__msg--bot, .pmw-chat__msg--owner + .pmw-chat__msg--owner { border-top-left-radius: 6px; }
+.pmw-chat__msg--visitor + .pmw-chat__msg--visitor { border-top-right-radius: 6px; }
+.pmw-chat__msg:has(> .pmw-chat__photo) { padding: 4px; }
+.pmw-chat__msg:has(> .pmw-chat__photo) .pmw-chat__text:empty { display: none; }
 .pmw-chat__msg.is-pending { opacity: 0.75; }
-.pmw-chat__msg.is-failed { outline: 2px solid var(--pmw-chat-error, #b42318); }
+.pmw-chat__msg.is-failed { outline: 2px solid var(--pmw-chat-error, #b42318); outline-offset: 2px; }
 .pmw-chat__retry { display: block; margin-top: 4px; font-size: 14px; }
 .pmw-chat__retry button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; }
-.pmw-chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px; border-radius: 12px; background: var(--pmw-chat-other-bg, #f1f3f6); }
-.pmw-chat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--pmw-chat-muted, #4b5563); animation: pmw-chat-dot 1.2s infinite ease-in-out; }
+.pmw-chat__typing {
+  align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; border-radius: 18px 18px 18px 6px;
+  background: var(--pmw-chat-other-bg, #ffffff); border: 1px solid var(--pmw-chat-line, #e6e9f0);
+}
+.pmw-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--pmw-chat-muted, #4b5563); animation: pmw-chat-dot 1.2s infinite ease-in-out; }
 .pmw-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
 .pmw-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
 @keyframes pmw-chat-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) {
   .pmw-chat__typing span { animation: none; opacity: 0.7; }
 }
+/* Where a person takes over: a line, the green dot and « {name} a pris le relais », centred. */
+.pmw-chat__log > .pmw-chat__relay {
+  align-self: stretch; margin: 18px 0 8px; display: flex; align-items: center; gap: 10px;
+  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--pmw-chat-muted, #4b5563);
+}
+.pmw-chat__relay::before, .pmw-chat__relay::after { content: ''; flex: 1; min-width: 16px; height: 1px; background: var(--pmw-chat-rule, #cfd5e1); }
+.pmw-chat__relay-label { display: flex; align-items: center; gap: 6px; text-align: center; }
+.pmw-chat__relay-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pmw-chat-live, #1a7f37); }
+.pmw-chat__log > .pmw-chat__relay + li { margin-top: 0; }
 .pmw-chat__state { margin: 8px 0 0; font-size: 14px; color: var(--pmw-chat-muted, #4b5563); }
 .pmw-chat__state:empty { display: none; }
-.pmw-chat__ended { margin-top: 12px; }
-.pmw-chat__ended p { margin: 0 0 8px; }
+/* The end: a thin line, the sentence centred, an outlined pill. */
+.pmw-chat__ended { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
+.pmw-chat__ended::before { content: ''; align-self: stretch; height: 1px; background: var(--pmw-chat-line, #e6e9f0); }
+.pmw-chat__ended p { margin: 0; font-size: 15px; color: var(--pmw-chat-muted, #4b5563); }
+.pmw-chat__restart {
+  min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid var(--pmw-chat-link, #0a1b3d);
+  background: var(--pmw-chat-panel-bg, #ffffff); color: var(--pmw-chat-link, #0a1b3d); font-weight: 600;
+}
 
-.pmw-chat__composer { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--pmw-chat-border, #c9ced6); }
-.pmw-chat__composer textarea { flex: 1; min-width: 0; resize: none; }
-.pmw-chat__composer textarea, .pmw-chat__field input, .pmw-chat__field textarea {
-  font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 8px;
+/* The composer: one rounded white field holding the photo button, the text and the send pill. */
+.pmw-chat__composer {
+  display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px;
+  border-top: 1px solid var(--pmw-chat-line, #e6e9f0); background: var(--pmw-chat-panel-bg, #ffffff);
+}
+@media (max-width: 639.98px) {
+  .pmw-chat__composer { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
+}
+.pmw-chat__box {
+  display: flex; align-items: flex-end; gap: 6px; padding: 4px; border-radius: 24px;
   border: 1px solid var(--pmw-chat-field-border, #7d8590); background: #ffffff; color: var(--pmw-chat-field-fg, #1f2328);
 }
+.pmw-chat__box textarea {
+  flex: 1; min-width: 0; box-sizing: border-box; min-height: 44px; max-height: 132px; resize: none; margin: 0;
+  padding: 10px 2px; border: 0; border-radius: 0; background: transparent; color: inherit;
+  font: inherit; font-size: 16px; line-height: 1.5;
+}
+.pmw-chat__box textarea::placeholder { color: #6b7280; opacity: 1; }
+/* The ring goes round the whole field, not the bare text inside it (where :has() is known). */
+@supports selector(:has(*)) {
+  .pmw-chat__box textarea:focus-visible { outline: none; }
+  .pmw-chat__box:has(textarea:focus-visible) { outline: 3px solid var(--pmw-chat-focus, #0a1b3d); outline-offset: 2px; }
+}
 .pmw-chat__send {
-  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; font-weight: 600;
+  flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; font-weight: 600;
   background: var(--pmw-chat-accent, #0a1b3d); color: var(--pmw-chat-accent-fg, #ffffff);
 }
-.pmw-chat__send:disabled, .pmw-chat__composer textarea:disabled { cursor: not-allowed; opacity: 0.6; }
-.pmw-chat__restart { min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--pmw-chat-link, #0a1b3d); background: none; color: var(--pmw-chat-link, #0a1b3d); font-weight: 600; }
-.pmw-chat__composer .pmw-turnstile, .pmw-chat__fallback .pmw-turnstile { flex-basis: 100%; }
+.pmw-chat__send:disabled, .pmw-chat__box textarea:disabled { cursor: not-allowed; opacity: 0.6; }
+.pmw-chat__composer .pmw-turnstile, .pmw-chat__fallback .pmw-turnstile { align-self: stretch; }
 /* The photo picker: a real file input, visually hidden inside its label, so Tab reaches it and the
    label shows its focus ring. 44 x 44 like every other control. */
 .pmw-chat__attach {
-  flex: none; position: relative; width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  border: 1px solid var(--pmw-chat-field-border, #7d8590); color: var(--pmw-chat-field-fg, #1f2328); background: #ffffff;
+  flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
+  display: flex; align-items: center; justify-content: center; color: inherit;
 }
+.pmw-chat__attach:hover { background: #eef0f4; }
 .pmw-chat__attach svg { width: 22px; height: 22px; }
 .pmw-chat__attach:focus-within { outline: 3px solid var(--pmw-chat-focus, #0a1b3d); outline-offset: 2px; }
-.pmw-chat__hint { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--pmw-chat-muted, #4b5563); }
-.pmw-chat__composer .pmw-chat__photo-error { flex-basis: 100%; }
-.pmw-chat__photo { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; }
+.pmw-chat__hint { margin: 0 8px; font-size: 13px; line-height: 1.4; color: var(--pmw-chat-muted, #4b5563); }
+.pmw-chat__composer .pmw-chat__photo-error { margin: 0 8px; }
+.pmw-chat__photo { display: block; max-width: 100%; max-height: 220px; border-radius: 14px; }
 
-.pmw-chat__fallback { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
-.pmw-chat__fb-title { margin: 0; font-weight: 600; }
-.pmw-chat__fb-intro { margin: 0; font-size: 15px; }
+/* The contact form, when the chat cannot answer: a 20 px title, rounded fields, a full-width pill. */
+.pmw-chat__fallback { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
+.pmw-chat__fb-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
+.pmw-chat__fb-intro { margin: -8px 0 0; font-size: 15px; color: var(--pmw-chat-muted, #4b5563); }
 .pmw-chat__field { display: flex; flex-direction: column; gap: 4px; }
 .pmw-chat__field label { font-size: 14px; font-weight: 600; }
+.pmw-chat__field input, .pmw-chat__field textarea {
+  font: inherit; font-size: 16px; padding: 10px 14px; border-radius: 12px; resize: none;
+  border: 1px solid var(--pmw-chat-field-border, #7d8590); background: #ffffff; color: var(--pmw-chat-field-fg, #1f2328);
+}
+.pmw-chat__fallback .pmw-chat__send { align-self: stretch; min-height: 48px; border-radius: 24px; }
 .pmw-chat__error { margin: 0; font-size: 14px; color: var(--pmw-chat-error, #b42318); }
 .pmw-chat__error:empty { display: none; }
 .pmw-chat__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

package/src/widget.js

@@ -20,7 +20,8 @@
 // « Non envoyé » with « Réessayer ».
 //
 // The mode comes from the service: `human` shows the owner's name, « Vous répond en direct » and the
-// green dot; `bot` shows « Assistant virtuel » and no dot (spec § 6: a dot says a person is here).
+// green dot; `bot` shows « Assistant virtuel », the automated notice and no dot (spec § 6: a dot
+// says a person is here). Where a person takes over, the thread shows a line saying so (relay()).
 // `fallback` (daily cap, model down) and a refused start show the contact form, which posts the
 // same lead through /api/chat/start. The `lead` frame fires window.pmw?.event('chat-lead') once.
 //
@@ -51,7 +52,7 @@ export const PHOTO_QUALITY = 0.85
 const TYPING_SEND_MS = 3000
 const TYPING_SHOW_MS = 8000
 
-const CAMERA_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 8h3l2-3h6l2 3h3v11H4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="13" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/></svg>'
+const PHOTO_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="9" cy="10" r="1.6"/><path d="m21 16-5-5-8 8"/></svg>'
 
 /** The longest edge to PHOTO_EDGE, re-encoded as JPEG: the canvas drops every EXIF field. */
 async function shrinkPhoto(win, file) {
@@ -139,17 +140,22 @@ export function mountChat(root, deps = {}) {
   const who = el(doc, 'div', { class: 'pmw-chat__who' })
   const name = el(doc, 'p', { class: 'pmw-chat__name', id: 'pmw-chat-name' })
   const role = el(doc, 'p', { class: 'pmw-chat__role' })
+  // The green dot sits on the face's corner, so the face gets a frame the dot is placed in (the
+  // avatar itself clips its content to a circle).
+  const face = el(doc, 'span', { class: 'pmw-chat__face' })
   const dot = el(doc, 'span', { class: 'pmw-chat__dot', 'aria-hidden': 'true', hidden: true })
   const closeBtn = el(doc, 'button', { type: 'button', class: 'pmw-chat__close', 'aria-label': s.close })
   closeBtn.innerHTML = X_ICON
-  who.append(name, role)
-  head.append(avatar, who, dot, closeBtn)
-
+  // The automated notice and the privacy link live under the name, in bot mode (a person who took
+  // over is not « réponses automatiques »).
   const notice = el(doc, 'p', { class: 'pmw-chat__notice' }, s.automated)
   if (cfg.privacyHref) {
     notice.append(' ')
     notice.append(el(doc, 'a', { href: cfg.privacyHref }, s.privacy))
   }
+  face.append(avatar, dot)
+  who.append(name, role, notice)
+  head.append(face, who, closeBtn)
   const log = el(doc, 'ol', { class: 'pmw-chat__log' })
   const greeting = el(doc, 'li', { class: 'pmw-chat__msg pmw-chat__msg--bot pmw-chat__msg--greeting' }, opener)
   const typing = el(doc, 'li', { class: 'pmw-chat__typing', 'aria-hidden': 'true', hidden: true })
@@ -163,9 +169,12 @@ export function mountChat(root, deps = {}) {
     'data-language': lang, 'data-appearance': 'interaction-only', 'data-size': 'flexible',
   })
   const composer = el(doc, 'form', { class: 'pmw-chat__composer', novalidate: true })
-  const input = el(doc, 'textarea', { id: 'pmw-chat-input', name: 'message', rows: '2', maxlength: String(MAX_TEXT), autocomplete: 'off', disabled: demo, 'aria-describedby': demo ? 'pmw-chat-demo-hint' : null })
+  const input = el(doc, 'textarea', { id: 'pmw-chat-input', name: 'message', rows: '1', maxlength: String(MAX_TEXT), placeholder: s.messageLabel, autocomplete: 'off', disabled: demo, 'aria-describedby': demo ? 'pmw-chat-demo-hint' : null })
   const send = el(doc, 'button', { type: 'submit', class: 'pmw-chat__send', disabled: demo }, s.send)
-  composer.append(el(doc, 'label', { class: 'pmw-chat__sr', for: 'pmw-chat-input' }, s.messageLabel), input, send)
+  // One rounded field holds the photo button, the text and the send button; hints and errors go under it.
+  const box = el(doc, 'div', { class: 'pmw-chat__box' })
+  box.append(el(doc, 'label', { class: 'pmw-chat__sr', for: 'pmw-chat-input' }, s.messageLabel), input, send)
+  composer.append(box)
   if (demo) composer.append(el(doc, 'p', { class: 'pmw-chat__hint', id: 'pmw-chat-demo-hint' }, s.demoHint))
   else composer.append(widget(composer))
   let picker = null
@@ -173,10 +182,10 @@ export function mountChat(root, deps = {}) {
   if (cfg.photos === true) {
     const attach = el(doc, 'label', { class: 'pmw-chat__attach' })
     picker = el(doc, 'input', { type: 'file', class: 'pmw-chat__sr', accept: 'image/*', multiple: true, 'aria-describedby': 'pmw-chat-photo-hint', disabled: demo })
-    attach.innerHTML = CAMERA_ICON
+    attach.innerHTML = PHOTO_ICON
     attach.prepend(picker)
     attach.append(el(doc, 'span', { class: 'pmw-chat__sr' }, s.attachPhoto))
-    composer.insertBefore(attach, input)
+    box.insertBefore(attach, input)
     composer.append(el(doc, 'p', { class: 'pmw-chat__hint', id: 'pmw-chat-photo-hint' }, s.photoHint), photoError)
   }
 
@@ -203,7 +212,7 @@ export function mountChat(root, deps = {}) {
   )
   if (!demo) fallback.append(widget(fallback))
   const body = el(doc, 'div', { class: 'pmw-chat__body' })
-  body.append(notice, log, state, ended, fallback)
+  body.append(log, state, ended, fallback)
   panel.append(head, body, composer, announcer)
   root.append(panel)
 
@@ -227,12 +236,16 @@ export function mountChat(root, deps = {}) {
   const photosSent = new Set()
   let photosBusy = 0
 
-  const botName = () => session?.botName || null
+  // The demo's name is the portal preview's, from the fragment (phase 4 spec 2.4); never on a real host.
+  const fragmentName = () => new URLSearchParams(win.location.hash.slice(1)).get('pmw-chat-botName')?.trim() || null
+  let demoName = demo ? fragmentName() : null
+  const botName = () => (demo ? demoName : session?.botName || null)
   function header() {
     const human = mode === 'human'
     name.textContent = human ? (ownerName || s.assistant) : (botName() || s.assistant)
     role.textContent = human ? s.live : (botName() ? s.assistant : '')
     role.hidden = role.textContent === ''
+    notice.hidden = human
     dot.hidden = !human
     panel.dataset.mode = mode
   }
@@ -250,6 +263,25 @@ export function mountChat(root, deps = {}) {
     log.insertBefore(li, typing.parentNode === log ? typing : null)
     return li
   }
+  // Where a person takes over, one line in the thread: « {name} a pris le relais ». It goes before
+  // the first owner message that follows the bot (live, and when the thread is replayed after a
+  // reload), or at the end of the thread when the mode turns human before the person writes. The
+  // scan back stops at a line already there or at an owner message, so one takeover gets one line
+  // however often the frames repeat it; the bot answering again and a person taking over again
+  // gets another.
+  function relay(at, by) {
+    let x = at ? at.previousElementSibling : (typing.parentNode === log ? typing.previousElementSibling : log.lastElementChild)
+    for (; x; x = x.previousElementSibling) {
+      if (x.classList.contains('pmw-chat__relay') || x.classList.contains('pmw-chat__msg--owner')) return
+      if (x.classList.contains('pmw-chat__msg--bot')) break
+    }
+    const text = by ? fill(s.relay, { name: by }) : s.relayGeneric
+    const sep = el(doc, 'li', { class: 'pmw-chat__relay', role: 'separator', 'aria-label': text })
+    const label = el(doc, 'span', { class: 'pmw-chat__relay-label', 'aria-hidden': 'true' })
+    label.append(el(doc, 'span', { class: 'pmw-chat__relay-dot' }), text)
+    sep.append(label)
+    log.insertBefore(sep, at ?? (typing.parentNode === log ? typing : null))
+  }
   const find = (id) => [...log.querySelectorAll('li[data-id]')].find((li) => li.dataset.id === id)
   const setText = (li, m, text) => {
     li.firstChild.textContent = fill(s.said, { name: speaker(m), text: '' })
@@ -265,7 +297,10 @@ export function mountChat(root, deps = {}) {
     seen.add(m.seq)
     lastSeq = Math.max(lastSeq, m.seq)
     let li = find(m.id)
-    if (!li) li = line(m.id, m.role)
+    if (!li) {
+      li = line(m.id, m.role)
+      if (m.role === 'owner') relay(li, m.by || ownerName)
+    }
     li.classList.remove('is-streaming', 'is-pending', 'is-failed')
     li.querySelector('.pmw-chat__retry')?.remove()
     setText(li, m, m.text)
@@ -294,7 +329,13 @@ export function mountChat(root, deps = {}) {
   const scroll = () => { log.scrollTop = log.scrollHeight }
   if (demo) {
     setText(line('demo-question', 'visitor'), { role: 'visitor' }, demoQuestion(opener, lang))
-    setText(line('demo-answer', 'bot'), { role: 'bot' }, s.demoAnswer)
+    const answer = line('demo-answer', 'bot')
+    setText(answer, { role: 'bot' }, s.demoAnswer)
+    win.addEventListener('hashchange', () => {
+      demoName = fragmentName()
+      header()
+      setText(answer, { role: 'bot' }, s.demoAnswer)
+    })
   }
 
   function failed(entry) {
@@ -372,11 +413,13 @@ export function mountChat(root, deps = {}) {
     mode = m.mode === 'human' ? 'human' : 'bot'
     ownerName = typeof m.ownerName === 'string' ? m.ownerName : null
     header()
+    if (mode === 'human') relay(null, ownerName)
     if (m.closed) end(s.ended, true)
   }
   function frame(m) {
     switch (m?.type) {
       case 'history':
+        if (typeof m.ownerName === 'string') ownerName = m.ownerName
         for (const x of m.messages ?? []) render(x, { announce: false })
         return status(m)
       case 'message':
@@ -428,7 +471,7 @@ export function mountChat(root, deps = {}) {
     try { turnstile.reset(form) } catch { /* a token is single-use; the next post asks again */ }
     if (res?.ok && data) return { ok: true, data }
     const error = res?.status === 403 ? s.turnstile : res?.status === 429 ? s.tooMany : null
-    return { ok: false, error }
+    return { ok: false, error, cap: res?.status === 409 && data?.error === 'cap' }
   }
   function begin() {
     if (starting || session) return starting
@@ -445,7 +488,8 @@ export function mountChat(root, deps = {}) {
       for (const entry of pending.values()) failed(entry)
       if (r.error) return showState(r.error)
       showState('')
-      showFallback(s.unavailable)
+      // 409 cap: the visitor's conversations for the day are used up (pmeweb-chat counts them per IP).
+      showFallback(r.cap ? s.fallbackCap : s.fallbackDown)
     })
     return starting
   }
@@ -530,6 +574,7 @@ export function mountChat(root, deps = {}) {
     const text = input.value.trim()
     if (!text || over || demo) return
     input.value = ''
+    grow()
     const entry = { id: uuid(), text: text.slice(0, MAX_TEXT), tries: 0, failed: false }
     entry.li = line(entry.id, 'visitor')
     entry.li.classList.add('is-pending')
@@ -544,7 +589,13 @@ export function mountChat(root, deps = {}) {
   input.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); submit() }
   })
+  // The field grows with the text, up to about five lines, then scrolls.
+  const grow = () => {
+    input.style.height = 'auto'
+    input.style.height = input.value ? `${Math.min(input.scrollHeight, 132)}px` : ''
+  }
   input.addEventListener('input', () => {
+    grow()
     const now = Date.now()
     if (isOpen() && now - lastTyping > TYPING_SEND_MS) {
       lastTyping = now
@@ -565,7 +616,7 @@ export function mountChat(root, deps = {}) {
     mode = 'bot'
     ownerName = null
     header()
-    for (const li of [...log.querySelectorAll('li[data-id]')]) li.remove()
+    for (const li of [...log.querySelectorAll('li[data-id], .pmw-chat__relay')]) li.remove()
     ended.hidden = true
     composer.hidden = false
     input.focus()