@opengeni/react 7.4.0 → 7.5.0-canary.36927100590001

package/src/components/artifacts/chat-interactive-block.tsx

@@ -0,0 +1,260 @@
+import type { OpenGeniClient, ToolGatewayIdentity } from "@opengeni/sdk";
+import { useEffect, useMemo, useState } from "react";
+
+import { loadSiteSnapshot } from "../../sites-ui";
+import { useOpenGeniLinkResolver } from "../open-geni-links";
+import {
+  ArtifactButton,
+  ArtifactLabelsProvider,
+  ArtifactSelect,
+  useArtifactLabels,
+  type ArtifactLabels,
+} from "./artifact-chrome";
+import { ArtifactSandbox } from "./artifact-sandbox";
+import { DeferredChatMedia } from "./deferred-chat-media";
+import { inlineHtmlDocument } from "./inline-html-document";
+import type { PublishedHtmlArtifactToolBridge } from "./published-html-artifact-frame";
+
+// Fixed chat viewports keep async Site loads and fragment resize messages from
+// moving the conversation. Full-screen remains available for larger content.
+const INLINE_PREVIEW_HEIGHT = 360;
+const SITE_PREVIEW_HEIGHT = 400;
+const PREVIEW_CHROME_HEIGHT = 50;
+
+/** Reads a Site needs to render; the console client, the SDK client, or a proxy. */
+export type SiteSnapshotClient = Pick<
+  OpenGeniClient,
+  "getWorkspaceArtifact" | "getWorkspaceArtifactHtml"
+> &
+  Partial<Pick<OpenGeniClient, "getWorkspaceArtifactContent">>;
+
+/** The exact saved Site a tool bridge is pinned to (absent for inline HTML). */
+export type SiteToolScope = {
+  artifactId: string;
+  siteVersionId: string;
+  requestedTools: readonly ToolGatewayIdentity[];
+};
+
+/** Host-owned Site API access. Omit it and Sites render without workspace tools. */
+export type SiteToolBridgeFactory = (
+  site?: SiteToolScope,
+) => PublishedHtmlArtifactToolBridge | undefined;
+
+export type ChatInteractiveBlockProps = {
+  workspaceId: string;
+  kind: "html" | "site";
+  content: string;
+  client: SiteSnapshotClient;
+  toolBridge?: SiteToolBridgeFactory | undefined;
+  theme?: "light" | "dark" | undefined;
+  /** Translations for the preview's copy; defaults to English. */
+  labels?: Partial<ArtifactLabels> | undefined;
+};
+
+/**
+ * Inline preview for an assistant `opengeni-html` or `opengeni-site` fence, as
+ * the OpenGeni console renders it. "Open Site" goes through the nearest
+ * `resolveLink`, so a host decides where a Site opens.
+ */
+export function ChatInteractiveBlock({ labels, ...props }: ChatInteractiveBlockProps) {
+  return (
+    <ArtifactLabelsProvider labels={labels}>
+      <InteractiveBlock {...props} />
+    </ArtifactLabelsProvider>
+  );
+}
+
+function InteractiveBlock(props: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  const height =
+    (props.kind === "html" ? INLINE_PREVIEW_HEIGHT : SITE_PREVIEW_HEIGHT) + PREVIEW_CHROME_HEIGHT;
+  return (
+    <DeferredChatMedia
+      key={`${props.workspaceId}:${props.kind}:${props.kind === "site" ? props.content : "inline"}`}
+      height={height}
+      actionLabel={props.kind === "html" ? labels.loadPreview : labels.loadSitePreview}
+    >
+      <div style={{ height }}>
+        <LoadedChatInteractiveBlock {...props} />
+      </div>
+    </DeferredChatMedia>
+  );
+}
+
+function LoadedChatInteractiveBlock(props: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  if (props.kind === "html") return <InlineHtml {...props} />;
+  try {
+    const value = JSON.parse(props.content);
+    if (
+      !value ||
+      typeof value.siteId !== "string" ||
+      !/^[0-9a-f-]{36}$/i.test(value.siteId) ||
+      (value.versionId !== undefined &&
+        (typeof value.versionId !== "string" || !/^[0-9a-f-]{36}$/i.test(value.versionId)))
+    )
+      throw new Error("Invalid Site reference");
+    return (
+      <SiteEmbed
+        key={`${props.workspaceId}:${value.siteId}:${value.versionId ?? "current"}`}
+        {...props}
+        siteId={value.siteId}
+        initialVersionId={value.versionId}
+      />
+    );
+  } catch {
+    return <p role="alert">{labels.siteReferenceInvalid}</p>;
+  }
+}
+
+function InlineHtml({ content, toolBridge, theme }: ChatInteractiveBlockProps) {
+  const labels = useArtifactLabels();
+  const html = useMemo(() => inlineHtmlDocument(content), [content]);
+  const bridge = useMemo(() => toolBridge?.(), [toolBridge]);
+  return (
+    <ArtifactSandbox
+      title={labels.preview}
+      showTitle={false}
+      showLiveStatus={false}
+      html={html}
+      toolBridge={bridge}
+      height={INLINE_PREVIEW_HEIGHT}
+      className="h-full"
+      fill
+      theme={theme}
+    />
+  );
+}
+
+function SiteEmbed(
+  props: ChatInteractiveBlockProps & { siteId: string; initialVersionId?: string },
+) {
+  const [versionId, setVersionId] = useState(props.initialVersionId);
+  return (
+    <SiteEmbedContent
+      key={versionId ?? "current"}
+      {...props}
+      versionId={versionId}
+      onVersionChange={setVersionId}
+    />
+  );
+}
+
+function SiteEmbedContent({
+  workspaceId,
+  client,
+  toolBridge,
+  theme,
+  siteId,
+  versionId,
+  onVersionChange,
+}: ChatInteractiveBlockProps & {
+  siteId: string;
+  versionId?: string | undefined;
+  onVersionChange: (id: string) => void;
+}) {
+  const [loaded, setLoaded] = useState<{
+    client: SiteSnapshotClient;
+    snapshot: Awaited<ReturnType<typeof loadSiteSnapshot>>;
+  } | null>(null);
+  const snapshot = loaded?.client === client ? loaded.snapshot : null;
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    const abort = new AbortController();
+    setError(false);
+    setLoaded(null);
+    void loadSiteSnapshot(client, workspaceId, siteId, {
+      signal: abort.signal,
+      ...(versionId ? { versionId } : {}),
+    })
+      .then((value) => {
+        if (!abort.signal.aborted) setLoaded({ client, snapshot: value });
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setError(true);
+      });
+    return () => abort.abort();
+  }, [client, workspaceId, siteId, versionId, retry]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () =>
+      content
+        ? toolBridge?.({
+            artifactId: siteId,
+            siteVersionId: content.versionId,
+            requestedTools: content.requestedTools,
+          })
+        : undefined,
+    [toolBridge, siteId, content],
+  );
+  const open = useOpenGeniLinkResolver()?.({ kind: "site", artifactId: siteId, workspaceId });
+  const labels = useArtifactLabels();
+  if (error)
+    return (
+      <p role="alert">
+        {labels.siteLoadFailed}{" "}
+        <ArtifactButton size="sm" onClick={() => setRetry((v) => v + 1)}>
+          {labels.retry}
+        </ArtifactButton>
+      </p>
+    );
+  if (!snapshot) return <p role="status">{labels.loadingSite}</p>;
+  if (!content) return <p>{labels.siteUnpublished}</p>;
+  return (
+    <ArtifactSandbox
+      title={snapshot.detail.artifact.title}
+      html={content.html}
+      toolBridge={bridge}
+      height={SITE_PREVIEW_HEIGHT}
+      className="h-full"
+      fill
+      theme={theme}
+      headerControls={
+        <>
+          {/* One published version has nothing to choose; keep the bar for the title. */}
+          {snapshot.detail.versions.length > 1 ||
+          !snapshot.detail.versions.some((v) => v.id === content.versionId) ? (
+            <ArtifactSelect
+              aria-label={labels.siteVersion}
+              className="bg-transparent text-xs"
+              value={content.versionId}
+              onChange={(e) => onVersionChange(e.target.value)}
+            >
+              {!snapshot.detail.versions.some((v) => v.id === content.versionId) && (
+                <option value={content.versionId}>{labels.savedVersion}</option>
+              )}
+              {snapshot.detail.versions.map((v) => (
+                <option key={v.id} value={v.id}>
+                  {labels.version(v.revision)}
+                </option>
+              ))}
+            </ArtifactSelect>
+          ) : null}
+          {open?.href ? (
+            <a
+              className="shrink-0 whitespace-nowrap text-xs underline"
+              href={open.href}
+              data-og-open-site=""
+            >
+              {labels.openSite}
+            </a>
+          ) : open?.open ? (
+            <button
+              type="button"
+              className="shrink-0 cursor-pointer whitespace-nowrap text-xs underline"
+              data-og-open-site=""
+              onClick={() =>
+                void Promise.resolve()
+                  .then(open.open)
+                  .catch(() => undefined)
+              }
+            >
+              {labels.openSite}
+            </button>
+          ) : null}
+        </>
+      }
+    />
+  );
+}

