@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/dist/react.js

@@ -1,91 +1,546 @@
-import {
-  captureHandoff,
-  runtimeVersion,
-  sessionFor,
-  whenIdle
-} from "./chunks/chunk-CSKXLF33.js";
-
 // src/runtime/loader.tsx
 import { useEffect, useRef } from "react";
+
+// src/runtime/idle.ts
+var FALLBACK_SLICE_MS = 8;
+function whenIdle(task, timeout) {
+  if (typeof requestIdleCallback === "function") {
+    const id2 = requestIdleCallback(task, { timeout });
+    return () => cancelIdleCallback(id2);
+  }
+  const id = setTimeout(
+    () => {
+      const end = performance.now() + FALLBACK_SLICE_MS;
+      task({ didTimeout: false, timeRemaining: () => Math.max(0, end - performance.now()) });
+    },
+    Math.min(timeout, 200)
+  );
+  return () => clearTimeout(id);
+}
+
+// src/runtime/runtime-version.ts
+var runtimeVersion = 1;
+
+// src/runtime/boot.ts
 var IDLE_TIMEOUT_MS = 3e3;
-captureHandoff();
-var bundled = () => import("./chunks/runtime-JX75TKER.js");
-async function loadRuntime(apiUrl, source) {
-  if (source === "bundled") return bundled();
+var untilIdle = (task) => whenIdle(task, IDLE_TIMEOUT_MS);
+var importModule = (url) => import(
+  /* @vite-ignore */
+  /* webpackIgnore: true */
+  url
+);
+async function loadRuntime(apiUrl, load = importModule) {
   const url = `${apiUrl.replace(/\/+$/, "")}/v1/toolbar/${runtimeVersion}.js`;
+  const remote = await load(url);
+  if (typeof remote.mount === "function") return remote;
+  throw new Error(`${url} has no mount export`);
+}
+function bootToolbar(boot) {
+  let cancelled = false;
+  let mounted = null;
+  let container = null;
+  const start = async () => {
+    const session = await boot.getSession().catch(() => null);
+    if (!session || cancelled) return;
+    const runtime = await (boot.load ?? loadRuntime)(session.apiUrl);
+    if (cancelled) return;
+    container = document.createElement("div");
+    container.setAttribute("data-cs-runtime", "latest");
+    container.style.display = "contents";
+    document.body.appendChild(container);
+    mounted = runtime.mount(container, boot.props());
+    boot.onMount?.(mounted, container);
+  };
+  const cancelWait = (boot.wait ?? untilIdle)(() => {
+    start().catch((error) => console.warn("[comment-service] The toolbar could not start.", error)).finally(() => boot.onSettled?.());
+  });
+  return () => {
+    cancelled = true;
+    cancelWait();
+    queueMicrotask(() => {
+      mounted?.unmount();
+      container?.remove();
+    });
+  };
+}
+
+// src/runtime/handoff.ts
+var key = "devaccel.comment.handoff";
+var ttl = 30 * 60 * 1e3;
+function readHandoff() {
+  try {
+    const value = JSON.parse(sessionStorage.getItem(key) ?? "null");
+    return value && Date.now() - value.at < ttl ? value : null;
+  } catch {
+    return null;
+  }
+}
+function write(value) {
   try {
-    const remote = await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      url
-    );
-    if (typeof remote.mount === "function") return remote;
-    throw new Error(`${url} has no mount export`);
-  } catch (error) {
-    console.warn(
-      "[comment-service] Could not load the latest toolbar, using the copy bundled with the package.",
-      error
-    );
-    return bundled();
+    if (value.invite || value.thread) sessionStorage.setItem(key, JSON.stringify(value));
+    else sessionStorage.removeItem(key);
+  } catch {
+  }
+}
+function linkParams() {
+  const url = new URL(window.location.href);
+  const hash = new URLSearchParams(url.hash.slice(1));
+  return {
+    url,
+    hash,
+    invite: url.searchParams.get("cs-invite") ?? hash.get("cs-invite"),
+    thread: url.searchParams.get("cs-thread") ?? hash.get("cs-thread")
+  };
+}
+function captureHandoff() {
+  if (typeof window === "undefined") return;
+  const { invite, thread } = linkParams();
+  if (!invite && !thread) return;
+  write({
+    ...readHandoff(),
+    ...invite ? { invite } : {},
+    ...thread ? { thread } : {},
+    at: Date.now()
+  });
+}
+
+// src/runtime/host-watch.ts
+var HOST_CHECK_GAP_MS = 1e4;
+var NAVIGATED = "cs-nav";
+var HISTORY_FLAG = "__devaccelCommentHistory";
+function announceNavigation() {
+  if (Reflect.get(window, HISTORY_FLAG)) return;
+  Reflect.set(window, HISTORY_FLAG, true);
+  for (const name of ["pushState", "replaceState"]) {
+    const original = history[name].bind(history);
+    history[name] = (...args) => {
+      original(...args);
+      window.dispatchEvent(new Event(NAVIGATED));
+    };
+  }
+}
+function watchHost(check, gap = HOST_CHECK_GAP_MS) {
+  announceNavigation();
+  const listening = new AbortController();
+  let last = Date.now();
+  let timer = 0;
+  const run = () => {
+    window.clearTimeout(timer);
+    timer = 0;
+    last = Date.now();
+    check();
+  };
+  const soon = (event) => {
+    if (timer || document.visibilityState === "hidden") return;
+    if (event.type === "pageshow" && !event.persisted) return;
+    const wait = last + gap - Date.now();
+    if (wait <= 0) run();
+    else timer = window.setTimeout(run, wait);
+  };
+  for (const type of ["focus", "popstate", "hashchange", "pageshow", NAVIGATED])
+    window.addEventListener(type, soon, { signal: listening.signal });
+  document.addEventListener("visibilitychange", soon, { signal: listening.signal });
+  return {
+    now: run,
+    stop() {
+      window.clearTimeout(timer);
+      listening.abort();
+    }
+  };
+}
+
+// src/runtime/session-source.ts
+var EXPIRY_MARGIN_MS = 6e4;
+var UNKNOWN_EXPIRY_MS = 5 * 6e4;
+function readJwt(token) {
+  try {
+    const part = token.split(".")[1];
+    if (!part) return null;
+    const pad = part.length % 4 === 0 ? "" : "=".repeat(4 - part.length % 4);
+    return JSON.parse(atob(part.replaceAll("-", "+").replaceAll("_", "/") + pad));
+  } catch {
+    return null;
+  }
+}
+function sessionFrom(payload) {
+  const value = payload;
+  if (!value?.enabled || !value.apiUrl || !value.project || !value.environment || !value.hostToken)
+    return null;
+  return {
+    apiUrl: value.apiUrl,
+    project: value.project,
+    environment: value.environment,
+    hostToken: value.hostToken,
+    ...typeof value.loaderOrigin === "string" ? { loaderOrigin: value.loaderOrigin } : {}
+  };
+}
+var SessionOff = class extends Error {
+};
+function sessionSource(path, load, now2 = Date.now) {
+  let kept = null;
+  let pending = null;
+  return ({ refresh = false } = {}) => {
+    if (!refresh && kept && now2() < kept.until) return Promise.resolve(kept.session);
+    if (pending) return pending;
+    pending = load(path).then((payload) => {
+      const failed = payload;
+      if (failed && failed.enabled === false && failed.error) {
+        throw new SessionOff(
+          typeof failed.error === "string" ? failed.error : "Comment service is unreachable."
+        );
+      }
+      const session = sessionFrom(payload);
+      const expires = session ? readJwt(session.hostToken)?.exp : void 0;
+      const until = !session ? Infinity : expires ? expires * 1e3 - EXPIRY_MARGIN_MS : now2() + UNKNOWN_EXPIRY_MS;
+      kept = { session, until };
+      return session;
+    }).finally(() => {
+      pending = null;
+    });
+    return pending;
+  };
+}
+
+// src/runtime/session.ts
+var SIGN_IN_PREFIX = "devaccel.comment.http";
+function forgetSignIns(storage = localStorage) {
+  try {
+    for (let index = storage.length - 1; index >= 0; index--) {
+      const key2 = storage.key(index);
+      if (key2?.startsWith(SIGN_IN_PREFIX)) storage.removeItem(key2);
+    }
+  } catch {
+  }
+}
+var reported = /* @__PURE__ */ new Set();
+function report(path, status, error, failed) {
+  const said = typeof error === "string" ? `: ${error}` : failed ? "." : " with comments off.";
+  const line = `[comment-service] ${path} answered ${status}${said}`;
+  if (reported.has(line)) return;
+  reported.add(line);
+  if (failed) console.warn(line);
+  else console.info(line);
+}
+async function fetchSession(path) {
+  const response = await fetch(path, {
+    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
+    cache: "no-store"
+  });
+  const payload = await response.json().catch(() => null);
+  const off = response.status === 401 || response.status === 403;
+  if (!response.ok && !off) {
+    report(path, response.status, payload?.error, true);
+    throw new Error(`The session route answered ${response.status}.`);
+  }
+  if (off || payload?.enabled !== true) {
+    report(path, response.status, payload?.error, false);
+    forgetSignIns();
+    return { enabled: false };
   }
+  return payload;
 }
