@dxos/react-ui-canvas-compute 0.8.3-main.7f5a14c → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.8.3-main.7f5a14c",
+  "version": "0.8.3",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,34 +25,34 @@
     "@effect/platform": "0.80.12",
     "@preact-signals/safe-react": "^0.9.0",
     "chess.js": "^1.0.0",
-    "@dxos/ai": "0.8.3-main.7f5a14c",
-    "@dxos/app-framework": "0.8.3-main.7f5a14c",
-    "@dxos/assistant": "0.8.3-main.7f5a14c",
-    "@dxos/async": "0.8.3-main.7f5a14c",
-    "@dxos/conductor": "0.8.3-main.7f5a14c",
-    "@dxos/artifact": "0.8.3-main.7f5a14c",
-    "@dxos/context": "0.8.3-main.7f5a14c",
-    "@dxos/debug": "0.8.3-main.7f5a14c",
-    "@dxos/echo-schema": "0.8.3-main.7f5a14c",
-    "@dxos/functions": "0.8.3-main.7f5a14c",
-    "@dxos/edge-client": "0.8.3-main.7f5a14c",
-    "@dxos/graph": "0.8.3-main.7f5a14c",
-    "@dxos/keys": "0.8.3-main.7f5a14c",
-    "@dxos/invariant": "0.8.3-main.7f5a14c",
-    "@dxos/live-object": "0.8.3-main.7f5a14c",
-    "@dxos/log": "0.8.3-main.7f5a14c",
-    "@dxos/react-client": "0.8.3-main.7f5a14c",
-    "@dxos/react-edge-client": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-attention": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-canvas": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-editor": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-form": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-sfx": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-canvas-editor": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-stack": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3-main.7f5a14c",
-    "@dxos/util": "0.8.3-main.7f5a14c",
-    "@dxos/schema": "0.8.3-main.7f5a14c"
+    "@dxos/ai": "0.8.3",
+    "@dxos/artifact": "0.8.3",
+    "@dxos/assistant": "0.8.3",
+    "@dxos/async": "0.8.3",
+    "@dxos/app-framework": "0.8.3",
+    "@dxos/conductor": "0.8.3",
+    "@dxos/context": "0.8.3",
+    "@dxos/debug": "0.8.3",
+    "@dxos/echo-schema": "0.8.3",
+    "@dxos/edge-client": "0.8.3",
+    "@dxos/invariant": "0.8.3",
+    "@dxos/graph": "0.8.3",
+    "@dxos/keys": "0.8.3",
+    "@dxos/live-object": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/react-client": "0.8.3",
+    "@dxos/react-ui-attention": "0.8.3",
+    "@dxos/react-edge-client": "0.8.3",
+    "@dxos/react-ui-canvas": "0.8.3",
+    "@dxos/functions": "0.8.3",
+    "@dxos/react-ui-canvas-editor": "0.8.3",
+    "@dxos/react-ui-editor": "0.8.3",
+    "@dxos/react-ui-form": "0.8.3",
+    "@dxos/react-ui-stack": "0.8.3",
+    "@dxos/react-ui-sfx": "0.8.3",
+    "@dxos/react-ui-syntax-highlighter": "0.8.3",
+    "@dxos/schema": "0.8.3",
+    "@dxos/util": "0.8.3"
   },
   "devDependencies": {
     "@effect/ai": "0.8.0",
@@ -65,21 +65,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/compute": "0.8.3-main.7f5a14c",
-    "@dxos/artifact-testing": "0.8.3-main.7f5a14c",
-    "@dxos/app-framework": "0.8.3-main.7f5a14c",
-    "@dxos/echo-signals": "0.8.3-main.7f5a14c",
-    "@dxos/random": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
-    "@dxos/storybook-utils": "0.8.3-main.7f5a14c"
+    "@dxos/app-framework": "0.8.3",
+    "@dxos/artifact-testing": "0.8.3",
+    "@dxos/compute": "0.8.3",
+    "@dxos/echo-signals": "0.8.3",
+    "@dxos/random": "0.8.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3"
   },
   "peerDependencies": {
     "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c"
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3"
   },
   "publishConfig": {
     "access": "public"

package/src/compute.stories.tsx

@@ -7,14 +7,22 @@ import '@dxos-theme';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
 
+import { EdgeAiServiceClient } from '@dxos/ai';
 import { createTestOllamaClient } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { capabilities, createEdgeServices } from '@dxos/artifact-testing';
-import { EdgeGpt, type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
+import { capabilities, localServiceEndpoints } from '@dxos/artifact-testing';
+import { type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
+import { AiService, ServiceContainer } from '@dxos/functions';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Select, Toolbar } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { Editor, type EditorController, type EditorRootProps, ShapeRegistry } from '@dxos/react-ui-canvas-editor';
+import {
+  CanvasGraphModel,
+  Editor,
+  type EditorController,
+  type EditorRootProps,
+  ShapeRegistry,
+} from '@dxos/react-ui-canvas-editor';
 import { Container, useSelection } from '@dxos/react-ui-canvas-editor/testing';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -193,7 +201,7 @@ export const Default: Story = {
     snapToGrid: false,
     sidebar: 'selected',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(),
+    ...createComputeGraphController(CanvasGraphModel.create<ComputeShape>(), new ServiceContainer()),
   },
 };
 
@@ -204,7 +212,7 @@ export const Beacon: Story = {
     snapToGrid: false,
     sidebar: 'selected',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createBasicCircuit()),
+    ...createComputeGraphController(createBasicCircuit(), new ServiceContainer()),
   },
 };
 
