@opengeni/react 7.4.0 → 7.5.0-canary.36919050519001

package/src/components/timeline-pill-geometry.ts

@@ -0,0 +1,169 @@
+import type { TimelinePillPlacement, TimelinePillPosition } from "./timeline-pill-placement";
+
+const INTERACTIVE =
+  'a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="switch"], [role="checkbox"], [contenteditable="true"]';
+
+/** A control this wide is a row (a disclosure header); only what it draws counts. */
+const ROW_WIDTH_RATIO = 0.8;
+
+/** The full contextual label may not fit beside a compact toolbar on phones. */
+export function chooseQuestionPosition(
+  pill: HTMLElement,
+  frame: HTMLElement,
+  scroller: HTMLElement,
+  preference: readonly TimelinePillPlacement[],
+  current: TimelinePillPosition,
+): TimelinePillPosition {
+  const rect = pill.getBoundingClientRect();
+  const bounds = frame.getBoundingClientRect();
+  const view = scroller.getBoundingClientRect();
+  if (!rect.width || !view.width) return current;
+  const style = getComputedStyle(frame);
+  const baseTop = bounds.top - current.offsetY;
+  const left = (placement: TimelinePillPlacement) =>
+    placement === "start"
+      ? bounds.left + parseFloat(style.paddingLeft || "0")
+      : placement === "end"
+        ? bounds.right - parseFloat(style.paddingRight || "0") - rect.width
+        : bounds.left + (bounds.width - rect.width) / 2;
+  const controls: DOMRect[] = [];
+  for (const control of scroller.querySelectorAll<HTMLElement>(INTERACTIVE)) {
+    const box = control.getBoundingClientRect();
+    if (!box.width || !box.height || box.bottom <= baseTop || box.top >= view.bottom) continue;
+    if (box.width < view.width * ROW_WIDTH_RATIO) controls.push(box);
+    else {
+      for (const icon of control.querySelectorAll("svg, img, canvas, video"))
+        controls.push(icon.getBoundingClientRect());
+      const walker = scroller.ownerDocument.createTreeWalker(control, NodeFilter.SHOW_TEXT);
+      for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+        if (!text.textContent?.trim()) continue;
+        const range = scroller.ownerDocument.createRange();
+        range.selectNodeContents(text);
+        controls.push(...range.getClientRects());
+      }
+    }
+  }
+  const clear = (placement: TimelinePillPlacement, offsetY: number) =>
+    !controls.some(
+      (control) =>
+        control.right > left(placement) &&
+        control.left < left(placement) + rect.width &&
+        control.bottom > baseTop + offsetY &&
+        control.top < baseTop + offsetY + rect.height,
+    );
+  const order = [current.placement, ...preference.filter((value) => value !== current.placement)];
+  // Return to the normal strip once it is clear, without touching scroll geometry.
+  for (const placement of order) if (clear(placement, 0)) return { placement, offsetY: 0 };
+  const offsets = [...new Set(controls.map((control) => control.bottom + 4 - baseTop))]
+    .filter((offset) => offset > 0 && baseTop + offset + rect.height <= view.bottom)
+    .sort((a, b) => a - b);
+  for (const offsetY of offsets) {
+    for (const placement of order) if (clear(placement, offsetY)) return { placement, offsetY };
+  }
+  return current;
+}
+
+/**
+ * Hit-testing for useTimelinePillPlacement, loaded only once a pill shows so it
+ * stays out of a session's first load.
+ */
+export function choosePlacement(
+  pill: HTMLElement,
+  frame: HTMLElement,
+  scroller: HTMLElement,
+  preference: readonly TimelinePillPlacement[],
+  current: TimelinePillPlacement,
+): TimelinePillPlacement {
+  const pillRect = pill.getBoundingClientRect();
+  const frameRect = frame.getBoundingClientRect();
+  const view = scroller.getBoundingClientRect();
+  if (pillRect.width === 0 || view.width === 0) return current;
+  const inset = Math.max(0, pillRect.left - frameRect.left, frameRect.right - pillRect.right);
+  const gutter = Math.min(inset, parseFloat(getComputedStyle(scroller).paddingLeft) || 16);
+  const left = (placement: TimelinePillPlacement) =>
+    placement === "start"
+      ? frameRect.left + gutter
+      : placement === "end"
+        ? frameRect.right - gutter - pillRect.width
+        : frameRect.left + (frameRect.width - pillRect.width) / 2;
+  const collisions = (placement: TimelinePillPlacement) =>
+    countCollisions(
+      pill,
+      scroller,
+      view,
+      left(placement),
+      pillRect.top,
+      pillRect.width,
+      pillRect.height,
+    );
+  // Stay put while the current spot is clear, so the pill does not wander.
+  if (collisions(current) === 0) return current;
+  let best = current;
+  let fewest = Number.POSITIVE_INFINITY;
+  for (const candidate of preference) {
+    const count = candidate === current ? collisions(current) : collisions(candidate);
+    if (count === 0) return candidate;
+    if (count < fewest) {
+      fewest = count;
+      best = candidate;
+    }
+  }
+  return best;
+}
+
+function countCollisions(
+  pill: HTMLElement,
+  scroller: HTMLElement,
+  view: DOMRect,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+): number {
+  const document = scroller.ownerDocument;
+  let count = 0;
+  for (const fx of [0.06, 0.3, 0.5, 0.7, 0.94]) {
+    for (const fy of [0.2, 0.5, 0.8]) {
+      const x = left + width * fx;
+      const y = top + height * fy;
+      if (x < view.left || x > view.right || y < view.top || y > view.bottom) continue;
+      if (coversControl(document.elementsFromPoint(x, y), pill, scroller, view, x, y)) count += 1;
+    }
+  }
+  return count;
+}
+
+function coversControl(
+  stack: Element[],
+  pill: HTMLElement,
+  scroller: HTMLElement,
+  view: DOMRect,
+  x: number,
+  y: number,
+): boolean {
+  for (const element of stack) {
+    if (pill.contains(element)) continue;
+    if (!scroller.contains(element) || element === scroller) return false;
+    const control = element.closest(INTERACTIVE);
+    if (!control || !scroller.contains(control)) return false;
+    // A compact control (a link, an icon button) is covered anywhere on its box.
+    if (control.getBoundingClientRect().width < view.width * ROW_WIDTH_RATIO) return true;
+    // A full-width row (a disclosure header) only where it draws something: an
+    // icon or the glyphs of its label, never its empty background.
+    if (element.closest("svg, img, canvas, video")) return true;
+    return textUnderPoint(element, x, y);
+  }
+  return false;
+}
+
+function textUnderPoint(element: Element, x: number, y: number): boolean {
+  const range = element.ownerDocument.createRange();
+  for (const node of element.childNodes) {
+    if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue;
+    range.selectNodeContents(node);
+    for (const rect of range.getClientRects()) {
+      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;
+    }
+  }
+  return false;
+}

