@pmeweb/plugin-chat 1.2.1 → 1.3.1

package/src/widget.js

@@ -37,8 +37,8 @@
 // a visitor's question drawn from it (demoQuestion) and a canned answer, with the composer disabled
 // and a hint saying why. The client sees their face and colours in the « Contenu » preview.
 import css from './widget.css?inline'
-import { isCanonical } from '@pmeweb/loader'
-import { addScript as loadTurnstile, resetToken, tokenReady } from '@pmeweb/turnstile'
+import { isCanonical, onApproach } from '@pmeweb/loader'
+import { addScript as loadTurnstile, tokenReady } from '@pmeweb/turnstile'
 import { CLOSE, MAX_TEXT } from './protocol.js'
 import { fill, langOf, stringsFor } from './strings.js'
 
@@ -49,6 +49,12 @@ export const GOAL = 'chat-lead'
 export const MAX_PHOTOS = 3
 export const PHOTO_EDGE = 1600
 export const PHOTO_QUALITY = 0.85
+/** How long after the page has painted (and the widget was imported) Turnstile starts, unasked. */
+export const WARM_MS = 3000
+/** A first start slower than this shows « Un instant… » under the typing dots. */
+export const SLOW_START_MS = 8000
+/** How close to the bottom of the thread (px) still counts as « at the bottom ». */
+export const PIN_SLACK = 40
 const TYPING_SEND_MS = 3000
 const TYPING_SHOW_MS = 8000
 
@@ -90,14 +96,58 @@ function el(doc, tag, attrs = {}, text) {
   return e
 }
 
