@mrrocket/sdk 0.17.0 → 0.18.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n    type ChangelogEntry,\n    type ChatMessage,\n    type ChatThread,\n    type CockpitProviderProps,\n    type CockpitUser,\n    type FeedbackBoardInfo,\n    type FeedbackBoardProps,\n    type FeedbackComment,\n    type FeedbackList,\n    type FeedbackPost,\n    type FeedbackRoadmap,\n    type FeedbackWidgetProps,\n    type MessengerProps,\n    type PostStatus,\n    type SurveyAnswer,\n    type SurveyDefinition,\n    type SurveyQuestion,\n    type SurveyQuestionKind,\n    CockpitProvider,\n    Experiment,\n    FeedbackBoard,\n    FeedbackWidget,\n    Messenger,\n    Survey,\n    Text,\n    WIDGET_CSS,\n    createApi,\n    useCancelFlow,\n    useCockpit,\n    useFeedback,\n    useFlag,\n    useFlagVariant,\n    useMessenger,\n    usePaywall,\n    usePush,\n    useStyles,\n    useVariant,\n} from \"./browser\";\nexport type { PushResult, PushStatus, WebPushOptions } from \"./push-web\";\n/** `identify(id, props, { hash })` (0.16.0); the hash comes from `userHash()` in `@mrrocket/sdk/next/server`. */\nexport type { IdentifyOptions } from \"./identity\";\nexport {\n    type CockpitConfig,\n    type CockpitEvent,\n    type ConsentChoice,\n    type ConsentMode,\n    type ReplayConfig,\n    type ErrorReport,\n    type ExperimentConfig,\n    type FlagCondition,\n    type FlagConditionSet,\n    type FlagConfig,\n    type FlagPerson,\n    type RedirectConfig,\n    type RedirectDecision,\n    type VariantConfig,\n    type VariantId,\n    EMBED_PARAM,\n    EXPOSURE_PARAM,\n    SDK_VERSION,\n    ID_COOKIE,\n    PREVIEW_PARAM,\n    SESSION_COOKIE,\n    assign,\n    evaluateFlag,\n    parsePreview,\n    previewHref,\n    redirectFor,\n} from \"./core\";\nexport {\n    type CancelFlowConfig,\n    type CancelFlowOptions,\n    type CancelFlowResult,\n    type CancelOffer,\n    type InAppMessage,\n    type OnboardingFlow,\n    type OnboardingStep,\n    type FlowMedia,\n    type TourPlacement,\n    videoEmbed,\n} from \"./flows\";\nexport type { FlowsTheme } from \"./flows-ui\";\nexport { PAYWALL_EVENT, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult } from \"./paywall\";\nexport {\n    type AttributionMode,\n    type CheckoutReferral,\n    type Referral,\n    REFERRAL_COOKIE,\n    getReferral,\n    readReferralCookie,\n    referralForCheckout,\n    referralLink,\n} from \"./referral\";\n"],"mappings":";AAAA;AAAA,EAmBI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP;AAAA,EAgBI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP;AAAA,EAUI;AAAA,OACG;AAEP,SAAS,qBAAsH;AAC/H;AAAA,EAII;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n    type ChangelogEntry,\n    type ChatMessage,\n    type ChatThread,\n    type CockpitProviderProps,\n    type CockpitUser,\n    type FeedbackBoardInfo,\n    type FeedbackBoardProps,\n    type FeedbackComment,\n    type FeedbackList,\n    type FeedbackPost,\n    type FeedbackRoadmap,\n    type FeedbackWidgetProps,\n    type MessengerProps,\n    type PostStatus,\n    type SurveyAnswer,\n    type SurveyDefinition,\n    type SurveyQuestion,\n    type SurveyQuestionKind,\n    CockpitProvider,\n    Experiment,\n    FeedbackBoard,\n    FeedbackWidget,\n    Messenger,\n    Survey,\n    Text,\n    WIDGET_CSS,\n    createApi,\n    useCancelFlow,\n    useCockpit,\n    useFeedback,\n    useFlag,\n    useFlagVariant,\n    useMessenger,\n    useOnboarding,\n    usePaywall,\n    usePush,\n    useStyles,\n    useVariant,\n} from \"./browser\";\nexport type { PushResult, PushStatus, WebPushOptions } from \"./push-web\";\n/** `identify(id, props, { hash })` (0.16.0); the hash comes from `userHash()` in `@mrrocket/sdk/next/server`. */\nexport type { IdentifyOptions } from \"./identity\";\nexport {\n    type CockpitConfig,\n    type CockpitEvent,\n    type ConsentChoice,\n    type ConsentMode,\n    type ReplayConfig,\n    type ErrorReport,\n    type ExperimentConfig,\n    type FlagCondition,\n    type FlagConditionSet,\n    type FlagConfig,\n    type FlagPerson,\n    type RedirectConfig,\n    type RedirectDecision,\n    type VariantConfig,\n    type VariantId,\n    EMBED_PARAM,\n    EXPOSURE_PARAM,\n    SDK_VERSION,\n    ID_COOKIE,\n    PREVIEW_PARAM,\n    SESSION_COOKIE,\n    assign,\n    evaluateFlag,\n    parsePreview,\n    previewHref,\n    redirectFor,\n} from \"./core\";\nexport {\n    type CancelFlowConfig,\n    type CancelFlowOptions,\n    type CancelFlowResult,\n    type CancelOffer,\n    type InAppMessage,\n    type OnboardingFlow,\n    type OnboardingStep,\n    type FlowMedia,\n    type TourPlacement,\n    type TaskOpens,\n    type FlowIcon,\n    type FinishAnimation,\n    type OnboardingQuestion,\n    type OnboardingItemState,\n    videoEmbed,\n} from \"./flows\";\nexport type { UseOnboarding } from \"./onboarding-state\";\nexport { FLOW_ICONS, FLOW_ICON_NAMES, type BuiltinIcon } from \"./icons\";\nexport type { FlowsTheme } from \"./flows-ui\";\nexport { PAYWALL_EVENT, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult } from \"./paywall\";\nexport {\n    type AttributionMode,\n    type CheckoutReferral,\n    type Referral,\n    REFERRAL_COOKIE,\n    getReferral,\n    readReferralCookie,\n    referralForCheckout,\n    referralLink,\n} from \"./referral\";\n"],"mappings":";AAAA;AAAA,EAmBI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAIP;AAAA,EAgBI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP;AAAA,EAeI;AAAA,OACG;AAEP,SAAS,YAAY,uBAAyC;AAE9D,SAAS,qBAAsH;AAC/H;AAAA,EAII;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;","names":[]}

