@reactor-team/js-sdk 1.0.6 → 1.0.8

package/src/core/store.ts

@@ -1,163 +0,0 @@
-import { StoreApi } from "zustand";
-import type { ReactorStatus, ReactorWaitingInfo, ReactorError } from "../types";
-import { Reactor, type Options as ReactorOptions } from "./Reactor";
-import { create } from "zustand/react";
-import { createContext } from "react";
-import type { RemoteVideoTrack } from "livekit-client";
-
-export type ReactorStoreApi = ReturnType<typeof createReactorStore>;
-
-export interface ReactorState {
-  status: ReactorStatus;
-  videoTrack: RemoteVideoTrack | null;
-  //These are the machine FPS. The machine internally reports to the client the rate at which the frames are
-  //being generated. This can be useful for the client to calcolate at which rate to run commands.
-  fps?: number;
-  waitingInfo?: ReactorWaitingInfo;
-  lastError?: ReactorError;
-}
-
-export interface ReactorActions {
-  sendMessage(message: any): void;
-  connect(): Promise<void>;
-  disconnect(): Promise<void>;
-}
-
-// Internal state not exposed to components
-interface ReactorInternalState {
-  reactor: Reactor;
-}
-
-export const ReactorContext = createContext<ReactorStoreApi | undefined>(
-  undefined
-);
-
-export type ReactorStore = ReactorState &
-  ReactorActions & {
-    internal: ReactorInternalState;
-  };
-
-export const defaultInitState: ReactorState = {
-  status: "disconnected",
-  videoTrack: null,
-  fps: undefined,
-  waitingInfo: undefined,
-  lastError: undefined,
-};
-
-export interface ReactorInitializationProps extends ReactorOptions {}
-
-export const initReactorStore = (
-  props: ReactorInitializationProps
-): ReactorState & ReactorInitializationProps => {
-  return {
-    ...defaultInitState,
-    // These are only used for dev initialization, not exposed in the store
-    ...props,
-  };
-};
-
-export const createReactorStore = (
-  initProps: ReactorInitializationProps,
-  publicState: ReactorState = defaultInitState
-): StoreApi<ReactorStore> => {
-  console.debug("[ReactorStore] Creating store", {
-    coordinatorUrl: initProps.coordinatorUrl,
-    initialState: publicState,
-  });
-
-  return create<ReactorStore>()((set, get) => {
-    const reactor = new Reactor(initProps);
-
-    console.debug("[ReactorStore] Setting up event listeners");
-
-    reactor.on("statusChanged", (newStatus: ReactorStatus) => {
-      console.debug("[ReactorStore] Status changed", {
-        oldStatus: get().status,
-        newStatus,
-      });
-      set({ status: newStatus });
-    });
-
-    reactor.on("waitingInfoChanged", (newWaitingInfo: ReactorWaitingInfo) => {
-      console.debug("[ReactorStore] Waiting info changed", {
-        oldWaitingInfo: get().waitingInfo,
-        newWaitingInfo,
-      });
-      set({ waitingInfo: newWaitingInfo });
-    });
-
-    reactor.on("streamChanged", (videoTrack: RemoteVideoTrack | null) => {
-      console.debug("[ReactorStore] Stream changed", {
-        hasVideoTrack: !!videoTrack,
-        videoTrackKind: videoTrack?.kind,
-        videoTrackSid: videoTrack?.sid,
-      });
-      set({ videoTrack: videoTrack });
-    });
-
-    reactor.on("fps", (fps: number) => {
-      console.debug("[ReactorStore] FPS updated", { fps });
-      set({ fps: fps });
-    });
-
-    reactor.on("error", (error: ReactorError) => {
-      console.debug("[ReactorStore] Error occurred", error);
-      set({ lastError: error });
-    });
-
-    return {
-      ...publicState,
-      internal: { reactor },
-
-      // actions
-      onMessage: (handler: (message: any) => void) => {
-        console.debug("[ReactorStore] Registering message handler");
-
-        // Simply register the handler
-        get().internal.reactor.on("newMessage", handler);
-
-        // Return a cleanup function that can be called to unregister
-        return () => {
-          console.debug("[ReactorStore] Cleaning up message handler");
-          get().internal.reactor.off("newMessage", handler);
-        };
-      },
-      sendMessage: (mess: any) => {
-        console.debug("[ReactorStore] Sending message", { message: mess });
-
-        try {
-          get().internal.reactor.sendMessage(mess);
-          console.debug("[ReactorStore] Message sent successfully");
-        } catch (error) {
-          console.error("[ReactorStore] Failed to send message:", error);
-          throw error;
-        }
-      },
-      connect: async () => {
-        console.debug("[ReactorStore] Connect called");
-
-        try {
-          await get().internal.reactor.connect();
-          console.debug("[ReactorStore] Connect completed successfully");
-        } catch (error) {
-          console.error("[ReactorStore] Connect failed:", error);
-          throw error;
-        }
-      },
-      disconnect: async () => {
-        console.debug("[ReactorStore] Disconnect called", {
-          currentStatus: get().status,
-        });
-
-        try {
-          await get().internal.reactor.disconnect();
-          console.debug("[ReactorStore] Disconnect completed successfully");
-        } catch (error) {
-          console.error("[ReactorStore] Disconnect failed:", error);
-          throw error;
-        }
-      },
-    };
-  });
-};

