@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/components/open-geni-chat.tsx

@@ -0,0 +1,319 @@
+import type { OpenGeniClient } from "@opengeni/sdk";
+import { ArrowUpIcon, LoaderCircleIcon, MenuIcon, XIcon } from "lucide-react";
+import { useCallback, useRef, useState, type CSSProperties, type FormEvent } from "react";
+import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
+import {
+  useHostTheme,
+  type HostSurfacePreference,
+  type HostThemePreference,
+} from "../lib/host-theme";
+import { useOpenGeni, type ClientOverride } from "../session-context";
+import { SessionConversation, type SessionConversationProps } from "./session-conversation";
+import { SessionList, type SessionListLabels, type SessionListProps } from "./session-list";
+
+export type OpenGeniChatLabels = SessionListLabels & {
+  openChats: string;
+  closeChats: string;
+  newChatPlaceholder: string;
+  /** Heading above the new-chat composer; empty hides it. */
+  newChatTitle: string;
+  send: string;
+  newChatUnavailable: string;
+};
+
+const DEFAULT_LABELS: Omit<OpenGeniChatLabels, keyof SessionListLabels> = {
+  openChats: "Open chats",
+  closeChats: "Close chats",
+  newChatPlaceholder: "Ask anything…",
+  newChatTitle: "How can I help?",
+  send: "Send",
+  newChatUnavailable: "New chats are not enabled for this product.",
+};
+
+export type OpenGeniChatProps = ClientOverride & {
+  /** Controlled selection. `null` shows the new-chat composer. */
+  sessionId?: string | null | undefined;
+  /** Initial selection when uncontrolled. Defaults to a new chat. */
+  defaultSessionId?: string | null | undefined;
+  onSessionChange?: ((sessionId: string | null) => void) | undefined;
+  /**
+   * Create a chat from its first message. Defaults to `client.createSession`
+   * with `{ initialMessage, idempotencyKey }`, which `createSessionProxyHandler`
+   * accepts when the server supplies a `createSession` hook. Return the new id.
+   */
+  createSession?: ((initialMessage: string, idempotencyKey: string) => Promise<string>) | undefined;
+  /** Hide the "New chat" entry point. */
+  newChat?: boolean | undefined;
+  /** Forwarded to the conversation (message rendering, tool renderers, composer...). */
+  conversationProps?: Omit<SessionConversationProps, "sessionId" | "client" | "workspaceId">;
+  /** Forwarded to the list (rename/archive toggles, page size). */
+  listProps?: Pick<SessionListProps, "rename" | "archive" | "pageSize"> | undefined;
+  labels?: Partial<OpenGeniChatLabels> | undefined;
+  className?: string | undefined;
+  /** Defaults to filling the host. */
+  height?: CSSProperties["height"];
+  /**
+   * Light or dark. Defaults to `auto`: follow the host page (an enclosing
+   * `data-og-theme`, `class="dark"`/`data-theme` on <html> or <body>, the
+   * host's `color-scheme`, then its background), not the OS setting alone.
+   */
+  theme?: HostThemePreference | undefined;
+  /**
+   * `host` (default) derives backgrounds and cards from the host background so
+   * the chat blends in; `theme` uses the `--og-color-*` surface tokens as they
+   * are. Customized surface tokens are always kept.
+   */
+  surface?: HostSurfacePreference | undefined;
+};
+
+type CreateClient = Partial<Pick<OpenGeniClient, "createSession">>;
+
+/**
+ * A complete chat experience: the user's chat list plus the conversation.
+ * The list is a sidebar when the component is wide and a drawer when narrow
+ * (container-based, so it adapts inside panels as well as full pages).
+ */
+export function OpenGeniChat({
+  client,
+  workspaceId,
+  sessionId: controlledSessionId,
+  defaultSessionId = null,
+  onSessionChange,
+  createSession,
+  newChat = true,
+  conversationProps,
+  listProps,
+  labels: labelOverrides,
+  className,
+  height = "100%",
+  theme,
+  surface,
+}: OpenGeniChatProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides } as OpenGeniChatLabels;
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const [uncontrolled, setUncontrolled] = useState<string | null>(defaultSessionId);
+  const selected = controlledSessionId !== undefined ? controlledSessionId : uncontrolled;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [listRevision, setListRevision] = useState(0);
+  const root = useRef<HTMLDivElement>(null);
+  const hostTheme = useHostTheme(root, { theme, surface });
+
+  const select = useCallback(
+    (next: string | null) => {
+      if (controlledSessionId === undefined) setUncontrolled(next);
+      onSessionChange?.(next);
+      setDrawerOpen(false);
+    },
+    [controlledSessionId, onSessionChange],
+  );
+
+  const create = useCallback(
+    async (initialMessage: string, idempotencyKey: string): Promise<string> => {
+      if (createSession) return await createSession(initialMessage, idempotencyKey);
+      const creator = (context.client as unknown as CreateClient).createSession;
+      if (typeof creator !== "function") throw new Error(labels.newChatUnavailable);
+      const created = await creator.call(context.client, context.workspaceId, {
+        initialMessage,
+        idempotencyKey,
+      } as Parameters<NonNullable<CreateClient["createSession"]>>[1]);
+      return created.id;
+    },
+    [context.client, context.workspaceId, createSession, labels.newChatUnavailable],
+  );
+
+  const list = (
+    <SessionList
+      {...scope}
+      {...listProps}
+      labels={labels}
+      selectedSessionId={selected}
+      onSelect={select}
+      onNewChat={newChat ? () => select(null) : undefined}
+      onArchived={(archivedId) => {
+        if (archivedId === selected) select(null);
+      }}
+      refreshKey={listRevision}
+      className="h-full"
+    />
+  );
+
+  return (
+    <div
+      ref={root}
+      className={cn(
+        "og-root og-chat relative flex min-h-0 min-w-0 bg-og-bg text-og-base text-og-fg",
+        className,
+      )}
+      style={{ ...hostTheme.style, height }}
+      data-og-theme={hostTheme.attribute}
+      data-og-host-theme=""
+      data-og-chat=""
+    >
+      <aside
+        className="og-chat-sidebar min-h-0 w-64 shrink-0 flex-col border-r border-og-border"
+        data-og-chat-sidebar=""
+      >
+        {list}
+      </aside>
+      {drawerOpen ? (
+        <div className="og-chat-drawer absolute inset-0 z-30 flex" data-og-chat-drawer="">
+          <div className="flex h-full w-[min(20rem,85%)] flex-col border-r border-og-border bg-og-bg shadow-og-lg">
+            <div className="flex justify-end p-1">
+              <button
+                type="button"
+                aria-label={labels.closeChats}
+                onClick={() => setDrawerOpen(false)}
+                className="rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2"
+              >
+                <XIcon className="size-4" aria-hidden />
+              </button>
+            </div>
+            <div className="min-h-0 flex-1">{list}</div>
+          </div>
+          <button
+            type="button"
+            aria-label={labels.closeChats}
+            className="flex-1 bg-black/25"
+            onClick={() => setDrawerOpen(false)}
+          />
+        </div>
+      ) : null}
+      <main className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <div className="og-chat-menu flex items-center gap-2 px-2 py-1">
+          <button
+            type="button"
+            aria-label={labels.openChats}
+            aria-expanded={drawerOpen}
+            onClick={() => setDrawerOpen(true)}
+            className="rounded p-1.5 text-og-fg-muted hover:bg-og-surface-2"
+            data-og-chat-menu=""
+          >
+            <MenuIcon className="size-4" aria-hidden />
+          </button>
+          <span className="text-og-sm font-semibold text-og-fg-muted">{labels.heading}</span>
+        </div>
+        <div className="og-chat-main min-h-0 flex-1 px-3 pb-3 pt-1">
+          {selected ? (
+            <SessionConversation
+              {...conversationProps}
+              {...scope}
+              sessionId={selected}
+              height="100%"
+            />
+          ) : (
+            <NewChat
+              labels={labels}
+              create={create}
+              onCreated={(id) => {
+                setListRevision((revision) => revision + 1);
+                select(id);
+              }}
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function NewChat({
+  labels,
+  create,
+  onCreated,
+}: {
+  labels: OpenGeniChatLabels;
+  create: (initialMessage: string, idempotencyKey: string) => Promise<string>;
+  onCreated: (sessionId: string) => void;
+}) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<{ cause: unknown } | null>(null);
+  const formatError = useErrorMessage();
+  // One key per draft, so a retried send returns the same chat.
+  const idempotencyKey = useRef(crypto.randomUUID());
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    const initialMessage = text.trim();
+    if (!initialMessage || sending) return;
+    setSending(true);
+    setError(null);
+    try {
+      const id = await create(initialMessage, idempotencyKey.current);
+      idempotencyKey.current = crypto.randomUUID();
+      setText("");
+      onCreated(id);
+    } catch (cause) {
+      setError({ cause });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={(event) => void submit(event)}
+      className="mx-auto box-border flex h-full w-full max-w-3xl flex-col gap-4 p-3"
+      data-og-new-chat-composer=""
+    >
+      {/* Sits a little above center, relative to the panel rather than the page. */}
+      <div aria-hidden className="min-h-0 flex-[2]" />
+      {labels.newChatTitle ? (
+        <p className="text-center text-og-md font-medium text-og-fg">{labels.newChatTitle}</p>
+      ) : null}
+      <div
+        className={cn(
+          "flex items-end gap-2 rounded-og-lg border border-og-border/90 bg-og-surface-1 p-2 pl-3.5 shadow-og-sm",
+          "transition-[border-color,box-shadow] duration-200 ease-og-out",
+          "focus-within:border-og-accent/50 focus-within:shadow-og-glow",
+        )}
+      >
+        <textarea
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+              event.preventDefault();
+              event.currentTarget.form?.requestSubmit();
+            }
+          }}
+          placeholder={labels.newChatPlaceholder}
+          aria-label={labels.newChatPlaceholder}
+          rows={2}
+          disabled={sending}
+          className="min-h-12 flex-1 resize-none bg-transparent py-1 text-og-composer text-og-fg outline-hidden placeholder:text-og-fg-subtle md:text-og-composer-wide"
+        />
+        <button
+          type="submit"
+          aria-label={labels.send}
+          disabled={sending || !text.trim()}
+          className={cn(
+            "inline-flex size-8 shrink-0 items-center justify-center rounded-og-md pointer-coarse:size-11",
+            "border border-og-primary-border bg-og-primary text-og-primary-fg",
+            "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
+            "hover:bg-og-primary-hover active:scale-95 disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+        >
+          {sending ? (
+            <LoaderCircleIcon className="size-4 animate-og-spin" aria-hidden />
+          ) : (
+            <ArrowUpIcon className="size-4" aria-hidden />
+          )}
+        </button>
+      </div>
+      {error ? (
+        <p role="alert" className="text-center text-og-sm text-og-status-failed">
+          {formatError(
+            error.cause,
+            error.cause instanceof Error && error.cause.message === labels.newChatUnavailable
+              ? labels.newChatUnavailable
+              : undefined,
+          )}
+        </p>
+      ) : null}
+      <div aria-hidden className="min-h-0 flex-[3]" />
+    </form>
+  );
+}

package/src/components/open-geni-links.tsx

@@ -0,0 +1,179 @@
+import type { OpenGeniClient, OpenGeniLinkTarget } from "@opengeni/sdk";
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+export type { OpenGeniLinkTarget };
+
+/**
+ * How the host opens one OpenGeni object an agent linked in chat Markdown.
+ *
+ * - `{ href }` renders a real link (new tab) — use it for a host page URL.
+ * - `{ open }` renders a button that runs the action (download, open a panel,
+ *   client-side navigation) with loading and retry states.
+ * - `null` / `undefined` means "not handled here": the next resolver is asked,
+ *   and when none handles it the text renders as an unavailable reference —
+ *   never as a navigation that would 404 inside the host.
+ */
+export type OpenGeniLinkResolution =
+  | { href: string; open?: undefined }
+  | { open: () => void | Promise<void>; href?: undefined };
+
+export type OpenGeniLinkResolver = (
+  target: OpenGeniLinkTarget,
+) => OpenGeniLinkResolution | null | undefined;
+
+const OpenGeniLinkContext = createContext<OpenGeniLinkResolver | null>(null);
+
+/** First resolver that handles a target wins. */
+export function chainLinkResolvers(
+  ...resolvers: ReadonlyArray<OpenGeniLinkResolver | null | undefined>
+): OpenGeniLinkResolver | null {
+  const active = resolvers.filter((resolver): resolver is OpenGeniLinkResolver =>
+    Boolean(resolver),
+  );
+  if (active.length === 0) return null;
+  if (active.length === 1) return active[0]!;
+  return (target) => {
+    for (const resolver of active) {
+      const resolution = resolver(target);
+      if (resolution) return resolution;
+    }
+    return null;
+  };
+}
+
+/**
+ * Resolve OpenGeni object links (`artifact:`, `sandbox:`, editable artifacts,
+ * Sites) for every {@link Markdown} body below. An inner provider is asked
+ * before an outer one, so a host can override a single kind and keep defaults.
+ */
+export function OpenGeniLinkProvider({
+  resolveLink,
+  children,
+}: {
+  resolveLink: OpenGeniLinkResolver | null | undefined;
+  children: ReactNode;
+}) {
+  const parent = useContext(OpenGeniLinkContext);
+  const value = useMemo(() => chainLinkResolvers(resolveLink, parent), [resolveLink, parent]);
+  return <OpenGeniLinkContext.Provider value={value}>{children}</OpenGeniLinkContext.Provider>;
+}
+
+/** The effective resolver from the nearest {@link OpenGeniLinkProvider}. */
+export function useOpenGeniLinkResolver(): OpenGeniLinkResolver | null {
+  return useContext(OpenGeniLinkContext);
+}
+
+// Every sandbox read the proxy forwards is bounded by the API's own maximum.
+const SANDBOX_DOWNLOAD_MAX_BYTES = 25 * 1024 * 1024;
+
+type SessionLinkClient = Partial<Pick<OpenGeniClient, "createFileDownloadUrl" | "fsRead">>;
+
+function saveBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.rel = "noopener";
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+function openUrl(url: string): void {
+  // A signed download URL is attachment-disposition; an anchor click keeps the
+  // page and survives popup blockers after the awaited URL request.
+  const link = document.createElement("a");
+  link.href = url;
+  link.rel = "noopener noreferrer";
+  link.target = "_blank";
+  document.body.append(link);
+  link.click();
+  link.remove();
+}
+
+function base64Bytes(content: string): Uint8Array<ArrayBuffer> {
+  const binary = atob(content);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+  return bytes;
+}
+
+/**
+ * Default resolver for a session conversation that talks to OpenGeni through
+ * the normal SDK client (for example behind `createSessionProxyHandler`):
+ *
+ * - `artifact:<file>` downloads the retained file through a short-lived URL.
+ * - `sandbox:<path>` downloads when enabled by the host proxy capability.
+ *
+ * Editable artifacts and Sites have no default: they need a host surface
+ * (see `@opengeni/react/artifacts/*` and `@opengeni/react/sites`), so they stay
+ * unavailable until the host resolves them.
+ */
+export function sessionLinkResolver(input: {
+  client: SessionLinkClient;
+  workspaceId: string;
+  sessionId: string;
+  sandboxFiles?: boolean;
+}): OpenGeniLinkResolver {
+  const { client, workspaceId, sessionId } = input;
+  return (target) => {
+    if (target.kind === "file") {
+      if (target.workspaceId !== null && target.workspaceId !== workspaceId) return null;
+      if (typeof client.createFileDownloadUrl !== "function") return null;
+      return {
+        open: async () => {
+          const { url } = await client.createFileDownloadUrl!(workspaceId, target.fileId, {
+            sessionId,
+          });
+          openUrl(url);
+        },
+      };
+    }
+    if (target.kind === "sandbox-file") {
+      if (input.sandboxFiles === false) return null;
+      if (typeof client.fsRead !== "function") return null;
+      return {
+        open: async () => {
+          const file = await client.fsRead!(workspaceId, sessionId, {
+            path: target.path,
+            encoding: "base64",
+            maxBytes: SANDBOX_DOWNLOAD_MAX_BYTES,
+          });
+          if (file.truncated) throw new Error("File is too large to download here.");
+          const name = file.path.split(/[\\/]/u).at(-1) || "download";
+          const bytes =
+            file.encoding === "base64"
+              ? base64Bytes(file.content)
+              : new TextEncoder().encode(file.content);
+          saveBlob(new Blob([bytes], { type: "application/octet-stream" }), name);
+        },
+      };
+    }
+    return null;
+  };
+}
+
+/** An editable artifact or Site to open in a host-mounted viewer. */
+export type OpenGeniViewerTarget = Readonly<{
+  kind: "editable-artifact" | "site";
+  artifactId: string;
+  /** The link text the agent wrote, until the viewer loads the real title. */
+  title?: string | undefined;
+}>;
+
+/**
+ * "Open in host viewer": resolve agent links to editable artifacts and Sites
+ * in this workspace to `open(target)`, for example to mount
+ * `SessionArtifactViewer` beside the conversation. Other targets fall through.
+ */
+export function viewerLinkResolver(input: {
+  workspaceId: string;
+  open: (target: OpenGeniViewerTarget) => void;
+}): OpenGeniLinkResolver {
+  return (target) => {
+    if (target.kind !== "editable-artifact" && target.kind !== "site") return null;
+    if (target.workspaceId !== input.workspaceId) return null;
+    return { open: () => input.open({ kind: target.kind, artifactId: target.artifactId }) };
+  };
+}

package/src/components/openrouter-mark.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+/**
+ * Simple Icons, CC0; https://github.com/simple-icons/simple-icons
+ * Source: https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/openrouter.svg
+ */
+export function OpenRouterMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z" />
+    </svg>
+  );
+}