@@ -215,7 +223,7 @@ export const Transform: Story = {
     snapToGrid: false,
     sidebar: 'selected',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createTransformCircuit()),
+    ...createComputeGraphController(createTransformCircuit(), new ServiceContainer()),
   },
 };
 
@@ -226,7 +234,7 @@ export const Logic: Story = {
     snapToGrid: false,
     sidebar: 'compute',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createLogicCircuit()),
+    ...createComputeGraphController(createLogicCircuit(), new ServiceContainer()),
   },
 };
 
@@ -237,7 +245,7 @@ export const Control: Story = {
     snapToGrid: false,
     sidebar: 'compute',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createControlCircuit()),
+    ...createComputeGraphController(createControlCircuit(), new ServiceContainer()),
   },
 };
 
@@ -257,7 +265,12 @@ export const Template: Story = {
     snapToGrid: false,
     // sidebar: 'controller',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createTemplateCircuit(), createEdgeServices()),
+    ...createComputeGraphController(
+      createTemplateCircuit(),
+      new ServiceContainer().setServices({
+        ai: AiService.make(new EdgeAiServiceClient({ endpoint: localServiceEndpoints.ai })),
+      }),
+    ),
   },
 };
 
@@ -269,7 +282,12 @@ export const GPT: Story = {
     // sidebar: 'json',
     sidebar: 'controller',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGptCircuit({ history: true }), createEdgeServices()),
+    ...createComputeGraphController(
+      createGptCircuit({ history: true }),
+      new ServiceContainer().setServices({
+        ai: AiService.make(new EdgeAiServiceClient({ endpoint: localServiceEndpoints.ai })),
+      }),
+    ),
   },
 };
 
@@ -282,7 +300,9 @@ export const Plugins: Story = {
     registry: new ShapeRegistry(computeShapes),
     ...createComputeGraphController(
       createGptCircuit({ history: true, image: true, artifact: true }),
-      createEdgeServices(),
+      new ServiceContainer().setServices({
+        ai: AiService.make(new EdgeAiServiceClient({ endpoint: localServiceEndpoints.ai })),
+      }),
     ),
   },
 };
@@ -294,7 +314,12 @@ export const Artifact: Story = {
     snapToGrid: false,
     // sidebar: 'json',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createArtifactCircuit(), createEdgeServices()),
+    ...createComputeGraphController(
+      createArtifactCircuit(),
+      new ServiceContainer().setServices({
+        ai: AiService.make(new EdgeAiServiceClient({ endpoint: localServiceEndpoints.ai })),
+      }),
+    ),
   },
 };
 
@@ -306,9 +331,12 @@ export const ImageGen: Story = {
     // sidebar: 'json',
     sidebar: 'controller',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGptCircuit({ image: true, artifact: true }), {
-      gpt: new EdgeGpt(createTestOllamaClient()),
-    }),
+    ...createComputeGraphController(
+      createGptCircuit({ image: true, artifact: true }),
+      new ServiceContainer().setServices({
+        ai: AiService.make(createTestOllamaClient()),
+      }),
+    ),
   },
 };
 
@@ -319,7 +347,12 @@ export const Audio: Story = {
     snapToGrid: false,
     sidebar: 'controller',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createAudioCircuit(), createEdgeServices()),
+    ...createComputeGraphController(
+      createAudioCircuit(),
+      new ServiceContainer().setServices({
+        ai: AiService.make(createTestOllamaClient()),
+      }),
+    ),
   },
 };
 
@@ -329,6 +362,11 @@ export const Voice: Story = {
     snapToGrid: false,
     sidebar: 'controller',
     registry: new ShapeRegistry(computeShapes),
-    ...createComputeGraphController(createGPTRealtimeCircuit(), createEdgeServices()),
+    ...createComputeGraphController(
+      createGPTRealtimeCircuit(),
+      new ServiceContainer().setServices({
+        ai: AiService.make(createTestOllamaClient()),
+      }),
+    ),
   },
 };

