@pmeweb/plugin-chat 1.2.1 → 1.3.1

package/src/build.js

@@ -1,58 +1,125 @@
 // @pmeweb/plugin-chat/build: the site's context file for pmeweb-chat (manifest `build`:
 // plugins/chat/context.json, one file for every language). The site renders it from a prerendered
-// route with sources it already has (llms.txt, its pricing text, its dictionaries, its published
-// collection entries); pmeweb-chat reads `langs[lang]` (src/context.ts there):
+// route; pmeweb-chat reads `langs[lang]` (src/context.ts there):
 //
 //   { "format": 1, "langs": { "fr": { "business": "...", "sections": [{ "title", "text" }] } } }
 //
+// Since 1.3.0 the sources are three, and only three (operator decision 2026-11-13):
+//   1. the site's curated file, src/chat/context.<lang>.md (manifest `context`), written by Claude
+//      Code for the assistant and held current by check-plugins' fingerprint. Its `## ` headings
+//      become the sections; the first-line stamp comment is not sent.
+//   2. the pricing text (the site's pricing source, public/pricing.md on most sites): prices are
+//      never copied into the curated file.
+//   3. the entries of the collections the site lists in `plugins.chat.contextCollections`, one line
+//      each (title and a short summary, never the body). Blog posts never go in.
+// The dictionary and llms.txt are no longer read (1.2.0 sent them whole: ~26 000 tokens on pmeweb.ca,
+// mostly interface labels).
+//
 // DETERMINISTIC: same sources, same bytes. No date, no random id, no network, no model call (the
 // builder holds no secret, and a rebuild must not spend money). Not public: the site's worker serves
 // it only to a signed request (plugin-kit's pluginArtifacts), never to a visitor.
 
 export const CONTEXT_FORMAT = 1
-/** About 50k tokens at most: past this the prompt would cost too much per message. */
+/** A last guard on the whole file; the curated file has its own, smaller budget (MAX_CONTEXT_CHARS). */
 export const MAX_CONTEXT_BYTES = 200 * 1024
+/** The curated file's budget per language, stamp line excluded (equal to the manifest's `context.maxChars`). */
+export const MAX_CONTEXT_CHARS = 16000
+/** An entry's summary is cut here, at a word. */
+export const SUMMARY_CHARS = 200
+/** The fields an entry's summary is taken from, in this order, before its body. */
+export const SUMMARY_FIELDS = ['summary', 'resume', 'résumé', 'description', 'excerpt', 'extrait', 'about', 'apropos', 'intro']
+/** Collections that never go in the context, whatever the config says. */
+export const NEVER_COLLECTIONS = ['blog', 'authors']
 
 const LANGS = ['fr', 'en']
 const TITLES = {
-  fr: { llms: 'llms.txt', pricing: 'Tarifs', dictionary: 'Textes du site', colon: ' : ' },
-  en: { llms: 'llms.txt', pricing: 'Pricing', dictionary: 'Site text', colon: ': ' },
+  fr: { pricing: 'Tarifs', colon: ' : ' },
+  en: { pricing: 'Pricing', colon: ': ' },
 }
 
 const text = (v) => (typeof v === 'string' ? v.trim() : '')
 const oneLine = (v) => v.replace(/\s*\n\s*/g, ' ').trim()
 