+function sessionSource2(path, load = fetchSession, now2 = Date.now) {
+  return sessionSource(path, load, now2);
+}
+var sources = /* @__PURE__ */ new Map();
+function sessionFor(path) {
+  let source = sources.get(path);
+  if (!source) {
+    source = sessionSource2(path);
+    sources.set(path, source);
+  }
+  return source;
+}
+
+// src/runtime/loader.tsx
+var stampedBuild = typeof __COMMENT_TOOL_HOST_BUILD__ === "object" ? __COMMENT_TOOL_HOST_BUILD__ : void 0;
+function withStampedBuild(config) {
+  if (!config || !stampedBuild) return config;
+  const options = config === true ? {} : config;
+  return options.build ? config : { ...options, build: stampedBuild };
+}
+captureHandoff();
+var now = (task) => {
+  task();
+  return () => {
+  };
+};
 function CommentToolbar({
-  source = "latest",
   sessionPath = "/api/comment-service/session",
   pollMs,
   position,
   theme,
-  navigate
+  navigate,
+  screen,
+  debugContext
 }) {
   const handle = useRef(null);
   const navigateRef = useRef(navigate);
-  navigateRef.current = navigate;
-  const hasNavigate = Boolean(navigate);
-  const props = useRef({});
-  props.current = {
-    sessionPath,
-    pollMs,
-    position,
-    theme,
-    navigate: hasNavigate ? (href) => navigateRef.current?.(href) : void 0,
-    getSession: sessionFor(sessionPath)
-  };
+  const propsRef = useRef({});
   useEffect(() => {
+    navigateRef.current = navigate;
+    propsRef.current = {
+      sessionPath,
+      pollMs,
+      position,
+      theme,
+      navigate: navigate ? (href) => navigateRef.current?.(href) : void 0,
+      screen,
+      debugContext: withStampedBuild(debugContext),
+      getSession: sessionFor(sessionPath)
+    };
+    handle.current?.update(propsRef.current);
+  }, [debugContext, navigate, pollMs, position, screen, sessionPath, theme]);
+  useEffect(() => {
+    const boot = (refresh, wait) => bootToolbar({
+      getSession: () => sessionFor(sessionPath)({ refresh }),
+      props: () => propsRef.current,
+      onMount: (mounted) => {
+        handle.current = mounted;
+      },
+      ...wait ? { wait } : {}
+    });
+    let stop = boot(false);
+    const watch = watchHost(() => {
+      if (handle.current) return;
+      stop();
+      stop = boot(true, now);
+    });
+    return () => {
+      watch.stop();
+      handle.current = null;
+      stop();
+    };
+  }, [sessionPath]);
+  return null;
+}
+
+// src/runtime/debug-context-host.ts
+var DEBUG_ERROR_EVENT = "comment-tool:error";
+function reportToolbarError(error, componentStack) {
+  if (typeof window === "undefined" || typeof CustomEvent !== "function") return;
+  window.dispatchEvent(
+    new CustomEvent(DEBUG_ERROR_EVENT, {
+      detail: { error, componentStack: componentStack ?? null }
+    })
+  );
+}
+function queryCacheSummary(client, max = 50) {
+  return client.getQueryCache().getAll().slice(-max).map((query) => ({
+    key: query.queryKey,
+    status: query.state.status,
+    fetchStatus: query.state.fetchStatus,
+    error: query.state.error ?? void 0,
+    updatedAt: query.state.dataUpdatedAt,
+    observers: query.getObserversCount?.()
+  }));
+}
+
+// src/help/react.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+var loading = /* @__PURE__ */ new Map();
+function loadHelp(serviceUrl) {
+  const page = window;
+  const there = () => typeof page.CommentToolHelp?.mount === "function" ? page.CommentToolHelp : null;
+  const ready = there();
+  if (ready) return Promise.resolve(ready);
+  const url = `${serviceUrl.replace(/\/+$/, "")}/v1/toolbar/help.js`;
+  let kept = loading.get(url);
+  if (!kept) {
+    kept = new Promise((resolve, reject) => {
+      const tag = document.createElement("script");
+      tag.src = url;
+      tag.async = true;
+      tag.onload = () => {
+        const api = there();
+        if (api) resolve(api);
+        else reject(new Error(`${url} defined no CommentToolHelp.`));
+      };
+      tag.onerror = () => {
+        tag.remove();
+        reject(new Error(`${url} did not load.`));
+      };
+      document.head.appendChild(tag);
+    });
+    kept.catch(() => loading.delete(url));
+    loading.set(url, kept);
+  }
+  return kept;
+}
+function HelpPill(props) {
+  const {
+    serviceUrl,
+    sessionPath = "/api/comment-service/session",
+    label,
+    position,
+    theme
+  } = props;
+  const hasList = typeof props.list === "function";
+  const hasMore = typeof props.moreOptions === "function";
+  const latest = useRef2(props);
+  const mounted = useRef2(null);
+  const options = useRef2(() => {
+    const now2 = latest.current;
+    return {
+      submit: (request) => latest.current.submit(request),
+      ...typeof now2.list === "function" ? {
+        list: () => {
+          const list = latest.current.list;
+          return list ? list() : Promise.resolve([]);
+        }
+      } : {},
+      label: now2.label,
+      position: now2.position,
+      theme: now2.theme,
+      captures: () => {
+        const captures = latest.current.captures;
+        return typeof captures === "function" ? captures() : captures !== false;
+      },
+      ...typeof now2.moreOptions === "function" ? { moreOptions: (draft) => latest.current.moreOptions?.(draft) } : {}
+    };
+  });
+  useEffect2(() => {
+    latest.current = props;
+  });
+  useEffect2(() => {
     let cancelled = false;
-    let mounted = null;
-    let container = null;
     const start = async () => {
-      const session = await sessionFor(sessionPath)().catch(() => null);
-      if (!session || cancelled) return;
-      const runtime = await loadRuntime(session.apiUrl, source);
+      const address = serviceUrl ?? (await sessionFor(sessionPath)().catch(() => null))?.apiUrl ?? null;
+      if (cancelled) return;
+      if (!address) {
+        console.info(
+          `[comment-service] <HelpPill> is not shown: ${sessionPath} names no service for this person. Pass serviceUrl to show it to everyone.`
+        );
+        return;
+      }
+      const api = await loadHelp(address);
       if (cancelled) return;
-      container = document.createElement("div");
-      container.setAttribute("data-cs-runtime", source);
-      container.style.display = "contents";
-      document.body.append(container);
-      mounted = runtime.mount(container, props.current);
-      handle.current = mounted;
+      mounted.current = { api, handle: api.mount(options.current()) };
     };
-    const cancelIdle = whenIdle(() => {
+    const cancelWait = whenIdle(() => {
       start().catch(
-        (error) => console.warn("[comment-service] The toolbar could not start.", error)
+        (error) => console.warn("[comment-service] The help pill could not start.", error)
       );
     }, IDLE_TIMEOUT_MS);
     return () => {
       cancelled = true;
-      cancelIdle();
-      handle.current = null;
-      queueMicrotask(() => {
-        mounted?.unmount();
-        container?.remove();
-      });
+      cancelWait();
+      mounted.current?.handle.unmount();
+      mounted.current = null;
     };
-  }, [sessionPath, source]);
-  useEffect(() => {
-    handle.current?.update(props.current);
-  }, [pollMs, position, theme, hasNavigate]);
+  }, [serviceUrl, sessionPath]);
+  useEffect2(() => {
+    const now2 = mounted.current;
+    if (now2) now2.handle = now2.api.mount(options.current());
+  }, [label, position, theme, hasList, hasMore]);
   return null;
 }
