@luigisbox/luma 0.7.1 → 0.8.0-beta.0

package/src/widgets/convo/markdown.ts

@@ -0,0 +1,76 @@
+// The assistant's Markdown as lit markup: paragraphs, headings, lists, tables,
+// **strong**, *emphasis*, `code` and links. Every piece of text is bound as
+// text (lit's `${}`), never parsed as HTML: whatever the model writes stays
+// words. A link is a link only to a page of this site (the model may be
+// talked into writing any URL); any other stays its text. Rendered again as
+// the answer streams in: a mark not closed yet shows as typed until it is.
+
+import { html } from '../../lit';
+
+const INLINE = /\*\*(.+?)\*\*|\*([^*\s](?:[^*]*[^*\s])?)\*|`([^`]+)`|\[([^\]]+)\]\(([^)\s]+)\)/g;
+
+const link = (text: unknown, href: string) => {
+  try {
+    const u = new URL(href, location.href);
+    if (u.origin === location.origin && /^https?:$/.test(u.protocol)) return html`<a href=${u.href}>${text}</a>`;
+  } catch {}
+  return text;
+};
+
+const inline = (s: string): unknown[] => {
+  const out: unknown[] = [];
+  let last = 0;
+  for (const m of s.matchAll(INLINE)) {
+    if (m.index! > last) out.push(s.slice(last, m.index));
+    out.push(m[1] != null ? html`<strong>${inline(m[1])}</strong>` : m[2] != null ? html`<em>${inline(m[2])}</em>` : m[3] != null ? html`<code>${m[3]}</code>` : link(inline(m[4]), m[5]));
+    last = m.index! + m[0].length;
+  }
+  if (last < s.length) out.push(s.slice(last));
+  return out;
+};
+
+const ITEM = /^\s*([-*+]|\d+[.)])\s+(.*)$/;
+const ROW = /^\s*\|/;
+const cells = (l: string) => l.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+
+export const md = (text: string) => {
+  const out: unknown[] = [];
+  const lines = text.split('\n');
+  for (let i = 0; i < lines.length; ) {
+    const l = lines[i];
+    let m: RegExpExecArray | null;
+    if (!l.trim()) i++;
+    else if ((m = /^\s*#{1,6}\s+(.*)$/.exec(l))) {
+      out.push(html`<h3>${inline(m[1])}</h3>`);
+      i++;
+    } else if (ITEM.test(l)) {
+      const items: string[] = [];
+      const ordered = /\d/.test(ITEM.exec(l)![1]);
+      // An indented line that is not an item carries on the item before it.
+      for (; i < lines.length && (ITEM.test(lines[i]) || (/^\s+\S/.test(lines[i]) && items.length)); i++) {
+        const it = ITEM.exec(lines[i]);
+        if (it) items.push(it[2]);
+        else items[items.length - 1] += ` ${lines[i].trim()}`;
+      }
+      const lis = items.map((t) => html`<li>${inline(t)}</li>`);
+      out.push(ordered ? html`<ol>${lis}</ol>` : html`<ul>${lis}</ul>`);
+    } else if (ROW.test(l)) {
+      const rows: string[][] = [];
+      for (; i < lines.length && ROW.test(lines[i]); i++) if (!/^[\s|:-]+$/.test(lines[i])) rows.push(cells(lines[i]));
+      const [head, ...body] = rows;
+      // Separator rows alone (a table's first lines still streaming in): nothing yet.
+      if (head)
+        out.push(
+          html`<div class="lbx-cv__scroll" tabindex="0" role="region" aria-label=${head.join(', ')}><table>
+            <thead><tr>${head.map((c) => html`<th scope="col">${inline(c)}</th>`)}</tr></thead>
+            <tbody>${body.map((r) => html`<tr>${r.map((c) => html`<td>${inline(c)}</td>`)}</tr>`)}</tbody>
+          </table></div>`,
+        );
+    } else {
+      const para: string[] = [];
+      for (; i < lines.length && lines[i].trim() && !ITEM.test(lines[i]) && !ROW.test(lines[i]) && !/^\s*#{1,6}\s/.test(lines[i]); i++) para.push(lines[i].trim());
+      out.push(html`<p>${inline(para.join(' '))}</p>`);
+    }
+  }
+  return out;
+};

package/src/widgets/convo/protocol.ts

@@ -0,0 +1,154 @@
+// The conversation service's wire contract (CS-RTP 1.0): one POST per turn
+// to `{endpoint}/conversation/{trackerId}/turn`, answered by a stream of
+// server-sent events. Luma renders what it is sent, in its order, and echoes
+// the opaque references (`action_ref`, `question_ref`) back; it never reads
+// meaning into a block. No DOM: unit-tested as it is.
+
+const PROTOCOL = '1.0';
+
+import type { ConvoBlock, ConvoConfigType, GlobalConfigType } from '../../types';
+
+/** The conversation service's routes for the site (`/turn`, `/assist`, `/eligibility_check` under it). */
+export const endpointOf = (cv: ConvoConfigType) => `${(cv.endpoint ?? 'https://conversational-proxy.luigisbox.com/api/v2').replace(/\/+$/, '')}/conversation/${encodeURIComponent(cv.trackerId)}`;
+
+export type Input = { kind: 'text'; text: string } | { kind: 'answer'; text: string; question_ref: string } | { kind: 'action'; action_ref: string };
+
+/** One thing the shopper asked: a retry sends it again with the same key, so the service replays it rather than answering twice. */
+export interface Intent {
+  input: Input;
+  key: string;
+}
+
+export interface Event {
+  event_type: string;
+  event_seq: number;
+  protocol_version: string;
+  payload: any;
+}
+
+/** A turn ends with one of these (a terminated conversation may follow one, or come alone). */
+const CLOSERS = new Set(['turn.completed', 'turn.error', 'turn.abandoned', 'turn.ignored', 'conversation.terminated']);
+
+/** The stream broke the contract, or ended before its turn did: the turn failed (retriable). */
+export class StreamError extends Error {}
+
+/**
+ * The events of a turn's stream, checked: each a JSON `data:` record, in
+ * `event_seq` order (a gap is lost data), of protocol 1.x (an unknown event
+ * type of a later 1.x is skipped); the stream must end with a closer.
+ * `onChunk` is told of every chunk (the caller's idle deadline).
+ */
+export async function* events(body: ReadableStream<Uint8Array>, onChunk?: () => void): AsyncGenerator<Event> {
+  const reader = body.getReader();
+  const text = new TextDecoder();
+  let buf = '';
+  let seq = 0;
+  let closed = false;
+  const parse = (record: string): Event | null => {
+    const data = record
+      .split('\n')
+      .filter((l) => l.startsWith('data:'))
+      .map((l) => l.slice(5).replace(/^ /, ''))
+      .join('\n');
+    if (!data) return null;
+    let e: Event;
+    try {
+      e = JSON.parse(data);
+    } catch {
+      throw new StreamError(`not JSON: ${data.slice(0, 100)}`);
+    }
+    if (typeof e?.event_type !== 'string' || e.event_seq !== ++seq) throw new StreamError(`event ${seq}: ${e?.event_seq} ${e?.event_type}`);
+    if (String(e.protocol_version).split('.')[0] !== PROTOCOL.split('.')[0]) throw new StreamError(`protocol ${e.protocol_version}`);
+    if (CLOSERS.has(e.event_type)) closed = true;
+    return e;
+  };
+  try {
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      onChunk?.();
+      // CRLF as LF, on the whole buffer: a pair split between two chunks too.
+      buf = (buf + text.decode(value, { stream: true })).replace(/\r\n/g, '\n');
+      let at: number;
+      while ((at = buf.indexOf('\n\n')) >= 0) {
+        const e = parse(buf.slice(0, at));
+        buf = buf.slice(at + 2);
+        if (e) yield e;
+      }
+    }
+    const e = parse(buf);
+    if (e) yield e;
+  } finally {
+    reader.releaseLock();
+  }
+  if (!closed) throw new StreamError('ended before its turn did');
+}
+
+/** The service's identity of a shopper: 10 to 25 digits, from Luma's visitor id (stable across pages). */
+export const deviceId = (visitor: string) =>
+  [...visitor]
+    .map((c) => c.charCodeAt(0) % 10)
+    .join('')
+    .slice(0, 25)
+    .padEnd(10, '0');
+
+/**
+ * An event's part in an answer's blocks: text deltas joined into their text
+ * block, in its place among the others (a block id of its own each), a
+ * rendered block kept as sent (returned: its products are looked up).
+ */
+export const addBlock = (blocks: ConvoBlock[], type: string, p: any): ConvoBlock | undefined => {
+  const last = blocks[blocks.length - 1];
+  if (type === 'text.delta') {
+    if (last?.type === 'text' && last.block_id === String(p?.block_id)) last.text += String(p?.delta ?? '');
+    else blocks.push({ block_id: String(p?.block_id), type: 'text', text: String(p?.delta ?? '') });
+  } else if (type === 'render.block' && p && typeof p.type === 'string' && p.type !== 'text') return (blocks.push(p), p);
+};
+
+/** Who asks and in which language, as the first turn (`initiate`, /assist's too) says it. */
+export const contextOf = (g: GlobalConfigType, cv: ConvoConfigType, visitor: string) => ({
+  shop: cv.trackerId,
+  locale: cv.locale ?? g.locale ?? 'en',
+  device: deviceId(visitor),
+  currency: g.currency,
+  priceField: cv.priceField,
+  availabilityField: cv.availabilityField,
+});
+
+/** A turn's request body. The first turn (`initiate`) says who and in which language. */
+export const turnBody = (conversation: string, committed: boolean, intent: Intent, ctx: ReturnType<typeof contextOf>) => ({
+  protocol_version: PROTOCOL,
+  op: committed ? 'converse' : 'initiate',
+  conversation_id: conversation,
+  idempotency_key: intent.key,
+  request_id: crypto.randomUUID(),
+  input: intent.input,
+  ...(committed
+    ? {}
+    : {
+        client_context: { locale: ctx.locale, shop: ctx.shop },
+        ...(ctx.currency ? { currency: ctx.currency } : {}),
+        ...(ctx.priceField ? { price_field: ctx.priceField } : {}),
+        ...(ctx.availabilityField ? { availability_field: ctx.availabilityField } : {}),
+      }),
+  device_user_id: ctx.device,
+});
+
+/**
+ * An HTTP failure before the stream, as what the shopper is told (a key of
+ * the widget's translations) and whether sending it again may help: 403 the
+ * site's assistant is off (no catalog), 404 the conversation expired (about
+ * an hour on the service), 429 too many turns, 5xx the service.
+ */
+export const failure = (status: number): { error: string; retry: boolean } =>
+  status === 403 ? { error: 'unavailable', retry: false } : status === 404 ? { error: 'gone', retry: false } : status === 429 ? { error: 'busy', retry: true } : { error: 'error', retry: status >= 500 };
+
+/** An answer's Markdown as plain words (what a screen reader is told; the autocomplete's nudge shows them). */
+export const words = (text: string) =>
+  text
+    .replace(/\[([^\]]+)\]\([^)\s]+\)/g, '$1')
+    .replace(/\*\*|`|^\s*(#{1,6}|[-*+]|\d+[.)])\s+|^[\s|:-]+$/gm, '')
+    .replace(/\s*\|\s*/g, ' ')
+    .replace(/\*([^*\s][^*]*)\*/g, '$1')
+    .replace(/\s+/g, ' ')
+    .trim();

package/src/widgets/convo/strings.ts

@@ -0,0 +1,93 @@
+// The dialog's own words, in the languages Luma has dictionaries for (the
+// site's _translations.ts overrides any: `{ de: { convo: { title: '…' } } }`).
+// In the widget's chunk, not Luma's shared dictionary: every widget loads
+// that one, and only a shopper who opens the dialog reads these.
+export default {
+  en: {
+    continue: 'Continue with the assistant',
+    disclaimer: 'AI answers: check the details on the product page',
+    log: 'Conversation',
+    ignored: 'Not answered: the assistant moved on',
+    title: 'Shopping assistant',
+    close: 'Close',
+    startOver: 'Start over',
+    intro: 'Describe what you are looking for in your own words, and the assistant will suggest products.',
+    placeholder: 'Ask anything…',
+    send: 'Send',
+    stop: 'Stop',
+    retry: 'Try again',
+    you: 'You',
+    assistant: 'Assistant',
+    thinking: 'Thinking',
+    products: 'Products found',
+    sources: 'Sources',
+    compare: 'Comparison',
+    refinements: 'What the assistant goes by',
+    error: 'Something went wrong.',
+    busy: 'The assistant is busy. Try again in a moment.',
+    gone: 'This conversation has expired. Start over to ask again.',
+    unavailable: 'The assistant is not available right now.',
+    limit: 'The assistant cannot answer this in full.',
+    stopped: 'Stopped.',
+    ended: 'This conversation has ended.',
+    final: 'This conversation has ended and cannot continue.',
+  },
+  cs: {
+    continue: 'Pokračovat s asistentem',
+    disclaimer: 'Odpovídá AI: podrobnosti ověřte na stránce produktu',
+    log: 'Konverzace',
+    ignored: 'Bez odpovědi: asistent už pokračoval',
+    title: 'Nákupní asistent',
+    close: 'Zavřít',
+    startOver: 'Začít znovu',
+    intro: 'Popište vlastními slovy, co hledáte, a asistent vám doporučí produkty.',
+    placeholder: 'Zeptejte se na cokoli…',
+    send: 'Odeslat',
+    stop: 'Zastavit',
+    retry: 'Zkusit znovu',
+    you: 'Vy',
+    assistant: 'Asistent',
+    thinking: 'Přemýšlím',
+    products: 'Nalezené produkty',
+    sources: 'Zdroje',
+    compare: 'Porovnání',
+    refinements: 'Čím se asistent řídí',
+    error: 'Něco se pokazilo.',
+    busy: 'Asistent je zaneprázdněn. Zkuste to za chvíli.',
+    gone: 'Tato konverzace vypršela. Začněte znovu.',
+    unavailable: 'Asistent teď není k dispozici.',
+    limit: 'Asistent na tohle nemůže odpovědět celé.',
+    stopped: 'Zastaveno.',
+    ended: 'Tato konverzace skončila.',
+    final: 'Tato konverzace skončila a nelze v ní pokračovat.',
+  },
+  de: {
+    continue: 'Mit dem Assistenten weiter',
+    disclaimer: 'KI-Antworten: Details auf der Produktseite prüfen',
+    log: 'Gespräch',
+    ignored: 'Nicht beantwortet: der Assistent ist weiter',
+    title: 'Einkaufsassistent',
+    close: 'Schließen',
+    startOver: 'Neu beginnen',
+    intro: 'Beschreiben Sie mit eigenen Worten, was Sie suchen, und der Assistent schlägt Produkte vor.',
+    placeholder: 'Fragen Sie etwas…',
+    send: 'Senden',
+    stop: 'Stopp',
+    retry: 'Erneut versuchen',
+    you: 'Sie',
+    assistant: 'Assistent',
+    thinking: 'Denkt nach',
+    products: 'Gefundene Produkte',
+    sources: 'Quellen',
+    compare: 'Vergleich',
+    refinements: 'Woran sich der Assistent hält',
+    error: 'Etwas ist schiefgelaufen.',
+    busy: 'Der Assistent ist ausgelastet. Versuchen Sie es gleich noch einmal.',
+    gone: 'Dieses Gespräch ist abgelaufen. Beginnen Sie neu.',
+    unavailable: 'Der Assistent ist gerade nicht verfügbar.',
+    limit: 'Der Assistent kann das nicht vollständig beantworten.',
+    stopped: 'Gestoppt.',
+    ended: 'Dieses Gespräch ist beendet.',
+    final: 'Dieses Gespräch ist beendet und kann nicht fortgesetzt werden.',
+  },
+} as Record<string, Record<string, string>>;

package/src/widgets/convo/style-convo.css

@@ -0,0 +1,173 @@
+/* The conversation's panel: lives in a shadow root (index.ts), so the site's
+   CSS cannot reach it and ours cannot leak. A panel from the right over the
+   dimmed page (the whole screen on a phone). Tokens on :host, each
+   replaceable by the integration's style-convo.css (`:host { --lbx-cv-accent: #8740bf; }`):
+     --lbx-cv-font, --lbx-cv-fg, --lbx-cv-bg, --lbx-cv-accent (the site's brand colour),
+     --lbx-cv-muted, --lbx-cv-line, --lbx-cv-field (inputs' edge, 3:1), --lbx-cv-soft, --lbx-cv-width
+   (--lbx-cv-accent-text and --lbx-cv-on-accent are Luma's, set by index.ts for the accent)
+   Derived from the accent: --tint (a 10% wash: the shopper's bubbles, the
+   avatar), --tint-line (chips' edges), --accent-text (accent text on white
+   and on the tint, 4.5:1 for a mid-tone accent).
+   The --lbx-c-* properties are the high-contrast mode's palette (core/a11y.ts),
+   inherited from the document: unset, every rule keeps its normal value. */
+:host {
+  --lbx-cv-font: inherit;
+  --lbx-cv-fg: #1a1a1a;
+  --lbx-cv-bg: #fff;
+  --lbx-cv-accent: #1a1a1a;
+  --lbx-cv-on-accent: #fff;
+  --lbx-cv-muted: #5c5c5c;
+  --lbx-cv-line: #e6e6e6;
+  --lbx-cv-field: #8a8a8a;
+  --lbx-cv-soft: #f6f6f7;
+  --lbx-cv-width: 440px;
+}
+.lbx-cv {
+  --fg: var(--lbx-c-fg, var(--lbx-cv-fg));
+  --bg: var(--lbx-c-bg, var(--lbx-cv-bg));
+  --accent: var(--lbx-c-sel-bg, var(--lbx-cv-accent));
+  --on-accent: var(--lbx-c-sel-fg, var(--lbx-cv-on-accent));
+  /* Made 4.5:1 on the tint for the site's accent by index.ts (--lbx-cv-accent-text); this until then. */
+  --accent-text: var(--lbx-c-fg, var(--lbx-cv-accent-text, color-mix(in srgb, var(--lbx-cv-accent) 82%, #000)));
+  --tint: var(--lbx-c-bg, color-mix(in srgb, var(--lbx-cv-accent) 10%, var(--lbx-cv-bg)));
+  --tint-line: var(--lbx-c-line, color-mix(in srgb, var(--lbx-cv-accent) 40%, var(--lbx-cv-bg)));
+  --muted: var(--lbx-c-muted, var(--lbx-cv-muted));
+  --line: var(--lbx-c-line, var(--lbx-cv-line));
+  --field: var(--lbx-c-line, var(--lbx-cv-field));
+  --soft: var(--lbx-cv-soft);
+  box-sizing: border-box; margin: 0 0 0 auto; padding: 0; border: 0; border-inline-start: var(--lbx-c-border, 0) solid var(--line);
+  width: min(var(--lbx-cv-width), 100%); height: 100vh; height: 100dvh; max-width: none; max-height: none;
+  overflow: hidden; background: var(--bg); color: var(--fg);
+  font-family: var(--lbx-cv-font); font-size: 15px; line-height: 1.45; text-align: start;
+  box-shadow: -12px 0 40px rgb(0 0 0 / .18);
+}
+.lbx-cv::backdrop { background: rgb(0 0 0 / .4); }
+@media (prefers-reduced-motion: no-preference) {
+  .lbx-cv[open] { animation: lbx-cv-in .22s ease-out; }
+  .lbx-cv[open]::backdrop { animation: lbx-cv-fade .22s ease-out; }
+}
+@keyframes lbx-cv-in { from { transform: translateX(32px); opacity: 0; } }
+@keyframes lbx-cv-fade { from { opacity: 0; } }
+/* A phone (or a short touch screen: a phone in landscape): the whole screen. */
+@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
+  .lbx-cv { width: 100%; box-shadow: none; }
+}
+/* A very short window (400% zoom): the log keeps the room. */
+@media (max-height: 400px) {
+  .lbx-cv__titles p { display: none; }
+}
+/* Resets at no specificity: every class rule below wins over them (a reset of
+   ours outranking `.lbx-cv__send` drew its label dark on the dark accent). */
+:where(.lbx-cv) *, :where(.lbx-cv) *::before, :where(.lbx-cv) *::after { box-sizing: border-box; }
+:where(.lbx-cv) :is(h2, h3, p) { margin: 0; }
+:where(.lbx-cv) :is(button, input) { font: inherit; color: inherit; }
+:where(.lbx-cv) button { cursor: pointer; }
+.lbx-cv svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.lbx-cv__box { display: flex; flex-direction: column; height: 100%; }
+.lbx-cv button:disabled { cursor: default; opacity: .55; }
+.lbx-cv :focus-visible { outline: var(--lbx-c-ring, 2px) solid var(--accent); outline-offset: 2px; }
+.lbx-cv__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* The assistant's mark: a sparkle on the tint. */
+.lbx-cv__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--accent-text); }
+.lbx-cv__avatar svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
+
+.lbx-cv__head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--line); }
+.lbx-cv__titles { flex: 1; min-width: 0; }
+.lbx-cv__titles h2 { font-size: 16px; font-weight: 600; line-height: 1.25; }
+.lbx-cv__titles p { font-size: 12px; color: var(--muted); }
+.lbx-cv__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); }
+.lbx-cv__icon:hover { background: var(--soft); color: var(--fg); }
+
+/* Its end at the bottom, and kept there as an answer grows (column-reverse), unless the shopper scrolled up. */
+.lbx-cv__log { flex: 1; display: flex; flex-direction: column-reverse; overflow: auto; padding: 16px; }
+.lbx-cv__log:focus { outline: none; }
+.lbx-cv__msgs { display: flex; flex-direction: column; gap: 18px; }
+.lbx-cv__intro { color: var(--muted); padding: 8px 0; }
+.lbx-cv__q { align-self: flex-end; max-width: 85%; padding: 8px 14px; border: var(--lbx-c-border, 0) solid var(--line); border-radius: 18px 18px 4px 18px; background: var(--tint); color: var(--accent-text); overflow-wrap: anywhere; }
+.lbx-cv__q[data-status="ignored"] { opacity: .7; text-decoration: line-through; }
+.lbx-cv__a { display: flex; gap: 10px; align-items: flex-start; }
+.lbx-cv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
+.lbx-cv__text { display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
+.lbx-cv__text h3 { font-size: inherit; font-weight: 600; }
+.lbx-cv__text ul, .lbx-cv__text ol { margin: 0; padding-inline-start: 20px; }
+.lbx-cv__text li + li { margin-top: 2px; }
+.lbx-cv__text a { color: var(--accent-text); text-decoration: underline; }
+.lbx-cv__text code { font-family: monospace; font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--soft); }
+.lbx-cv__label { font-weight: 600; }
+.lbx-cv__wait, .lbx-cv__sources { color: var(--muted); font-size: 13px; }
+.lbx-cv__notice { padding: 10px 14px; border-radius: 10px; background: var(--soft); border-inline-start: 3px solid var(--line); }
+.lbx-cv__notice[data-variant="warning"], .lbx-cv__notice[data-variant="error"] { border-inline-start-color: #b3261e; }
+.lbx-cv__notice[data-variant="success"] { border-inline-start-color: #1f7a35; }
+@media (prefers-reduced-motion: no-preference) {
+  .lbx-cv__wait::after { content: '…'; display: inline-block; animation: lbx-cv-wait 1.2s steps(4) infinite; width: 0; overflow: hidden; vertical-align: bottom; }
+}
+@keyframes lbx-cv-wait { to { width: 1.2em; } }
+
+.lbx-cv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.lbx-cv__chip { min-height: 32px; padding: 4px 14px; border: 1px solid var(--tint-line); border-radius: 999px; background: var(--bg); color: var(--accent-text); font-size: 14px; text-align: start; }
+.lbx-cv__chip:hover:not(:disabled) { background: var(--tint); border-color: var(--accent); }
+.lbx-cv__question { display: flex; flex-direction: column; gap: 8px; }
+.lbx-cv__answer { display: flex; gap: 8px; }
+.lbx-cv__answer input { flex: 1; min-width: 0; min-height: 36px; padding: 4px 14px; border: 1px solid var(--field); border-radius: 999px; background: var(--bg); font-size: 16px; }
+
+/* Products: rows, the picture left, the title and price beside it, its own controls under. */
+.lbx-cv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.lbx-cv__list > li { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
+.lbx-cv__list > li:hover { border-color: var(--tint-line); }
+.lbx-cv__tile { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: var(--lbx-c-underline, none); }
+.lbx-cv__tile:hover .lbx-cv__title { text-decoration: underline; }
+.lbx-cv__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.lbx-cv__title { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.lbx-cv__price { font-weight: 600; font-size: 15px; }
+.lbx-cv__more { align-self: flex-start; margin-inline-start: 76px; min-height: 28px; padding: 2px 12px; border: 1px solid var(--tint-line); border-radius: 999px; background: none; color: var(--accent-text); font-size: 13px; }
+.lbx-cv__more:hover { background: var(--tint); }
+.lbx-cv .lbx-img { flex: none; display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--soft); }
+.lbx-cv .lbx-img > img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.lbx-cv [data-lbx-ph]:not([data-lbx-loaded]) { background: var(--lbx-ph, var(--lbx-c-ph, #efefef)); }
+@media (prefers-reduced-motion: no-preference) {
+  [data-lbx-fade] img[data-lbx-img][loading="lazy"]:not([data-lbx-loaded]) { opacity: 0; }
+  [data-lbx-fade] img[data-lbx-loaded="fade"] { animation: lbx-img-in .25s ease-out; }
+}
+@keyframes lbx-img-in { from { opacity: 0; } }
+
+.lbx-cv__scroll { overflow-x: auto; }
+.lbx-cv table { border-collapse: collapse; font-size: 13px; }
+.lbx-cv th, .lbx-cv td { padding: 6px 10px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
+.lbx-cv thead th { font-weight: 600; }
+.lbx-cv td[data-presence="missing"] { color: var(--muted); }
+
+/* One row, scrolling sideways: many refinements never squeeze the log (a short screen, 400% zoom). */
+.lbx-cv__refine { list-style: none; margin: 0; padding: 8px 16px 0; display: flex; gap: 6px; overflow-x: auto; border-top: 1px solid var(--line); }
+.lbx-cv__refine li { flex: none; display: inline-flex; align-items: center; gap: 2px; padding-inline-start: 10px; border: var(--lbx-c-border, 0) solid var(--line); border-radius: 999px; background: var(--tint); color: var(--accent-text); font-size: 13px; white-space: nowrap; }
+.lbx-cv__refine button { min-width: 28px; min-height: 28px; border: 0; background: none; color: inherit; }
+.lbx-cv__form { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; }
+.lbx-cv__form input { flex: 1; min-width: 0; min-height: 46px; padding: 8px 18px; border: 1px solid var(--field); border-radius: 999px; background: var(--bg); font-size: 16px; }
+.lbx-cv__form input:focus-visible { outline-offset: 0; border-color: var(--accent); }
+.lbx-cv input::placeholder { color: var(--muted); opacity: 1; }
+.lbx-cv__send { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
+.lbx-cv__send svg { width: 22px; height: 22px; stroke-width: 2.2; }
+
+/* Windows contrast themes: the panel, the controls and the bubbles keep their edges. */
+@media (forced-colors: active) {
+  .lbx-cv { border-inline-start: 2px solid CanvasText; }
+  .lbx-cv__q, .lbx-cv__send, .lbx-cv__icon, .lbx-cv__notice, .lbx-cv__avatar { border: 1px solid CanvasText; }
+  .lbx-cv :focus-visible { outline: 3px solid Highlight; }
+}
+
+/* @lbx-part convo-preview: the search page's box (convo.assist, <lbx-convo-preview>): the answer
+   to the query above the results, in flow with the page (not the panel's dialog rules). */
+:host { display: block; }
+.lbx-cv--preview { width: auto; height: auto; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--tint-line); border-radius: 16px; box-shadow: 0 2px 10px rgb(0 0 0 / .05); overflow: visible; }
+.lbx-cv__pv { display: flex; flex-direction: column; gap: 12px; }
+.lbx-cv__pv-head { display: flex; align-items: center; gap: 10px; }
+/* Its first lines: the rest fades out (the panel has it all). */
+.lbx-cv__pv-text { position: relative; max-height: 7.3em; overflow: hidden; }
+/* The fade over the last lines, from the top: only text that reaches the cut is faded (a short answer is clear). */
+.lbx-cv__pv-text::after { content: ''; position: absolute; inset: 5.1em 0 auto; height: 2.2em; background: linear-gradient(transparent, var(--bg)); }
+.lbx-cv__pv-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
+.lbx-cv__pv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
+.lbx-cv__continue { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-inline-start: auto; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
+.lbx-cv__continue svg { width: 18px; height: 18px; stroke-width: 2.2; }
+@media (forced-colors: active) { .lbx-cv--preview, .lbx-cv__continue { border: 2px solid CanvasText; } }
+/* @lbx-part-end */

package/src/widgets/convo/template-convo-box.ts

@@ -0,0 +1,125 @@
+import { html, nothing, repeat } from '../../lit';
+import type { ConvoAction, ConvoBlock, ConvoMessage, ConvoScope } from '../../types';
+import { avatar, icon } from './icons';
+
+const chips = (s: ConvoScope, actions: ConvoAction[] | undefined, live: boolean) =>
+  live && actions?.some((a) => a.action_ref)
+    ? html`<div class="lbx-cv__chips">${actions.map((a) => (a.action_ref ? html`<button type="button" class="lbx-cv__chip" @click=${() => s.act(a)}>${a.label}</button>` : nothing))}</div>`
+    : nothing;
+
+const block = (s: ConvoScope, b: ConvoBlock, live: boolean): unknown => {
+  switch (b.type) {
+    case 'text':
+      return html`<div class="lbx-cv__text">${s.md(b.text)}</div>`;
+    case 'suggestions':
+      return html`${b.heading ? html`<p class="lbx-cv__label">${b.heading}</p>` : nothing}${chips(s, b.actions, live)}`;
+    case 'question':
+      return html`<div class="lbx-cv__question">
+        <p>${b.text}</p>
+        ${chips(s, b.choices, live)}
+        ${live && b.text_input?.enabled
+          ? html`<form class="lbx-cv__answer" @submit=${(e: SubmitEvent) => {
+              e.preventDefault();
+              const i = (e.currentTarget as HTMLFormElement).elements.namedItem('a') as HTMLInputElement;
+              s.answer(b.question_ref, i.value);
+            }}>
+              <input name="a" autocomplete="off" aria-label=${b.text} placeholder=${b.text_input.placeholder ?? ''}>
+              <button type="submit" class="lbx-cv__chip">${s.t('send')}</button>
+            </form>`
+          : nothing}
+      </div>`;
+    case 'product_grid':
+    case 'product_preview': {
+      const rs = s.products(b);
+      return rs.length
+        ? html`${b.heading ? html`<p class="lbx-cv__label">${b.heading}</p>` : nothing}
+            <ul class="lbx-cv__list" data-type=${b.type} data-lbx-list>
+              ${repeat(rs, (r) => r.id, (r, i) => html`<li>${s.include('convo-result-default', { r, i, actions: live ? s.actionsOf(b, r) : NONE })}</li>`)}
+            </ul>`
+        : nothing;
+    }
+    case 'comparison':
+      return html`${b.heading ? html`<p class="lbx-cv__label">${b.heading}</p>` : nothing}
+        <div class="lbx-cv__scroll" tabindex="0" role="region" aria-label=${b.heading || s.t('compare')}>
+          <table>
+            <thead><tr><td></td>${b.products.map((p: any) => html`<th scope="col">${p.title}</th>`)}</tr></thead>
+            <tbody>${b.rows.map((row: any) => html`<tr><th scope="row">${row.label}</th>${row.values.map((c: any) => html`<td data-presence=${c.presence}>${c.display_value}</td>`)}</tr>`)}</tbody>
+          </table>
+        </div>`;
+    case 'notice':
+    case 'support':
+      return html`<div class="lbx-cv__notice" data-variant=${b.variant ?? 'info'}>
+        ${b.title ? html`<p class="lbx-cv__label">${b.title}</p>` : nothing}
+        ${s.md(b.text)}
+        ${chips(s, b.actions, live)}
+      </div>`;
+    case 'provenance':
+      return b.items?.length ? html`<p class="lbx-cv__sources">${b.title || s.t('sources')}: ${b.items.map((x: any) => x.label).join(', ')}</p>` : nothing;
+    default:
+      return nothing;
+  }
+};
+const NONE: ConvoAction[] = [];
+
+const message = (s: ConvoScope, m: ConvoMessage, last: boolean) =>
+  m.role === 'user'
+    ? html`<div class="lbx-cv__q" data-status=${m.status}><span class="lbx-cv__sr">${s.t('you')}: </span>${m.text}${m.status === 'ignored' ? html`<span class="lbx-cv__sr"> (${s.t('ignored')})</span>` : nothing}</div>`
+    : html`<div class="lbx-cv__a" data-status=${m.status}>
+        ${avatar}
+        <div class="lbx-cv__body">
+          <span class="lbx-cv__sr">${s.t('assistant')}: </span>
+          ${m.blocks.map((b) => block(s, b, last && !s.busy && s.state === 'ready'))}
+          ${m.status === 'streaming' && !m.blocks.length ? html`<p class="lbx-cv__wait">${s.t('thinking')}</p>` : nothing}
+          ${m.error
+            ? html`<p class="lbx-cv__error">${s.t(m.error)}${m.retry && last && !s.busy ? html` <button type="button" class="lbx-cv__chip" @click=${s.retry}>${s.t('retry')}</button>` : nothing}</p>`
+            : nothing}
+        </div>
+      </div>`;
+
+export default (s: ConvoScope) => html`
+  <header class="lbx-cv__head">
+    ${avatar}
+    <div class="lbx-cv__titles">
+      <h2 id="lbx-cv-title">${s.t('title')}</h2>
+      <p id="lbx-cv-note">${s.t('disclaimer')}</p>
+    </div>
+    ${s.messages.length && s.state !== 'final' && s.state !== 'unavailable'
+      ? html`<button type="button" class="lbx-cv__icon" aria-label=${s.t('startOver')} title=${s.t('startOver')} @click=${s.startOver}>${icon('M4 12a8 8 0 1 0 2.4-5.7M4 4v4.5h4.5')}</button>`
+      : nothing}
+    <button type="button" class="lbx-cv__icon" aria-label=${s.t('close')} title=${s.t('close')} @click=${s.close}>${icon('M6 6l12 12M18 6L6 18')}</button>
+  </header>
+  <div class="lbx-cv__log" data-lbx-convo-log tabindex="-1" role="region" aria-label=${s.t('log')} aria-busy=${s.busy ? 'true' : 'false'}>
+    <div class="lbx-cv__msgs">
+      ${s.messages.length ? nothing : html`<p class="lbx-cv__intro">${s.t('intro')}</p>`}
+      ${repeat(s.messages, (m) => m, (m, i) => message(s, m, i === s.messages.length - 1))}
+      ${s.state === 'unavailable'
+        ? html`<p class="lbx-cv__notice">${s.t('unavailable')}</p>`
+        : s.state === 'ended' || s.state === 'final'
+          ? html`<p class="lbx-cv__notice">${s.t(s.state)}${s.state === 'ended' ? html` <button type="button" class="lbx-cv__chip" @click=${s.startOver}>${s.t('startOver')}</button>` : nothing}</p>`
+          : nothing}
+    </div>
+  </div>
+  ${s.refinements.length
+    ? html`<ul class="lbx-cv__refine" tabindex="0" aria-label=${s.t('refinements')}>
+        ${s.refinements.map(
+          (f) => html`<li>${f.label}${f.remove?.action_ref
+            ? html`<button type="button" aria-label=${f.remove.accessible_label} ?disabled=${s.busy || s.state !== 'ready'} @click=${() => s.act({ label: f.remove!.accessible_label, action_ref: f.remove!.action_ref })}>×</button>`
+            : nothing}</li>`,
+        )}
+      </ul>`
+    : nothing}
+  <form class="lbx-cv__form" @submit=${(e: SubmitEvent) => {
+    e.preventDefault();
+    // Enter while an answer streams: nothing (the question waits in the input); only the button stops it.
+    if (s.busy) return;
+    const i = (e.currentTarget as HTMLFormElement).elements.namedItem('q') as HTMLInputElement;
+    if (!i.value.trim()) return;
+    s.send(i.value);
+    i.value = '';
+  }}>
+    <input name="q" autofocus autocomplete="off" enterkeyhint="send" aria-label=${s.t('placeholder')} placeholder=${s.t('placeholder')} ?disabled=${s.state !== 'ready'}>
+    <button type=${s.busy ? 'button' : 'submit'} class="lbx-cv__send" aria-label=${s.t(s.busy ? 'stop' : 'send')} title=${s.t(s.busy ? 'stop' : 'send')} ?disabled=${!s.busy && s.state !== 'ready'} @click=${() => s.busy && s.stop()}>
+      ${s.busy ? icon('M8 8h8v8H8z') : icon('M12 19V5M5.5 11.5L12 5l6.5 6.5')}
+    </button>
+  </form>
+`;