@luigisbox/luma 0.7.0 → 0.8.0-beta.0

package/src/widgets/convo/assist.ts

@@ -0,0 +1,216 @@
+// /assist: whether a phrase the shopper typed deserves the assistant, and its
+// answer when it does (lean trackers: `convo.assist`). One request per phrase:
+// 204 the autocomplete covers it (nothing shown), 404 not a lean tracker (never
+// asked again this session), 200 the answer, streamed as a turn's events
+// (CS-RTP). The answer is kept: the autocomplete's nudge and the search page's
+// box show its first words, and the panel takes it over as the conversation's
+// first turn (the same conversation id: no second answer, no second cost).
+//
+// Its own chunk (lbx-assist, build/vite.mjs): the autocomplete loads it when a
+// phrase settles, the entry on a search page; the panel's chunk only once
+// there is an answer. Answers last the tab's session (sessionStorage, the
+// last few): the phrase asked from the autocomplete and searched with Enter
+// is answered once. An answer still streaming when the page goes is cut
+// (an open request keeps it out of the back/forward cache) and forgotten.
+
+import { visitorId } from '../../api/token';
+import { session } from '../../core/storage';
+import type { ConvoBlock, ConvoConfigType, GlobalConfigType } from '../../types';
+import { addBlock, contextOf, endpointOf, events, turnBody, words, type Event } from './protocol';
+
+/** The tracker is not a lean one (404): /assist is not asked again this session. */
+const LEAN = 'lbx:convo:lean';
+/** Answers of this session, by phrase: the last few. */
+const KEPT = 'lbx:convo:assist';
+const KEEP = 5;
+/** An answer bigger than this (its events as kept) is not kept: the site's own storage shares the quota. */
+const KEEP_BYTES = 64e3;
+
+export interface Answer {
+  query: string;
+  /** Its conversation (the panel goes on with it) and the key of its first turn (sent again, the service replays it). */
+  id: string;
+  key: string;
+  /** What the service sent so far, in order; `done` once the stream ended (`failed` if it broke). */
+  events: Event[];
+  done: boolean;
+  failed: boolean;
+  /** Its blocks so far, as the panel draws them (text in its places), and its first words (a line's worth, without Markdown). */
+  blocks: ConvoBlock[];
+  text: () => string;
+  /** Told of every event and of the end. */
+  listen: (f: () => void) => () => void;
+  /** Its events from the first, then as they come, until it ends (throws if it broke, or once `signal` aborts). */
+  stream: (signal?: AbortSignal) => AsyncGenerator<Event>;
+}
+
+/** A phrase as asked and as kept: trimmed, single spaces; kept by its lower case. */
+const norm = (q: string) => q.trim().replace(/\s+/g, ' ');
+const keyOf = (q: string) => norm(q).toLowerCase();
+
+const make = (query: string, id: string, key: string) => {
+  const fns = new Set<() => void>();
+  const a: Answer = {
+    query,
+    id,
+    key,
+    events: [],
+    done: false,
+    failed: false,
+    blocks: [],
+    // Bounded: drawn and named as the answer streams in (a row's worth), never the whole answer each time.
+    text: () => words(String(a.blocks.find((b) => b.type === 'text')?.text ?? '').slice(0, 400)).slice(0, 160),
+    listen: (f) => (fns.add(f), () => void fns.delete(f)),
+    async *stream(signal) {
+      for (let i = 0; ;) {
+        while (i < a.events.length) {
+          if (signal?.aborted) throw Error('stopped');
+          yield a.events[i++];
+        }
+        if (a.done) {
+          if (a.failed) throw Error('the answer broke off');
+          return;
+        }
+        if (signal?.aborted) throw Error('stopped');
+        await new Promise<void>((r) => {
+          const go = () => (off(), signal?.removeEventListener('abort', go), r());
+          const off = a.listen(go);
+          signal?.addEventListener('abort', go);
+        });
+      }
+    },
+  };
+  const push = (e: Event) => {
+    a.events.push(e);
+    addBlock(a.blocks, e.event_type, e.payload);
+    for (const f of fns) f();
+  };
+  const end = (failed: boolean) => {
+    a.done = true;
+    a.failed = failed;
+    for (const f of fns) f();
+  };
+  return { a, push, end };
+};
+
+const asked = new Map<string, Promise<Answer | null>>();
+/** A finished answer of this session's, read back (storage is never trusted to be ours: its shape checked). */
+const kept = (v: { q: string; id: string; key: string; events: Event[] } | undefined): Answer | null => {
+  if (!v || typeof v.id !== 'string' || typeof v.key !== 'string' || !Array.isArray(v.events)) return null;
+  const { a, push, end } = make(String(v.q), v.id, v.key);
+  for (const e of v.events) if (e && typeof e.event_type === 'string') push(e);
+  end(false);
+  return a;
+};
+const keep = (k: string, a: Answer) => {
+  // A text block's deltas as one (the same blocks when replayed), not one envelope per word.
+  const events: Event[] = [];
+  for (const e of a.events) {
+    const last = events[events.length - 1];
+    if (e.event_type === 'text.delta' && last?.event_type === 'text.delta' && last.payload?.block_id === e.payload?.block_id)
+      events[events.length - 1] = { ...last, payload: { ...last.payload, delta: String(last.payload.delta ?? '') + String(e.payload?.delta ?? '') } };
+    else events.push(e);
+  }
+  const v = { q: a.query, id: a.id, key: a.key, events };
+  store(k, JSON.stringify(v).length > KEEP_BYTES ? null : v);
+};
+/** A phrase's entry: a whole answer, one started ({ q, id, key }: asked again, the service replays it), or none. */
+const store = (k: string, v: object | null) => {
+  const all = session.get<Record<string, unknown>>(KEPT) ?? {};
+  delete all[k];
+  if (v) all[k] = v;
+  session.set(KEPT, Object.fromEntries(Object.entries(all).slice(-KEEP)));
+};
+
+/** Answers streaming in, and how to cut each. */
+const flowing = new Map<string, AbortController>();
+const forget = (k: string) => {
+  flowing.get(k)?.abort();
+  asked.delete(k);
+  answered.delete(k);
+};
+/** Answers something else shows (the search page's box, the panel): the autocomplete typing past them does not cut them. */
+const held = new Set<string>();
+export const hold = (a: Answer) => void held.add(keyOf(a.query));
+/** A phrase's answer still on its way, cut and forgotten (the autocomplete's, once the shopper typed past it; `force`: one held, stopped in the panel). */
+export const drop = (q: string, force = false) => {
+  const k = keyOf(q);
+  if (flowing.has(k) && (force || !held.has(k))) forget(k);
+};
+/** Answers on their way cut as the page goes: listened to from the first request (no side effect at import: a build without assist drops this module; added again, a listener is not added twice). */
+const leave = () => {
+  for (const k of flowing.keys()) forget(k);
+};
+/** The answer asked for this phrase on this page, if it is here (the panel takes it over). */
+export const answered = new Map<string, Answer>();
+export const answerFor = (q: string) => answered.get(keyOf(q));
+
+/**
+ * The assistant's answer for a phrase, or null (the autocomplete covers it,
+ * not a lean tracker, a failure): asked once per phrase per page, kept for
+ * the session once whole. Resolves as the answer starts (its first events
+ * follow); the request has a 10 s deadline to its start, 30 s between chunks.
+ * `keptOnly`: an answer this session already has, never a request (a phrase
+ * the shopper did not ask here: a search page reached from another site).
+ */
+export const ask = (g: GlobalConfigType, cv: ConvoConfigType, query: string, keptOnly = false): Promise<Answer | null> => {
+  const q = norm(query);
+  const k = keyOf(q);
+  if (!q || session.get(LEAN) === false) return Promise.resolve(null);
+  let p = asked.get(k);
+  if (p) return p;
+  const v = session.get<Record<string, any>>(KEPT)?.[k];
+  const old = kept(v);
+  if (old) return (answered.set(k, old), (p = Promise.resolve(old)), asked.set(k, p), p);
+  // A phrase this tab started asking (its { id, key } kept: Enter while the row's answer streamed) is the shopper's: asked again, replayed.
+  if (keptOnly && typeof v?.id !== 'string') return Promise.resolve(null);
+  p = (async () => {
+    // An answer started on a page left before it was whole (Enter while the nudge's streamed): the same
+    // conversation and turn key, so the service replays it rather than answering (and costing) again.
+    const id = typeof v?.id === 'string' ? v.id : crypto.randomUUID();
+    const key = typeof v?.key === 'string' ? v.key : crypto.randomUUID();
+    const c = new AbortController();
+    addEventListener('pagehide', leave);
+    flowing.set(k, c);
+    let idle = window.setTimeout(() => c.abort(), 10e3);
+    const kick = () => {
+      clearTimeout(idle);
+      idle = window.setTimeout(() => c.abort(), 30e3);
+    };
+    const r = await fetch(`${endpointOf(cv)}/assist`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'text/event-stream' },
+      body: JSON.stringify(turnBody(id, false, { input: { kind: 'text', text: q }, key }, contextOf(g, cv, visitorId()))),
+      signal: c.signal,
+    });
+    if (r.status === 404) session.set(LEAN, false);
+    if (r.status !== 200 || !r.body) return (clearTimeout(idle), flowing.delete(k), null);
+    const { a, push, end } = make(q, id, key);
+    const body = r.body;
+    store(k, { q, id, key });
+    (async () => {
+      try {
+        for await (const e of events(body, kick)) push(e);
+        // Only a completed turn is an answer (whatever follows it): an error (a rate limit, the month's cap) or an abandoned one is none.
+        const ok = a.events.some((e) => e.event_type === 'turn.completed');
+        end(!ok);
+        if (ok) keep(k, a);
+        else store(k, null), forget(k);
+      } catch {
+        end(true);
+      } finally {
+        clearTimeout(idle);
+        if (flowing.get(k) === c) flowing.delete(k);
+      }
+    })();
+    answered.set(k, a);
+    return a;
+  })().catch(() => (flowing.delete(k), null));
+  asked.set(k, p);
+  if (asked.size > 30) {
+    const first = asked.keys().next().value!;
+    asked.delete(first);
+    answered.delete(first);
+  }
+  return p;
+};

package/src/widgets/convo/icons.ts

@@ -0,0 +1,8 @@
+// The convo templates' icons: one path each, in the text's colour, hidden from
+// screen readers (their buttons are named). An integration's template imports them too.
+import { html, svg } from '../../lit';
+
+export const icon = (d: string) => html`<svg viewBox="0 0 24 24" aria-hidden="true">${svg`<path d=${d} />`}</svg>`;
+export const SPARKLE = 'M10 3l1.6 4.4L16 9l-4.4 1.6L10 15l-1.6-4.4L4 9l4.4-1.6zM18 13l.9 2.1L21 16l-2.1.9L18 19l-.9-2.1L15 16l2.1-.9z';
+/** The assistant's mark: a sparkle on the accent's tint. */
+export const avatar = html`<span class="lbx-cv__avatar">${icon(SPARKLE)}</span>`;