+
+// src/help/wire.ts
+var HELP_LIMITS = {
+  /** A request's own id: letters, digits, `.`, `_`, `:` and `-`. */
+  id: 100,
+  message: 4e3,
+  images: 3,
+  /** One picture, before base64. */
+  imageBytes: 5 * 1024 * 1024,
+  name: 200,
+  label: 200,
+  url: 1e3,
+  /** "Your requests" shows at most this many. */
+  listed: 50
+};
+var HELP_BODY_BYTES = Math.ceil(HELP_LIMITS.images * HELP_LIMITS.imageBytes * 4 / 3) + 256 * 1024;
+
+// src/help/types.ts
+var HelpError = class extends Error {
+  name = "HelpError";
+};
+
+// src/help/requests.ts
+var NOT_SENT = "That did not send. Check your connection and try again.";
+var NOT_READ = "Your requests could not be loaded.";
+async function base64Of(blob) {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  let binary = "";
+  const chunk = 32768;
+  for (let index = 0; index < bytes.length; index += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + chunk));
+  }
+  return btoa(binary);
+}
+async function imageWire(image) {
+  if (image.blob.size > HELP_LIMITS.imageBytes) {
+    throw new HelpError("A picture is too large to send. Remove it and try again.");
+  }
+  return {
+    name: image.name,
+    contentType: image.blob.type,
+    width: image.width,
+    height: image.height,
+    markedUp: image.markedUp,
+    data: await base64Of(image.blob)
+  };
+}
+async function sentenceOf(response) {
+  const payload = await response.json().catch(() => null);
+  return typeof payload?.error === "string" && payload.error.trim() ? payload.error : null;
+}
+function supportRequestsAt(url) {
+  return {
+    async submit(request) {
+      const body = {
+        id: request.id,
+        message: request.message,
+        pageUrl: request.pageUrl,
+        route: request.route,
+        pointed: request.pointed,
+        images: await Promise.all(request.images.map(imageWire)),
+        client: request.client
+      };
+      let response;
+      try {
+        response = await fetch(url, {
+          method: "POST",
+          headers: { accept: "application/json", "content-type": "application/json" },
+          credentials: "same-origin",
+          cache: "no-store",
+          body: JSON.stringify(body)
+        });
+      } catch {
+        throw new HelpError(NOT_SENT);
+      }
+      if (!response.ok) throw new HelpError(await sentenceOf(response) ?? NOT_SENT);
+      const receipt = await response.json().catch(() => null);
+      return {
+        ...typeof receipt?.reference === "string" ? { reference: receipt.reference } : {},
+        ...typeof receipt?.url === "string" ? { url: receipt.url } : {},
+        ...typeof receipt?.note === "string" ? { note: receipt.note } : {}
+      };
+    },
+    async list() {
+      let response;
+      try {
+        response = await fetch(url, {
+          headers: { accept: "application/json" },
+          credentials: "same-origin",
+          cache: "no-store"
+        });
+      } catch {
+        throw new HelpError(NOT_READ);
+      }
+      if (!response.ok) throw new HelpError(await sentenceOf(response) ?? NOT_READ);
+      const payload = await response.json().catch(() => null);
+      if (!Array.isArray(payload?.requests)) throw new HelpError(NOT_READ);
+      return payload.requests;
+    }
+  };
+}
 export {
-  CommentToolbar
+  CommentToolbar,
+  HelpError,
+  HelpPill,
+  queryCacheSummary,
+  reportToolbarError,
+  supportRequestsAt
 };