@opengeni/react 0.52.1 → 0.57.0

package/src/hooks/use-browser-frame-stream.ts

@@ -13,7 +13,9 @@ import {
 import {
   decodeStreamFrame,
   decodeStreamOpenAck,
+  encodeStreamClose,
   encodeStreamOpen,
+  STREAM_CLOSE_REASON_NORMAL,
   STREAM_KIND_BROWSER,
   STREAM_ROLE_CLIENT,
 } from "../lib/relay-wire";
@@ -39,6 +41,8 @@ export type BrowserFrameWebSocketFactory = (
 const RELAY_TAG_OPEN = 1;
 const RELAY_TAG_OPEN_ACK = 2;
 const RELAY_TAG_FRAME = 3;
+const RELAY_TAG_CLOSE = 4;
+const MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME = 2;
 
 export type UseBrowserFrameStreamOptions = EmbeddedBrowserInteractionClientOverride & {
   browserSessionId: string | null;
@@ -108,48 +112,81 @@ export function useBrowserFrameStream(
 
     let disposed = false;
     let socket: BrowserFrameWebSocket | null = null;
+    let socketHandlers: {
+      open: () => void;
+      message: (event: MessageEvent) => void;
+      error: () => void;
+      close: () => void;
+    } | null = null;
     let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
     let expiryTimer: ReturnType<typeof setTimeout> | null = null;
     let failures = 0;
     let controllerGeneration: string | null = null;
+    let activeAttachment: BrowserSessionAttachment | null = null;
     let activeStream: BrowserSessionAttachment["stream"] | null = null;
+    let attachmentExpiresAt = 0;
+    let lastRelaySequence: string | null = null;
     let relayAccepted = false;
+    let pendingFrame: { bytes: Uint8Array; source: BrowserFrameWebSocket } | null = null;
+    let decodingFrame = false;
     const attachmentAbort = new AbortController();
 
-    const clearSocket = () => {
+    const clearSocket = (terminateProducer = false) => {
       if (!socket) return;
-      socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
-      socket.removeEventListener("close", onClose);
-      if (socket.readyState === 0 || socket.readyState === 1) {
-        socket.close(1000, "viewer detached");
+      const current = socket;
+      const handlers = socketHandlers;
+      if (terminateProducer && activeStream?.kind === "relay" && socket.readyState === 1) {
+        try {
+          socket.send(
+            relayDatagram(
+              RELAY_TAG_CLOSE,
+              encodeStreamClose({
+                channelId: activeStream.channel.channelId,
+                reason: STREAM_CLOSE_REASON_NORMAL,
+                message: "viewer detached",
+              }),
+            ),
+          );
+        } catch {
+          // OPEN can race a transport close. Local teardown must still finish.
+        }
+      }
+      if (handlers) {
+        current.removeEventListener("open", handlers.open);
+        current.removeEventListener("message", handlers.message);
+        current.removeEventListener("error", handlers.error);
+        current.removeEventListener("close", handlers.close);
+      }
+      if (current.readyState === 0 || current.readyState === 1) {
+        current.close(1000, "viewer detached");
       }
       socket = null;
+      socketHandlers = null;
+      pendingFrame = null;
     };
 
     const scheduleReconnect = () => {
       if (disposed || reconnectTimer) return;
+      if (failures >= MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME) return;
       const delay = Math.min(5_000, 250 * 2 ** Math.min(failures, 5));
       failures += 1;
       setResult((current) => ({ ...current, state: "reconnecting" }));
       reconnectTimer = setTimeout(() => {
         reconnectTimer = null;
-        void connect();
+        connectSocket();
       }, delay);
     };
 
-    const fail = (cause: unknown) => {
+    const fail = (cause: unknown, reconnectAutomatically = true) => {
       if (disposed) return;
       const error = cause instanceof Error ? cause : new Error(String(cause));
       setResult((current) => ({ ...current, state: "error", error }));
       clearSocket();
-      scheduleReconnect();
+      if (reconnectAutomatically) scheduleReconnect();
     };
 
-    const onOpen = () => {
-      if (disposed) return;
-      failures = 0;
+    const onOpen = (source: BrowserFrameWebSocket) => {
+      if (disposed || source !== socket) return;
       if (activeStream?.kind === "relay") {
         const body = encodeStreamOpen({
           channel: {
@@ -158,19 +195,61 @@ export function useBrowserFrameStream(
           },
           token: activeStream.token,
           role: STREAM_ROLE_CLIENT,
-          resumeFromSeq: "0",
+          resumeFromSeq:
+            lastRelaySequence === null ? "0" : (BigInt(lastRelaySequence) + 1n).toString(),
         });
-        socket?.send(relayDatagram(RELAY_TAG_OPEN, body));
+        try {
+          source.send(relayDatagram(RELAY_TAG_OPEN, body));
+        } catch (error) {
+          fail(error);
+        }
         return;
       }
       setResult((current) => ({ ...current, state: "live", error: null }));
     };
 
-    const onMessage = (event: MessageEvent) => {
+    const drainLatestFrame = async () => {
+      if (decodingFrame) return;
+      decodingFrame = true;
+      try {
+        while (pendingFrame) {
+          if (disposed) break;
+          const pending = pendingFrame;
+          pendingFrame = null;
+          const { bytes, source } = pending;
+          const frame = decodeBrowserFrameMessage(bytes);
+          if (disposed || source !== socket) continue;
+          if (frame.browserSessionId !== browserSessionId || frame.targetId !== targetId) {
+            throw new Error("browser frame belongs to another resource");
+          }
+          if (!controllerGeneration || frame.controllerGeneration !== controllerGeneration) {
+            throw new Error("browser frame belongs to a stale controller");
+          }
+          const key = `${browserSessionId}:${targetId}:${frame.controllerGeneration}:${frame.targetGeneration}:${frame.documentGeneration}`;
+          if (latestRef.current.key === key && frame.sequence <= latestRef.current.sequence)
+            continue;
+          latestRef.current = { key, sequence: frame.sequence };
+          failures = 0;
+          setResult((current) => ({
+            ...current,
+            state: "live",
+            frame,
+            error: null,
+          }));
+        }
+      } catch (cause) {
+        fail(cause);
+      } finally {
+        decodingFrame = false;
+        if (!disposed && pendingFrame) void drainLatestFrame();
+      }
+    };
+
+    const onMessage = (source: BrowserFrameWebSocket, event: MessageEvent) => {
       void (async () => {
         try {
           const bytes = await messageBytes(event.data);
-          if (disposed) return;
+          if (disposed || source !== socket) return;
           let frameBytes = bytes;
           if (activeStream?.kind === "relay") {
             if (bytes.length < 1) throw new Error("browser relay returned an empty message");
@@ -179,45 +258,83 @@ export function useBrowserFrameStream(
             if (tag === RELAY_TAG_OPEN_ACK) {
               const ack = decodeStreamOpenAck(body);
               if (!ack.accepted) {
+                activeAttachment = null;
+                activeStream = null;
+                attachmentExpiresAt = 0;
                 throw new Error(ack.error?.message ?? "browser stream was rejected by the relay");
               }
               relayAccepted = true;
               return;
             }
+            if (tag === RELAY_TAG_CLOSE) {
+              activeAttachment = null;
+              activeStream = null;
+              attachmentExpiresAt = 0;
+              lastRelaySequence = null;
+              relayAccepted = false;
+              fail(new Error("Browser frame source ended."), false);
+              return;
+            }
             if (tag !== RELAY_TAG_FRAME || !relayAccepted) return;
-            frameBytes = decodeStreamFrame(body).data;
-          }
-          const frame = decodeBrowserFrameMessage(frameBytes);
-          if (frame.browserSessionId !== browserSessionId || frame.targetId !== targetId) {
-            throw new Error("browser frame belongs to another resource");
-          }
-          if (!controllerGeneration || frame.controllerGeneration !== controllerGeneration) {
-            throw new Error("browser frame belongs to a stale controller");
+            const relayFrame = decodeStreamFrame(body);
+            lastRelaySequence = relayFrame.seq;
+            frameBytes = relayFrame.data;
           }
-          const key = `${browserSessionId}:${targetId}:${frame.controllerGeneration}:${frame.targetGeneration}:${frame.documentGeneration}`;
-          if (latestRef.current.key === key && frame.sequence <= latestRef.current.sequence) return;
-          latestRef.current = { key, sequence: frame.sequence };
-          setResult((current) => ({
-            ...current,
-            state: "live",
-            frame,
-            error: null,
-          }));
+          pendingFrame = { bytes: frameBytes, source };
+          void drainLatestFrame();
         } catch (cause) {
           fail(cause);
         }
       })();
     };
 
-    const onError = () => fail(new Error("Browser view lost connection."));
+    const onError = (source: BrowserFrameWebSocket) => {
+      if (source !== socket) return;
+      fail(new Error("Browser view lost connection."));
+    };
 
-    const onClose = () => {
-      if (disposed) return;
+    const onClose = (source: BrowserFrameWebSocket) => {
+      if (disposed || source !== socket) return;
       clearSocket();
       scheduleReconnect();
     };
 
-    const connect = async () => {
+    const connectSocket = () => {
+      if (disposed) return;
+      clearSocket();
+      if (!activeAttachment || !activeStream || attachmentExpiresAt <= Date.now() + 1_000) {
+        void attach();
+        return;
+      }
+      relayAccepted = false;
+      setResult((current) => ({
+        ...current,
+        state: "connecting",
+        error: null,
+      }));
+      const createSocket =
+        factoryRef.current ?? ((url: string, protocols: string[]) => new WebSocket(url, protocols));
+      const openedSocket = createSocket(
+        activeStream.kind === "relay"
+          ? activeStream.url
+          : browserFrameSocketUrl(activeAttachment, streamRef.current),
+        activeStream.kind === "direct_websocket" ? [...activeStream.protocols] : [],
+      );
+      socket = openedSocket;
+      socketHandlers = {
+        open: () => onOpen(openedSocket),
+        message: (event) => onMessage(openedSocket, event),
+        error: () => onError(openedSocket),
+        close: () => onClose(openedSocket),
+      };
+      openedSocket.binaryType = "arraybuffer";
+      openedSocket.addEventListener("open", socketHandlers.open);
+      openedSocket.addEventListener("message", socketHandlers.message);
+      openedSocket.addEventListener("error", socketHandlers.error);
+      openedSocket.addEventListener("close", socketHandlers.close);
+    };
+
+    const attach = async () => {
       if (disposed) return;
       clearSocket();
       if (expiryTimer) clearTimeout(expiryTimer);
@@ -242,7 +359,10 @@ export function useBrowserFrameStream(
           throw new Error("browser attachment does not match the requested resource");
         }
         controllerGeneration = attachment.controllerGeneration;
+        activeAttachment = attachment;
         activeStream = attachment.stream;
+        attachmentExpiresAt = Date.parse(attachment.expiresAt);
+        lastRelaySequence = null;
         relayAccepted = false;
         setResult((current) => ({
           ...current,
@@ -255,42 +375,31 @@ export function useBrowserFrameStream(
           },
           error: null,
         }));
-        const createSocket =
-          factoryRef.current ??
-          ((url: string, protocols: string[]) => new WebSocket(url, protocols));
-        socket = createSocket(
-          attachment.stream.kind === "relay"
-            ? attachment.stream.url
-            : browserFrameSocketUrl(attachment, streamRef.current),
-          attachment.stream.kind === "direct_websocket" ? [...attachment.stream.protocols] : [],
-        );
-        socket.binaryType = "arraybuffer";
-        socket.addEventListener("open", onOpen);
-        socket.addEventListener("message", onMessage);
-        socket.addEventListener("error", onError);
-        socket.addEventListener("close", onClose);
-        const expiresAt = Date.parse(attachment.expiresAt);
-        const refreshIn = Number.isFinite(expiresAt)
-          ? Math.max(1_000, expiresAt - Date.now() - 5_000)
+        const refreshIn = Number.isFinite(attachmentExpiresAt)
+          ? Math.max(1_000, attachmentExpiresAt - Date.now() - 5_000)
           : 60_000;
         expiryTimer = setTimeout(() => {
           if (disposed) return;
-          clearSocket();
-          void connect();
+          clearSocket(true);
+          activeAttachment = null;
+          activeStream = null;
+          attachmentExpiresAt = 0;
+          void attach();
         }, refreshIn);
+        connectSocket();
       } catch (cause) {
         if (attachmentAbort.signal.aborted || disposed) return;
         fail(cause);
       }
     };
 
-    void connect();
+    void attach();
     return () => {
       disposed = true;
       attachmentAbort.abort();
       if (reconnectTimer) clearTimeout(reconnectTimer);
       if (expiryTimer) clearTimeout(expiryTimer);
-      clearSocket();
+      clearSocket(true);
     };
   }, [client, enabled, nonce, options.browserSessionId, options.targetId, workspaceId]);
 

package/src/hooks/use-browser-identities.ts

@@ -5,6 +5,7 @@ import type {
   CreateBrowserIdentityRequest,
   PublishBrowserRevisionRequest,
   PublishBrowserRevisionResponse,
+  UpdateBrowserIdentityRequest,
 } from "@opengeni/sdk/interaction";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { EmbeddedBrowserInteractionClientLike } from "../client";
@@ -12,9 +13,11 @@ import {
   type EmbeddedBrowserInteractionClientOverride,
   useEmbeddedBrowserInteraction,
 } from "../session-context";
+import { useInteractionInvalidation } from "./use-interaction-invalidation";
 
 export type UseBrowserIdentitiesOptions = EmbeddedBrowserInteractionClientOverride & {
   enabled?: boolean | undefined;
+  includeArchived?: boolean | undefined;
 };
 
 export type UseBrowserIdentitiesResult = {
@@ -30,6 +33,10 @@ export type UseBrowserIdentitiesResult = {
       operationId?: string;
     },
   ) => Promise<BrowserIdentityMutationResponse>;
+  update: (
+    identityId: string,
+    request: Omit<UpdateBrowserIdentityRequest, "operationId"> & { operationId?: string },
+  ) => Promise<BrowserIdentityMutationResponse>;
   revisions: (identityId: string) => Promise<BrowserRevisionListResponse>;
   publish: (
     browserSessionId: string,
@@ -43,8 +50,10 @@ export type UseBrowserIdentitiesResult = {
 export function useBrowserIdentities(
   options: UseBrowserIdentitiesOptions = {},
 ): UseBrowserIdentitiesResult {
-  const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
+  const { client, workspaceId, workspaceInteractionEvent, workspaceInteractionConnectionState } =
+    useEmbeddedBrowserInteraction(options);
   const enabled = options.enabled ?? true;
+  const includeArchived = options.includeArchived ?? false;
   const [state, setState] = useState(() => emptyState(workspaceId, enabled));
   const [mutationCount, setMutationCount] = useState(0);
   const requestRef = useRef<{ id: number; controller: AbortController | null }>({
@@ -75,6 +84,7 @@ export function useBrowserIdentities(
       }));
       try {
         const response = await client.listBrowserIdentities(workspaceId, {
+          includeArchived,
           signal: controller.signal,
         });
         if (!mountedRef.current || requestRef.current.id !== id) return;
@@ -99,7 +109,7 @@ export function useBrowserIdentities(
         if (requestRef.current.id === id) requestRef.current = { id, controller: null };
       }
     },
-    [client, enabled, workspaceId],
+    [client, enabled, includeArchived, workspaceId],
   );
 
   const refresh = useCallback(async () => await load(false), [load]);
@@ -118,6 +128,16 @@ export function useBrowserIdentities(
     };
   }, [cancelLoad, enabled, load, workspaceId]);
 
+  useInteractionInvalidation({
+    workspaceId,
+    key: workspaceId,
+    enabled,
+    event: workspaceInteractionEvent,
+    connectionState: workspaceInteractionConnectionState,
+    knownRevision: visibleState.revision,
+    refresh,
+  });
+
   const mutate = useCallback(async <T>(operation: () => Promise<T>): Promise<T> => {
     setMutationCount((count) => count + 1);
     try {
@@ -150,6 +170,24 @@ export function useBrowserIdentities(
     [client, workspaceId],
   );
 
+  const update = useCallback(
+    async (
+      identityId: string,
+      request: Omit<UpdateBrowserIdentityRequest, "operationId"> & { operationId?: string },
+    ): Promise<BrowserIdentityMutationResponse> =>
+      await mutate(async () => {
+        const response = await client.updateBrowserIdentity(workspaceId, identityId, {
+          ...request,
+          operationId: request.operationId ?? crypto.randomUUID(),
+        });
+        setState((current) =>
+          mergeIdentity(current, workspaceId, response.identity, includeArchived),
+        );
+        return response;
+      }),
+    [client, includeArchived, mutate, workspaceId],
+  );
+
   const publish = useCallback(
     async (
       browserSessionId: string,
@@ -177,6 +215,7 @@ export function useBrowserIdentities(
     error: visibleState.error,
     refresh,
     create,
+    update,
     revisions,
     publish,
   };
@@ -209,14 +248,16 @@ function mergeIdentity(
   current: ReturnType<typeof emptyState>,
   workspaceId: string,
   identity: BrowserIdentity,
+  includeArchived = false,
 ): ReturnType<typeof emptyState> {
   if (current.workspaceId !== workspaceId) return current;
   return {
     ...current,
-    identities: sortIdentities([
-      ...current.identities.filter((candidate) => candidate.id !== identity.id),
-      identity,
-    ]),
+    identities: sortIdentities(
+      identity.status === "archived" && !includeArchived
+        ? current.identities.filter((candidate) => candidate.id !== identity.id)
+        : [...current.identities.filter((candidate) => candidate.id !== identity.id), identity],
+    ),
     error: null,
   };
 }