package/src/graph/controller.ts

@@ -2,34 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FetchHttpClient } from '@effect/platform';
-import { type Context, Effect, Either, Exit, Layer, Scope } from 'effect';
+import { type Context, Effect, Either, Exit, Scope } from 'effect';
 
 import { type ImageContentBlock } from '@dxos/ai';
 import { Event, synchronized } from '@dxos/async';
 import {
-  isNotExecuted,
-  makeValueBag,
   type ComputeEdge,
   type ComputeEvent,
   type ComputeGraphModel,
   type ComputeMeta,
   type ComputeNode,
-  type ComputeRequirements,
-  EventLogger,
+  type EventLogger,
   type GptInput,
   type GptOutput,
-  GptService,
-  GraphExecutor,
-  MockGpt,
-  QueueService,
-  SpaceService,
-  type ValueBag,
   type GraphDiagnostic,
-  FunctionCallService,
+  GraphExecutor,
+  isNotExecuted,
+  ValueBag,
 } from '@dxos/conductor';
 import { Resource } from '@dxos/context';
-import type { EdgeClient, EdgeHttpClient } from '@dxos/edge-client';
+import type { ServiceContainer } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { type CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
 
@@ -70,13 +62,6 @@ export type RuntimeValue =
       error: string;
     };
 
