@noya-app/noya-multiplayer-react 0.1.70 → 0.1.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.56",
+    "@noya-app/state-manager": "0.1.58",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",

package/src/NoyaStateContext.tsx

@@ -3,6 +3,7 @@
 import { MenuItem } from "@noya-app/noya-designsystem";
 import {
   CreateResourceParametersWithoutAccessibleByFileId,
+  DeleteResourceParameters,
   diffResourceMaps,
   Input,
   MediaItem,
@@ -22,17 +23,20 @@ import {
 import { useJsonMemo, useStableCallback } from "@noya-app/react-utils";
 import {
   ActivityEventsManager,
+  AssetTranscriptionResult,
   CreateParams,
-  EphemeralUserDataManager,
+  ExtractRequestBody,
   MultiplayerPatchMetadata,
   MultiplayerStateManager,
   NoyaManager,
   PublishCallback,
   ResourceManager,
   SafeEval,
+  SharedConnectionDataManager,
   StateManagerOptions,
   Static,
   StreamFilter,
+  TranscriptionManager,
   TSchema,
 } from "@noya-app/state-manager";
 import React, {
@@ -88,70 +92,56 @@ export function resourceToCreateParameters(
   }
 }
 
-type BuildCreateResourcePayloadParameters = {
+type ResourcePatchRequestBody = ExtractRequestBody<"PATCH /api/resources">;
+
+type BuildResourcePatchPayloadParameters = {
   addedResources: ResourceCreate[];
   modifiedResources: ModifiedResource[];
-  newResourceMap: ResourceCreateMap;
-  resourceMap: ResourceMap;
-};
-
-type BuildCreateResourcePayloadResult = {
-  payload: CreateResourceParametersWithoutAccessibleByFileId[];
-  consumedModifiedResourceIds: string[];
+  removedResources: Resource[];
 };
 
-export function buildCreateResourcePayload({
+export function buildResourcePatchPayload({
   addedResources,
   modifiedResources,
-  newResourceMap,
-  resourceMap,
-}: BuildCreateResourcePayloadParameters): BuildCreateResourcePayloadResult {
-  const toCreateParameters = resourceToCreateParameters;
+  removedResources,
+}: BuildResourcePatchPayloadParameters): ResourcePatchRequestBody {
+  const createEntries = addedResources.map(resourceToCreateParameters);
 
-  const resourcesById = new Map(
-    Object.values(resourceMap).map((resource) => [resource.id, resource])
+  const dedupedCreateEntries = Array.from(
+    new Map(createEntries.map((entry) => [entry.path, entry])).values()
   );
 
-  const payload: CreateResourceParametersWithoutAccessibleByFileId[] = [
-    ...addedResources.map(toCreateParameters),
-  ];
-
-  const handledModifiedResourceIds: string[] = [];
-
-  const assetReplacements = modifiedResources
-    .filter(
-      (resource) =>
-        resource.assetId !== undefined || resource.asset !== undefined
-    )
-    .map((resource) => {
-      const previousResource = resourcesById.get(resource.id);
-      const path = resource.path ?? previousResource?.path;
-
-      if (!path) return undefined;
-
-      const updated = newResourceMap[path];
+  const updateEntries =
+    modifiedResources.map((resource) => {
+      const update: NonNullable<ResourcePatchRequestBody["update"]>[number] = {
+        id: resource.id,
+        ...(resource.path !== undefined ? { path: resource.path } : {}),
+        ...(resource.assetId !== undefined
+          ? { assetId: resource.assetId }
+          : {}),
+        ...(resource.asset ? { asset: resource.asset } : {}),
+      };
 
-      if (!updated || updated.type !== "asset") return undefined;
+      return update;
+    }) ?? [];
 
-      handledModifiedResourceIds.push(resource.id);
+  const deleteEntries: DeleteResourceParameters[] = removedResources.map(
+    (resource) => ({ id: resource.id })
+  );
 
-      return toCreateParameters(updated);
-    })
-    .filter(
-      (
-        resource
-      ): resource is CreateResourceParametersWithoutAccessibleByFileId =>
-        resource !== undefined
-    );
+  const patch: ResourcePatchRequestBody = {};
 
-  const deduped = new Map(
-    [...payload, ...assetReplacements].map((item) => [item.path, item])
-  );
+  if (dedupedCreateEntries.length) {
+    patch.create = dedupedCreateEntries;
+  }
+  if (updateEntries.length) {
+    patch.update = updateEntries;
+  }
+  if (deleteEntries.length) {
+    patch.delete = deleteEntries;
+  }
 
-  return {
-    payload: Array.from(deduped.values()),
-    consumedModifiedResourceIds: [...new Set(handledModifiedResourceIds)],
-  };
+  return patch;
 }
 
 export interface NoyaStateProviderProps<
@@ -159,8 +149,9 @@ export interface NoyaStateProviderProps<
   M extends object,
   E extends object,
   MenuT extends string,
+  I extends Record<string, any> = Record<string, unknown>,
 > extends Omit<
-    UseNoyaStateOptions<S, M, E, MenuT>,
+    UseNoyaStateOptions<S, M, E, MenuT, I>,
     "schema" | "mergeHistoryEntries"
   > {
   children: React.ReactNode;
@@ -169,7 +160,7 @@ export interface NoyaStateProviderProps<
 }
 
 export type AnyNoyaStateContextValue = {
-  noyaManager: NoyaManager<any, any, any, any>;
+  noyaManager: NoyaManager<any, any, any, any, any>;
   theme: AppTheme;
   viewType: AppViewType;
 };
@@ -202,7 +193,7 @@ export function useAnyNoyaStateContext() {
 
 export function useAnyNoyaManager() {
   const { noyaManager } = useAnyNoyaStateContext();
-  return noyaManager as NoyaManager<any, any, any, any>;
+  return noyaManager as NoyaManager<any, any, any, any, any>;
 }
 
 export function useColorScheme() {
@@ -327,24 +318,24 @@ export function usePipelineManager() {
   return noyaManager.pipelineManager;
 }
 
-export function useConnectedUsersManager() {
+export function useUserManager() {
   const { noyaManager } = useAnyNoyaStateContext();
-  return noyaManager.connectedUsersManager;
+  return noyaManager.userManager;
 }
 
 export function useConnectedUsers() {
-  const connectedUsersManager = useConnectedUsersManager();
-  return useObservable(connectedUsersManager?.connectedUsers$);
+  const userManager = useUserManager();
+  return useObservable(userManager?.connectedUsers$);
 }
 
 export function useConnectedUser(userId?: string | null) {
-  const connectedUsersManager = useConnectedUsersManager();
+  const userManager = useUserManager();
   return useObservable(
-    connectedUsersManager?.connectedUsers$,
+    userManager?.connectedUsers$,
     useCallback(
       (users) => {
         return users.find((user) => {
-          const prefix = user.id.slice(0, 8);
+          const prefix = user.connectionId.slice(0, 8);
           return userId?.includes(prefix);
         });
       },
@@ -353,14 +344,47 @@ export function useConnectedUser(userId?: string | null) {
   );
 }
 
-export function useAnyEphemeralUserData() {
+export function useAnySharedConnectionData() {
   const { noyaManager } = useAnyNoyaStateContext();
-  return noyaManager.ephemeralUserDataManager;
+  return noyaManager.sharedConnectionDataManager;
+}
+
+export function useEnqueueInput<
+  I extends Record<string, any> = Record<string, unknown>
+>() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.enqueueInput as NoyaManager<
+    any,
+    any,
+    any,
+    any,
+    I
+  >["enqueueInput"];
+}
+
+export function useNoyaUser() {
+  const userManager = useUserManager();
+  return useObservable(userManager?.currentUser$);
+}
+
+export function useNoyaId() {
+  const userManager = useUserManager();
+  return useObservable(userManager?.currentId$);
+}
+
+export function useNoyaUserId() {
+  const userManager = useUserManager();
+  return useObservable(userManager?.currentUserId$);
 }
 
-export function useCurrentUserId() {
-  const connectedUsersManager = useConnectedUsersManager();
-  return useObservable(connectedUsersManager?.currentUserId$);
+export function useNoyaConnectionId() {
+  const userManager = useUserManager();
+  return useObservable(userManager?.currentConnectionId$);
+}
+
+export function useNoyaClientId() {
+  const userManager = useUserManager();
+  return useObservable(userManager?.currentClientId$);
 }
 
 export function useIsProcessing() {
@@ -389,6 +413,50 @@ export function useResourceManager(): ResourceManager {
   return noyaManager.resourceManager;
 }
 
+export function useNoyaTranscriptionManager(): TranscriptionManager {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.transcriptionManager;
+}
+
+type UseNoyaAssetTranscriptionOptions = {
+  endpoint?: string;
+  apiKey?: string;
+};
+
+/**
+ * Returns a text transcription for the given assetId.
+ *
+ * - This API is available when running your app on noya.io, not when running it locally.
+ * - An asset must first be uploaded via the `useAssetManager().create()` method before
+ *   it can be transcribed via this API.
+ * - The asset must be a valid audio or video file.
+ */
+export function useNoyaAssetTranscription(
+  assetId: string,
+  options?: UseNoyaAssetTranscriptionOptions
+): AssetTranscriptionResult;
+export function useNoyaAssetTranscription(
+  assetId?: string,
+  options?: UseNoyaAssetTranscriptionOptions
+): AssetTranscriptionResult | undefined;
+export function useNoyaAssetTranscription(
+  assetId?: string,
+  options?: UseNoyaAssetTranscriptionOptions
+): AssetTranscriptionResult | undefined {
+  const transcriptionManager = useNoyaTranscriptionManager();
+
+  const observable = useMemo(() => {
+    if (!assetId) return undefined;
+
+    return transcriptionManager.getAssetTranscription$(assetId, {
+      endpoint: options?.endpoint,
+      apiKey: options?.apiKey,
+    });
+  }, [transcriptionManager, assetId, options?.endpoint, options?.apiKey]);
+
+  return useObservable(observable);
+}
+
 // export function useResources(): Resource[] {
 //   const { noyaManager } = useAnyNoyaStateContext();
 //   const resources = useObservable(noyaManager.resourceManager.resources$);
@@ -431,29 +499,20 @@ export function useResources({
       const { addedResources, removedResources, modifiedResources } =
         diffResourceMaps(resourceMap, newResourceMap, "id");
 
-      const { payload: createPayload, consumedModifiedResourceIds } =
-        buildCreateResourcePayload({
-          addedResources,
-          modifiedResources,
-          newResourceMap,
-          resourceMap,
-        });
-
-      if (createPayload.length > 0) {
-        await resourceManager.createResource(createPayload);
-      }
-
-      const consumedModifiedResourceIdsSet = new Set(
-        consumedModifiedResourceIds
-      );
+      const patchPayload = buildResourcePatchPayload({
+        addedResources,
+        modifiedResources,
+        removedResources,
+      });
 
-      const remainingModifiedResources = modifiedResources.filter(
-        (resource) => !consumedModifiedResourceIdsSet.has(resource.id)
-      );
+      const hasPatchOperations =
+        (patchPayload.create?.length ?? 0) > 0 ||
+        (patchPayload.update?.length ?? 0) > 0 ||
+        (patchPayload.delete?.length ?? 0) > 0;
 
-      await resourceManager.deleteResource(
-        removedResources.map((resource) => ({ id: resource.id }))
-      );
+      if (hasPatchOperations) {
+        await resourceManager.patchResources(patchPayload);
+      }
 
       if (shouldDeleteAssets) {
         for (const resource of removedResources) {
@@ -462,17 +521,6 @@ export function useResources({
           }
         }
       }
-
-      await Promise.all(
-        remainingModifiedResources.map(({ id, path, assetId, asset }) =>
-          resourceManager.updateResource({
-            id,
-            path,
-            assetId,
-            ...(assetId ? {} : asset ? { asset } : {}),
-          })
-        )
-      );
     },
     [resourceMap, resourceManager, shouldDeleteAssets, assetManager]
   );
@@ -535,6 +583,7 @@ export function createNoyaContext<
   M extends object = object,
   E extends object = object,
   MenuT extends string = string,
+  I extends Record<string, any> = Record<string, unknown>,
 >({
   schema,
   mergeHistoryEntries,
@@ -557,7 +606,7 @@ export function createNoyaContext<
   >;
 
   const NoyaStateContext = AnyNoyaStateContext as React.Context<
-    NoyaManager<S, M, E> | undefined
+    NoyaManager<S, M, E, MenuT, I> | undefined
   >;
 
   function NoyaContextProvider({
@@ -578,12 +627,13 @@ export function createNoyaContext<
     children,
     initialState,
     ...options
-  }: NoyaStateProviderProps<S, M, E, MenuT>) {
+  }: NoyaStateProviderProps<S, M, E, MenuT, I>) {
     const [, , { noyaManager, theme, viewType }] = useNoyaStateInternal<
       S,
       M,
       E,
-      MenuT
+      MenuT,
+      I
     >(initialState, {
       schema,
       mergeHistoryEntries,
@@ -730,9 +780,9 @@ export function createNoyaContext<
     >;
   }
 
-  function useEphemeralUserDataManager() {
+  function useSharedConnectionDataManager() {
     const { noyaManager } = useAnyNoyaStateContext();
-    return noyaManager.ephemeralUserDataManager as EphemeralUserDataManager<E>;
+    return noyaManager.sharedConnectionDataManager as SharedConnectionDataManager<E>;
   }
 
   function useNoyaManager() {
@@ -740,7 +790,8 @@ export function createNoyaContext<
       S,
       PartialM,
       E,
-      MenuT
+      MenuT,
+      I
     >;
   }
 
@@ -812,7 +863,7 @@ export function createNoyaContext<
     useSetValue,
     useValueState,
     useStateManager,
-    useEphemeralUserDataManager,
+    useSharedConnectionDataManager,
     useLeftMenuItems,
     useSetLeftMenuItems,
     useRightMenuItems,

package/src/__tests__/noyaApp.test.ts

@@ -13,6 +13,8 @@ it("gets AppData with no data", () => {
     viewType: "editable",
     initialState,
     inspector: false,
+    isDemo: false,
+    access: "write",
   });
 });
 
@@ -37,6 +39,8 @@ it("gets AppData with data param", () => {
     viewType: "editable",
     initialState: { foo: "bar" },
     inspector: false,
+    isDemo: false,
+    access: "write",
   });
 });
 
@@ -50,6 +54,8 @@ it("uses initial state if data doesn't parse", () => {
     viewType: "editable",
     initialState: { foo: "bar" },
     inspector: false,
+    isDemo: false,
+    access: "write",
   });
 });
 
@@ -67,9 +73,33 @@ it("gets AppData with schema", () => {
     viewType: "editable",
     initialState: { foo: "bar" },
     inspector: false,
+    isDemo: false,
+    access: "write",
   });
 });
 
+it("preserves userId from data param", () => {
+  const existing = {
+    theme: "light",
+    viewType: "editable",
+    initialState: { foo: "bar" },
+    inspector: false,
+    userId: "user-123",
+    isDemo: true,
+  };
+
+  const data = getAppData(null as unknown, undefined, {
+    window: {
+      location: {
+        hash: `#data=${encodeURIComponent(JSON.stringify(existing))}`,
+      },
+    },
+  });
+
+  expect(data.userId).toBe("user-123");
+  expect(data.isDemo).toBe(true);
+});
+
 // it("enforces schema on data param", () => {
 //   const schema = Type.Object({
 //     foo: Type.String({ default: "bar" }),
@@ -103,6 +133,8 @@ it("gets AppData with function initial state", () => {
     viewType: "editable",
     initialState: { foo: "bar" },
     inspector: false,
+    isDemo: false,
+    access: "write",
   });
 });
 
@@ -130,6 +162,8 @@ it("even if initial state does not match schema, make sure we use multiplayer ur
     initialState: { foo: "" },
     inspector: false,
     multiplayerUrl: "https://example.com",
+    isDemo: false,
+    access: "write",
   });
 });