@opengeni/react 4.4.1 → 4.5.1-canary.39832248373001

package/src/app/routes/site-view.tsx

@@ -0,0 +1,583 @@
+import { SITE_ID_HEADER, SITE_VERSION_HEADER } from "@opengeni/contracts/site-session-http";
+import type { Session, SessionListResponse } from "@opengeni/sdk";
+import { OpenGeniApiError } from "@opengeni/sdk/browser";
+import { InfoIcon, Maximize2Icon, MoreHorizontalIcon, PlusIcon } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { SiteView } from "../../artifacts";
+import { NewConversation } from "../../components/new-conversation";
+import type {
+  CreatedConversation,
+  NewConversationCreateOptions,
+} from "../../hooks/use-new-conversation";
+import { SessionConversation } from "../../components/session-conversation";
+import { Button } from "../../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+import { Skeleton } from "../../ui/skeleton";
+import { useAppContext } from "../app-context";
+import { useAppApi } from "../lib/app-api";
+import { useConsoleSiteToolBridge, useConsoleSiteViewer } from "../lib/console-site";
+import { t } from "../lib/console-text";
+import { formatTimestamp } from "../lib/format";
+import { Link, useNavigate } from "../lib/navigation";
+import { hasWorkspacePermission } from "../lib/permissions";
+import { sessionDisplayTitle } from "../lib/session-rename";
+import { sessionStateLabel } from "../lib/session-rail";
+import { sessionSiteOrigin } from "../lib/session-site-origin";
+import { isRunningStatus, relativeTimeLabel } from "../lib/sessions-group";
+import { useRecordSiteOpened } from "../lib/site-opened";
+import { useSessionListHintRefresh } from "../lib/use-session-list-hint-refresh";
+import { cn } from "../lib/utils";
+
+const SITE_ROUTE = "/workspaces/$workspaceId/sites/$siteId";
+
+type SiteState =
+  | { status: "loading" }
+  | { status: "error" }
+  | { status: "ready"; title: string; versionId: string | null; archived: boolean };
+
+/**
+ * A Site with its conversations beside it. The Site fills the page; the
+ * panel keeps one conversation open (the newest when the Site opens, unless
+ * one is chosen), lists the others to switch between, and starts a new one.
+ */
+export function SiteViewRoute({
+  workspaceId,
+  siteId,
+  conversation,
+}: {
+  workspaceId: string;
+  siteId: string;
+  /** The conversation open in the panel; the newest when omitted. */
+  conversation?: string | undefined;
+}) {
+  const { client } = useAppContext();
+  const viewer = useConsoleSiteViewer();
+  const toolBridge = useConsoleSiteToolBridge(workspaceId);
+  const [site, setSite] = useState<SiteState>({ status: "loading" });
+  const [siteAttempt, setSiteAttempt] = useState(0);
+  useRecordSiteOpened(client, workspaceId, siteId);
+  useEffect(() => {
+    const abort = new AbortController();
+    setSite({ status: "loading" });
+    client
+      .getWorkspaceArtifact(workspaceId, siteId, { signal: abort.signal })
+      .then(({ artifact }) => {
+        if (abort.signal.aborted) return;
+        setSite({
+          status: "ready",
+          title: artifact.title,
+          versionId: artifact.currentVersion?.id ?? null,
+          archived: artifact.status === "archived",
+        });
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setSite({ status: "error" });
+      });
+    return () => abort.abort();
+  }, [client, siteAttempt, siteId, workspaceId]);
+  return (
+    <div
+      className="flex min-h-0 min-w-0 flex-1 max-lg:flex-col"
+      data-workspace-scroll-owner="self-managed"
+    >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <SiteView
+          client={client}
+          workspaceId={workspaceId}
+          siteId={siteId}
+          toolBridge={toolBridge}
+          viewer={viewer}
+          archivedMessage="This Site is archived. Restore it from Site details."
+        />
+      </div>
+      <SiteConversationsColumn
+        key={`${workspaceId}:${siteId}`}
+        workspaceId={workspaceId}
+        siteId={siteId}
+        site={site}
+        retrySite={() => setSiteAttempt((attempt) => attempt + 1)}
+        conversation={conversation}
+      />
+    </div>
+  );
+}
+
+const PAGE_SIZE = 30;
+/** The most a session list page returns. */
+const MAX_PAGE_SIZE = 100;
+
+/** The Site's own conversations for this viewer, newest activity first. */
+function useSiteConversations(workspaceId: string, siteId: string) {
+  const { client } = useAppContext();
+  const [page, setPage] = useState<SessionListResponse | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const request = useRef<AbortController | null>(null);
+  const more = useRef<AbortController | null>(null);
+  // A refresh re-reads as many as are loaded, so "Show older" survives updates.
+  const loadedCount = useRef(0);
+  useEffect(() => {
+    loadedCount.current = page?.sessions.length ?? 0;
+  }, [page]);
+  const read = useCallback(
+    (signal: AbortSignal, cursor?: string, limit = PAGE_SIZE) =>
+      client.listSessionPage(workspaceId, {
+        originSiteId: siteId,
+        parentSessionId: null,
+        sortBy: "updatedAt",
+        limit,
+        signal,
+        ...(cursor ? { cursor } : {}),
+      }),
+    [client, siteId, workspaceId],
+  );
+  const refresh = useCallback(async () => {
+    request.current?.abort();
+    const abort = new AbortController();
+    request.current = abort;
+    try {
+      const next = await read(
+        abort.signal,
+        undefined,
+        Math.min(MAX_PAGE_SIZE, Math.max(PAGE_SIZE, loadedCount.current)),
+      );
+      if (abort.signal.aborted) return;
+      setPage(next);
+      setError(null);
+    } catch (failure) {
+      if (!abort.signal.aborted)
+        setError(failure instanceof Error ? failure : new Error(String(failure)));
+    }
+  }, [read]);
+  useEffect(() => {
+    void refresh();
+    return () => {
+      request.current?.abort();
+      more.current?.abort();
+    };
+  }, [refresh]);
+  // This list shows only Site conversations, which ordinary hints never name.
+  useSessionListHintRefresh(refresh, error, { siteConversations: true });
+  const loadMore = useCallback(async () => {
+    const cursor = page?.nextCursor;
+    if (!cursor || loadingMore) return;
+    const abort = new AbortController();
+    more.current = abort;
+    setLoadingMore(true);
+    try {
+      const next = await read(abort.signal, cursor);
+      if (abort.signal.aborted) return;
+      setPage((current) =>
+        // Only extend the page this cursor came from; a refresh since replaced it.
+        current?.nextCursor === cursor
+          ? {
+              ...next,
+              sessions: [
+                ...new Map(
+                  [...current.sessions, ...next.sessions].map((session) => [session.id, session]),
+                ).values(),
+              ],
+            }
+          : current,
+      );
+    } catch {
+      // The button stays, so trying again is one click.
+    } finally {
+      if (more.current === abort) more.current = null;
+      setLoadingMore(false);
+    }
+  }, [loadingMore, page?.nextCursor, read]);
+  const sessions = useMemo(
+    () =>
+      page
+        ? [...new Map([...page.pinned, ...page.sessions].map((session) => [session.id, session]))]
+            .map(([, session]) => session)
+            .filter((session) => !session.archived)
+            .sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt))
+        : [],
+    [page],
+  );
+  return {
+    sessions,
+    loaded: page !== null,
+    error,
+    nextCursor: page?.nextCursor ?? null,
+    loadingMore,
+    refresh,
+    loadMore,
+  };
+}
+
+function SiteConversationsColumn({
+  workspaceId,
+  siteId,
+  site,
+  retrySite,
+  conversation,
+}: {
+  workspaceId: string;
+  siteId: string;
+  site: SiteState;
+  retrySite: () => void;
+  conversation?: string | undefined;
+}) {
+  const context = useAppContext();
+  const api = useAppApi();
+  const navigate = useNavigate();
+  const headingId = useId();
+  const panel = useRef<HTMLElement>(null);
+  const list = useSiteConversations(workspaceId, siteId);
+  const [composing, setComposing] = useState(false);
+  const [handoff, setHandoff] = useState<CreatedConversation | null>(null);
+  const [focusRequest, setFocusRequest] = useState(0);
+
+  // The conversation open without a choice is fixed when the Site opens, so
+  // activity elsewhere never swaps it out from under the person reading it.
+  const [defaultId, setDefaultId] = useState<string | null | undefined>(undefined);
+  const newest = list.sessions[0]?.id ?? null;
+  const pinned =
+    defaultId === null ||
+    (defaultId !== undefined && list.sessions.some((session) => session.id === defaultId))
+      ? defaultId
+      : newest;
+  useEffect(() => {
+    if (list.loaded && pinned !== defaultId) setDefaultId(pinned);
+  }, [defaultId, list.loaded, pinned]);
+
+  // Choosing a conversation anywhere (the rail, a link) ends composing.
+  // Returning to the Site itself, as its rail row does, opens its newest.
+  const previousConversation = useRef(conversation);
+  const startingNew = useRef(false);
+  useEffect(() => {
+    const previous = previousConversation.current;
+    previousConversation.current = conversation;
+    if (conversation) setComposing(false);
+    else if (previous && !startingNew.current) setDefaultId(undefined);
+    startingNew.current = false;
+  }, [conversation]);
+
+  const toSite = useCallback(
+    (search: { conversation?: string }, replace = false) =>
+      void navigate({
+        to: SITE_ROUTE,
+        params: { workspaceId, siteId },
+        search,
+        ...(replace ? { replace: true } : {}),
+      }),
+    [navigate, siteId, workspaceId],
+  );
+
+  // A link may name a conversation that isn't this Site's, or one since
+  // archived or deleted; fall back to the Site's own.
+  const listed = !conversation || list.sessions.some((session) => session.id === conversation);
+  // Through a ref: a host's navigate may change identity on every render.
+  const fallBack = useRef(() => {});
+  useEffect(() => {
+    fallBack.current = () => toSite({}, true);
+  }, [toSite]);
+  useEffect(() => {
+    if (!conversation || !list.loaded || listed) return;
+    const abort = new AbortController();
+    context.client.getSession(workspaceId, conversation, { signal: abort.signal }).then(
+      (session) => {
+        if (abort.signal.aborted) return;
+        if (
+          sessionSiteOrigin(session)?.siteId !== siteId ||
+          session.parentSessionId !== null ||
+          session.archived
+        )
+          fallBack.current();
+      },
+      (failure: unknown) => {
+        if (
+          !abort.signal.aborted &&
+          failure instanceof OpenGeniApiError &&
+          [403, 404].includes(failure.status)
+        )
+          fallBack.current();
+      },
+    );
+    return () => abort.abort();
+  }, [context.client, conversation, list.loaded, listed, siteId, workspaceId]);
+
+  // Move focus to the composer New opened, or to the new conversation's.
+  useEffect(() => {
+    if (focusRequest === 0) return;
+    let frame = 0;
+    let tries = 0;
+    const attempt = () => {
+      const input = panel.current?.querySelector<HTMLTextAreaElement>("textarea:not([disabled])");
+      if (input) input.focus();
+      else if ((tries += 1) < 60) frame = requestAnimationFrame(attempt);
+    };
+    frame = requestAnimationFrame(attempt);
+    return () => cancelAnimationFrame(frame);
+  }, [focusRequest]);
+
+  const ready = site.status === "ready" ? site : null;
+  const canCreate =
+    hasWorkspacePermission(context.accessContext, workspaceId, "sessions:create") &&
+    ready !== null &&
+    ready.versionId !== null &&
+    !ready.archived;
+  const selectedId = composing ? null : (conversation ?? pinned);
+  const showComposer = composing || (list.loaded && selectedId === null);
+  const startNew = () => {
+    setComposing(true);
+    setFocusRequest((request) => request + 1);
+    // Nothing is selected while composing, so the rail marks the Site.
+    if (conversation) {
+      startingNew.current = true;
+      toSite({});
+    }
+  };
+  // Created like the Site's own chats: private to this person and listed
+  // under the Site. The API refuses anything else a Site may not set.
+  const versionId = ready?.versionId ?? null;
+  const createSession = useCallback(
+    async (
+      initialMessage: string,
+      idempotencyKey: string,
+      options: NewConversationCreateOptions,
+    ): Promise<string> => {
+      if (!versionId) throw new Error("This Site has no published version yet.");
+      const created = await api.request<Pick<Session, "id">>(
+        `/v1/workspaces/${encodeURIComponent(workspaceId)}/sessions`,
+        {
+          method: "POST",
+          headers: { [SITE_ID_HEADER]: siteId, [SITE_VERSION_HEADER]: versionId },
+          body: JSON.stringify({
+            initialMessage,
+            idempotencyKey,
+            ...(options.model ? { model: options.model } : {}),
+            ...(options.reasoningEffort ? { reasoningEffort: options.reasoningEffort } : {}),
+            ...(options.latencyMode ? { latencyMode: options.latencyMode } : {}),
+          }),
+        },
+      );
+      return created.id;
+    },
+    [api, siteId, versionId, workspaceId],
+  );
+  const conversations = list.sessions;
+  const handedOff = handoff !== null && handoff.sessionId === selectedId ? handoff : null;
+  // The handoff is for the conversation's first open only.
+  useEffect(() => {
+    if (handoff && selectedId !== null && selectedId !== handoff.sessionId) setHandoff(null);
+  }, [handoff, selectedId]);
+  // Focus follows a new conversation once it, not the composer, is mounted.
+  const handoffId = handoff?.sessionId ?? null;
+  useEffect(() => {
+    if (handoffId !== null && selectedId === handoffId) setFocusRequest((request) => request + 1);
+  }, [handoffId, selectedId]);
+  return (
+    <aside
+      ref={panel}
+      aria-labelledby={headingId}
+      className="flex min-h-0 w-[400px] shrink-0 flex-col border-l border-border bg-bg max-xl:w-[360px] max-lg:h-[55%] max-lg:w-full max-lg:border-t max-lg:border-l-0"
+    >
+      <div className="flex h-11 shrink-0 items-center gap-1 border-b border-border pr-2 pl-4">
+        <h2 id={headingId} className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
+          Conversations
+        </h2>
+        {canCreate ? (
+          <Button
+            type="button"
+            variant={showComposer ? "secondary" : "ghost"}
+            size="sm"
+            className="pointer-coarse:h-11"
+            onClick={startNew}
+          >
+            <PlusIcon aria-hidden="true" className="size-3.5" />
+            New
+          </Button>
+        ) : null}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="More"
+              className="text-fg-muted hover:text-fg pointer-coarse:size-11"
+            >
+              <MoreHorizontalIcon aria-hidden="true" className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            {selectedId ? (
+              <DropdownMenuItem asChild>
+                <Link
+                  to="/workspaces/$workspaceId/sessions/$sessionId"
+                  params={{ workspaceId, sessionId: selectedId }}
+                >
+                  <Maximize2Icon aria-hidden="true" />
+                  Open as a full chat
+                </Link>
+              </DropdownMenuItem>
+            ) : null}
+            <DropdownMenuItem asChild>
+              <Link
+                to="/workspaces/$workspaceId/artifacts/$artifactId"
+                params={{ workspaceId, artifactId: siteId }}
+              >
+                <InfoIcon aria-hidden="true" />
+                Site details
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      {conversations.length > (showComposer ? 0 : 1) ? (
+        <nav
+          aria-label={`Conversations in ${ready?.title ?? "this Site"}`}
+          className="max-h-[172px] shrink-0 overflow-y-auto border-b border-border p-1.5"
+        >
+          <ul className="flex flex-col gap-px">
+            {conversations.map((session) => (
+              <ConversationRow
+                key={session.id}
+                workspaceId={workspaceId}
+                siteId={siteId}
+                session={session}
+                selected={session.id === selectedId}
+              />
+            ))}
+          </ul>
+          {list.nextCursor ? (
+            <button
+              type="button"
+              disabled={list.loadingMore}
+              onClick={() => void list.loadMore()}
+              className="mt-px flex h-8 w-full items-center rounded-md px-2 text-left text-xs text-fg-muted hover:bg-hover hover:text-fg pointer-coarse:h-11"
+            >
+              {list.loadingMore ? "Loading…" : "Show older"}
+            </button>
+          ) : null}
+        </nav>
+      ) : null}
+      <div className="flex min-h-0 flex-1 flex-col">
+        {!list.loaded && !conversation ? (
+          list.error ? (
+            <Retry message="Couldn’t load conversations." onRetry={() => void list.refresh()} />
+          ) : (
+            <PanelLoading label="Loading conversations" />
+          )
+        ) : showComposer ? (
+          canCreate ? (
+            <NewConversation
+              key={`new:${siteId}`}
+              createSession={createSession}
+              attachments={false}
+              // Voice-first chats aren't offered from a Site.
+              realtimeVoice={false}
+              labels={{ title: ready ? `Ask about ${ready.title}` : "New conversation" }}
+              onCreated={(created) => {
+                setHandoff(created);
+                void list.refresh();
+                // Opening it ends composing, like any other choice.
+                toSite({ conversation: created.sessionId });
+              }}
+              className="min-h-0 flex-1"
+            />
+          ) : site.status === "loading" ? (
+            <PanelLoading label="Loading Site" />
+          ) : site.status === "error" ? (
+            <Retry message="Couldn’t load this Site." onRetry={retrySite} />
+          ) : (
+            <p className="p-4 text-sm text-fg-muted">
+              {ready?.archived
+                ? "No conversations yet."
+                : "No conversations yet. Conversations started in this Site appear here."}
+            </p>
+          )
+        ) : selectedId ? (
+          <SessionConversation
+            key={selectedId}
+            sessionId={selectedId}
+            // The first prompt and anything typed meanwhile carry over.
+            {...(handedOff?.initialMessage
+              ? { pendingPrompt: { text: handedOff.initialMessage, sentAt: handedOff.sentAt } }
+              : {})}
+            {...(handedOff ? { composerOptions: { initialDraft: handedOff.draft } } : {})}
+            onOpenSession={(sessionId) =>
+              void navigate({
+                to: "/workspaces/$workspaceId/sessions/$sessionId",
+                params: { workspaceId, sessionId },
+              })
+            }
+            className="min-h-0 flex-1"
+          />
+        ) : null}
+      </div>
+    </aside>
+  );
+}
+
+function PanelLoading({ label }: { label: string }) {
+  return (
+    <div className="flex flex-col gap-3 p-4" aria-busy="true">
+      <Skeleton className="h-4 w-2/3" />
+      <Skeleton className="h-16 w-full rounded-lg" />
+      <span className="sr-only" role="status">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+function Retry({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <p className="p-4 text-sm text-fg-muted">
+      {message}{" "}
+      <button type="button" className="text-fg underline underline-offset-2" onClick={onRetry}>
+        Try again
+      </button>
+    </p>
+  );
+}
+
+function ConversationRow({
+  workspaceId,
+  siteId,
+  session,
+  selected,
+}: {
+  workspaceId: string;
+  siteId: string;
+  session: Session;
+  selected: boolean;
+}) {
+  const title = sessionDisplayTitle(session);
+  const running = isRunningStatus(session.status);
+  return (
+    <li>
+      <Link
+        to={SITE_ROUTE}
+        params={{ workspaceId, siteId }}
+        search={{ conversation: session.id }}
+        aria-current={selected ? "page" : undefined}
+        aria-label={`${title}. ${sessionStateLabel(session)}. Updated ${formatTimestamp(session.updatedAt)}`}
+        className={cn(
+          "flex h-8 items-center gap-2 rounded-md border px-2 text-sm outline-hidden focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:h-11",
+          selected
+            ? "border-brand/20 bg-selection text-fg"
+            : "border-transparent text-fg-label hover:bg-hover hover:text-fg",
+        )}
+      >
+        <span className="min-w-0 flex-1 truncate">{title}</span>
+        {running ? (
+          <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-status-running" />
+        ) : null}
+        <span aria-hidden="true" className="shrink-0 text-xs tabular-nums text-fg-subtle">
+          {relativeTimeLabel(t, session.updatedAt)}
+        </span>
+      </Link>
+    </li>
+  );
+}

package/src/components/browser-viewer.tsx

@@ -76,7 +76,11 @@ import {
   isInteractionControlUnavailable,
   isSourcePlacementChangedError,
 } from "../lib/interaction-errors";
-import type { EmbeddedBrowserInteractionClientOverride } from "../session-context";
+import { useClientConfigFlags } from "../hooks/use-client-config-flags";
+import {
+  type EmbeddedBrowserInteractionClientOverride,
+  useEmbeddedBrowserInteraction,
+} from "../session-context";
 import { browserKey, HUMAN_BROWSER_HOME_URL, normalizeBrowserAddress } from "./browser-input";
 import { InteractionInterventionBanner } from "./interaction-intervention-banner";
 import { BrowserSelectControl } from "./browser-select-control";
@@ -187,6 +191,9 @@ export function BrowserViewer({
   const t = useOpenGeniText();
   const registry = useBrowserSessions({ ...override, sessionId, enabled });
   const attached = useAttachedBrowsers({ ...override, enabled });
+  const { client: configClient } = useEmbeddedBrowserInteraction(override);
+  // The deployment's own branded extension when it ships one.
+  const browserExtensionName = useClientConfigFlags(configClient as never).browserExtension?.name;
   const onlineAttachedBridges = useMemo(
     () => attached.bridges.filter((bridge) => bridge.state === "online"),
     [attached.bridges],
@@ -857,6 +864,7 @@ export function BrowserViewer({
             onCreate={createBrowser}
             onRestore={(identity) => updateProfile(identity, { status: "active" })}
             setupUrl={browserExtensionSetupUrl}
+            extensionName={browserExtensionName}
             prominent
           />
           {registry.error ? (
@@ -901,6 +909,7 @@ export function BrowserViewer({
         }
         onRefresh={() => void Promise.all([registry.refresh(), attached.refresh()])}
         setupUrl={browserExtensionSetupUrl}
+        extensionName={browserExtensionName}
       />
       <InteractionInterventionBanner
         interventions={selectedInterventions}
@@ -1210,6 +1219,7 @@ function BrowserToolbar(props: {
   onOpenProfileVersion: (identityId: string, baseRevisionId: string) => void;
   onRefresh: () => void;
   setupUrl?: string | undefined;
+  extensionName?: string | undefined;
 }) {
   const t = useOpenGeniText();
   const detailsRef = useViewerMenuDismiss();
@@ -1293,6 +1303,7 @@ function BrowserToolbar(props: {
         onCreate={props.onCreate}
         onRestore={(identity) => props.onUpdateProfile(identity, { status: "active" })}
         setupUrl={props.setupUrl}
+        extensionName={props.extensionName}
       />
     </div>
   );
@@ -1427,6 +1438,7 @@ function BrowserLaunchMenu(props: {
   onCreate: (choice?: BrowserLaunchChoice) => void;
   onRestore: (identity: BrowserIdentity) => Promise<boolean>;
   setupUrl?: string | undefined;
+  extensionName?: string | undefined;
   prominent?: boolean;
 }) {
   const t = useOpenGeniText();
@@ -1526,7 +1538,9 @@ function BrowserLaunchMenu(props: {
                       {t("browserViewer.chromeConnectionReady")}
                     </span>
                     <span className="block text-og-xs leading-4 text-og-fg-subtle">
-                      {t("browserViewer.installTheOpengeniBrowserExtension")}
+                      {t("browserViewer.installTheOpengeniBrowserExtension", {
+                        extensionName: props.extensionName ?? "Opengeni Browser",
+                      })}
                     </span>
                   </span>
                 </div>