package/src/core/types.ts

@@ -1,99 +0,0 @@
-/**
- * Internal types for the Reactor SDK.
- */
-
-import { z } from "zod";
-
-// Base message schemas corresponding to Python Pydantic models
-
-export const ApplicationMessageSchema = z.object({
-  type: z.literal("application"),
-  data: z.any(), // Can be any JSON-serializable data
-});
-
-// Internal message that notifies the client of the current push rate of the machine
-export const FPSMessageSchema = z.object({
-  type: z.literal("fps"),
-  data: z.number(),
-});
-
-export const GPUMachineReceiveMessageSchema = z.discriminatedUnion("type", [
-  ApplicationMessageSchema,
-  FPSMessageSchema,
-]);
-
-export const WelcomeMessageSchema = z.object({
-  type: z.literal("welcome"),
-  data: z.record(z.string(), z.any()),
-});
-
-export const GPUMachineAssignmentDataSchema = z.object({
-  livekitWsUrl: z.string(),
-  livekitJwtToken: z.string(),
-});
-
-export const GPUMachineAssignmentMessageSchema = z.object({
-  type: z.literal("gpu-machine-assigned"),
-  data: GPUMachineAssignmentDataSchema,
-});
-
-export const EchoMessageSchema = z.object({
-  type: z.literal("echo"),
-  data: z.record(z.string(), z.any()),
-});
-
-export const WaitingInfoDataSchema = z.object({
-  position: z.number().optional(),
-  estimatedWaitTime: z.number().optional(),
-  averageWaitTime: z.number().optional(),
-});
-
-export const WaitingInfoMessageSchema = z.object({
-  type: z.literal("waiting-info"),
-  data: WaitingInfoDataSchema,
-});
-
-export const CoordinatorMessageSchema = z.discriminatedUnion("type", [
-  WelcomeMessageSchema,
-  GPUMachineAssignmentMessageSchema,
-  EchoMessageSchema,
-  WaitingInfoMessageSchema,
-]);
-
-export const GPUMachineSendMessageSchema = z.discriminatedUnion("type", [
-  ApplicationMessageSchema,
-]);
-
-export const SessionSetupMessageSchema = z.object({
-  type: z.literal("sessionSetup"),
-  data: z.object({
-    modelName: z.string(),
-    modelVersion: z.string().default("latest"),
-  }),
-});
-
-// TypeScript types derived from schemas
-export type ApplicationMessage = z.infer<typeof ApplicationMessageSchema>;
-export type GPUMachineReceiveMessageSchema = z.infer<
-  typeof GPUMachineReceiveMessageSchema
->;
-export type WelcomeMessage = z.infer<typeof WelcomeMessageSchema>;
-export type GPUMachineAssignmentData = z.infer<
-  typeof GPUMachineAssignmentDataSchema
->;
-export type GPUMachineAssignmentMessage = z.infer<
-  typeof GPUMachineAssignmentMessageSchema
->;
-export type EchoMessage = z.infer<typeof EchoMessageSchema>;
-export type WaitingInfoData = z.infer<typeof WaitingInfoDataSchema>;
-export type WaitingInfoMessage = z.infer<typeof WaitingInfoMessageSchema>;
-export type CoordinatorMessage = z.infer<typeof CoordinatorMessageSchema>;
-export type GPUMachineSendMessage = z.infer<typeof GPUMachineSendMessageSchema>;
-export type SessionSetupMessage = z.infer<typeof SessionSetupMessageSchema>;
-
-// Internal connection status for individual components
-export type InternalConnectionStatus =
-  | "disconnected"
-  | "connecting"
-  | "connected"
-  | "error";

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./core/Reactor";
-export * from "./react/ReactorProvider";
-export * from "./react/ReactorView";
-export * from "./react/hooks";
-export * from "./types";