-const defaultTurnstile = (win) => ({
-  load: () => loadTurnstile(win.document),
-  async token(form) {
-    await tokenReady(form, { win })
-    return form.querySelector('input[name="cf-turnstile-response"]')?.value ?? ''
-  },
-  reset: (form) => resetToken(form, { win }),
-})
+// TURNSTILE (operator, 2026-11-13). Loaded only when the panel opened, the challenge had no time to
+// observe the visitor and often showed its « Vérifiez que vous êtes humain » box. So it now starts
+// early, but never in a test run: the trigger imports this file on the visitor's first sign of life
+// on the page (a scroll, a pointer moving, a press, a key), and mountChat then starts api.js through
+// @pmeweb/loader onApproach on the chat root (fixed on screen): once the page has painted (`load`,
+// first contentful paint, LCP, and this file's own import, whichever is latest) plus WARM_MS, or at
+// once on a press or a focus in the chat, or when the panel opens. Lighthouse never interacts, so it
+// never imports this file and never fetches api.js; a visitor who reads for a few seconds before
+// opening the panel usually finds the token minted.
+//
+// THE WIDGETS RENDER HIDDEN, in the closed panel (a display:none iframe still runs: measured with
+// Cloudflare's test keys, a token in ~1.9 s). Each sits in a row that is COLLAPSED until Cloudflare
+// itself asks for the visitor: its `before-interactive` and `error` callbacks open the row, its
+// success callback collapses it again (so « Succès ! » goes away), and a later expiry that needs a
+// click opens it again. The rule « never hide the box with a guessed rule » holds: the row follows
+// Cloudflare's callbacks, never the iframe's size. Implicit rendering only scans the page once, when
+// api.js runs, so a widget added after a contact form already loaded api.js is rendered here.
+//
+// THE TOKEN: Turnstile refreshes an unused one before its 300 s expiry (refresh-expired: auto); after
+// each post the widget is reset (a token is single-use), only while its row is not asking: a reset
+// would wipe the box the visitor is solving. `reset(el)` names our widget, never every widget on the
+// page (@pmeweb/turnstile rule 4). Its own resetToken is not used: it keys on the box's height, and
+// a solved box keeps its height inside our collapsed row.
+const defaultTurnstile = (win, widgets) => {
+  let polling = false
+  const render = () => {
+    const ts = win.turnstile
+    if (!ts?.render) return false
+    for (const w of widgets) if (!w.childElementCount) try { ts.render(w) } catch { /* left to tokenReady's timeout */ }
+    return true
+  }
+  const load = () => {
+    loadTurnstile(win.document)
+    if (polling || render()) return
+    polling = true
+    let n = 0
+    const tick = () => { if (!render() && ++n < 600) win.setTimeout(tick, 100) }
+    win.setTimeout(tick, 100)
+  }
+  for (const w of widgets) { const f = w.closest('form'); if (f) f.pmwTurnstileLoad = load }
+  return {
+    load,
+    async token(form) {
+      await tokenReady(form, { win })
+      return form.querySelector('input[name="cf-turnstile-response"]')?.value ?? ''
+    },
+    reset(form) {
+      const w = form.querySelector('.cf-turnstile')
+      if (w && !w.closest('[data-ask]')) win.turnstile?.reset(w)
+    },
+  }
+}
 
 export function mountChat(root, deps = {}) {
   if (root.pmwChat) return root.pmwChat
@@ -105,7 +155,8 @@ export function mountChat(root, deps = {}) {
   const doc = win.document
   const WS = deps.WebSocket ?? win.WebSocket
   const fetchImpl = deps.fetch ?? ((...a) => win.fetch(...a))
-  const turnstile = deps.turnstile ?? defaultTurnstile(win)
+  const widgets = []
+  let turnstile = deps.turnstile ?? null
   const uuid = deps.uuid ?? (() => win.crypto.randomUUID())
   const shrink = deps.shrink ?? ((file) => shrinkPhoto(win, file))
   // A data: URL, not a blob: one: site CSPs allow `img-src data:` (boilerplate worker), not blob:.
@@ -164,19 +215,37 @@ export function mountChat(root, deps = {}) {
   const state = el(doc, 'p', { class: 'pmw-chat__state', role: 'status' })
   const announcer = el(doc, 'p', { class: 'pmw-chat__sr', 'aria-live': 'polite' })
 
-  const widget = (form) => el(doc, 'div', {
-    class: 'cf-turnstile pmw-turnstile', 'data-sitekey': cfg.siteKey ?? '', 'data-action': 'chat', 'data-theme': 'light',
-    'data-language': lang, 'data-appearance': 'interaction-only', 'data-size': 'flexible',
-  })
+  // A widget in its row (see « TURNSTILE » above). Implicit rendering reads callbacks as global
+  // function names, one set per widget (`c` the composer, `f` the contact form).
+  const widget = (key) => {
+    const row = el(doc, 'div', { class: 'pmw-chat__check' })
+    const inner = el(doc, 'div', { class: 'pmw-chat__check-in' })
+    const cb = `pmwChatTurnstile${key}`
+    const ask = (on) => () => { row.toggleAttribute('data-ask', on); follow() }
+    win[`${cb}Ask`] = ask(true)
+    win[`${cb}Error`] = ask(true)
+    win[`${cb}Done`] = ask(false)
+    const w = el(doc, 'div', {
+      class: 'cf-turnstile pmw-turnstile', 'data-sitekey': cfg.siteKey ?? '', 'data-action': 'chat', 'data-theme': 'light',
+      'data-language': lang, 'data-appearance': 'interaction-only', 'data-size': 'flexible',
+      'data-callback': `${cb}Done`, 'data-before-interactive-callback': `${cb}Ask`, 'data-error-callback': `${cb}Error`,
+    })
+    widgets.push(w)
+    inner.append(w)
+    row.append(inner)
+    return row
+  }
   const composer = el(doc, 'form', { class: 'pmw-chat__composer', novalidate: true })
   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)
   // 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)
+  // The check row sits ABOVE the field: the composer is pinned to the panel's bottom, so the row
+  // opening or collapsing never moves the field the visitor is typing in.
+  if (!demo) composer.append(widget('c'))
   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
   const photoError = el(doc, 'p', { class: 'pmw-chat__error pmw-chat__photo-error', role: 'alert' })
   if (cfg.photos === true) {
@@ -210,11 +279,49 @@ export function mountChat(root, deps = {}) {
     field('need', 'textarea', { rows: '3', maxlength: '2000' }),
     fbError, el(doc, 'button', { type: 'submit', class: 'pmw-chat__send' }, s.fallbackSend),
   )
-  if (!demo) fallback.append(widget(fallback))
+  if (!demo) fallback.insertBefore(widget('f'), fbError)
   const body = el(doc, 'div', { class: 'pmw-chat__body' })
   body.append(log, state, ended, fallback)
   panel.append(head, body, composer, announcer)
   root.append(panel)
+  turnstile ??= defaultTurnstile(win, widgets)
+
+  // ---- following the thread ---------------------------------------------------------------
+  // PINNED (operator, 2026-11-13): while the visitor is at the bottom (within PIN_SLACK), every
+  // change that adds height (a streamed fragment, the stored message replacing it, the typing dots,
+  // a photo once decoded, the takeover line, the end block, the composer growing or its check row
+  // opening) keeps the thread at the bottom. A visitor who scrolled UP to read stays where they are;
+  // reaching the bottom again pins it again. Sending a message is explicit: it always pins. The
+  // scroll is smooth, one per animation frame however many fragments land in it (a stream would
+  // otherwise stack dozens), and instant under prefers-reduced-motion and when the panel opens.
+  // Our own scrolls only ever move down, so a scroll that moves UP away from the bottom is the
+  // visitor's.
+  let pinned = true
+  let lastTop = 0
+  let followAt = 0
+  const gap = () => body.scrollHeight - body.scrollTop - body.clientHeight
+  body.addEventListener('scroll', () => {
+    const t = body.scrollTop
+    if (gap() <= PIN_SLACK) pinned = true
+    else if (t < lastTop) pinned = false
+    lastTop = t
+  }, { passive: true })
+  const nextFrame = (f) => (win.requestAnimationFrame ? win.requestAnimationFrame(f) : win.setTimeout(f, 16))
+  function follow(force = false, instant = false) {
+    if (force) pinned = true
+    if (!pinned || followAt) return
+    followAt = nextFrame(() => {
+      followAt = 0
+      if (!pinned) return
+      const still = instant || !!win.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+      body.scrollTo({ top: body.scrollHeight, behavior: still ? 'instant' : 'smooth' })
+    })
+  }
+  if (typeof win.ResizeObserver === 'function') {
+    const ro = new win.ResizeObserver(() => follow())
+    ro.observe(log)
+    ro.observe(composer)
+  }
 
   // ---- state ------------------------------------------------------------------------------
   let session = null
@@ -269,18 +376,37 @@ export function mountChat(root, deps = {}) {
   // 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 })
+  //
+  // THE HAND-BACK (operator, 2026-11-13) is its mirror: where the owner gives the conversation back
+  // (« Rendre à l’assistant »), one line « L’assistant virtuel a repris la conversation », always
+  // the « assistant virtuel » wording (never the bot's name alone: it must not pass for a person).
+  // It goes before the first bot message that follows a person (live, and on replay), or at the end
+  // when the mode turns back to bot before the bot speaks. Its scan back stops at a hand-back line
+  // already there or at a bot message (nothing to mark), and inserts only past an owner message or a
+  // takeover line: a conversation the bot never left gets none. A takeover after it gets its own line.
+  const lastLine = () => (typing.parentNode === log ? typing.previousElementSibling : log.lastElementChild)
+  const isA = (x, c) => x.classList.contains(c)
+  function separator(cls, dotCls, text, at) {
+    const sep = el(doc, 'li', { class: cls, 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)
+    label.append(el(doc, 'span', { class: dotCls }), text)
     sep.append(label)
     log.insertBefore(sep, at ?? (typing.parentNode === log ? typing : null))
+    follow()
+  }
+  function relay(at, by) {
+    for (let x = at ? at.previousElementSibling : lastLine(); x; x = x.previousElementSibling) {
+      if (isA(x, 'pmw-chat__relay') || isA(x, 'pmw-chat__msg--owner')) return
+      if (isA(x, 'pmw-chat__msg--bot') || isA(x, 'pmw-chat__handback')) break
+    }
+    separator('pmw-chat__relay', 'pmw-chat__relay-dot', by ? fill(s.relay, { name: by }) : s.relayGeneric, at)
+  }
+  function handback(at) {
+    for (let x = at ? at.previousElementSibling : lastLine(); ; x = x.previousElementSibling) {
+      if (!x || isA(x, 'pmw-chat__handback') || isA(x, 'pmw-chat__msg--bot')) return
+      if (isA(x, 'pmw-chat__relay') || isA(x, 'pmw-chat__msg--owner')) break
+    }
+    separator('pmw-chat__handback', 'pmw-chat__relay-dot pmw-chat__relay-dot--back', s.handback, at)
   }
   const find = (id) => [...log.querySelectorAll('li[data-id]')].find((li) => li.dataset.id === id)
   const setText = (li, m, text) => {
@@ -292,6 +418,14 @@ export function mountChat(root, deps = {}) {
     typing.hidden = true
     win.clearTimeout(typingTimer)
   }
+  /** The dots, until a reply hides them; `ms` also hides them after that long without one. */
+  function showTyping(ms) {
+    typing.hidden = false
+    log.append(typing)
+    win.clearTimeout(typingTimer)
+    if (ms) typingTimer = win.setTimeout(hideTyping, ms)
+    follow()
+  }
   function render(m, { announce }) {
     if (seen.has(m.seq)) return
     seen.add(m.seq)
@@ -300,6 +434,7 @@ export function mountChat(root, deps = {}) {
     if (!li) {
       li = line(m.id, m.role)
       if (m.role === 'owner') relay(li, m.by || ownerName)
+      else if (m.role === 'bot') handback(li)
     }
     li.classList.remove('is-streaming', 'is-pending', 'is-failed')
     li.querySelector('.pmw-chat__retry')?.remove()
@@ -313,20 +448,20 @@ export function mountChat(root, deps = {}) {
       if (announce) announcer.textContent = fill(s.said, { name: speaker(m), text: m.text })
       if (panel.hidden) root.setAttribute('data-unread', '')
     }
-    scroll()
+    follow()
   }
   function delta(id, text) {
     hideTyping()
     let li = find(id)
     if (!li) {
       li = line(id, 'bot')
+      handback(li)
       li.classList.add('is-streaming')
       setText(li, { role: 'bot' }, '')
     }
     li.lastChild.textContent += text
-    scroll()
+    follow()
   }
-  const scroll = () => { log.scrollTop = log.scrollHeight }
   if (demo) {
     setText(line('demo-question', 'visitor'), { role: 'visitor' }, demoQuestion(opener, lang))
     const answer = line('demo-answer', 'bot')
@@ -375,6 +510,8 @@ export function mountChat(root, deps = {}) {
     ws = sock
     sock.onopen = () => {
       attempt = 0
+      // A first start: the dots stay until the reply, for TYPING_SHOW_MS at most, like the service's.
+      if (slowTimer) { notSlow(); showTyping(TYPING_SHOW_MS) }
       showState('')
       sock.send(JSON.stringify({ type: 'hello', since: lastSeq }))
       for (const entry of pending.values()) transmit(entry)
@@ -389,6 +526,7 @@ export function mountChat(root, deps = {}) {
       for (const entry of pending.values()) if (entry.tries >= MAX_TRIES) failed(entry)
       if (e.code >= 4000 && e.code < 5000) return refused(e.code)
       if (over) return
+      notSlow()
       showState(s.reconnecting)
       const wait = BACKOFF_MS[Math.min(attempt, BACKOFF_MS.length - 1)]
       attempt++
@@ -408,12 +546,14 @@ export function mountChat(root, deps = {}) {
     ended.hidden = false
     composer.hidden = true
     for (const entry of pending.values()) failed(entry)
+    follow()
   }
   function status(m) {
     mode = m.mode === 'human' ? 'human' : 'bot'
     ownerName = typeof m.ownerName === 'string' ? m.ownerName : null
     header()
     if (mode === 'human') relay(null, ownerName)
+    else handback(null)
     if (m.closed) end(s.ended, true)
   }
   function frame(m) {
@@ -428,11 +568,7 @@ export function mountChat(root, deps = {}) {
         return delta(m.id, m.text)
       case 'typing':
         if (m.role === 'visitor') return
-        typing.hidden = false
-        log.append(typing)
-        win.clearTimeout(typingTimer)
-        typingTimer = win.setTimeout(hideTyping, TYPING_SHOW_MS)
-        return scroll()
+        return showTyping(TYPING_SHOW_MS)
       case 'status':
         return status(m)
       case 'fallback':
@@ -473,9 +609,19 @@ export function mountChat(root, deps = {}) {
     const error = res?.status === 403 ? s.turnstile : res?.status === 429 ? s.tooMany : null
     return { ok: false, error, cap: res?.status === 409 && data?.error === 'cap' }
   }
+  // THE FIRST START (operator, 2026-11-13) reads like any reply: the typing dots at once, no
+  // « Connexion… ». Only a start slower than SLOW_START_MS adds « Un instant… »; the socket's open
+  // clears it, a drop says « Connexion perdue, reconnexion… » as before. Nothing is started before
+  // the visitor writes: pmeweb-chat counts every /start toward the visitor's conversations of the day
+  // (src/ipLimit.ts there), so a panel opened and never used must not spend one. Only the token is
+  // prepared ahead (« TURNSTILE » above).
+  let slowTimer = null
+  const notSlow = () => { win.clearTimeout(slowTimer); slowTimer = null }
   function begin() {
     if (starting || session) return starting
-    showState(s.connecting)
+    showState('')
+    showTyping()
+    slowTimer = win.setTimeout(() => showState(s.oneMoment), SLOW_START_MS)
     starting = post(composer, {}).then((r) => {
       starting = null
       if (r.ok && r.data.conversationId && r.data.visitorKey) {
@@ -485,6 +631,8 @@ export function mountChat(root, deps = {}) {
         connect()
         return
       }
+      notSlow()
+      hideTyping()
       for (const entry of pending.values()) failed(entry)
       if (r.error) return showState(r.error)
       showState('')
@@ -532,9 +680,12 @@ export function mountChat(root, deps = {}) {
     const id = uuid()
     const li = line(id, 'visitor')
     li.classList.add('is-pending')
-    li.insertBefore(el(doc, 'img', { class: 'pmw-chat__photo', src, alt: s.photoAlt }), li.lastChild)
+    const img = el(doc, 'img', { class: 'pmw-chat__photo', src, alt: s.photoAlt })
+    // Its height is known only once decoded: re-pin then (follow() is a no-op if they scrolled up).
+    img.addEventListener('load', () => follow(), { once: true })
+    li.insertBefore(img, li.lastChild)
     setText(li, { role: 'visitor' }, '')
-    scroll()
+    follow(true)
     if (!session) await begin()
     let res = null
     if (session) {
@@ -580,7 +731,7 @@ export function mountChat(root, deps = {}) {
     entry.li.classList.add('is-pending')
     setText(entry.li, { role: 'visitor' }, entry.text)
     pending.set(entry.id, entry)
-    scroll()
+    follow(true)
     if (!session) begin()
     else if (isOpen()) transmit(entry)
     else connect()
@@ -616,7 +767,9 @@ export function mountChat(root, deps = {}) {
     mode = 'bot'
     ownerName = null
     header()
-    for (const li of [...log.querySelectorAll('li[data-id], .pmw-chat__relay')]) li.remove()
+    for (const li of [...log.querySelectorAll('li[data-id], .pmw-chat__relay, .pmw-chat__handback')]) li.remove()
+    hideTyping()
+    notSlow()
     ended.hidden = true
     composer.hidden = false
     input.focus()
@@ -644,7 +797,7 @@ export function mountChat(root, deps = {}) {
     root.removeAttribute('data-unread')
     if (session) connect()
     ;(demo ? closeBtn : composer.hidden ? (fallback.hidden ? restart : fallback.querySelector('input')) : input)?.focus()
-    scroll()
+    follow(true, true)
   }
   function close() {
     panel.hidden = true
@@ -652,6 +805,9 @@ export function mountChat(root, deps = {}) {
     bubble?.focus()
   }
 
+  // The early start (« TURNSTILE » above). Off the real hosts there is nothing to start.
+  if (!demo) onApproach(root, () => turnstile.load(), { win, settleMs: WARM_MS })
+
   root.pmwChat = { open: show, close, panel }
   return root.pmwChat
 }

package/src/worker.js

@@ -32,7 +32,7 @@ import { verifyTurnstile } from '@pmeweb/turnstile/worker'
 import { RPC_HEADER, RPC_VERSION } from './protocol.js'
 
 /** This package's version, reported by the health route (a test holds it equal to package.json). */
-export const VERSION = '1.2.1'
+export const VERSION = '1.3.1'
 export { RPC_VERSION }
 
 const SERVICE = 'https://pmeweb-chat.internal'