package/src/components/pierre-diff.tsx

@@ -7,9 +7,15 @@ import {
   Suspense,
   useEffect,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { cn } from "../lib/cn";
 import { gitFileDiffToPatch } from "../lib/git-patch";
+import {
+  loadPierreDiffs,
+  pierreDiffsRevision,
+  subscribePierreDiffs,
+} from "../lib/pierre-diffs-loader";
 
 /** Pierre `PatchDiff` props subset we drive. */
 type PatchDiffComponent = ComponentType<{
@@ -50,10 +56,10 @@ export type PierreDiffProps = {
 
 // Lazy-load `@pierre/diffs/react` so Shiki + the worker pool stay off the
 // critical path (and out of an SSR bundle) until a diff is actually shown. The
-// dynamic specifier is static so the bundler can resolve + chunk it. If the
-// optional peer is absent the import rejects and we render `fallback`.
+// peer is loaded only through the host-registered loader (see
+// `enablePierreDiffs`); without one the load rejects and we render `fallback`.
 const LazyPatchDiff = lazy(async () => {
-  const mod = (await import("@pierre/diffs/react")) as unknown as {
+  const mod = (await loadPierreDiffs()) as {
     PatchDiff: PatchDiffComponent;
   };
   return { default: mod.PatchDiff };
@@ -78,6 +84,7 @@ export function PierreDiff({
   className,
 }: PierreDiffProps) {
   const [failed, setFailed] = useState(false);
+  const [ready, setReady] = useState(false);
   const [forcedColors, setForcedColors] = useState(false);
 
   // Pierre's rich renderer distinguishes additions/deletions primarily through
@@ -95,16 +102,29 @@ export function PierreDiff({
 
   // Probe the import once so a hard failure (peer missing) shows `fallback`
   // rather than a Suspense boundary that never resolves. Skipped when `plain`.
+  const loaderRevision = useSyncExternalStore(
+    subscribePierreDiffs,
+    pierreDiffsRevision,
+    pierreDiffsRevision,
+  );
   useEffect(() => {
     if (plain) return;
     let cancelled = false;
-    void import("@pierre/diffs/react").catch(() => {
-      if (!cancelled) setFailed(true);
-    });
+    setFailed(false);
+    // Mount the lazy renderer only after the peer loaded, so a missing peer
+    // never poisons React.lazy's cached result for the rest of the page.
+    loadPierreDiffs().then(
+      () => {
+        if (!cancelled) setReady(true);
+      },
+      () => {
+        if (!cancelled) setFailed(true);
+      },
+    );
     return () => {
       cancelled = true;
     };
-  }, [plain]);
+  }, [plain, loaderRevision]);
 
   if (plain || failed || forcedColors) {
     // `plain` opts out of highlighting; `failed` = `@pierre/diffs` not installed.
@@ -147,6 +167,9 @@ export function PierreDiff({
     "--diffs-light-bg": "var(--og-color-bg)",
     "--diffs-bg-buffer-override": "var(--og-color-surface-1)",
     "--diffs-bg-separator-override": "var(--og-color-surface-1)",
+    // Pierre's default (fg mixed 65% into bg) falls under 4.5:1 on the lifted
+    // graphite separator; quiet meta text keeps AA on every diff surface.
+    "--diffs-fg-number-override": "var(--og-color-fg-subtle)",
     "--diffs-addition-color-override": "var(--og-color-status-idle)",
     "--diffs-deletion-color-override": "var(--og-color-status-failed)",
     "--diffs-fg-number-addition-override": "var(--og-color-status-idle)",
@@ -168,15 +191,17 @@ export function PierreDiff({
   return (
     <div className={cn("min-w-0", className)} data-opengeni-pierre-diff style={pierreVars}>
       <Suspense fallback={loading ?? <DiffSkeleton />}>
-        {diff.map((file) => (
-          <div key={file.path} className="mb-2">
-            <LazyPatchDiff
-              patch={gitFileDiffToPatch(file)}
-              options={options}
-              {...(disableWorkerPool !== undefined ? { disableWorkerPool } : {})}
-            />
-          </div>
-        ))}
+        {ready
+          ? diff.map((file) => (
+              <div key={file.path} className="mb-2">
+                <LazyPatchDiff
+                  patch={gitFileDiffToPatch(file)}
+                  options={options}
+                  {...(disableWorkerPool !== undefined ? { disableWorkerPool } : {})}
+                />
+              </div>
+            ))
+          : (loading ?? <DiffSkeleton />)}
       </Suspense>
     </div>
   );