package/src/react/ReactorProvider.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { ReactNode, useContext, useEffect, useRef } from "react";
-import {
-  createReactorStore,
-  initReactorStore,
-  ReactorContext,
-  ReactorStore,
-  ReactorStoreApi,
-  type ReactorInitializationProps,
-} from "../core/store";
-import { useStore } from "zustand";
-
-// Provider props
-interface ReactorProviderProps extends ReactorInitializationProps {
-  autoConnect?: boolean;
-  children: ReactNode;
-}
-
-// tsx component
-export function ReactorProvider({
-  children,
-  autoConnect = true,
-  ...props
-}: ReactorProviderProps) {
-  // Stable Reactor instance
-  const storeRef = useRef<ReactorStoreApi | undefined>(undefined);
-  const firstRender = useRef(true);
-
-  /**
-   * Attempts connecting to Reactor, if the autoConnect flag is set.
-   */
-  function attemptAutoConnect() {
-    const status = storeRef.current?.getState().status;
-
-    if (autoConnect && status === "disconnected") {
-      console.debug("[ReactorProvider] Starting autoconnect...");
-      storeRef.current
-        ?.getState()
-        .connect()
-        .then(() => {
-          console.debug("[ReactorProvider] Autoconnect successful");
-        })
-        .catch((error) => {
-          console.error("[ReactorProvider] Failed to autoconnect:", error);
-        });
-    }
-  }
-
-  if (storeRef.current === undefined) {
-    console.debug("[ReactorProvider] Creating new reactor store");
-    // We create the store without autoconnecting, to avoid duplicate connections.
-    // We actually connect when the component is mounted, to be on sync with the react component lifecycle.
-    storeRef.current = createReactorStore(initReactorStore(props));
-    console.debug("[ReactorProvider] Reactor store created successfully");
-    attemptAutoConnect();
-  }
-
-  useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-      return;
-    }
-    console.debug("[ReactorProvider] Updating reactor store");
-    storeRef.current = createReactorStore(initReactorStore(props));
-    console.debug("[ReactorProvider] Reactor store updated successfully");
-    attemptAutoConnect();
-  }, [props, autoConnect]);
-
-  return (
-    <ReactorContext.Provider value={storeRef.current}>
-      {children}
-    </ReactorContext.Provider>
-  );
-}
-
-export function useReactorStore<T = ReactorStore>(
-  selector: (state: ReactorStore) => T
-): T {
-  const ctx = useContext(ReactorContext);
-  if (!ctx) {
-    throw new Error("useReactor must be used within a ReactorProvider");
-  }
-
-  return useStore(ctx, selector);
-}

