@opengeni/react 3.5.1-canary.0 → 3.7.0-canary.1

package/src/components/session-commands-panel.tsx

@@ -0,0 +1,113 @@
+import { ChevronRightIcon, Loader2Icon, SquareIcon } from "lucide-react";
+import { useState } from "react";
+import type { UseSessionBackgroundCommandsResult } from "../hooks/use-session-background-commands";
+import { formatClockTime } from "../lib/format";
+
+/** The current session's live commands. Settled commands belong to the timeline. */
+export function SessionCommandsPanel({
+  commands: state,
+  readOnly = false,
+}: {
+  commands: UseSessionBackgroundCommandsResult;
+  readOnly?: boolean;
+}) {
+  const [pending, setPending] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const active = state.commands.filter(
+    (command) => command.state === "running" || command.state === "stopping",
+  );
+  const stop = async (id: string) => {
+    setPending(id);
+    setError(null);
+    try {
+      await state.cancel(id);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Stop was not confirmed. Try again.");
+    } finally {
+      setPending(null);
+    }
+  };
+  return (
+    <div className="space-y-2 text-og-xs" data-og-session-commands="">
+      {state.loading && active.length === 0 ? (
+        <p role="status" className="text-og-fg-muted">
+          Loading commands…
+        </p>
+      ) : null}
+      {state.error ? (
+        <div role="alert" className="flex items-center justify-between gap-2 text-og-danger">
+          <span>Commands unavailable.</span>
+          <button
+            type="button"
+            className="underline outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+            onClick={() => void state.refresh()}
+          >
+            Retry
+          </button>
+        </div>
+      ) : null}
+      {!state.loading && !state.error && active.length === 0 ? (
+        <p role="status" className="text-og-fg-muted">
+          No background commands running.
+        </p>
+      ) : null}
+      {active.length > 0 ? (
+        <ul className="max-h-64 overflow-y-auto overscroll-contain divide-y divide-og-border/40">
+          {active.map((command) => (
+            <li key={command.id} className="flex items-start gap-3 py-2 first:pt-0 last:pb-0">
+              <div className="min-w-0 flex-1">
+                <details className="group/command">
+                  <summary
+                    className="flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm font-mono text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+                    title="Expand command"
+                  >
+                    <ChevronRightIcon className="size-3 shrink-0 text-og-fg-subtle transition-transform group-open/command:rotate-90" />
+                    <span className="truncate">
+                      {command.commandPreview || "Background command"}
+                    </span>
+                  </summary>
+                  <div className="mt-2 space-y-1">
+                    <p className="whitespace-pre-wrap break-all font-mono text-og-fg-muted">
+                      {command.commandPreview || "Background command"}
+                    </p>
+                    <time
+                      className="block text-og-fg-subtle"
+                      dateTime={command.startedAt}
+                      title={new Date(command.startedAt).toLocaleString()}
+                    >
+                      Started {formatClockTime(command.startedAt)}
+                    </time>
+                  </div>
+                </details>
+                <p className="mt-1 text-og-fg-subtle">
+                  {command.state === "stopping" ? "Stopping…" : "Running"}
+                </p>
+              </div>
+              {!readOnly ? (
+                <button
+                  type="button"
+                  aria-label={`Stop ${command.commandPreview || "background command"}`}
+                  disabled={pending !== null || command.state === "stopping"}
+                  onClick={() => void stop(command.id)}
+                  className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm px-2 text-og-fg-muted outline-hidden hover:bg-og-surface-3/70 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50 pointer-coarse:min-h-11"
+                >
+                  {pending === command.id || command.state === "stopping" ? (
+                    <Loader2Icon className="size-3 animate-og-spin motion-reduce:animate-none" />
+                  ) : (
+                    <SquareIcon className="size-3" />
+                  )}
+                  Stop
+                </button>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-og-danger">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/session-conversation.tsx

@@ -0,0 +1,141 @@
+import { useRef, type CSSProperties } from "react";
+import { useOpenGeni, type ClientOverride } from "../session-context";
+import { useWorkspaceModelCatalog } from "../hooks/use-available-models";
+import { ModelPolicyPicker } from "./model-policy-picker";
+import { useSessionEvents } from "../hooks/use-session-events";
+import { useSession } from "../hooks/use-session";
+import { useTurnQueue } from "../hooks/use-turn-queue";
+import { useComposer } from "../hooks/use-composer";
+import { useHumanInputRequests } from "../hooks/use-human-input";
+import { ChatComposer, type ChatComposerProps } from "./chat-composer";
+import { QueueSurface } from "./queue-surface";
+import { HumanInputSurface } from "./human-input-surface";
+import { MessageTimeline } from "./message-timeline";
+import { conversationTimeline } from "../conversation-timeline";
+import { cn } from "../lib/cn";
+
+export type SessionConversationProps = ClientOverride & {
+  sessionId: string;
+  className?: string;
+  /** Defaults to filling the host. The host owns available height. */
+  height?: CSSProperties["height"];
+  /** Presentation/custom controls only; queue and delivery wiring stay owned here. */
+  composerProps?: Omit<ChatComposerProps, "composer" | "effectiveControl" | "queuedAheadCount">;
+};
+
+/** Complete existing-session conversation. Uses the provider's normal SDK client
+ * (including Site clients), one shared event feed, and authoritative queue state. */
+export function SessionConversation(props: SessionConversationProps) {
+  return <Conversation key={`${props.workspaceId ?? ""}:${props.sessionId}`} {...props} />;
+}
+
+function Conversation({
+  sessionId,
+  client,
+  workspaceId,
+  className,
+  height = "100%",
+  composerProps,
+}: SessionConversationProps) {
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const catalog = useWorkspaceModelCatalog({
+    client: context.client,
+    workspaceId: context.workspaceId,
+  });
+  const feed = useSessionEvents(sessionId, scope);
+  const options = { ...scope, events: feed.events };
+  const detail = useSession(sessionId, options);
+  const queue = useTurnQueue(sessionId, options);
+  const human = useHumanInputRequests(sessionId, options);
+  const status = feed.sessionStatus ?? detail.session?.status;
+  const terminal = status === "cancelled";
+  const composer = useComposer(sessionId, {
+    ...options,
+    effectiveControl: queue.effectiveControl ?? detail.session?.effectiveControl,
+    sendDestination: () => (queue.queue.length > 0 || status === "running" ? "queue" : "chat"),
+  });
+  const region = useRef<HTMLDivElement>(null);
+  const error = detail.error ?? feed.error ?? human.error;
+  return (
+    <div
+      className={cn("og-root flex min-h-0 min-w-0 flex-col gap-2 overflow-hidden", className)}
+      ref={region}
+      style={{ height }}
+      data-og-conversation=""
+    >
+      {error && <p role="alert">{error.message}</p>}
+      <MessageTimeline
+        className="min-h-0 flex-1"
+        items={conversationTimeline(feed.timeline, queue, composer)}
+        status={status}
+        hasOlder={feed.hasOlder}
+        loadingOlder={feed.loadingOlder}
+        onLoadOlder={feed.loadOlder}
+        hasNewer={feed.hasNewer}
+        loadingNewer={feed.loadingNewer}
+        onLoadNewer={() => {
+          void feed.loadNewer();
+        }}
+        onJumpToStart={async () => {
+          await feed.loadOldest();
+        }}
+        loadingOldest={feed.loadingOldest}
+        onJumpToLatest={feed.jumpToLatest}
+        onAnnotate={composer.addAnnotation}
+      />
+      <div className="min-h-0 max-h-[40%] shrink-0 overflow-y-auto" data-og-conversation-inputs="">
+        <HumanInputSurface
+          requests={human.requests}
+          onSubmit={async (id, response) => {
+            await human.respond(id, response);
+          }}
+          respondingRequestId={human.respondingRequestId}
+          error={human.mutationError?.message}
+          autoFocus={false}
+        />
+        {terminal ? (
+          <QueueSurface queue={queue} readOnly />
+        ) : (
+          <QueueSurface
+            queue={queue}
+            composer={composer}
+            onRequestComposerFocus={() =>
+              region.current?.querySelector<HTMLTextAreaElement>("textarea")?.focus()
+            }
+          />
+        )}
+      </div>
+      <div className="shrink-0" data-og-conversation-composer="">
+        <ChatComposer
+          {...composerProps}
+          composer={composer}
+          disabled={terminal || composerProps?.disabled}
+          controlsStart={
+            composerProps?.controlsStart ??
+            (composer.policy && (
+              <ModelPolicyPicker
+                rows={catalog.rows}
+                model={composer.policy.model}
+                effort={composer.policy.reasoningEffort}
+                latencyMode={composer.policy.latencyMode}
+                loading={catalog.loading}
+                error={catalog.error?.message}
+                disabled={terminal}
+                sessionKey={sessionId}
+                onModelChange={(model) => composer.setModel?.(model)}
+                onEffortChange={(effort) => composer.setReasoningEffort?.(effort)}
+                onLatencyModeChange={(mode) => composer.setLatencyMode?.(mode)}
+              />
+            ))
+          }
+          responsiveBasis={composerProps?.responsiveBasis ?? "container"}
+          effectiveControl={
+            composer.effectiveControl ?? queue.effectiveControl ?? detail.session?.effectiveControl
+          }
+          queuedAheadCount={queue.queue.length}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/timeline-anchor.tsx

@@ -0,0 +1,91 @@
+import { Component, type ReactNode } from "react";
+
+type Anchor = { element: HTMLElement; key: string | null; text: string | null; top: number };
+export type TimelineAnchor = Anchor[];
+
+/** 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;
+  const groups = Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]")).filter(
+    (group) => group.getBoundingClientRect().height > 0,
+  );
+  const anchors: TimelineAnchor = [];
+  // 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.matches("button[aria-expanded]")
+  ) {
+    const box = focused.getBoundingClientRect();
+    if (box.bottom > viewport.top && box.top < viewport.bottom) {
+      anchors.push({ element: focused, key: null, text: null, top: box.top });
+    }
+  }
+  // A paragraph survives even when earlier deltas reconstruct its containing message.
+  for (const group of groups) {
+    const rect = group.getBoundingClientRect();
+    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) => ({
+    element,
+    key: element.getAttribute("data-og-group-key"),
+    text: null,
+    top: element.getBoundingClientRect().top,
+  }));
+  anchors.push(...rows.filter((row) => row.top >= viewport.top));
+  anchors.push(...rows.filter((row) => row.top < viewport.top).reverse());
+  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;
+  const groups = Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]"));
+  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) {
+      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;
+}

package/src/conversation-timeline.ts

@@ -0,0 +1,83 @@
+import type { ComposerState } from "./hooks/use-composer";
+import type { UseTurnQueueResult } from "./hooks/use-turn-queue";
+import type { TimelineItem, UserMessageItem } from "./timeline/types";
+
+/** Keep pending prompts in the queue, not duplicated in the conversation. */
+export function conversationTimeline(
+  items: TimelineItem[],
+  queue: Pick<UseTurnQueueResult, "queue" | "snapshot" | "acceptedSteers">,
+  composer: Pick<
+    ComposerState,
+    "optimisticMessages" | "retryOptimisticMessage" | "removeOptimisticMessage"
+  >,
+): TimelineItem[] {
+  const queued = new Set(
+    queue.queue
+      .filter((turn) => turn.metadata.delivery !== "steer")
+      .map((turn) => turn.triggerEventId),
+  );
+  const pending = composer.optimisticMessages ?? [];
+  const pendingQueue = new Set(
+    pending
+      .filter(
+        (message) =>
+          message.destination === "queue" &&
+          !(
+            message.turnId &&
+            message.appliedQueueVersion != null &&
+            queue.snapshot &&
+            queue.snapshot.version >= message.appliedQueueVersion &&
+            !queue.queue.some((turn) => turn.id === message.turnId)
+          ),
+      )
+      .map((message) => `user-message:${message.clientEventId}`),
+  );
+  const visible = items.filter(
+    (item) =>
+      item.kind !== "user-message" ||
+      (!queued.has(item.id) && !pendingQueue.has(item.reconciliationKey ?? "")),
+  );
+  const keys = new Set(
+    visible.flatMap((item) => (item.kind === "user-message" ? [item.reconciliationKey] : [])),
+  );
+  const optimistic: UserMessageItem[] = pending
+    .filter(
+      (message) =>
+        !keys.has(`user-message:${message.clientEventId}`) &&
+        !queue.queue.some((turn) => turn.id === message.turnId),
+    )
+    .map((message) => ({
+      kind: "user-message",
+      id: `optimistic:${message.clientEventId}`,
+      reconciliationKey: `user-message:${message.clientEventId}`,
+      text: message.text,
+      annotations: message.annotations.map((annotation, ordinal) => ({ ...annotation, ordinal })),
+      resources: message.resources,
+      tools: [],
+      occurredAt: message.occurredAt,
+      delivery: {
+        state: message.state,
+        ...(message.error ? { error: message.error } : {}),
+        ...(message.state === "failed"
+          ? {
+              onRetry: () => composer.retryOptimisticMessage?.(message.clientEventId),
+              onRemove: () => composer.removeOptimisticMessage?.(message.clientEventId),
+            }
+          : {}),
+      },
+    }));
+  const ids = new Set(visible.map((item) => item.id));
+  const steers: UserMessageItem[] = (queue.acceptedSteers ?? [])
+    .filter((steer) => !ids.has(steer.triggerEventId))
+    .map((steer) => ({
+      kind: "user-message",
+      id: steer.triggerEventId,
+      text: steer.text,
+      annotations: steer.annotations,
+      resources: steer.resources,
+      tools: steer.tools,
+      occurredAt: steer.occurredAt,
+      delivery: { state: steer.state },
+    }));
+  return [...visible, ...optimistic, ...steers];
+}

package/src/hooks/use-file-attachments.ts

@@ -52,6 +52,12 @@ export type UseFileAttachmentsResult = {
   addFromPaste: (event: { clipboardData: DataTransfer | null }) => void;
   /** Restore already-ready server assets without recreating browser-local bytes. */
   restoreReadyFiles: (files: Iterable<FileAsset>) => void;
+  /**
+   * Resolve a ready image's short-lived server preview URL on demand. Optional
+   * for upload-only embedded clients; local object-URL previews remain usable
+   * without it.
+   */
+  loadPreview?: ((id: string, signal?: AbortSignal) => Promise<string | undefined>) | undefined;
   /**
    * Re-run the upload for a `failed` attachment, in place (same id, same
    * source file). No-op for an id that isn't a known failed upload.
@@ -114,6 +120,8 @@ export function useFileAttachments(
   const { client, workspaceId } = useEmbeddedFileAttachments(options);
   const pasteFilter = options.pasteFilter ?? isImage;
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
+  const attachmentsRef = useRef(attachments);
+  attachmentsRef.current = attachments;
   // Keep the source File per attachment id so a failed upload can be retried
   // in place. Cleared on remove/clear so it never outlives its attachment.
   const sources = useRef<Map<string, File>>(new Map());
@@ -353,6 +361,31 @@ export function useFileAttachments(
     [workspaceId],
   );
 
+  const loadPreview = useCallback(
+    async (id: string, signal?: AbortSignal): Promise<string | undefined> => {
+      const generation = scopeGeneration.current;
+      const attachment = attachmentsRef.current.find((candidate) => candidate.id === id);
+      const createDownloadUrl = client.createFileDownloadUrl;
+      if (
+        !attachment ||
+        attachment.status !== "ready" ||
+        !attachment.file ||
+        !attachment.contentType.startsWith("image/") ||
+        typeof createDownloadUrl !== "function" ||
+        signal?.aborted
+      ) {
+        return undefined;
+      }
+      const fileId = attachment.file.id;
+      const signed = await createDownloadUrl.call(client, workspaceId, fileId, { signal });
+      if (scopeGeneration.current !== generation || signal?.aborted) return undefined;
+      const current = attachmentsRef.current.find((candidate) => candidate.id === id);
+      if (current?.status !== "ready" || current.file?.id !== fileId) return undefined;
+      return signed.url;
+    },
+    [client, workspaceId],
+  );
+
   const remove = useCallback(
     (id: string) => {
       sources.current.delete(id);
@@ -394,6 +427,7 @@ export function useFileAttachments(
     addFiles,
     addFromPaste,
     restoreReadyFiles,
+    ...(typeof client.createFileDownloadUrl === "function" ? { loadPreview } : {}),
     retry,
     retainPreview,
     remove,