package/src/components/artifacts/deferred-chat-media.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+/**
+ * Reserve the chat slot before starting expensive media work. Activation is
+ * one-way: scrolling away must not discard an interactive preview's state.
+ * The timeline parks at its initial tip in layout effects before this observer
+ * is attached, so historical previews above the entry viewport stay dormant.
+ */
+export function DeferredChatMedia({
+  children,
+  height,
+  label,
+  actionLabel,
+}: {
+  children: ReactNode;
+  height: number;
+  /** What is loading, as in "Load {label}". */
+  label?: string | undefined;
+  /** The complete (translated) activation label; overrides `label`. */
+  actionLabel?: string | undefined;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const node = host.current;
+    if (active || !node) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setActive(true);
+      return;
+    }
+    let disposed = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (disposed || !entries.some((entry) => entry.isIntersecting)) return;
+        setActive(true);
+        observer.disconnect();
+      },
+      {
+        root: node.closest("[data-og-timeline-scroller]"),
+        rootMargin: "200px 0px",
+      },
+    );
+    observer.observe(node);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+    };
+  }, [active]);
+
+  return (
+    <div ref={host} data-chat-media={active ? "active" : "deferred"}>
+      {active ? (
+        children
+      ) : (
+        <div className="flex w-full items-center justify-center" style={{ height }}>
+          <button
+            type="button"
+            className="rounded-md px-3 py-2 text-sm text-fg-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-ring"
+            onClick={() => setActive(true)}
+          >
+            {actionLabel ?? `Load ${label ?? "media"}`}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/artifacts/editable-artifact-ui.tsx

@@ -60,10 +60,12 @@ export function EditableArtifactMessage({
   title,
   detail,
   retry,
+  retryLabel = "Retry",
 }: {
   title: string;
   detail: string;
   retry?: (() => void) | undefined;
+  retryLabel?: string | undefined;
 }) {
   return (
     <div className="grid h-full min-h-56 place-items-center bg-og-bg p-6 text-center">
@@ -76,7 +78,7 @@ export function EditableArtifactMessage({
             onClick={retry}
             className="mt-3 rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium hover:bg-og-primary-hover outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
           >
-            Retry
+            {retryLabel}
           </button>
         ) : null}
       </div>

package/src/components/artifacts/editable-artifact-view.tsx

@@ -0,0 +1,187 @@
+import type { EditableArtifactResource } from "@opengeni/sdk/artifacts";
+import {
+  createBrowserEditableArtifactSession,
+  type CreateBrowserEditableArtifactSessionOptions,
+  type EditableArtifactBrowserRuntime,
+  type EditableArtifactCacheAuthority,
+  type EditableArtifactModality,
+} from "@opengeni/sdk/editable-artifacts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  ArtifactLoading,
+  ArtifactProblem,
+  artifactLoadErrorView,
+  useArtifactLabels,
+  type ArtifactLoadErrorView,
+} from "./artifact-chrome";
+import { EditableArtifactWorkbenchHost } from "./editable-artifact-workbench";
+
+/**
+ * The browser kernels an editor needs, one per modality, plus the host-built
+ * Worker URL (for Vite: `@opengeni/sdk/editable-artifacts/worker?worker&url`).
+ * Kernels come from `@opengeni/artifact-kernel-wasm-{document,spreadsheet,presentation}`.
+ */
+export type EditableArtifactRuntimes = Readonly<{
+  document: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  spreadsheet: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  presentation: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+  workerUrl: string;
+  applicationOrigin?: string | undefined;
+  /** Loopback development only. */
+  allowInsecureDevelopmentAssets?: boolean | undefined;
+}>;
+
+/** Everything needed to open one artifact for the current principal. */
+export type OpenedEditableArtifact = Readonly<{
+  artifact: EditableArtifactResource;
+  authority: EditableArtifactCacheAuthority;
+  replicaId: string;
+}>;
+
+export type EditableArtifactViewProps = Readonly<{
+  /** Absolute API (or session proxy) base the live transport talks to. */
+  baseUrl: URL;
+  workspaceId: string;
+  artifactId: string;
+  /** Resolve metadata, cache authority, and replica; called again on retry. */
+  open: (signal: AbortSignal) => Promise<OpenedEditableArtifact>;
+  runtimes: EditableArtifactRuntimes;
+  transport?: CreateBrowserEditableArtifactSessionOptions["transport"];
+  /** Show the editor's own title header (hosts with their own header hide it). */
+  showHeader?: boolean | undefined;
+  /** Re-open when this changes (for example the host's credential version). */
+  authorityKey?: string | undefined;
+  describeError?: ((error: unknown) => ArtifactLoadErrorView) | undefined;
+  onTitle?: ((title: string) => void) | undefined;
+  /** Loading copy; defaults to the `opening` label. */
+  loadingLabel?: string | undefined;
+}>;
+
+type LoadState =
+  | Readonly<{ key: string | null; kind: "loading" }>
+  | Readonly<{ key: string; kind: "ready"; value: OpenedEditableArtifact }>
+  | Readonly<{ key: string; kind: "error"; error: unknown }>;
+
+/**
+ * One editable document, spreadsheet, or presentation with its first-party
+ * editor. The console dock/page and embedding hosts supply only data access.
+ */
+export function EditableArtifactView({
+  baseUrl,
+  workspaceId,
+  artifactId,
+  open,
+  runtimes,
+  transport,
+  showHeader = true,
+  authorityKey,
+  describeError,
+  onTitle,
+  loadingLabel,
+}: EditableArtifactViewProps) {
+  const [loadEpoch, setLoadEpoch] = useState(0);
+  const labels = useArtifactLabels();
+  const loadKey = JSON.stringify([artifactId, authorityKey, baseUrl.href, workspaceId, loadEpoch]);
+  const [state, setState] = useState<LoadState>({ key: null, kind: "loading" });
+  const current = state.key === loadKey ? state : null;
+  const openRef = useRef(open);
+  openRef.current = open;
+  const onTitleRef = useRef(onTitle);
+  onTitleRef.current = onTitle;
+  useEffect(() => {
+    const abort = new AbortController();
+    setState({ key: loadKey, kind: "loading" });
+    void openRef
+      .current(abort.signal)
+      .then((value) => {
+        if (abort.signal.aborted) return;
+        setState({ key: loadKey, kind: "ready", value });
+        onTitleRef.current?.(value.artifact.title);
+      })
+      .catch((error: unknown) => {
+        if (!abort.signal.aborted) setState({ key: loadKey, kind: "error", error });
+      });
+    return () => abort.abort();
+  }, [loadKey]);
+
+  const ready = current?.kind === "ready" ? current.value : null;
+  const transportRef = useRef(transport);
+  transportRef.current = transport;
+  const sessionKey = useMemo(
+    () =>
+      ready
+        ? JSON.stringify({
+            baseUrl: baseUrl.href,
+            authorityKey,
+            workspaceId,
+            artifact: { id: ready.artifact.id, modality: ready.artifact.modality },
+            authority: ready.authority,
+            replicaId: ready.replicaId,
+            workerUrl: runtimes.workerUrl,
+          })
+        : "",
+    [authorityKey, baseUrl.href, ready, runtimes.workerUrl, workspaceId],
+  );
+  const createSession = useCallback(() => {
+    if (!ready) throw new Error("Artifact is not open");
+    return createBrowserEditableArtifactSession({
+      baseUrl,
+      workspaceId,
+      artifact: ready.artifact,
+      storageAuthority: ready.authority,
+      replicaId: ready.replicaId,
+      runtime: {
+        ...runtimeFor(runtimes, ready.artifact.modality),
+        workerUrl: runtimes.workerUrl,
+        ...(runtimes.applicationOrigin ? { applicationOrigin: runtimes.applicationOrigin } : {}),
+        ...(runtimes.allowInsecureDevelopmentAssets
+          ? { allowInsecureDevelopmentAssets: true }
+          : {}),
+      },
+      ...(transportRef.current ? { transport: transportRef.current } : {}),
+    });
+  }, [baseUrl, ready, runtimes, workspaceId]);
+
+  if (!current || current.kind === "loading")
+    return <ArtifactLoading label={loadingLabel ?? labels.opening} />;
+  if (current.kind === "error") {
+    return (
+      <ArtifactProblem
+        view={
+          describeError
+            ? describeError(current.error)
+            : artifactLoadErrorView(current.error, "editable", labels)
+        }
+        onRetry={() => setLoadEpoch((value) => value + 1)}
+      />
+    );
+  }
+  const { artifact } = current.value;
+  const surface = { title: artifact.title, showHeader };
+  return (
+    <div className="h-full min-h-0 bg-og-bg text-og-fg">
+      <EditableArtifactWorkbenchHost
+        sessionKey={sessionKey}
+        createSession={createSession}
+        document={surface}
+        spreadsheet={surface}
+        presentation={surface}
+      />
+    </div>
+  );
+}
+
+function runtimeFor(
+  runtimes: EditableArtifactRuntimes,
+  modality: EditableArtifactModality,
+): Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory"> {
+  switch (modality) {
+    case "document":
+      return runtimes.document;
+    case "spreadsheet":
+      return runtimes.spreadsheet;
+    case "presentation":
+      return runtimes.presentation;
+  }
+}

package/src/components/artifacts/editable-artifact-workbench.tsx

@@ -6,6 +6,7 @@ import {
 } from "@opengeni/sdk/editable-artifacts";
 import { useCallback, useEffect, useRef, useState } from "react";
 
+import { useArtifactLabels } from "./artifact-chrome";
 import { EditableArtifactMessage } from "./editable-artifact-ui";
 import {
   EditableDocumentArtifactSurface,
@@ -133,6 +134,7 @@ export function EditableArtifactWorkbenchHost({
   }, [retryEpoch, sessionKey]);
 
   const retry = useCallback(() => setRetryEpoch((value) => value + 1), []);
+  const labels = useArtifactLabels();
   const currentError = state.key === sessionKey ? state.error : null;
   if (state.key === sessionKey && state.session) {
     return (
@@ -146,9 +148,10 @@ export function EditableArtifactWorkbenchHost({
   }
   return (
     <EditableArtifactMessage
-      title={currentError ? "Could not open this artifact" : "Opening artifact"}
-      detail={currentError?.message ?? "Starting the secure editing session…"}
+      title={currentError ? labels.editableErrors.transient.title : labels.opening}
+      detail={currentError?.message ?? labels.startingEditor}
       retry={currentError ? retry : undefined}
+      retryLabel={labels.retry}
     />
   );
 }

package/src/components/artifacts/editable-document.tsx

@@ -9,6 +9,7 @@ import {
   type EditableArtifactSession,
 } from "@opengeni/sdk/editable-artifacts";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { useLatestTaskRunner } from "./latest-task-runner";
 
 import {
   DocumentProjectionArtifactSurface,
@@ -87,6 +88,7 @@ export function EditableDocumentArtifactSurface({
     error: null,
   });
   const loadGeneration = useRef(0);
+  const scheduleLoad = useLatestTaskRunner(session);
   const commandStateRef = useRef<DocumentCommandState | null>(null);
   if (commandStateRef.current?.session !== session) {
     commandStateRef.current = {
@@ -107,45 +109,41 @@ export function EditableDocumentArtifactSurface({
         ? { ...current, loading: true, error: null }
         : { session, projection: null, loading: true, error: null },
     );
-    void composeDocumentEditorProjection(session).then(
-      (projection) => {
-        if (
-          cancelled ||
-          generation !== loadGeneration.current ||
-          commandStateRef.current !== commandState
-        ) {
-          return;
-        }
-        const nextParagraphText = paragraphTextById(projection);
-        for (const [localId, canonicalId] of commandState.optimisticParagraphIds) {
-          if (nextParagraphText.has(canonicalId)) continue;
-          const optimisticText =
-            commandState.paragraphText.get(canonicalId) ?? commandState.paragraphText.get(localId);
-          if (optimisticText !== undefined) nextParagraphText.set(canonicalId, optimisticText);
-        }
-        commandState.paragraphText = nextParagraphText;
-        setState({ session, projection, loading: false, error: null });
-      },
-      (cause) => {
-        if (
-          cancelled ||
-          generation !== loadGeneration.current ||
-          commandStateRef.current !== commandState
-        ) {
-          return;
-        }
-        setState({
-          session,
-          projection: null,
-          loading: false,
-          error: asEditableArtifactError(cause, "Could not open this document"),
-        });
-      },
-    );
+    const superseded = () =>
+      cancelled ||
+      generation !== loadGeneration.current ||
+      commandStateRef.current !== commandState;
+    scheduleLoad(async () => {
+      if (superseded()) return;
+      await composeDocumentEditorProjection(session).then(
+        (projection) => {
+          if (superseded()) return;
+          const nextParagraphText = paragraphTextById(projection);
+          for (const [localId, canonicalId] of commandState.optimisticParagraphIds) {
+            if (nextParagraphText.has(canonicalId)) continue;
+            const optimisticText =
+              commandState.paragraphText.get(canonicalId) ??
+              commandState.paragraphText.get(localId);
+            if (optimisticText !== undefined) nextParagraphText.set(canonicalId, optimisticText);
+          }
+          commandState.paragraphText = nextParagraphText;
+          setState({ session, projection, loading: false, error: null });
+        },
+        (cause) => {
+          if (superseded()) return;
+          setState({
+            session,
+            projection: null,
+            loading: false,
+            error: asEditableArtifactError(cause, "Could not open this document"),
+          });
+        },
+      );
+    });
     return () => {
       cancelled = true;
     };
-  }, [commandState, invalidator, retryEpoch, session]);
+  }, [commandState, invalidator, retryEpoch, scheduleLoad, session]);
 
   const refresh = useCallback(() => setRetryEpoch((value) => value + 1), []);
   const writable = !readOnly && view.writable;