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

package/dist/react.js

@@ -1,6 +1,69 @@
 // 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;
+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;
@@ -41,27 +104,52 @@ function captureHandoff() {
   });
 }
 
-// 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);
+// 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));
+    };
   }
-  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);
+}
+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/runtime-version.ts
-var runtimeVersion = 1;
-
-// src/runtime/session.ts
+// src/runtime/session-source.ts
 var EXPIRY_MARGIN_MS = 6e4;
 var UNKNOWN_EXPIRY_MS = 5 * 6e4;
 function readJwt(token) {
@@ -82,26 +170,28 @@ function sessionFrom(payload) {
     apiUrl: value.apiUrl,
     project: value.project,
     environment: value.environment,
-    hostToken: value.hostToken
+    hostToken: value.hostToken,
+    ...typeof value.loaderOrigin === "string" ? { loaderOrigin: value.loaderOrigin } : {}
   };
 }
-async function fetchSession(path) {
-  const response = await fetch(path, {
-    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
-    cache: "no-store"
-  });
-  return response.json();
-}
-function sessionSource(path, load = fetchSession, now = Date.now) {
+var SessionOff = class extends Error {
+};
+function sessionSource(path, load, now2 = Date.now) {
   let kept = null;
   let pending = null;
   return ({ refresh = false } = {}) => {
-    if (!refresh && kept && now() < kept.until) return Promise.resolve(kept.session);
+    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 : now() + UNKNOWN_EXPIRY_MS;
+      const until = !session ? Infinity : expires ? expires * 1e3 - EXPIRY_MARGIN_MS : now2() + UNKNOWN_EXPIRY_MS;
       kept = { session, until };
       return session;
     }).finally(() => {
@@ -110,35 +200,79 @@ function sessionSource(path, load = fetchSession, now = Date.now) {
     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 = sessionSource(path);
+    source = sessionSource2(path);
     sources.set(path, source);
   }
   return source;
 }
 
 // src/runtime/loader.tsx
-var IDLE_TIMEOUT_MS = 3e3;
-captureHandoff();
-async function loadRuntime(apiUrl) {
-  const url = `${apiUrl.replace(/\/+$/, "")}/v1/toolbar/${runtimeVersion}.js`;
-  const remote = await import(
-    /* @vite-ignore */
-    /* webpackIgnore: true */
-    url
-  );
-  if (typeof remote.mount === "function") return remote;
-  throw new Error(`${url} has no mount export`);
+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({
   sessionPath = "/api/comment-service/session",
   pollMs,
   position,
   theme,
-  navigate
+  navigate,
+  screen,
+  debugContext
 }) {
   const handle = useRef(null);
   const navigateRef = useRef(navigate);
@@ -151,43 +285,262 @@ function CommentToolbar({
       position,
       theme,
       navigate: navigate ? (href) => navigateRef.current?.(href) : void 0,
+      screen,
+      debugContext: withStampedBuild(debugContext),
       getSession: sessionFor(sessionPath)
     };
     handle.current?.update(propsRef.current);
-  }, [navigate, pollMs, position, sessionPath, theme]);
+  }, [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);
+      const address = serviceUrl ?? (await sessionFor(sessionPath)().catch(() => null))?.apiUrl ?? null;
       if (cancelled) return;
-      container = document.createElement("div");
-      container.setAttribute("data-cs-runtime", "latest");
-      container.style.display = "contents";
-      document.body.append(container);
-      mounted = runtime.mount(container, propsRef.current);
-      handle.current = mounted;
+      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;
+      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]);
+  }, [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
 };