@noya-app/noya-multiplayer-react 0.1.63 → 0.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.63",
+  "version": "0.1.64",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.49",
+    "@noya-app/state-manager": "0.1.50",
     "@noya-app/emitter": "0.1.0",
-    "@noya-app/observable": "0.1.11",
+    "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",
-    "@noya-app/react-utils": "0.1.24",
+    "@noya-app/react-utils": "0.1.25",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/NoyaStateContext.tsx

@@ -1,15 +1,24 @@
 "use client";
 
 import { MenuItem } from "@noya-app/noya-designsystem";
-import { Input, OutputTransform } from "@noya-app/noya-schemas";
+import {
+  diffResourceMaps,
+  Input,
+  MediaItem,
+  OutputTransform,
+  Resource,
+  ResourceCreateMap,
+  ResourceMap,
+} from "@noya-app/noya-schemas";
 import {
   GetAtPath,
   Observable,
   ObservableOptions,
   PathKey,
 } from "@noya-app/observable";
-import { useStableCallback } from "@noya-app/react-utils";
+import { useJsonMemo, useStableCallback } from "@noya-app/react-utils";
 import {
+  ActivityEventsManager,
   ConnectedUsersManager,
   CreateParams,
   EphemeralUserDataManager,
@@ -17,18 +26,22 @@ import {
   MultiplayerStateManager,
   NoyaManager,
   PublishCallback,
+  ResourceManager,
   SafeEval,
   StateManagerOptions,
   Static,
+  StreamFilter,
   TSchema,
 } from "@noya-app/state-manager";
 import React, {
   createContext,
+  Dispatch,
   SetStateAction,
   useCallback,
   useContext,
   useEffect,
   useMemo,
+  useState,
 } from "react";
 import {
   AppTheme,
@@ -207,6 +220,27 @@ export function useConnectedUsersManager() {
   return useContext(ConnectedUsersContext);
 }
 
+export function useConnectedUsers() {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(connectedUsersManager?.connectedUsers$);
+}
+
+export function useConnectedUser(userId?: string | null) {
+  const connectedUsersManager = useConnectedUsersManager();
+  return useObservable(
+    connectedUsersManager?.connectedUsers$,
+    useCallback(
+      (users) => {
+        return users.find((user) => {
+          const prefix = user.id.slice(0, 8);
+          return userId?.includes(prefix);
+        });
+      },
+      [userId]
+    )
+  );
+}
+
 export const AnyEphemeralUserDataManagerContext = createContext<
   EphemeralUserDataManager<object> | undefined
 >(undefined);
@@ -220,6 +254,163 @@ export function useCurrentUserId() {
   return useObservable(connectedUsersManager?.currentUserId$);
 }
 
+export function useIsProcessing() {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useObservable(noyaManager.isProcessing$);
+}
+
+export function useResourceManager(): ResourceManager {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return noyaManager.resourceManager;
+}
+
+// export function useResources(): Resource[] {
+//   const { noyaManager } = useAnyNoyaStateContext();
+//   const resources = useObservable(noyaManager.resourceManager.resources$);
+//   return resources;
+// }
+
+export function resourceToMediaItem(resource: Resource): MediaItem {
+  switch (resource.type) {
+    case "asset":
+      return { kind: "asset", id: resource.id, assetId: resource.assetId };
+    case "file":
+      return { kind: "noyaFile", id: resource.id, fileId: resource.fileId };
+    default:
+      return { kind: "folder", id: resource.id };
+  }
+}
+
+export function useResources({
+  shouldDeleteAssets = true,
+}: {
+  shouldDeleteAssets?: boolean;
+} = {}): [ResourceMap, Dispatch<SetStateAction<ResourceCreateMap>>] {
+  const resourceManager = useResourceManager();
+  const assetManager = useAssetManager();
+
+  const resourceMap = useObservable(
+    resourceManager.optimisticResources$,
+    useCallback((resources) => {
+      return Object.fromEntries(
+        resources.map((resource) => [resource.path, resource])
+      );
+    }, [])
+  );
+
+  const setResourceMap = useCallback(
+    async (action: SetStateAction<ResourceCreateMap>) => {
+      const newResourceMap =
+        action instanceof Function ? action(resourceMap) : action;
+
+      const { addedResources, removedResources, modifiedResources } =
+        diffResourceMaps(resourceMap, newResourceMap, "id");
+
+      if (addedResources.length > 0) {
+        const payload = addedResources.map((resource) => {
+          switch (resource.type) {
+            case "directory":
+              return {
+                path: resource.path,
+                type: "directory" as const,
+              };
+            case "asset":
+              return {
+                path: resource.path,
+                type: "asset" as const,
+                assetId: resource.assetId,
+                asset: resource.asset,
+              };
+            case "file":
+              return {
+                path: resource.path,
+                type: "file" as const,
+                fileId: resource.fileId,
+              };
+            case "resource":
+              return {
+                path: resource.path,
+                type: "resource" as const,
+                fileId: resource.fileId,
+                resourceId: resource.resourceId,
+              };
+            default:
+              throw new Error(
+                `Unknown resource type: ${(resource as any).type}`
+              );
+          }
+        });
+
+        await resourceManager.createResource(payload);
+      }
+
+      for (const resource of removedResources) {
+        await resourceManager.deleteResource({ id: resource.id });
+
+        if (shouldDeleteAssets && resource.type === "asset") {
+          try {
+            await assetManager.delete(resource.assetId);
+          } catch (error) {
+            console.error("Failed to delete asset:", error);
+          }
+        }
+      }
+
+      await Promise.all(
+        modifiedResources.map(({ id, path, assetId, asset }) =>
+          resourceManager.updateResource({
+            id,
+            path,
+            assetId,
+            asset,
+          })
+        )
+      );
+    },
+    [resourceMap, resourceManager, shouldDeleteAssets, assetManager]
+  );
+
+  return [resourceMap, setResourceMap];
+}
+
+const emptyArray: unknown[] = [];
+
+export function useActivityEvents(streamFilter: StreamFilter) {
+  const { noyaManager } = useAnyNoyaStateContext();
+  return useActivityEventsForManager(
+    streamFilter,
+    noyaManager.activityEventsManager
+  );
+}
+
+export function useActivityEventsForManager(
+  streamFilter: StreamFilter | undefined,
+  activityEventsManager: ActivityEventsManager
+) {
+  const [streamId, setStreamId] = useState<string | undefined>(undefined);
+  const stableStreamFilter = useJsonMemo(streamFilter);
+
+  useEffect(() => {
+    if (!stableStreamFilter) return;
+
+    const streamId = activityEventsManager.subscribe(stableStreamFilter);
+
+    setStreamId(streamId);
+
+    return () => {
+      setStreamId(undefined);
+
+      activityEventsManager.unsubscribe(streamId);
+    };
+  }, [activityEventsManager, stableStreamFilter]);
+
+  const observable = streamId
+    ? activityEventsManager.getStream(streamId)
+    : undefined;
+
+  return useObservable(observable) ?? emptyArray;
+}
+
 export const FallbackUntilInitialized = ({
   children,
   fallback,
@@ -267,6 +458,28 @@ export function createNoyaContext<
       EphemeralUserDataManager<E> | undefined
     >;
 
+  function NoyaContextProvider({
+    children,
+    contextValue,
+  }: {
+    children: React.ReactNode;
+    contextValue: AnyNoyaStateContextValue;
+  }) {
+    return (
+      <AnyNoyaStateContext.Provider value={contextValue}>
+        <ConnectedUsersContext.Provider
+          value={contextValue.noyaManager.connectedUsersManager}
+        >
+          <EphemeralUserDataManagerContext.Provider
+            value={contextValue.noyaManager.ephemeralUserDataManager}
+          >
+            {children}
+          </EphemeralUserDataManagerContext.Provider>
+        </ConnectedUsersContext.Provider>
+      </AnyNoyaStateContext.Provider>
+    );
+  }
+
   function NoyaStateProvider({
     children,
     initialState,
@@ -294,23 +507,15 @@ export function createNoyaContext<
     );
 
     return (
-      <AnyNoyaStateContext.Provider value={contextValue}>
-        <ConnectedUsersContext.Provider
-          value={noyaManager.connectedUsersManager}
-        >
-          <EphemeralUserDataManagerContext.Provider
-            value={noyaManager.ephemeralUserDataManager}
-          >
-            {options.fallback !== undefined ? (
-              <FallbackUntilInitialized fallback={options.fallback}>
-                {children}
-              </FallbackUntilInitialized>
-            ) : (
-              children
-            )}
-          </EphemeralUserDataManagerContext.Provider>
-        </ConnectedUsersContext.Provider>
-      </AnyNoyaStateContext.Provider>
+      <NoyaContextProvider contextValue={contextValue}>
+        {options.fallback !== undefined ? (
+          <FallbackUntilInitialized fallback={options.fallback}>
+            {children}
+          </FallbackUntilInitialized>
+        ) : (
+          children
+        )}
+      </NoyaContextProvider>
     );
   }
 
@@ -513,6 +718,7 @@ export function createNoyaContext<
   return {
     Context: NoyaStateContext,
     Provider: NoyaStateProvider,
+    NoyaContextProvider,
     useValue,
     useSetValue,
     useValueState,

package/src/inspector/StateInspector.tsx

@@ -1,6 +1,8 @@
+/* eslint-disable no-restricted-globals */
 "use client";
 
 import { Input, OutputTransform } from "@noya-app/noya-schemas";
+import { Base64, uuid } from "@noya-app/noya-utils";
 import { downloadBlob, memoGeneric } from "@noya-app/react-utils";
 import { NoyaManager } from "@noya-app/state-manager";
 import React, {
@@ -18,6 +20,7 @@ import {
   getStateInspectorBorderColor,
   getStateInspectorTheme,
 } from "./inspectorTheme";
+import { ActivityEventsSection } from "./sections/ActivityEventsSection";
 import { EventsSection } from "./sections/EventsSection";
 import { HistorySection } from "./sections/HistorySection";
 import { exportAll, importAll } from "./serialization";
@@ -27,6 +30,7 @@ import {
   StateInspectorDisclosureSection,
 } from "./StateInspectorDisclosureSection";
 import { StateInspectorRow } from "./StateInspectorRow";
+import { StateInspectorTitleLabel } from "./StateInspectorTitleLabel";
 import { StateInspectorToggleButton } from "./StateInspectorToggleButton";
 import { useLocalStorageState } from "./useLocalStorageState";
 import { ellipsis, uploadFile } from "./utils";
@@ -67,6 +71,8 @@ export const StateInspector = memoGeneric(function StateInspector<
     connectionEventManager,
     taskManager,
     ioManager,
+    resourceManager,
+    activityEventsManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
@@ -79,6 +85,7 @@ export const StateInspector = memoGeneric(function StateInspector<
   }, []);
 
   const eventsContainerRef = React.useRef<HTMLDivElement>(null);
+  const activityEventsContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [showInspector, setShowInspector] = useLocalStorageState(
     "noya-multiplayer-react-show-inspector",
@@ -112,6 +119,10 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-assets",
     false
   );
+  const [showResources, setShowResources] = useLocalStorageState(
+    "noya-multiplayer-react-show-resources",
+    false
+  );
   const [showSecrets, setShowSecrets] = useLocalStorageState(
     "noya-multiplayer-react-show-secrets",
     false
@@ -124,9 +135,12 @@ export const StateInspector = memoGeneric(function StateInspector<
     "noya-multiplayer-react-show-output-transforms",
     false
   );
+  const [showActivityEvents, setShowActivityEvents] = useLocalStorageState(
+    "noya-multiplayer-react-show-activity-events",
+    false
+  );
 
   const connectionEvents = useObservable(connectionEventManager.events$);
-
   useEffect(() => {
     if (eventsContainerRef.current) {
       eventsContainerRef.current.scrollTop =
@@ -140,6 +154,8 @@ export const StateInspector = memoGeneric(function StateInspector<
   const ephemeral = useObservable(ephemeralUserDataManager.data$);
   const historySnapshot = useManagedHistory(multiplayerStateManager.sm);
   const assets = useObservable(assetManager.assets$);
+  const resources = useObservable(resourceManager.resources$);
+  const resourcesInitialized = useObservable(resourceManager.isInitialized$);
   const assetsInitialized = useObservable(assetManager.isInitialized$);
   const secrets = useObservable(secretManager.secrets$);
   const secretsInitialized = useObservable(secretManager.isInitialized$);
@@ -150,7 +166,6 @@ export const StateInspector = memoGeneric(function StateInspector<
   const outputTransformsInitialized = useObservable(
     ioManager.outputTransformsInitialized$
   );
-
   const theme = getStateInspectorTheme(colorScheme);
   const solidBorderColor = getStateInspectorBorderColor(colorScheme);
 
@@ -290,12 +305,12 @@ export const StateInspector = memoGeneric(function StateInspector<
       </StateInspectorDisclosureSection>
       <StateInspectorDisclosureSection
         title={
-          <TitleLabel>
+          <StateInspectorTitleLabel>
             Data
             <ColoredDot
               type={multipeerStateInitialized ? "success" : "error"}
             />
-          </TitleLabel>
+          </StateInspectorTitleLabel>
         }
         colorScheme={colorScheme}
         setOpen={setShowData}
@@ -355,14 +370,28 @@ export const StateInspector = memoGeneric(function StateInspector<
         open={showAssets}
         setOpen={setShowAssets}
         title={
-          <TitleLabel>
+          <StateInspectorTitleLabel>
             Assets ({assets.length})
             <ColoredDot type={assetsInitialized ? "success" : "error"} />
-          </TitleLabel>
+          </StateInspectorTitleLabel>
         }
         colorScheme={colorScheme}
         right={
           <span style={{ display: "flex", gap: "10px" }}>
+            <StateInspectorButton
+              theme={theme}
+              onClick={async () => {
+                const ok = confirm(
+                  "Are you sure you want to delete all assets?"
+                );
+                if (!ok) return;
+                await Promise.all(
+                  assets.map((asset) => assetManager.delete(asset.id))
+                );
+              }}
+            >
+              Delete all
+            </StateInspectorButton>
             <StateInspectorButton
               theme={theme}
               onClick={() => {
@@ -416,10 +445,103 @@ export const StateInspector = memoGeneric(function StateInspector<
       </StateInspectorDisclosureSection>
       <StateInspectorDisclosureSection
         title={
-          <TitleLabel>
+          <StateInspectorTitleLabel>
+            Resources ({resources.length})
+            <ColoredDot type={resourcesInitialized ? "success" : "error"} />
+          </StateInspectorTitleLabel>
+        }
+        colorScheme={colorScheme}
+        open={showResources}
+        setOpen={setShowResources}
+        right={
+          <span style={{ display: "flex", gap: "10px" }}>
+            <StateInspectorButton
+              theme={theme}
+              onClick={async () => {
+                const ok = confirm(
+                  "Are you sure you want to delete all resources?"
+                );
+                if (!ok) return;
+                await Promise.all(
+                  resources.map((resource) =>
+                    resourceManager.deleteResource({ id: resource.id })
+                  )
+                );
+              }}
+            >
+              Delete all
+            </StateInspectorButton>
+            <StateInspectorButton
+              theme={theme}
+              onClick={async () => {
+                const path = prompt("Enter directory path") || uuid();
+                await resourceManager.createResource({
+                  type: "directory",
+                  path,
+                });
+              }}
+            >
+              Create Directory
+            </StateInspectorButton>
+            <StateInspectorButton
+              theme={theme}
+              onClick={async () => {
+                const file = await uploadFile();
+
+                resourceManager.createResource({
+                  type: "asset",
+                  path: file.name || uuid(),
+                  asset: {
+                    content: Base64.encode(await file.arrayBuffer()),
+                    contentType: file.type,
+                    encoding: "base64",
+                  },
+                });
+              }}
+            >
+              Create Asset
+            </StateInspectorButton>
+          </span>
+        }
+      >
+        <StateInspectorDisclosureRowInner>
+          {resources?.map((resource) => (
+            <StateInspectorRow key={resource.id} colorScheme={colorScheme}>
+              <ObjectInspector
+                name={resource.path}
+                data={resource}
+                theme={theme}
+              />
+              <div style={{ display: "flex", gap: "4px" }}>
+                <StateInspectorButton
+                  theme={theme}
+                  onClick={() =>
+                    resourceManager.deleteResource({ id: resource.id })
+                  }
+                >
+                  Delete
+                </StateInspectorButton>
+                <StateInspectorButton
+                  theme={theme}
+                  onClick={() => {
+                    const path = prompt("Enter new path", resource.path);
+                    if (!path) return;
+                    resourceManager.updateResource({ id: resource.id, path });
+                  }}
+                >
+                  Rename
+                </StateInspectorButton>
+              </div>
+            </StateInspectorRow>
+          ))}
+        </StateInspectorDisclosureRowInner>
+      </StateInspectorDisclosureSection>
+      <StateInspectorDisclosureSection
+        title={
+          <StateInspectorTitleLabel>
             Secrets
             <ColoredDot type={secretsInitialized ? "success" : "error"} />
-          </TitleLabel>
+          </StateInspectorTitleLabel>
         }
         colorScheme={colorScheme}
         open={showSecrets}
@@ -457,10 +579,10 @@ export const StateInspector = memoGeneric(function StateInspector<
         open={showInputs}
         setOpen={setShowInputs}
         title={
-          <TitleLabel>
+          <StateInspectorTitleLabel>
             Inputs
             <ColoredDot type={inputsInitialized ? "success" : "error"} />
-          </TitleLabel>
+          </StateInspectorTitleLabel>
         }
         colorScheme={colorScheme}
       >
@@ -489,12 +611,12 @@ export const StateInspector = memoGeneric(function StateInspector<
         open={showOutputTransforms}
         setOpen={setShowOutputTransforms}
         title={
-          <TitleLabel>
+          <StateInspectorTitleLabel>
             Output Transforms
             <ColoredDot
               type={outputTransformsInitialized ? "success" : "error"}
             />
-          </TitleLabel>
+          </StateInspectorTitleLabel>
         }
         colorScheme={colorScheme}
       >
@@ -567,6 +689,13 @@ export const StateInspector = memoGeneric(function StateInspector<
           ))}
         </StateInspectorDisclosureRowInner>
       </StateInspectorDisclosureSection>
+      <ActivityEventsSection
+        colorScheme={colorScheme}
+        activityEventsContainerRef={activityEventsContainerRef}
+        showEvents={showActivityEvents}
+        setShowEvents={setShowActivityEvents}
+        activityEventsManager={activityEventsManager}
+      />
       <EventsSection<S>
         connectionEvents={connectionEvents}
         colorScheme={colorScheme}
@@ -577,11 +706,3 @@ export const StateInspector = memoGeneric(function StateInspector<
     </div>
   );
 });
-
-function TitleLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-      {children}
-    </span>
-  );
-}

package/src/inspector/StateInspectorTitleLabel.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function StateInspectorTitleLabel({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+      {children}
+    </span>
+  );
+}