-/** A dictionary as `path.to.key: value` lines, strings only, in the dictionary's own order. */
-export function flattenDictionary(dict, prefix = '') {
+/** The curated file's text, its leading HTML comments (the stamp) removed. */
+export function stripStamp(md) {
+  return text(md).replace(/^(?:<!--[\s\S]*?-->\s*)+/, '').trim()
+}
+
+/**
+ * The curated file as sections: one per `## ` heading; what comes before the first one is a
+ * section titled by the `# ` heading (else `fallbackTitle`).
+ */
+export function contextSections(md, fallbackTitle) {
   const out = []
-  const walk = (v, path) => {
-    if (typeof v === 'string') {
-      if (v.trim() !== '') out.push(`${path}: ${oneLine(v)}`)
-    } else if (Array.isArray(v)) {
-      v.forEach((x, i) => walk(x, path ? `${path}.${i}` : String(i)))
-    } else if (v && typeof v === 'object') {
-      for (const [k, x] of Object.entries(v)) walk(x, path ? `${path}.${k}` : k)
-    }
+  let title = fallbackTitle
+  let lines = []
+  const flush = () => {
+    const t = lines.join('\n').trim()
+    if (t) out.push({ title, text: t })
+    lines = []
+  }
+  for (const line of stripStamp(md).split(/\r?\n/)) {
+    const h1 = /^#\s+(.+?)\s*$/.exec(line)
+    const h2 = /^##\s+(.+?)\s*$/.exec(line)
+    if (h1 && out.length === 0 && lines.every((l) => l.trim() === '')) { title = h1[1]; continue }
+    if (h2) { flush(); title = h2[1]; continue }
+    lines.push(line)
   }
-  walk(dict, prefix)
-  return out.join('\n')
+  flush()
+  return out
+}
+
+/** `plugins.chat.contextCollections` ("portfolio,services") as a list; refuses the blog and its authors. */
+export function contextCollections(value) {
+  if (value === undefined || value === null || value === '') return []
+  if (typeof value !== 'string') throw new Error('chat : contextCollections est une chaîne, des noms de collections séparés par des virgules')
+  const names = value.split(',').map((s) => s.trim()).filter(Boolean)
+  const never = names.filter((n) => NEVER_COLLECTIONS.includes(n))
+  if (never.length) throw new Error(`chat : ${never.join(', ')} n'entre jamais dans le contexte (les articles et leurs auteurs restent sur le site)`)
+  return names
 }
 
-/** One collection entry: its string fields as `key: value` lines (the title itself left out), then its body. */
-function entryText(e) {
-  const lines = []
-  for (const [k, v] of Object.entries(e.data ?? {})) {
-    if (typeof v !== 'string' || v.trim() === '' || v === e.title) continue
-    lines.push(`${k}: ${oneLine(v)}`)
+/** Markdown reduced to plain words: links to their text, images, emphasis and heading marks gone. */
+function plain(md) {
+  return md
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/[*_`>]+/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+/** Cut at a word, at most `max` characters plus the ellipsis. */
+function cut(s, max) {
+  if (s.length <= max) return s
+  const head = s.slice(0, max)
+  const at = head.lastIndexOf(' ')
+  return `${(at > max * 0.6 ? head.slice(0, at) : head).replace(/[\s,;:.]+$/, '')}…`
+}
+
+/** A field's value in `lang`: a string, or a `{ fr, en }` object. */
+function inLang(v, lang) {
+  if (typeof v === 'string') return v
+  if (v && typeof v === 'object' && typeof v[lang] === 'string') return v[lang]
+  return ''
+}
+
+/** An entry's one-line summary: `summary`, else its first summary-like field, else its body; 200 characters at most. */
+export function entrySummary(e, lang) {
+  let s = inLang(e.summary, lang)
+  for (const k of SUMMARY_FIELDS) {
+    if (text(s)) break
+    s = inLang(e.data?.[k], lang)
   }
-  const body = text(e.body)
-  return [lines.join('\n'), body].filter(Boolean).join('\n\n')
+  if (!text(s)) s = text(e.body)
+  return cut(plain(oneLine(s)), SUMMARY_CHARS)
 }
 
 /**
  * @param {{
- *   langs: Partial<Record<'fr' | 'en', { business?: string, llms?: string, pricing?: string, dictionary?: object }>>,
- *   collections?: { collection: string, lang?: 'fr' | 'en', title: string, data?: Record<string, unknown>, body?: string }[],
+ *   langs: Partial<Record<'fr' | 'en', { business?: string, context?: string, pricing?: string }>>,
+ *   collections?: { collection: string, label?: string | Record<string, string>, lang?: 'fr' | 'en', title: string, summary?: string | Record<string, string>, data?: Record<string, unknown>, body?: string }[],
  * }} sources an entry with no `lang` belongs to every language
  * @returns {string} the JSON text of plugins/chat/context.json
  */
@@ -61,22 +128,38 @@ export function chatContext({ langs = {}, collections = [] } = {}) {
   if (keys.length === 0 || keys.some((l) => !LANGS.includes(l))) {
     throw new Error(`chat : une langue fr ou en au moins, et aucune autre (reçu ${keys.join(', ') || 'rien'})`)
   }
+  for (const l of keys) {
+    const old = ['llms', 'dictionary'].filter((k) => langs[l]?.[k] !== undefined)
+    if (old.length) throw new Error(`chat : ${old.join(' et ')} ne sont plus lus depuis 1.3.0 ; passer context (src/chat/context.${l}.md), voir INSTALL.md « Updating from 1.2.1 »`)
+  }
+  for (const e of collections) {
+    if (NEVER_COLLECTIONS.includes(e.collection)) throw new Error(`chat : la collection ${e.collection} n'entre jamais dans le contexte`)
+  }
   const out = { format: CONTEXT_FORMAT, langs: {} }
   for (const lang of LANGS.filter((l) => keys.includes(l))) {
     const src = langs[lang] ?? {}
     const t = TITLES[lang]
-    const sections = []
-    const add = (title, body) => { if (body) sections.push({ title, text: body }) }
-    add(t.llms, text(src.llms))
-    add(t.pricing, text(src.pricing))
-    add(t.dictionary, src.dictionary ? flattenDictionary(src.dictionary) : '')
+    const business = text(src.business)
+    const curated = stripStamp(src.context ?? '')
+    if (!curated) throw new Error(`chat : src/chat/context.${lang}.md absent ou vide (le contexte de l'assistant)`)
+    if (curated.length > MAX_CONTEXT_CHARS) throw new Error(`chat : src/chat/context.${lang}.md fait ${curated.length} caractères, au-delà de ${MAX_CONTEXT_CHARS}`)
+    const sections = contextSections(curated, business || (lang === 'fr' ? 'Entreprise' : 'Business'))
+    const pricing = text(src.pricing)
+    if (pricing) sections.push({ title: t.pricing, text: pricing })
+    // One section per collection, one line per entry, in the order the site gives them.
+    const groups = new Map()
     for (const e of collections) {
       if (e.lang !== undefined && e.lang !== lang) continue
-      add(`${e.collection}${t.colon}${text(e.title)}`, entryText(e))
+      const title = oneLine(text(e.title))
+      if (!title) continue
+      const label = inLang(e.label, lang) || e.collection
+      if (!groups.has(label)) groups.set(label, [])
+      const summary = entrySummary(e, lang)
+      groups.get(label).push(summary ? `- ${title}${t.colon}${summary}` : `- ${title}`)
     }
-    if (sections.length === 0) throw new Error(`chat : contexte ${lang} vide`)
+    for (const [label, lines] of groups) sections.push({ title: label, text: lines.join('\n') })
     const part = {}
-    if (text(src.business)) part.business = text(src.business)
+    if (business) part.business = business
     part.sections = sections
     out.langs[lang] = part
   }

package/src/strings.js

@@ -23,7 +23,8 @@ export const STRINGS = {
     live: 'Vous répond en direct',
     relay: '{name} a pris le relais',
     relayGeneric: 'Une personne de l’équipe a pris le relais',
-    connecting: 'Connexion…',
+    handback: 'L’assistant virtuel a repris la conversation',
+    oneMoment: 'Un instant…',
     reconnecting: 'Connexion perdue, reconnexion…',
     notSent: 'Non envoyé.',
     retry: 'Réessayer',
@@ -70,7 +71,8 @@ export const STRINGS = {
     live: 'Replying live',
     relay: '{name} took over',
     relayGeneric: 'A team member took over',
-    connecting: 'Connecting…',
+    handback: 'The virtual assistant is back in the conversation',
+    oneMoment: 'One moment…',
     reconnecting: 'Connection lost, reconnecting…',
     notSent: 'Not sent.',
     retry: 'Retry',

package/src/trigger.js

@@ -1,7 +1,11 @@
 // The inline part of the chat (dist/trigger.iife.js, under the manifest's inlineBudget). At page
 // open it fetches nothing: it shows the bubble on every host and schedules the opener. The panel
-// (dist/widget.js) is imported on the first touch of the bubble or the opener (@pmeweb/loader
-// onInteraction: press, hover, focus, key) and opened on a click. Off the site's real hosts the
+// (dist/widget.js) is imported on the visitor's first sign of life ANYWHERE on the page
+// (@pmeweb/loader onInteraction on the document, PAGE_EVENTS: a press, a focus, a key, a pointer
+// moving, a scroll) and opened on a click. A test run (Lighthouse, PageSpeed) never does any of
+// these, so it never fetches the widget before the opener's 20 s (the opener appearing imports it
+// too: the visitor may open it next). Importing it that early is what lets the widget start
+// Turnstile well before the panel opens (widget.js, « TURNSTILE »). 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
@@ -21,11 +25,13 @@
 // `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'
+import { INTERACTION_EVENTS, 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
+/** The page-wide signs of a person: the loader's own, plus a pointer moving and a scroll. */
+export const PAGE_EVENTS = [...INTERACTION_EVENTS, 'pointermove', 'scroll']
 
 export function startChat({
   doc = document, win = window, hostname = win.location.hostname, importLazy = (u) => import(/* @vite-ignore */ u), onInteraction = interact,
@@ -36,13 +42,16 @@ export function startChat({
   const teaser = root.querySelector('.pmw-chat__teaser')
   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 warm = () => load().catch(() => {})
+  const open = () => load().then((w) => w.open(), () => {})
+  const isOpen = () => root.hasAttribute('data-open')
+  onInteraction(doc, warm, { events: PAGE_EVENTS })
   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(), () => {})
+      if (v === 'panel' && !isOpen()) open()
+      else if (v === 'bubble' && widget) widget.then((w) => w.close?.(), () => {})
     }
     view()
     win.addEventListener('hashchange', view)
@@ -50,7 +59,7 @@ export function startChat({
 
   let away = false
   const sync = (f = doc.activeElement) => {
-    const h = away && !root.hasAttribute('data-open') && !root.contains(f)
+    const h = away && !isOpen() && !root.contains(f)
     root.toggleAttribute('inert', h)
   }
   const zone = doc.querySelector('[data-pmw-chat-avoid]') ?? [...doc.querySelectorAll('footer')].pop()
@@ -70,16 +79,17 @@ export function startChat({
     try { store?.setItem(OPENER_KEY, '1') } catch { /* nothing to remember with */ }
   }
   const show = () => {
-    if (done || away || !teaser || root.hasAttribute('data-open')) return
+    if (done || away || !teaser || isOpen()) return
     finish()
     teaser.hidden = false
+    warm()
   }
   root.addEventListener('click', (e) => {
     const t = e.target.closest?.('[data-pmw-chat-open],[data-pmw-chat-dismiss]')
     if (!t) return
     if (teaser) teaser.hidden = true
     finish()
-    if (t.hasAttribute('data-pmw-chat-open')) load().then((w) => w.open(), () => {})
+    if (t.hasAttribute('data-pmw-chat-open')) open()
   })
   if (!done && teaser && canonical) {
     win.setTimeout(show, OPENER_DELAY_MS)

package/src/widget.css

@@ -97,15 +97,17 @@
 @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 {
+/* Where a person takes over: a line, the green dot and « {name} a pris le relais », centred. Where
+   they hand back: the same line, the dot in the muted colour (nobody is live any more). */
+.pmw-chat__log > .pmw-chat__relay, .pmw-chat__log > .pmw-chat__handback {
   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::before, .pmw-chat__relay::after, .pmw-chat__handback::before, .pmw-chat__handback::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__relay-dot--back { background: var(--pmw-chat-muted, #4b5563); }
+.pmw-chat__log > .pmw-chat__relay + li, .pmw-chat__log > .pmw-chat__handback + 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; }
 /* The end: a thin line, the sentence centred, an outlined pill. */
@@ -117,13 +119,16 @@
   background: var(--pmw-chat-panel-bg, #ffffff); color: var(--pmw-chat-link, #0a1b3d); font-weight: 600;
 }
 
-/* The composer: one rounded white field holding the photo button, the text and the send pill. */
+/* The composer: one rounded white field holding the photo button, the text and the send pill.
+   16 px on each side, so the field's focus ring (3 px, 2 px out) keeps 11 px off the panel's edge;
+   on a phone the bottom adds the home indicator's safe area. */
 .pmw-chat__composer {
-  display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px;
+  --pmw-chat-gap: 8px;
+  display: flex; flex-direction: column; gap: var(--pmw-chat-gap); padding: 14px 16px 16px;
   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__composer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
 }
 .pmw-chat__box {
   display: flex; align-items: flex-end; gap: 6px; padding: 4px; border-radius: 24px;
@@ -145,7 +150,20 @@
   background: var(--pmw-chat-accent, #0a1b3d); color: var(--pmw-chat-accent-fg, #ffffff);
 }
 .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; }
+/* Turnstile's row (widget.js « TURNSTILE »): collapsed, with no height and no gap, until Cloudflare
+   asks the visitor to act (its before-interactive or error callback sets data-ask); collapsed again
+   on success. Full width, aligned with the field (the widget is data-size flexible, 300 px minimum:
+   the composer's inside is 358 px on a 390 px phone, 346 px in the 380 px desktop panel). In the
+   composer it sits ABOVE the field, which therefore never moves when it opens or closes. */
+.pmw-chat__check {
+  display: grid; grid-template-rows: 0fr; margin-bottom: calc(-1 * var(--pmw-chat-gap, 0px));
+  transition: grid-template-rows 0.25s ease, margin-bottom 0.25s ease;
+}
+.pmw-chat__check[data-ask] { grid-template-rows: 1fr; margin-bottom: 4px; }
+.pmw-chat__check-in { min-height: 0; overflow: hidden; }
+@media (prefers-reduced-motion: reduce) {
+  .pmw-chat__check { transition: none; }
+}
 /* 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 {
@@ -160,7 +178,7 @@
 .pmw-chat__photo { display: block; max-width: 100%; max-height: 220px; border-radius: 14px; }
 
 /* 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__fallback { --pmw-chat-gap: 14px; display: flex; flex-direction: column; gap: var(--pmw-chat-gap); 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; }