@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/session-proxy-scope.tsx

@@ -0,0 +1,153 @@
+import {
+  formatErrorMessage,
+  OpenGeniApiError,
+  OpenGeniBrowserClient,
+  type FetchLike,
+} from "@opengeni/sdk/browser";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import type { SessionClientLike } from "../client";
+import { OpenGeniProvider } from "../provider";
+
+/** Request headers for every proxy call: static, or computed per request. */
+export type SessionProxyHeaders = Record<string, string> | (() => Record<string, string>);
+
+export type SessionProxyBaseUrl = {
+  /**
+   * Mount path of your `createSessionProxyHandler` (for example
+   * `"/api/opengeni"`). The component then needs no `OpenGeniProvider`,
+   * client, or workspace id: it creates the browser client for that path and
+   * uses the workspace the proxy resolved for the signed-in user. An explicit
+   * `workspaceId` skips that lookup. A `client` you pass is used instead of
+   * the created one (point it at the same proxy).
+   */
+  baseUrl?: string | undefined;
+  /**
+   * `baseUrl` mode: headers added to every proxy request, for hosts that
+   * authenticate with a bearer token instead of cookies. A function is called
+   * per request, so it can return the current token.
+   */
+  headers?: SessionProxyHeaders | undefined;
+  /** `baseUrl` mode: custom fetch for every proxy request (async auth, retries). */
+  fetch?: FetchLike | undefined;
+};
+
+/**
+ * End-user copy for a failed first load. The proxy calls Opengeni with the
+ * server's key, so Opengeni's own `unauthenticated` refusal means that key was
+ * rejected (the server logs what to fix), not that this person must sign in.
+ * A host's own 401 from `resolve` carries no Opengeni code and still reads as
+ * "Sign in to continue."
+ */
+function proxyLoadErrorMessage(error: unknown): string {
+  if (
+    error instanceof OpenGeniApiError &&
+    error.status === 401 &&
+    error.code === "unauthenticated"
+  ) {
+    const message = "Chat is unavailable right now. Ask an administrator for help.";
+    return error.correlationId ? `${message} Reference: ${error.correlationId}.` : message;
+  }
+  return formatErrorMessage(error, "Could not load the conversation.");
+}
+
+type ScopeState =
+  | { status: "loading" }
+  | { status: "ready"; workspaceId: string }
+  | { status: "error"; message: string };
+
+/**
+ * `OpenGeniProvider` for a same-origin session proxy, from its base URL alone.
+ * The proxy's client config names the resolved workspace, so the browser
+ * never handles an Opengeni id. Provider-based usage is unchanged.
+ */
+export function SessionProxyScope({
+  baseUrl,
+  workspaceId,
+  client: suppliedClient,
+  headers,
+  fetch,
+  children,
+}: Omit<SessionProxyBaseUrl, "baseUrl"> & {
+  baseUrl: string;
+  workspaceId?: string | undefined;
+  client?: SessionClientLike | undefined;
+  children: ReactNode;
+}) {
+  if (suppliedClient && (headers !== undefined || fetch !== undefined)) {
+    throw new TypeError(
+      "@opengeni/react: pass headers/fetch either to your own client or as props, not both.",
+    );
+  }
+  // Latest values without recreating the client (inline props change identity).
+  const headersRef = useRef(headers);
+  headersRef.current = headers;
+  const fetchRef = useRef(fetch);
+  fetchRef.current = fetch;
+  const hasFetch = fetch !== undefined;
+  // Version skew between this bundle and the server SDK is tolerated, as for
+  // any embedded host: the proxy reports its own contract revision.
+  const ownClient = useMemo(
+    () =>
+      new OpenGeniBrowserClient({
+        baseUrl,
+        apiContract: "compatible",
+        headers: () => {
+          const current = headersRef.current;
+          return typeof current === "function" ? current() : (current ?? {});
+        },
+        ...(hasFetch
+          ? { fetch: (input, init) => (fetchRef.current ?? globalThis.fetch)(input, init) }
+          : {}),
+      }),
+    [baseUrl, hasFetch],
+  );
+  const client: SessionClientLike = suppliedClient ?? ownClient;
+  const [state, setState] = useState<ScopeState>(
+    workspaceId ? { status: "ready", workspaceId } : { status: "loading" },
+  );
+  useEffect(() => {
+    if (workspaceId) {
+      setState({ status: "ready", workspaceId });
+      return;
+    }
+    let active = true;
+    setState({ status: "loading" });
+    client.getClientConfig().then(
+      (config) => {
+        if (!active) return;
+        setState(
+          config.workspaceId
+            ? { status: "ready", workspaceId: config.workspaceId }
+            : {
+                status: "error",
+                message:
+                  "This server does not report its workspace. Update @opengeni/sdk on the server, or pass workspaceId.",
+              },
+        );
+      },
+      (error: unknown) => {
+        if (!active) return;
+        setState({ status: "error", message: proxyLoadErrorMessage(error) });
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [client, workspaceId]);
+
+  if (state.status === "error") {
+    return (
+      <div role="alert" className="og-root p-3 text-og-sm text-og-danger" data-og-proxy-error="">
+        {state.message}
+      </div>
+    );
+  }
+  if (state.status === "loading") {
+    return <div className="og-root" aria-busy="true" data-og-proxy-loading="" />;
+  }
+  return (
+    <OpenGeniProvider client={client} workspaceId={state.workspaceId}>
+      {children}
+    </OpenGeniProvider>
+  );
+}

package/src/components/session-status.tsx

@@ -1,5 +1,8 @@
-import type { SessionStatus as SessionStatusValue } from "@opengeni/sdk";
 import { cn } from "../lib/cn";
+import { SESSION_STATUS_PRESENTATION, type SessionDisplayStatus } from "../session-status-model";
+
+/** A server status, or the display-only `blocked` (see `sessionDisplayStatus`). */
+type SessionStatusValue = SessionDisplayStatus;
 
 export type SessionStatusMeta = {
   label: string;
@@ -12,52 +15,58 @@ export type SessionStatusMeta = {
 
 export const SESSION_STATUS_META: Record<SessionStatusValue, SessionStatusMeta> = {
   queued: {
-    label: "Starting",
+    label: SESSION_STATUS_PRESENTATION.queued.label,
     dotClassName: "bg-og-status-queued",
     badgeClassName: "text-og-fg-muted border-og-border bg-og-status-queued/10",
-    pulse: true,
+    pulse: SESSION_STATUS_PRESENTATION.queued.pulse,
   },
   running: {
-    label: "Running",
+    label: SESSION_STATUS_PRESENTATION.running.label,
     dotClassName: "bg-og-status-running",
     badgeClassName: "text-og-status-running border-og-status-running/30 bg-og-status-running/10",
-    pulse: true,
+    pulse: SESSION_STATUS_PRESENTATION.running.pulse,
   },
   recovering: {
-    label: "Recovering",
+    label: SESSION_STATUS_PRESENTATION.recovering.label,
     dotClassName: "bg-og-status-running",
     badgeClassName: "text-og-status-running border-og-status-running/30 bg-og-status-running/10",
-    pulse: true,
+    pulse: SESSION_STATUS_PRESENTATION.recovering.pulse,
   },
   waiting_capacity: {
-    label: "Waiting for capacity",
+    label: SESSION_STATUS_PRESENTATION.waiting_capacity.label,
     dotClassName: "bg-og-status-waiting",
     badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
-    pulse: true,
+    pulse: SESSION_STATUS_PRESENTATION.waiting_capacity.pulse,
   },
   idle: {
-    label: "Idle",
+    label: SESSION_STATUS_PRESENTATION.idle.label,
     dotClassName: "bg-og-status-idle",
     badgeClassName: "text-og-status-idle border-og-status-idle/30 bg-og-status-idle/10",
-    pulse: false,
+    pulse: SESSION_STATUS_PRESENTATION.idle.pulse,
   },
   requires_action: {
-    label: "Waiting on you",
+    label: SESSION_STATUS_PRESENTATION.requires_action.label,
     dotClassName: "bg-og-status-waiting",
     badgeClassName: "text-og-status-waiting border-og-status-waiting/35 bg-og-status-waiting/10",
-    pulse: true,
+    pulse: SESSION_STATUS_PRESENTATION.requires_action.pulse,
+  },
+  blocked: {
+    label: SESSION_STATUS_PRESENTATION.blocked.label,
+    dotClassName: "bg-og-status-failed",
+    badgeClassName: "text-og-status-failed border-og-status-failed/35 bg-og-status-failed/10",
+    pulse: SESSION_STATUS_PRESENTATION.blocked.pulse,
   },
   failed: {
-    label: "Failed",
+    label: SESSION_STATUS_PRESENTATION.failed.label,
     dotClassName: "bg-og-status-failed",
     badgeClassName: "text-og-status-failed border-og-status-failed/35 bg-og-status-failed/10",
-    pulse: false,
+    pulse: SESSION_STATUS_PRESENTATION.failed.pulse,
   },
   cancelled: {
-    label: "Cancelled",
+    label: SESSION_STATUS_PRESENTATION.cancelled.label,
     dotClassName: "bg-og-status-cancelled",
     badgeClassName: "text-og-fg-subtle border-og-border bg-og-status-cancelled/10",
-    pulse: false,
+    pulse: SESSION_STATUS_PRESENTATION.cancelled.pulse,
   },
 };
 

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

@@ -0,0 +1,174 @@
+import type {
+  ParsedSessionUsageLimitReachedRefusal,
+  SessionUsageLimit,
+} from "@opengeni/sdk/session-usage-limits";
+import { GaugeIcon, XIcon } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import {
+  sessionUsageLimitLabels,
+  sessionUsageLimitPercent,
+  summarizeSessionUsageLimit,
+  summarizeSessionUsageLimitRefusal,
+  type SessionUsageLimitLabels,
+  type SessionUsageLimitSummary,
+} from "../usage/session-usage-limit";
+
+export type SessionUsageLimitNoticeProps = {
+  /** The task's usage-limit projection (`GET .../usage-limit` or `session.usageLimit`). */
+  usage: SessionUsageLimit | null | undefined;
+  /**
+   * A refused Send's typed refusal (`OpenGeniSessionUsageLimitReachedError`),
+   * shown as reached until a re-read projection replaces it. Clear it when a
+   * newer `usage` arrives: a projection that already says reached wins.
+   */
+  refusal?: Pick<
+    ParsedSessionUsageLimitReachedRefusal,
+    "limitMicros" | "usedMicros" | "rootSessionId"
+  > | null;
+  /** Opens the limit editor. Absent: the notice says who can change it instead. */
+  onChangeLimit?: (() => void) | undefined;
+  /** A child chat: link to the main task that owns the limit, instead of an editor. */
+  mainTaskHref?: string | undefined;
+  /** The goal paused at the limit: changing it never resumes, so say Resume is next. */
+  goalPaused?: boolean;
+  /**
+   * The last refresh of `usage` failed. The last known amount and any reached
+   * state stay, with a note that they may be out of date and that the limit
+   * still applies. Pass the read hook's error state; never zero the amount.
+   */
+  stale?: boolean;
+  /**
+   * Remember a dismissed near-limit notice for this tab. The key should name
+   * the workspace; the task and limit version are added, so a changed limit
+   * shows it again. Reaching the limit is never dismissible.
+   */
+  dismissStorageKey?: string | undefined;
+  labels?: Partial<SessionUsageLimitLabels> | undefined;
+  className?: string | undefined;
+};
+
+function readDismissed(key: string | null): boolean {
+  if (!key || typeof sessionStorage === "undefined") return false;
+  try {
+    return sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The calm composer line for a task's usage limit: a dismissible note near
+ * the limit and a status once it is reached, with one action (Change limit).
+ * Renders nothing while usage is comfortable, unlimited, unknown or loading.
+ * Never a purchase or credits remedy: the limit is a person's own setting.
+ */
+export function SessionUsageLimitNotice({
+  usage,
+  refusal,
+  onChangeLimit,
+  mainTaskHref,
+  goalPaused = false,
+  stale = false,
+  dismissStorageKey,
+  labels: overrides,
+  className,
+}: SessionUsageLimitNoticeProps) {
+  const labels = sessionUsageLimitLabels(overrides);
+  const fromUsage = summarizeSessionUsageLimit(usage, overrides, { stale });
+  const summary: SessionUsageLimitSummary =
+    refusal && fromUsage.state !== "reached"
+      ? summarizeSessionUsageLimitRefusal(refusal, overrides)
+      : fromUsage;
+  const near = summary.state === "near";
+  const key =
+    dismissStorageKey && near && summary.rootSessionId
+      ? `${dismissStorageKey}:session-usage-limit:${summary.rootSessionId}:${summary.version ?? 0}`
+      : null;
+  const [dismissed, setDismissed] = useState(() => readDismissed(key));
+  useEffect(() => setDismissed(readDismissed(key)), [key]);
+  if (summary.state !== "reached" && !near) return null;
+  if (near && dismissed) return null;
+  const reached = summary.state === "reached";
+  const amount = summary.amountText ?? "";
+  const dismiss = () => {
+    setDismissed(true);
+    if (!key) return;
+    try {
+      sessionStorage.setItem(key, "1");
+    } catch {
+      // Storage can be unavailable (privacy mode); the in-memory dismissal holds.
+    }
+  };
+  let action: ReactNode = null;
+  if (onChangeLimit) {
+    action = (
+      <button
+        type="button"
+        onClick={onChangeLimit}
+        data-og-session-usage-limit-action="change"
+        className={cn(
+          "inline-flex h-8 shrink-0 items-center rounded-og-sm border px-3 text-og-control font-medium transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent pointer-coarse:h-11",
+          reached
+            ? "border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover"
+            : "border-og-border bg-og-surface-1 text-og-fg hover:bg-og-surface-2",
+        )}
+      >
+        {labels.changeLimit}
+      </button>
+    );
+  } else if (mainTaskHref) {
+    action = (
+      <a href={mainTaskHref} className="og-link shrink-0 text-og-control font-medium">
+        {labels.openMainTask}
+      </a>
+    );
+  }
+  const remedy =
+    !onChangeLimit && reached
+      ? labels.reachedReadOnlyRemedy
+      : goalPaused
+        ? labels.reachedGoalRemedy
+        : labels.reachedRemedy;
+  return (
+    <div
+      role="status"
+      data-og-session-usage-limit={reached ? "reached" : "near"}
+      className={cn(
+        "og-root flex min-w-0 flex-wrap items-start gap-x-2 gap-y-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" />
+      <div className="min-w-0 flex-1 basis-48">
+        {reached ? (
+          <>
+            <p className="font-medium text-og-fg">{labels.reachedTitle}</p>
+            <p className="mt-0.5 text-og-fg-muted">
+              {amount ? `${labels.reachedAmount(amount)} ` : ""}
+              {remedy}
+              {summary.stale ? ` ${labels.staleNote}` : ""}
+            </p>
+          </>
+        ) : (
+          <p className="text-og-fg-muted">
+            {labels.near(sessionUsageLimitPercent(summary.fraction ?? 0), amount)}
+            {summary.stale ? ` ${labels.staleNote}` : ""}
+          </p>
+        )}
+      </div>
+      {action}
+      {!reached ? (
+        <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>
+  );
+}

package/src/components/timeline-anchor.tsx

@@ -0,0 +1,119 @@
+import { Component, type ReactNode } from "react";
+
+type Anchor = {
+  element: HTMLElement;
+  key: string | null;
+  text: string | null;
+  top: number;
+  focused?: boolean;
+};
+export type TimelineAnchor = Anchor[];
+
+/** Read ownership synchronously: selectionchange may follow the next React commit. */
+export function timelineHasReader(scroller: HTMLElement | null): boolean {
+  if (!scroller) return false;
+  const focused = scroller.ownerDocument.activeElement;
+  const selection = scroller.ownerDocument.getSelection();
+  return Boolean(
+    (focused && focused !== scroller && scroller.contains(focused)) ||
+    (selection &&
+      !selection.isCollapsed &&
+      (scroller.contains(selection.anchorNode) || scroller.contains(selection.focusNode))),
+  );
+}
+
+/** Read the old DOM immediately before React changes it, not when a fetch starts. */
+export class TimelineBeforeLayout extends Component<{
+  capture: () => void;
+  children: ReactNode;
+}> {
+  getSnapshotBeforeUpdate() {
+    this.props.capture();
+    return null;
+  }
+  componentDidUpdate() {}
+  render() {
+    return this.props.children;
+  }
+}
+
+export function captureTimelineAnchor(scroller: HTMLElement): TimelineAnchor | null {
+  const viewport = scroller.getBoundingClientRect();
+  if (viewport.height <= 0) return null;
+  // Capture each box once: these measurements share one pre-commit DOM snapshot.
+  const groups = Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]"))
+    .map((element) => ({ element, rect: element.getBoundingClientRect() }))
+    .filter(({ rect }) => rect.height > 0);
+  const anchors: TimelineAnchor = [];
+  let stickyFocus: Anchor | undefined;
+  // A disclosure is the reader's explicit point of interaction. In particular,
+  // anchoring a paragraph below an expanding disclosure would move its button.
+  const focused = scroller.ownerDocument.activeElement;
+  if (focused instanceof HTMLElement && scroller.contains(focused) && focused !== scroller) {
+    const box = focused.getBoundingClientRect();
+    if (box.bottom > viewport.top && box.top < viewport.bottom) {
+      const anchor = { element: focused, key: null, text: null, top: box.top, focused: true };
+      const section = focused.closest("[data-og-work-section]");
+      // A stuck header stays put even when its section moves. Anchor the work
+      // being read beneath it instead, while still retaining its focus identity.
+      if (
+        focused.matches('[data-og-work-header="outer"]') &&
+        section &&
+        section.getBoundingClientRect().top < box.top - 1
+      )
+        stickyFocus = anchor;
+      else anchors.push(anchor);
+    }
+  }
+  // A paragraph survives even when earlier deltas reconstruct its containing message.
+  for (const { element: group, rect } of groups) {
+    if (rect.bottom <= viewport.top || rect.top >= viewport.bottom) continue;
+    for (const element of group.querySelectorAll<HTMLElement>("p, li, pre, h1, h2, h3, h4")) {
+      const box = element.getBoundingClientRect();
+      const text = element.textContent;
+      if (box.bottom > viewport.top && box.top < viewport.bottom && text && text.length >= 12) {
+        anchors.push({ element, key: null, text, top: box.top });
+      }
+    }
+  }
+  // Prefer a retained visible row, then a following row. A following row also
+  // anchors the unchanged suffix of a partially loaded message above it.
+  const rows = groups.map(({ element, rect }) => ({
+    element,
+    key: element.getAttribute("data-og-group-key"),
+    text: null,
+    top: rect.top,
+  }));
+  anchors.push(...rows.filter((row) => row.top >= viewport.top));
+  anchors.push(...rows.filter((row) => row.top < viewport.top).reverse());
+  if (stickyFocus) anchors.push(stickyFocus);
+  return anchors;
+}
+
+/** Return only the correction native browser anchoring has not already made. */
+export function timelineAnchorCorrection(
+  scroller: HTMLElement,
+  anchors: TimelineAnchor,
+): number | null {
+  let blocks: HTMLElement[] | undefined;
+  let groups: HTMLElement[] | undefined;
+  for (const anchor of anchors) {
+    let element: HTMLElement | undefined;
+    if (
+      scroller.contains(anchor.element) &&
+      (!anchor.text || anchor.element.textContent === anchor.text)
+    ) {
+      element = anchor.element;
+    } else if (anchor.key) {
+      groups ??= Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]"));
+      element = groups.find((group) => group.getAttribute("data-og-group-key") === anchor.key);
+    } else if (anchor.text) {
+      blocks ??= Array.from(scroller.querySelectorAll<HTMLElement>("p, li, pre, h1, h2, h3, h4"));
+      const matches = blocks.filter((block) => block.textContent === anchor.text);
+      // Repeated boilerplate is not sufficient evidence of retained content.
+      if (matches.length === 1) element = matches[0];
+    }
+    if (element) return element.getBoundingClientRect().top - anchor.top;
+  }
+  return null;
+}