package/src/react/ReactorView.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { useReactor } from "./hooks";
-import { useEffect, useRef } from "react";
-import React from "react";
-
-export interface ReactorViewProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export function ReactorView({
-  width,
-  height,
-  className,
-  style,
-}: ReactorViewProps) {
-  const { videoTrack, status } = useReactor((state) => ({
-    videoTrack: state.videoTrack,
-    status: state.status,
-  }));
-
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  console.debug("[ReactorView] Render", {
-    hasVideoTrack: !!videoTrack,
-    status,
-    hasVideoElement: !!videoRef.current,
-  });
-
-  useEffect(() => {
-    console.debug("[ReactorView] Video track effect triggered", {
-      hasVideoElement: !!videoRef.current,
-      hasVideoTrack: !!videoTrack,
-      videoTrackKind: videoTrack?.kind,
-    });
-
-    if (videoRef.current && videoTrack) {
-      console.debug("[ReactorView] Attaching video track to element");
-      try {
-        // Attach the LiveKit track to the video element
-        videoTrack.attach(videoRef.current);
-        console.debug("[ReactorView] Video track attached successfully");
-      } catch (error) {
-        console.error("[ReactorView] Failed to attach video track:", error);
-      }
-
-      // Cleanup: detach when track changes or component unmounts
-      return () => {
-        console.debug("[ReactorView] Detaching video track from element");
-        if (videoRef.current) {
-          try {
-            videoTrack.detach(videoRef.current);
-            console.debug("[ReactorView] Video track detached successfully");
-          } catch (error) {
-            console.error("[ReactorView] Failed to detach video track:", error);
-          }
-        }
-      };
-    } else {
-      console.debug("[ReactorView] No video track or element to attach");
-    }
-  }, [videoTrack]);
-
-  const showPlaceholder = !videoTrack;
-  console.debug("[ReactorView] Placeholder state", { showPlaceholder, status });
-
-  return (
-    <div
-      style={{
-        position: "relative",
-        background: "#000",
-        ...(width && { width }),
-        ...(height && { height }),
-        ...style,
-      }}
-      className={className}
-    >
-      <video
-        ref={videoRef}
-        style={{
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          display: showPlaceholder ? "none" : "block",
-        }}
-        muted
-        playsInline
-      />
-      {showPlaceholder && (
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            color: "#fff",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "16px",
-            fontFamily: "monospace",
-            textAlign: "center",
-            padding: "20px",
-            boxSizing: "border-box",
-          }}
-        >
-          {status}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/react/hooks.ts

@@ -1,50 +0,0 @@
-import { useReactorStore } from "./ReactorProvider";
-import type { ReactorStore } from "../core/store";
-import { useShallow } from "zustand/shallow";
-import { useEffect, useRef } from "react";
-
-/**
- * Generic hook for accessing selected parts of the Reactor store.
- *
- * @param selector - A function that selects part of the store state.
- * @returns The selected slice from the store.
- */
-export function useReactor<T>(selector: (state: ReactorStore) => T): T {
-  return useReactorStore(useShallow(selector));
-}
-
-/**
- * Hook for handling message subscriptions with proper React lifecycle management.
- *
- * @param handler - The message handler function
- */
-export function useReactorMessage(handler: (message: any) => void): void {
-  const reactor = useReactor((state) => state.internal.reactor);
-  const handlerRef = useRef(handler);
-
-  // Update the ref when handler changes
-  useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
-
-  useEffect(() => {
-    console.debug("[useReactorMessage] Setting up message subscription");
-
-    // Create a stable handler that calls the current ref
-    const stableHandler = (message: any) => {
-      console.debug("[useReactorMessage] Message received", { message });
-      handlerRef.current(message);
-    };
-
-    // Register the handler and get the cleanup function
-    reactor.on("newMessage", stableHandler);
-
-    console.debug("[useReactorMessage] Message handler registered");
-
-    // Return the cleanup function
-    return () => {
-      console.debug("[useReactorMessage] Cleaning up message subscription");
-      reactor.off("newMessage", stableHandler);
-    };
-  }, [reactor]);
-}

package/src/types.ts

@@ -1,37 +0,0 @@
-export type ReactorStatus =
-  | "disconnected" // Not connected to anything
-  | "connecting" // Establishing connection to coordinator
-  | "waiting" // Connected to coordinator, waiting for GPU assignment
-  | "ready"; // Connected to GPU machine, can send/receive messages
-
-// Queue information when in waiting state
-export interface ReactorWaitingInfo {
-  position?: number; // Position in queue
-  estimatedWaitTime?: number; // Seconds
-  averageWaitTime?: number; // Historical data
-}
-
-// Error information
-export interface ReactorError {
-  code: string;
-  message: string;
-  timestamp: number;
-  recoverable: boolean;
-  component: "coordinator" | "gpu" | "livekit";
-  retryAfter?: number; // Suggested retry delay in seconds
-}
-
-// Enhanced state with metadata
-export interface ReactorState {
-  status: ReactorStatus;
-  waitingInfo?: ReactorWaitingInfo; // When status is 'waiting'
-  lastError?: ReactorError; // Most recent error
-}
-
-export type ReactorEvent =
-  | "statusChanged" //updates on the reactor status
-  | "waitingInfoChanged" //updates on the waiting info
-  | "newMessage" //new messages from the machine (coordinator handled internally)
-  | "fps" //update of the fps rate of the machine
-  | "streamChanged" //video stream has changed (LiveKit)
-  | "error"; //error events with ReactorError details

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "module": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "moduleResolution": "Node",
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "declarationMap": true,
-    "outDir": "./dist",
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "stripInternal": true
-  },
-  "include": ["src", "bin"]
-}

package/tsup.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  dts: {
-    entry: ["src/index.ts"],
-    resolve: true,
-  },
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  outDir: "dist",
-  tsconfig: "tsconfig.json",
-});