@pmeweb/plugin-chat 0.0.0-stage → 1.0.0

package/src/strings.js

@@ -0,0 +1,114 @@
+// Every word the chat shows, in one place: the component renders the bubble's words from here at
+// build, and the lazy widget renders the panel's. A site may override any string through the
+// component's `strings` prop (merged over these). French follows OQLF typography: a non-breaking
+// space (U+00A0) before a colon, none before ; ? !, and the apostrophe ’.
+//
+// The bubble always says « Assistant virtuel » in text (spec § 6, never passing for a person); its
+// accessible name STARTS with that visible text (WCAG 2.5.3, label in name).
+
+const NBSP = ' '
+
+export const STRINGS = {
+  fr: {
+    assistant: 'Assistant virtuel',
+    openLabel: 'Assistant virtuel, ouvrir le clavardage',
+    dismissTeaser: 'Masquer ce message',
+    close: 'Fermer le clavardage',
+    panelTitle: 'Clavardage',
+    automated: 'Réponses automatiques, tirées du contenu de ce site.',
+    privacy: 'Confidentialité',
+    you: 'Vous',
+    messageLabel: 'Votre message',
+    send: 'Envoyer',
+    live: 'Vous répond en direct',
+    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.',
+    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.',
+    name: 'Votre nom',
+    contact: 'Téléphone ou courriel',
+    need: 'Votre demande',
+    fallbackSend: 'Envoyer la demande',
+    fallbackSent: 'Merci, votre demande a été transmise.',
+    fallbackMissing: 'Remplissez les trois champs.',
+    said: `{name}${NBSP}: {text}`,
+    attachPhoto: 'Joindre une photo',
+    photoHint: 'Évitez les photos de personnes ou de pièces d’identité.',
+    photoAlt: 'Votre photo',
+    photoSent: 'Photo envoyée',
+    photoLimit: 'Trois photos au plus par conversation.',
+    photoTooLarge: 'Cette photo est trop lourde.',
+    photoUnreadable: 'Ce fichier n’est pas une photo lisible.',
+    photoFailed: 'La photo n’a pas pu être envoyée. Réessayez.',
+    demoAsk: 'Pouvez-vous m’en dire plus sur {topic}?',
+    demoQuestion: 'Quels sont vos délais?',
+    demoAnswer: '(Démonstration) Ici, l’assistant répond à partir du contenu de votre site.',
+    demoHint: `Aperçu${NBSP}: la conversation est désactivée.`,
+  },
+  en: {
+    assistant: 'Virtual assistant',
+    openLabel: 'Virtual assistant, open the chat',
+    dismissTeaser: 'Hide this message',
+    close: 'Close the chat',
+    panelTitle: 'Chat',
+    automated: 'Automatic answers, drawn from this site’s content.',
+    privacy: 'Privacy',
+    you: 'You',
+    messageLabel: 'Your message',
+    send: 'Send',
+    live: 'Replying live',
+    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.',
+    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.',
+    name: 'Your name',
+    contact: 'Phone or email',
+    need: 'Your request',
+    fallbackSend: 'Send the request',
+    fallbackSent: 'Thank you, your request was sent.',
+    fallbackMissing: 'Fill in all three fields.',
+    said: '{name}: {text}',
+    attachPhoto: 'Attach a photo',
+    photoHint: 'Avoid photos of people or of identity documents.',
+    photoAlt: 'Your photo',
+    photoSent: 'Photo sent',
+    photoLimit: 'Three photos at most per conversation.',
+    photoTooLarge: 'This photo is too large.',
+    photoUnreadable: 'This file is not a readable photo.',
+    photoFailed: 'The photo could not be sent. Try again.',
+    demoAsk: 'Can you tell me more about {topic}?',
+    demoQuestion: 'What are your lead times?',
+    demoAnswer: '(Demo) Here, the assistant answers from your site’s content.',
+    demoHint: 'Preview: the conversation is turned off.',
+  },
+}
+
+/** 'fr-CA' is French; anything but fr or en is French. */
+export const langOf = (lang) => (String(lang ?? '').slice(0, 2).toLowerCase() === 'en' ? 'en' : 'fr')
+
+export function stringsFor(lang, overrides = {}) {
+  const base = STRINGS[langOf(lang)]
+  const out = { ...base }
+  for (const [k, v] of Object.entries(overrides ?? {})) if (typeof v === 'string' && k in base) out[k] = v
+  return out
+}
+
+export const fill = (s, vars) => s.replace(/\{(\w+)\}/g, (m, k) => (k in vars ? String(vars[k]) : m))

package/src/trigger-entry.js

@@ -0,0 +1,3 @@
+import { startChat } from './trigger.js'
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => startChat())
+else startChat()

package/src/trigger.js

@@ -0,0 +1,62 @@
+// 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
+// panel runs its demo (manifest preview: test); the widget decides that, not this file.
+//
+// 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'
+
+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,
+} = {}) {
+  const root = doc.getElementById('pmw-chat')
+  if (!root) return null
+  root.hidden = false
+  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 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
+  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
+    finish()
+    teaser.hidden = false
+  }
+  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 (!done && teaser) {
+    timer = 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()
+    })
+    if (win.matchMedia?.('(pointer: fine)').matches) {
+      on(doc, 'mouseout', (e) => { if (!e.relatedTarget && e.clientY <= 0) show() })
+    }
+  }
+  return { load, show }
+}

package/src/widget.css

@@ -0,0 +1,108 @@
+/* @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). */
+.pmw-chat__panel {
+  position: fixed; z-index: 81; inset: 0;
+  display: flex; flex-direction: column;
+  background: var(--pmw-chat-panel-bg, #ffffff); color: var(--pmw-chat-fg, #1f2328);
+  font-family: var(--pmw-chat-font, inherit); font-size: 16px; line-height: 1.45;
+}
+.pmw-chat__panel[hidden], .pmw-chat__panel [hidden] { display: none !important; }
+@media (min-width: 640px) {
+  .pmw-chat__panel {
+    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);
+  }
+}
+.pmw-chat__panel 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); }
+
+.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);
+}
+.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__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__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;
+}
+.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; }
+.pmw-chat__msg.is-pending { opacity: 0.75; }
+.pmw-chat__msg.is-failed { outline: 2px solid var(--pmw-chat-error, #b42318); }
+.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 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; }
+}
+.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; }
+
+.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;
+  border: 1px solid var(--pmw-chat-field-border, #7d8590); background: #ffffff; color: var(--pmw-chat-field-fg, #1f2328);
+}
+.pmw-chat__send {
+  min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; 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%; }
+/* 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;
+}
+.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__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; }
+.pmw-chat__field { display: flex; flex-direction: column; gap: 4px; }
+.pmw-chat__field label { font-size: 14px; font-weight: 600; }
+.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; }
+/* A reply arrived while the panel was closed. */
+.pmw-chat[data-unread] .pmw-chat__bubble { position: relative; }
+.pmw-chat[data-unread] .pmw-chat__bubble::after {
+  content: ''; position: absolute; top: 2px; left: 38px; width: 12px; height: 12px; border-radius: 50%;
+  background: var(--pmw-chat-error, #b42318); box-shadow: 0 0 0 2px #ffffff;
+}