package/dist/messenger-ui.js

@@ -13,6 +13,7 @@ var POLL_OPEN_MS = 4e3;
 var POLL_WAITING_MS = 8e3;
 var POLL_IDLE_MS = 3e4;
 var WAITING_FOR_MS = 10 * 6e4;
+var SLOW_SEND_MS = 1500;
 var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
 var SEEN_KEY = "ckw_msgr_seen";
 var readSeen = () => {
@@ -260,7 +261,10 @@ var build = (o) => {
   let thread = null;
   let loaded = false;
   let error = "";
-  let pending = null;
+  const sayable = (e) => e.status === 401 ? "The chat is not available right now. Please try again later." : e.message;
+  let outbox = [];
+  let outboxSeq = 0;
+  let flushing = false;
   let lastKnown = null;
   let unseen = [];
   let previewGone = false;
@@ -644,7 +648,7 @@ var build = (o) => {
   const list = el("ol", { class: "ckw-msgs", "aria-live": "polite", "aria-label": "Messages" });
   const needEmail = () => askEmail && !o.user()?.email && !thread?.hasEmail;
   const emailOk = () => !email.value.trim() || EMAIL.test(email.value.trim());
-  const canSend = () => (!!text.value.trim() || picked.length > 0) && !pending && emailOk();
+  const canSend = () => (!!text.value.trim() || picked.length > 0) && emailOk();
   const go = (v) => {
     const changed = JSON.stringify(v) !== JSON.stringify(view);
     view = v;
@@ -666,6 +670,7 @@ var build = (o) => {
     return img;
   };
   const bubble = (m, isPending = false) => {
+    const slow = isPending && Date.now() - Date.parse(m.at) >= SLOW_SEND_MS;
     const li = el("li", { class: "ckw-msg", "data-from": m.from === "visitor" ? "me" : "them" }, m.body || !m.attachments?.length ? el("div", { class: "ckw-bubble" }, m.body) : null);
     if (isPending) li.setAttribute("aria-busy", "true");
     if (m.attachments?.length)
@@ -683,7 +688,7 @@ var build = (o) => {
       chip.addEventListener("click", () => go({ article: a.id }));
       li.append(chip);
     }
-    li.append(el("span", { class: "ckw-msg-meta" }, m.from === "ai" ? agentFace() : null, `${m.from !== "visitor" ? `${whoLabel[m.from]} \xB7 ` : ""}${isPending ? "Sending\u2026" : timeAgo(m.at)}`));
+    li.append(el("span", { class: "ckw-msg-meta" }, m.from === "ai" ? agentFace() : null, `${m.from !== "visitor" ? `${whoLabel[m.from]} \xB7 ` : ""}${slow ? "Sending\u2026" : timeAgo(m.at)}`));
     return li;
   };
   const articleRow = (a) => {
@@ -754,7 +759,7 @@ var build = (o) => {
     askIn.value = "";
     askGo.disabled = true;
     go("messages");
-    if (canSend()) void submit();
+    if (canSend()) submit();
   });
   const drawHome = () => {
     const first = o.user()?.name?.trim().split(/\s+/)[0];
@@ -884,19 +889,19 @@ var build = (o) => {
   const drawMessages = () => {
     const msgs = thread?.messages ?? [];
     const parts = [];
-    if (!loaded) parts.push(el("div", { class: "ckw-skel" }));
-    else {
-      const sig = `${msgs.map((m) => m.id).join(",")}|${pending ? `${pending.body}+${pending.attachments?.length ?? 0}` : ""}|${Math.floor(Date.now() / 6e4)}`;
+    {
+      const waiting = outbox.map((o2) => o2.message);
+      const sig = `${msgs.map((m) => m.id).join(",")}|${waiting.map((m) => `${m.id}:${Date.now() - Date.parse(m.at) >= SLOW_SEND_MS}`).join(",")}|${Math.floor(Date.now() / 6e4)}`;
       if (sig !== listSig) {
         listSig = sig;
-        const greet = el("li", { class: "ckw-msg", "data-from": "them" }, el("div", { class: "ckw-bubble" }, greeting));
-        const items = [greet, ...msgs.map((m) => bubble(m)), ...pending ? [bubble(pending, true)] : []];
+        const greet = msgs.length || waiting.length ? [] : [el("li", { class: "ckw-msg", "data-from": "them" }, el("div", { class: "ckw-bubble" }, greeting))];
+        const items = [...greet, ...msgs.map((m) => bubble(m)), ...waiting.map((m) => bubble(m, true))];
         if (listCount >= 0) items.slice(listCount).forEach((li) => li.setAttribute("data-new", ""));
         listCount = items.length;
         list.replaceChildren(...items);
       }
       parts.push(list);
-      const top = !msgs.some((m) => m.from === "visitor") && !pending ? (articles ?? []).slice(0, 3) : [];
+      const top = !msgs.some((m) => m.from === "visitor") && !outbox.length ? (articles ?? []).slice(0, 3) : [];
       if (top.length) {
         if (suggestions.childNodes.length !== top.length)
           suggestions.replaceChildren(
@@ -909,9 +914,9 @@ var build = (o) => {
         parts.push(suggestions);
       }
     }
-    if (thread?.conversation?.status === "solved" && !pending) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, "This conversation is closed. Write to start a new one."));
+    if (thread?.conversation?.status === "solved" && !outbox.length) parts.push(el("p", { class: "ckw-fine ckw-msgr-note" }, "This conversation is closed. Write to start a new one."));
     if (body.childNodes.length !== parts.length || parts.some((x, i) => body.childNodes[i] !== x)) body.replaceChildren(...parts);
-    const count = msgs.length + (pending ? 1 : 0);
+    const count = msgs.length + outbox.length;
     if (count !== drawn) {
       drawn = count;
       body.scrollTop = body.scrollHeight;
@@ -942,15 +947,18 @@ var build = (o) => {
     if (pop.childNodes.length !== kids.length || kids.some((k, i) => pop.childNodes[i] !== k)) pop.replaceChildren(...kids);
   };
   const tick = async () => {
-    ctrl?.abort();
-    ctrl = new AbortController();
+    if (ctrl) return;
+    const mine = ctrl = new AbortController();
     try {
-      take(await api().chat(ctrl.signal));
+      take(await api().chat(mine.signal));
       error = "";
     } catch (e) {
       if (e.name === "AbortError") return;
-      if (open && view === "messages") error = e.message;
+      if (open && view === "messages") error = sayable(e);
+    } finally {
+      if (ctrl === mine) ctrl = null;
     }
+    if (!loaded) listCount = -1;
     loaded = true;
     draw();
     drawFab();
@@ -969,58 +977,75 @@ var build = (o) => {
     else clearTimeout(poll);
   };
   document.addEventListener("visibilitychange", onVisible);
-  const submit = async () => {
+  const flush = async () => {
+    if (flushing) return;
+    flushing = true;
+    while (outbox.length) {
+      const { message, files, email: given } = outbox[0];
+      await Promise.all(files.map((p) => p.up));
+      const ids = files.filter((p) => p.id).map((p) => p.id);
+      try {
+        if (!message.body && !ids.length) throw new Error(error || "The file could not be sent.");
+        const sent = await api().sendChat({
+          body: message.body,
+          email: given,
+          url: window.location.href.slice(0, 500),
+          ...ids.length ? { attachments: ids } : {},
+          // A little context for a bug report; the server reads browser and system from the user agent.
+          context: { viewport: `${window.innerWidth}\xD7${window.innerHeight}` }
+        });
+        ctrl?.abort();
+        ctrl = null;
+        take(sent);
+        outbox.shift();
+        for (const p of files) {
+          localUrls.delete(p.key);
+          URL.revokeObjectURL(p.local);
+        }
+      } catch (e) {
+        const back = outbox.splice(0);
+        text.value = [...back.map((b) => b.message.body), text.value.trim()].filter(Boolean).join("\n");
+        picked = [...back.flatMap((b) => b.files.filter((p) => p.id)), ...picked];
+        for (const b of back) for (const p of b.files) localUrls.delete(p.key);
+        error = sayable(e);
+      }
+      draw();
+    }
+    flushing = false;
+    schedule();
+  };
+  const submit = () => {
     const msg = text.value.trim();
     const files = picked;
-    if (!msg && !files.length || pending || !emailOk()) return;
+    if (!msg && !files.length || !emailOk()) return;
     chime.unlock();
     for (const p of files) localUrls.set(p.key, p.local);
-    pending = {
-      id: "pending",
-      from: "visitor",
-      body: msg,
-      at: (/* @__PURE__ */ new Date()).toISOString(),
-      ...files.length ? { attachments: files.map((p) => ({ id: p.key, name: p.name, type: p.type, size: p.size })) } : {}
-    };
+    outbox.push({
+      message: {
+        id: `pending-${++outboxSeq}`,
+        from: "visitor",
+        body: msg,
+        at: (/* @__PURE__ */ new Date()).toISOString(),
+        ...files.length ? { attachments: files.map((p) => ({ id: p.key, name: p.name, type: p.type, size: p.size })) } : {}
+      },
+      files,
+      email: needEmail() && email.value.trim() ? email.value.trim() : void 0
+    });
     text.value = "";
     picked = [];
     error = "";
     draw();
-    await Promise.all(files.map((p) => p.up));
-    const ids = files.filter((p) => p.id).map((p) => p.id);
-    let sent = false;
-    try {
-      if (!msg && !ids.length) throw new Error(error || "The file could not be sent.");
-      take(
-        await api().sendChat({
-          body: msg,
-          email: needEmail() && email.value.trim() ? email.value.trim() : void 0,
-          url: window.location.href.slice(0, 500),
-          ...ids.length ? { attachments: ids } : {},
-          // A little context for a bug report; the server reads browser and system from the user agent.
-          context: { viewport: `${window.innerWidth}\xD7${window.innerHeight}` }
-        })
-      );
-      sent = true;
-    } catch (e) {
-      text.value = msg;
-      picked = files.filter((p) => p.id);
-      error = e.message;
-    }
-    pending = null;
-    for (const p of files) localUrls.delete(p.key);
-    draw();
-    if (sent) for (const p of files) URL.revokeObjectURL(p.local);
-    schedule();
+    setTimeout(draw, SLOW_SEND_MS + 50);
+    void flush();
   };
   form.addEventListener("submit", (e) => {
     e.preventDefault();
-    void submit();
+    submit();
   });
   text.addEventListener("keydown", (e) => {
     if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
       e.preventDefault();
-      void submit();
+      submit();
     }
   });
   text.addEventListener("input", () => send.disabled = !canSend());