-export type Services = {
-  gpt: Context.Tag.Service<GptService>;
-  edgeClient?: EdgeClient;
-  edgeHttpClient?: EdgeHttpClient;
-  spaceService?: Context.Tag.Service<SpaceService>;
-};
-
 type ComputeOutputEvent = {
   nodeId: string;
   property: string;
@@ -88,10 +73,12 @@ type ComputeOutputEvent = {
  */
 const AUTO_TRIGGER_NODES = ['chat', 'switch', 'constant'];
 
-export const createComputeGraphController = (graph: CanvasGraphModel<ComputeShape>, services?: Partial<Services>) => {
+export const createComputeGraphController = (
+  graph: CanvasGraphModel<ComputeShape>,
+  serviceContainer: ServiceContainer,
+) => {
   const computeGraph = createComputeGraph(graph);
-  const controller = new ComputeGraphController(computeGraph);
-  controller.setServices(services ?? {});
+  const controller = new ComputeGraphController(serviceContainer, computeGraph);
   return { controller, graph };
 };
 
@@ -105,8 +92,6 @@ export class ComputeGraphController extends Resource {
 
   private _diagnostics: GraphDiagnostic[] = [];
 
-  private _services: Partial<Services> = {};
-
   /**
    * Canvas force-sets outputs of those nodes.
    */
@@ -128,6 +113,7 @@ export class ComputeGraphController extends Resource {
   public readonly events = new Event<ComputeEvent>();
 
   constructor(
+    private readonly _serviceContainer: ServiceContainer,
     /** Persistent compute graph. */
     private readonly _graph: ComputeGraphModel,
   ) {
@@ -145,11 +131,6 @@ export class ComputeGraphController extends Resource {
     };
   }
 
-  setServices(services: Partial<Services>): void {
-    log.info('setServices', { services });
-    Object.assign(this._services, services);
-  }
-
   get graph() {
     return this._graph;
   }
@@ -237,10 +218,10 @@ export class ComputeGraphController extends Resource {
     await executor.load(this._graph);
 
     for (const [nodeId, outputs] of Object.entries(this._forcedOutputs)) {
-      executor.setOutputs(nodeId, Effect.succeed(makeValueBag(outputs)));
+      executor.setOutputs(nodeId, Effect.succeed(ValueBag.make(outputs)));
     }
 
-    const services = this._createServiceLayer();
+    const serviceLayer = this._serviceContainer.createLayer();
     await Effect.runPromise(
       Effect.gen(this, function* () {
         const scope = yield* Scope.make();
@@ -254,7 +235,7 @@ export class ComputeGraphController extends Resource {
           Scope.extend(scope),
 
           Effect.flatMap(computeValueBag),
-          Effect.provide(services),
+          Effect.provide(serviceLayer),
           Effect.withSpan('test'),
           Effect.tap((values) => {
             for (const [key, value] of Object.entries(values)) {
@@ -288,7 +269,7 @@ export class ComputeGraphController extends Resource {
     await executor.load(this._graph);
 
     for (const [nodeId, outputs] of Object.entries(this._forcedOutputs)) {
-      executor.setOutputs(nodeId, Effect.succeed(makeValueBag(outputs)));
+      executor.setOutputs(nodeId, Effect.succeed(ValueBag.make(outputs)));
     }
 
     // TODO(dmaretskyi): Stop hardcoding.
@@ -298,7 +279,6 @@ export class ComputeGraphController extends Resource {
         : this._graph.nodes.filter((node) => node.type != null && AUTO_TRIGGER_NODES.includes(node.type));
     const allAffectedNodes = [...new Set(triggerNodes.flatMap((node) => executor.getAllDependantNodes(node.id)))];
 
-    const services = this._createServiceLayer();
     await Effect.runPromise(
       Effect.gen(this, function* () {
         const scope = yield* Scope.make();
@@ -315,7 +295,7 @@ export class ComputeGraphController extends Resource {
             Effect.withSpan('runGraph'),
             Scope.extend(scope),
             Effect.flatMap(computeValueBag),
-            Effect.provide(services),
+            Effect.provide(this._serviceContainer.createLayer()),
             Effect.withSpan('test'),
             Effect.tap((values) => {
               for (const [key, value] of Object.entries(values)) {
@@ -342,27 +322,6 @@ export class ComputeGraphController extends Resource {
     this.update.emit();
   }
 
-  private _createServiceLayer(): Layer.Layer<Exclude<ComputeRequirements, Scope.Scope>> {
-    const services = { ...DEFAULT_SERVICES, ...this._services };
-    const logLayer = Layer.succeed(EventLogger, this._createLogger());
-    const gptLayer = Layer.succeed(GptService, services.gpt!);
-    const queueLayer =
-      services.edgeHttpClient != null ? QueueService.fromClient(services.edgeHttpClient) : QueueService.notAvailable;
-
-    const spaceLayer =
-      services.spaceService != null ? Layer.succeed(SpaceService, services.spaceService) : SpaceService.empty;
-
-    const functionCallServiceLayer =
-      services.edgeHttpClient != null && services.spaceService != null
-        ? Layer.succeed(
-            FunctionCallService,
-            FunctionCallService.fromClient(services.edgeHttpClient.baseUrl, services.spaceService.spaceId),
-          )
-        : Layer.succeed(FunctionCallService, FunctionCallService.mock());
-
-    return Layer.mergeAll(logLayer, gptLayer, queueLayer, spaceLayer, functionCallServiceLayer, FetchHttpClient.layer);
-  }
-
   private _createLogger(): Context.Tag.Service<EventLogger> {
     return {
       log: (event) => {
@@ -402,10 +361,6 @@ export class ComputeGraphController extends Resource {
   }
 }
 
-const DEFAULT_SERVICES: Services = {
-  gpt: new MockGpt(),
-};
-
 /**
  * Waits for all effects in the bag to complete and returns the `RuntimeValue` for each property.
  */

package/src/shapes/GptRealtime.tsx

@@ -61,11 +61,11 @@ export const GptRealtimeComponent = ({ shape }: ShapeComponentProps<GptRealtimeS
       await peerConnection.setLocalDescription(offer);
 
       // Send offer to backend and get answer
-      const aiServiceUrl = new URL(
+      const AiServiceUrl = new URL(
         '/rtc-connect',
         config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL,
       );
-      const response = await fetch(aiServiceUrl, {
+      const response = await fetch(AiServiceUrl, {
         method: 'POST',
         body: offer.sdp,
         headers: {

package/src/testing/circuits.ts

@@ -4,11 +4,12 @@
 
 import { createSystemPrompt } from '@dxos/artifact';
 import { ObjectId } from '@dxos/echo-schema';
+import type { ServiceContainer } from '@dxos/functions';
 import { DXN, SpaceId } from '@dxos/keys';
 import { type Dimension, type Point } from '@dxos/react-ui-canvas';
-import { pointMultiply, pointsToRect, rectToPoints, createNote, CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
+import { CanvasGraphModel, createNote, pointMultiply, pointsToRect, rectToPoints } from '@dxos/react-ui-canvas-editor';
 
-import { ComputeGraphController, type Services } from '../graph';
+import { ComputeGraphController } from '../graph';
 import { createComputeGraph } from '../hooks';
 import {
   type ComputeShape,
@@ -30,20 +31,19 @@ import {
   createQueue,
   createRandom,
   createScope,
-  createSwitch,
   createSurface,
-  createTextToImage,
-  createText,
+  createSwitch,
   createTemplate,
+  createText,
+  createTextToImage,
 } from '../shapes';
 
 export const createComputeGraphController = (
-  graph = CanvasGraphModel.create<ComputeShape>(),
-  services?: Partial<Services>,
+  graph: CanvasGraphModel<ComputeShape>,
+  serviceContainer: ServiceContainer,
 ) => {
   const computeGraph = createComputeGraph(graph);
-  const controller = new ComputeGraphController(computeGraph);
-  controller.setServices(services ?? {});
+  const controller = new ComputeGraphController(serviceContainer, computeGraph);
   return { controller, graph };
 };