package/src/components/timeline-pill-placement.ts

@@ -0,0 +1,99 @@
+import { type RefObject, useEffect, useState } from "react";
+
+/** Where a floating timeline pill sits along its edge of the conversation. */
+export type TimelinePillPlacement = "start" | "center" | "end";
+export type TimelinePillPosition = { placement: TimelinePillPlacement; offsetY: number };
+
+const RECHECK_MS = 1000;
+
+/**
+ * Floating pills (Jump to latest, Back to your message) sit over the scrolling
+ * conversation. Prefer sliding one sideways when its spot would cover
+ * a control: a link, a button, or the label and chevron of a full-width row
+ * such as the active turn's "Working" header. Plain prose may sit under a pill;
+ * controls may not. The top contextual pill can also move below a toolbar when
+ * no horizontal slot fits. Only the pill moves — the scroller's size, padding, and
+ * scroll position never change — so timeline anchoring stays untouched.
+ */
+export function useTimelinePillPlacement({
+  pillRef,
+  scrollerRef,
+  active,
+  preference,
+  allowDownwardFallback = false,
+}: {
+  pillRef: RefObject<HTMLElement | null>;
+  scrollerRef: RefObject<HTMLElement | null>;
+  active: boolean;
+  /** Placements in order of preference; the first is the resting position. */
+  preference: readonly TimelinePillPlacement[];
+  allowDownwardFallback?: boolean;
+}): TimelinePillPosition {
+  const [position, setPosition] = useState<TimelinePillPosition>({
+    placement: preference[0]!,
+    offsetY: 0,
+  });
+  const key = preference.join(",");
+
+  useEffect(() => {
+    if (!active) {
+      setPosition({ placement: preference[0]!, offsetY: 0 });
+      return;
+    }
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    let frame = 0;
+    let current: TimelinePillPosition = { placement: preference[0]!, offsetY: 0 };
+    let geometry: typeof import("./timeline-pill-geometry") | null = null;
+    let disposed = false;
+    void import("./timeline-pill-geometry").then((loaded) => {
+      if (disposed) return;
+      geometry = loaded;
+      schedule();
+    });
+    const evaluate = () => {
+      frame = 0;
+      const pill = pillRef.current;
+      const frameElement = pill?.offsetParent;
+      if (!geometry || !pill || !(frameElement instanceof HTMLElement)) return;
+      const next = allowDownwardFallback
+        ? geometry.chooseQuestionPosition(pill, frameElement, scroller, preference, current)
+        : {
+            placement: geometry.choosePlacement(
+              pill,
+              frameElement,
+              scroller,
+              preference,
+              current.placement,
+            ),
+            offsetY: 0,
+          };
+      if (next.placement !== current.placement || next.offsetY !== current.offsetY) {
+        current = next;
+        setPosition(next);
+      }
+    };
+    const schedule = () => {
+      if (frame === 0) frame = requestAnimationFrame(evaluate);
+    };
+    schedule();
+    const view = scroller.ownerDocument.defaultView;
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    view?.addEventListener("resize", schedule);
+    // Content and panel width can change under a stationary reader (a streaming
+    // row, a ticking elapsed time, a resized host panel), so look again now and
+    // then while the pill is shown.
+    const timer = setInterval(schedule, RECHECK_MS);
+    return () => {
+      disposed = true;
+      if (frame !== 0) cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", schedule);
+      view?.removeEventListener("resize", schedule);
+      clearInterval(timer);
+    };
+    // `key` stands in for the preference array's contents.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active, key, pillRef, scrollerRef, allowDownwardFallback]);
+
+  return active ? position : { placement: preference[0]!, offsetY: 0 };
+}

package/src/components/usage-limit-notice.tsx

@@ -0,0 +1,179 @@
+import type { UsageAllowancePeriod, WorkspaceUsageResponse } from "@opengeni/sdk/usage-allowances";
+import { GaugeIcon, XIcon } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { useUsage, type UsageClientLike } from "../hooks/use-usage";
+import { cn } from "../lib/cn";
+import {
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceInstant,
+  type AllowanceLabels,
+} from "../usage/allowance-copy";
+import { summarizeUsage, usagePercentLabel, type UsageSummary } from "../usage/summary";
+
+export type UsageLimitNoticeLabels = AllowanceLabels & {
+  /** "You've used 85% of your usage limit." */
+  memberWarning: (percent: string) => string;
+  /** "This workspace has used 85% of its usage budget." */
+  workspaceWarning: (percent: string) => string;
+  memberExhausted: string;
+  workspaceExhausted: string;
+  dismiss: string;
+};
+
+export const DEFAULT_USAGE_LIMIT_NOTICE_LABELS: UsageLimitNoticeLabels = {
+  ...allowanceLabels(),
+  memberWarning: (percent) => `You've used ${percent}% of your usage limit.`,
+  workspaceWarning: (percent) => `This workspace has used ${percent}% of its usage budget.`,
+  memberExhausted: "You've reached your usage limit.",
+  workspaceExhausted: "This workspace has reached its usage limit.",
+  dismiss: "Dismiss",
+};
+
+type NoticeBaseProps = {
+  labels?: Partial<UsageLimitNoticeLabels> | undefined;
+  /**
+   * Your own next step beside the message, for example an "Upgrade" or
+   * "Request more" button. Receives the summary so it can differ by scope.
+   */
+  action?: ((summary: UsageSummary) => ReactNode) | undefined;
+  /**
+   * Remember a dismissed warning for this browser tab. The key should name the
+   * workspace; the period and scope are added for you, so a new warning (or a
+   * new period) shows again. Reaching the limit is never dismissible.
+   */
+  dismissStorageKey?: string | undefined;
+  className?: string | undefined;
+};
+
+export type UsageLimitNoticeProps = NoticeBaseProps & {
+  /** A usage response you already loaded; omit it to read `/usage/me`. */
+  usage?: WorkspaceUsageResponse | null | undefined;
+  client?: UsageClientLike | undefined;
+  workspaceId?: string | undefined;
+  period?: UsageAllowancePeriod | undefined;
+  refreshKey?: unknown;
+};
+
+/**
+ * A calm line for the composer when a member is close to, or at, a usage
+ * limit: what happened, who can raise it, and when it resets. Renders nothing
+ * while usage is comfortable, unlimited, loading, or unreadable.
+ */
+export function UsageLimitNotice({
+  usage,
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: UsageLimitNoticeProps) {
+  if (usage !== undefined) {
+    return <UsageLimitNoticeView {...view} summary={usage ? summarizeUsage(usage) : null} />;
+  }
+  return (
+    <LoadingNotice
+      {...view}
+      client={client}
+      workspaceId={workspaceId}
+      period={period}
+      refreshKey={refreshKey}
+    />
+  );
+}
+
+function LoadingNotice({
+  client,
+  workspaceId,
+  period,
+  refreshKey,
+  ...view
+}: NoticeBaseProps &
+  Pick<UsageLimitNoticeProps, "client" | "workspaceId" | "period" | "refreshKey">) {
+  const { summary } = useUsage({ client, workspaceId, period, refreshKey });
+  return <UsageLimitNoticeView {...view} summary={summary} />;
+}
+
+function readDismissed(key: string | null): boolean {
+  if (!key || typeof sessionStorage === "undefined") return false;
+  try {
+    return sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/** Presentational notice for a summary you computed (`summarizeUsage`). */
+export function UsageLimitNoticeView({
+  summary,
+  labels: overrides,
+  action,
+  dismissStorageKey,
+  className,
+}: NoticeBaseProps & { summary: UsageSummary | null }) {
+  const labels = { ...DEFAULT_USAGE_LIMIT_NOTICE_LABELS, ...overrides };
+  const binding = summary?.binding ?? null;
+  const state = summary?.state;
+  const key =
+    dismissStorageKey && binding && state === "warning"
+      ? `${dismissStorageKey}:warning:${binding.scope}:${binding.resetsAt ?? "none"}`
+      : null;
+  const [dismissed, setDismissed] = useState(() => readDismissed(key));
+  useEffect(() => setDismissed(readDismissed(key)), [key]);
+  if (!summary || !binding || (state !== "warning" && state !== "exhausted")) return null;
+  if (state === "warning" && dismissed) return null;
+  const workspace = binding.scope === "workspace";
+  const exhausted = state === "exhausted";
+  const headline = exhausted
+    ? workspace
+      ? labels.workspaceExhausted
+      : labels.memberExhausted
+    : workspace
+      ? labels.workspaceWarning(usagePercentLabel(binding.fraction))
+      : labels.memberWarning(usagePercentLabel(binding.fraction));
+  const reset = allowanceResetSentence(labels, binding.resetsAt);
+  const dismiss = () => {
+    setDismissed(true);
+    if (!key) return;
+    try {
+      sessionStorage.setItem(key, "1");
+    } catch {
+      // Storage can be unavailable (privacy mode); the in-memory dismissal holds.
+    }
+  };
+  return (
+    <div
+      role="status"
+      data-og-usage-notice={exhausted ? "exhausted" : "warning"}
+      data-og-usage-scope={binding.scope}
+      className={cn(
+        "og-root flex min-w-0 items-start gap-2 px-3.5 pt-2.5 text-og-sm md:px-4",
+        className,
+      )}
+    >
+      <GaugeIcon aria-hidden className="mt-0.5 size-3.5 shrink-0 text-og-status-waiting" />
+      <p className="min-w-0 flex-1 text-og-fg-muted">
+        <span className={cn(exhausted && "font-medium text-og-fg")}>{headline}</span>{" "}
+        {exhausted ? <>{workspace ? labels.workspaceRemedy : labels.memberRemedy} </> : null}
+        <span
+          className="whitespace-nowrap"
+          title={binding.resetsAt ? formatAllowanceInstant(binding.resetsAt) : undefined}
+        >
+          {reset}
+        </span>
+      </p>
+      {action ? <div className="shrink-0">{action(summary)}</div> : null}
+      {!exhausted ? (
+        <button
+          type="button"
+          aria-label={labels.dismiss}
+          onClick={dismiss}
+          className="-mt-0.5 -mr-1 grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-subtle transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:size-9"
+        >
+          <XIcon aria-hidden className="size-3.5" />
+        </button>
+      ) : null}
+    </div>
+  );
+}