@dxos/react-ui-canvas-compute 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/dist/lib/browser/index.mjs

@@ -1,9 +1,10 @@
 import "@dxos/node-std/globals";
 
 // packages/ui/react-ui-canvas-compute/src/graph/controller.ts
+import { FetchHttpClient } from "@effect/platform";
 import { Effect, Either, Exit, Layer, Scope } from "effect";
 import { Event, synchronized } from "@dxos/async";
-import { isNotExecuted, makeValueBag, EventLogger, GptService, GraphExecutor, MockGpt, QueueService, SpaceService } from "@dxos/conductor";
+import { isNotExecuted, makeValueBag, EventLogger, GptService, GraphExecutor, MockGpt, QueueService, SpaceService, FunctionCallService } from "@dxos/conductor";
 import { Resource } from "@dxos/context";
 import { log } from "@dxos/log";
 
@@ -171,7 +172,7 @@ import { ObjectId as ObjectId2 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { DXN } from "@dxos/keys";
 import { getSpace } from "@dxos/react-client/echo";
-import { nonNullable } from "@dxos/util";
+import { isNonNullable } from "@dxos/util";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
 var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
   const sourceNode = graph.findNode(source);
@@ -238,7 +239,7 @@ var useGraphMonitor = (model) => {
           const nodeIds = subgraph.nodes.map((shape) => shape.node);
           const edgeIds = subgraph.edges.map(({ source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
             return model.edges.find((computeEdge) => computeEdge.input === input && computeEdge.output === output)?.id;
-          }).filter(nonNullable);
+          }).filter(isNonNullable);
           model.removeNodes(nodeIds);
           model.removeEdges(edgeIds);
           deleteTriggerObjects(model, subgraph);
@@ -323,6 +324,7 @@ var ComputeGraphController = class extends Resource {
     this._executor = new GraphExecutor({
       computeNodeResolver: (node) => resolveComputeNode(node)
     });
+    this._diagnostics = [];
     this._services = {};
     this._forcedOutputs = {};
     this._runtimeStateInputs = {};
@@ -342,11 +344,22 @@ var ComputeGraphController = class extends Resource {
     };
   }
   setServices(services) {
+    log.info("setServices", {
+      services
+    }, {
+      F: __dxlog_file4,
+      L: 149,
+      S: this,
+      C: (f, a) => f(...a)
+    });
     Object.assign(this._services, services);
   }
   get graph() {
     return this._graph;
   }
+  get diagnostics() {
+    return this._diagnostics;
+  }
   get userState() {
     return this._forcedOutputs;
   }
@@ -399,7 +412,7 @@ var ComputeGraphController = class extends Resource {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file4,
-          L: 208,
+          L: 218,
           S: this,
           C: (f, a) => f(...a)
         });
@@ -410,6 +423,11 @@ var ComputeGraphController = class extends Resource {
     const { meta } = await resolveComputeNode(node);
     return meta;
   }
+  async checkGraph() {
+    const executor = this._executor.clone();
+    await executor.load(this._graph);
+    this._diagnostics = executor.getDiagnostics();
+  }
   async evalNode(nodeId) {
     const executor = this._executor.clone();
     await executor.load(this._graph);
@@ -421,7 +439,7 @@ var ComputeGraphController = class extends Resource {
       const scope = yield* Scope.make();
       const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(nodeId)));
       const computingOutputs = executable.exec != null;
-      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Effect.provide(services), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.withSpan("test"), Effect.tap((values) => {
+      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(services), Effect.withSpan("test"), Effect.tap((values) => {
         for (const [key, value] of Object.entries(values)) {
           if (computingOutputs) {
             this._onOutputComputed(nodeId, key, value);
@@ -460,7 +478,7 @@ var ComputeGraphController = class extends Resource {
       for (const node of allAffectedNodes) {
         const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(node)));
         const computingOutputs = executable.exec != null;
-        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Effect.provide(services), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.withSpan("test"), Effect.tap((values) => {
+        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(services), Effect.withSpan("test"), Effect.tap((values) => {
           for (const [key, value] of Object.entries(values)) {
             if (computingOutputs) {
               this._onOutputComputed(node, key, value);
@@ -485,7 +503,8 @@ var ComputeGraphController = class extends Resource {
     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;
-    return Layer.mergeAll(logLayer, gptLayer, queueLayer, spaceLayer);
+    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);
   }
   _createLogger() {
     return {
@@ -500,7 +519,7 @@ var ComputeGraphController = class extends Resource {
       event
     }, {
       F: __dxlog_file4,
-      L: 351,
+      L: 376,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -536,6 +555,9 @@ var ComputeGraphController = class extends Resource {
     });
   }
 };
+_ts_decorate([
+  synchronized
+], ComputeGraphController.prototype, "checkGraph", null);
 _ts_decorate([
   synchronized
 ], ComputeGraphController.prototype, "exec", null);
@@ -764,8 +786,8 @@ var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
 
 // packages/ui/react-ui-canvas-compute/src/shapes/common/TypeSelect.tsx
 import React3 from "react";
-import { Select } from "@dxos/react-ui";
 import { ComputeValueType } from "@dxos/conductor";
+import { Select } from "@dxos/react-ui";
 var TypeSelect = ({ value, onValueChange }) => {
   return /* @__PURE__ */ React3.createElement(Select.Root, {
     value,
@@ -1292,34 +1314,80 @@ var databaseShape = {
 };
 
 // packages/ui/react-ui-canvas-compute/src/shapes/Function.tsx
-import React12 from "react";
+import React12, { useCallback as useCallback3, useRef as useRef4 } from "react";
 import { AnyOutput, FunctionInput } from "@dxos/conductor";
-import { S as S11 } from "@dxos/echo-schema";
+import { getSnapshot, S as S11 } from "@dxos/echo-schema";
+import { FunctionType, ScriptType } from "@dxos/functions";
+import { useClient } from "@dxos/react-client";
+import { Filter, makeRef, parseId } from "@dxos/react-client/echo";
+import { TextBox as TextBox3 } from "@dxos/react-ui-canvas-editor";
 var FunctionShape = S11.extend(ComputeShape, S11.Struct({
   type: S11.Literal("function")
 }));
 var createFunction = (props) => createShape({
   type: "function",
   size: {
-    width: 192,
-    height: getHeight(FunctionInput)
+    width: 256,
+    height: 192
   },
   ...props
 });
-var FunctionComponent = ({ shape }) => {
-  return /* @__PURE__ */ React12.createElement(FunctionBody, {
+var TextInputComponent2 = ({ shape, title, ...props }) => {
+  const client = useClient();
+  const { node, runtime } = useComputeNodeState(shape);
+  const inputRef = useRef4(null);
+  const handleEnter = useCallback3(async (text) => {
+    const value = text.trim();
+    const { spaceId, objectId } = parseId(value);
+    if (!spaceId || !objectId) {
+      return;
+    }
+    const space = client.spaces.get(spaceId);
+    const object = space?.db.getObjectById(objectId);
+    if (!space || !(object instanceof ScriptType)) {
+      return;
+    }
+    const { objects: [fn] } = await space.db.query(Filter.schema(FunctionType, {
+      source: object
+    })).run();
+    if (!fn) {
+      return;
+    }
+    node.value = value;
+    node.function = makeRef(fn);
+    node.inputSchema = getSnapshot(fn.inputSchema);
+    node.outputSchema = getSnapshot(fn.outputSchema);
+  }, [
+    client,
+    node
+  ]);
+  const handleAction = useCallback3((action) => {
+    if (action !== "run") {
+      return;
+    }
+    runtime.evalNode();
+  }, [
+    runtime
+  ]);
+  return /* @__PURE__ */ React12.createElement(Box, {
     shape,
-    inputSchema: FunctionInput,
-    outputSchema: AnyOutput
-  });
+    title: "Function",
+    onAction: handleAction
+  }, /* @__PURE__ */ React12.createElement(TextBox3, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
 };
 var functionShape = {
   type: "function",
   name: "Function",
   icon: "ph--function--regular",
-  component: FunctionComponent,
+  component: TextInputComponent2,
   createShape: createFunction,
-  // TODO(burdon): Get dynamic schema.
   getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput)
 };
 
@@ -1840,19 +1908,19 @@ var tableShape = {
 };
 
 // packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx
-import React22, { useRef as useRef4 } from "react";
+import React22, { useRef as useRef5 } from "react";
 import { ComputeValueType as ComputeValueType3, getTemplateInputSchema as getTemplateInputSchema2, TemplateOutput, VoidInput as VoidInput2 } from "@dxos/conductor";
 import { S as S21, toJsonSchema as toJsonSchema2 } from "@dxos/echo-schema";
 import { invariant as invariant5 } from "@dxos/invariant";
-import { TextBox as TextBox3 } from "@dxos/react-ui-canvas-editor";
+import { TextBox as TextBox4 } from "@dxos/react-ui-canvas-editor";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx";
 var TemplateShape = S21.extend(ComputeShape, S21.Struct({
   type: S21.Literal("template"),
   valueType: S21.optional(ComputeValueType3)
 }));
-var TextInputComponent2 = ({ shape, title, ...props }) => {
+var TextInputComponent3 = ({ shape, title, ...props }) => {
   const { node } = useComputeNodeState(shape);
-  const inputRef = useRef4(null);
+  const inputRef = useRef5(null);
   const handleEnter = (text) => {
     const value = text.trim();
     if (value.length) {
@@ -1881,7 +1949,7 @@ var TextInputComponent2 = ({ shape, title, ...props }) => {
       value: node.valueType ?? "string",
       onValueChange: handleTypeChange
     })
-  }, /* @__PURE__ */ React22.createElement(TextBox3, {
+  }, /* @__PURE__ */ React22.createElement(TextBox4, {
     ...props,
     ref: inputRef,
     value: node.value,
@@ -1902,7 +1970,7 @@ var templateShape = {
   type: "template",
   name: "Template",
   icon: "ph--article--regular",
-  component: (props) => /* @__PURE__ */ React22.createElement(TextInputComponent2, {
+  component: (props) => /* @__PURE__ */ React22.createElement(TextInputComponent3, {
     ...props,
     placeholder: "Prompt"
   }),
@@ -1915,7 +1983,7 @@ var templateShape = {
 import React23 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT7 } from "@dxos/conductor";
 import { S as S22 } from "@dxos/echo-schema";
-import { TextBox as TextBox4 } from "@dxos/react-ui-canvas-editor";
+import { TextBox as TextBox5 } from "@dxos/react-ui-canvas-editor";
 import { createAnchorMap as createAnchorMap11 } from "@dxos/react-ui-canvas-editor";
 var TextShape = S22.extend(ComputeShape, S22.Struct({
   type: S22.Literal("text")
@@ -1940,7 +2008,7 @@ var TextComponent = ({ shape }) => {
   return /* @__PURE__ */ React23.createElement(Box, {
     shape,
     onAction: handleAction
-  }, /* @__PURE__ */ React23.createElement(TextBox4, {
+  }, /* @__PURE__ */ React23.createElement(TextBox5, {
     value
   }));
 };
@@ -1960,7 +2028,7 @@ var textShape = {
 };
 
 // packages/ui/react-ui-canvas-compute/src/shapes/Thread.tsx
-import React24, { useEffect as useEffect6, useRef as useRef5 } from "react";
+import React24, { useEffect as useEffect6, useRef as useRef6 } from "react";
 import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2, GptMessage as GptMessage2 } from "@dxos/conductor";
 import { S as S23 } from "@dxos/echo-schema";
 import { mx as mx5 } from "@dxos/react-ui-theme";
@@ -1979,7 +2047,7 @@ var createThread = (props) => createShape({
 });
 var ThreadComponent = ({ shape }) => {
   const items = [];
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef6(null);
   useEffect6(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -2058,10 +2126,11 @@ var textToImageShape = {
 
 // packages/ui/react-ui-canvas-compute/src/shapes/Trigger.tsx
 import React26, { useEffect as useEffect7 } from "react";
-import { EmailTriggerOutput, SubscriptionTriggerOutput, TimerTriggerOutput, VoidInput as VoidInput3, WebhookTriggerOutput } from "@dxos/conductor";
-import { Ref, S as S25 } from "@dxos/echo-schema";
+import { EmailTriggerOutput, SubscriptionTriggerOutput, TimerTriggerOutput, VoidInput as VoidInput3, WebhookTriggerOutput, QueueTriggerOutput } from "@dxos/conductor";
+import { ObjectId as ObjectId4, Ref, S as S25 } from "@dxos/echo-schema";
 import { FunctionTrigger, TriggerKind } from "@dxos/functions";
-import { create, makeRef } from "@dxos/react-client/echo";
+import { DXN as DXN2, SpaceId } from "@dxos/keys";
+import { create, makeRef as makeRef2 } from "@dxos/react-client/echo";
 import { Select as Select2 } from "@dxos/react-ui";
 var TriggerShape = S25.extend(ComputeShape, S25.Struct({
   type: S25.Literal("trigger"),
@@ -2074,7 +2143,7 @@ var createTrigger = (props) => {
   });
   return createShape({
     type: "trigger",
-    functionTrigger: makeRef(functionTrigger),
+    functionTrigger: makeRef2(functionTrigger),
     size: {
       width: 192,
       height: getHeight(EmailTriggerOutput)
@@ -2148,6 +2217,17 @@ var createTriggerSpec = (kind) => {
       return {
         type: TriggerKind.Email
       };
+    case TriggerKind.Queue: {
+      const dxn = new DXN2(DXN2.kind.QUEUE, [
+        "data",
+        SpaceId.random(),
+        ObjectId4.random()
+      ]).toString();
+      return {
+        type: TriggerKind.Queue,
+        queue: dxn
+      };
+    }
   }
 };
 var getOutputSchema = (kind) => {
@@ -2155,7 +2235,8 @@ var getOutputSchema = (kind) => {
     [TriggerKind.Email]: EmailTriggerOutput,
     [TriggerKind.Subscription]: SubscriptionTriggerOutput,
     [TriggerKind.Timer]: TimerTriggerOutput,
-    [TriggerKind.Webhook]: WebhookTriggerOutput
+    [TriggerKind.Webhook]: WebhookTriggerOutput,
+    [TriggerKind.Queue]: QueueTriggerOutput
   };
   return kindToSchema[kind];
 };
@@ -2171,7 +2252,10 @@ var triggerShape = {
 // packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx
 import React27, { useState as useState8 } from "react";
 import { S as S26 } from "@dxos/echo-schema";
+import { log as log2 } from "@dxos/log";
+import { useConfig } from "@dxos/react-client";
 import { Icon as Icon5 } from "@dxos/react-ui";
+var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx";
 var GptRealtimeShape = S26.extend(ComputeShape, S26.Struct({
   type: S26.Literal("gpt-realtime")
 }));
@@ -2186,6 +2270,7 @@ var createGptRealtime = (props) => createShape({
 var GptRealtimeComponent = ({ shape }) => {
   const [isLive, setIsLive] = useState8(false);
   const [isReady, setIsReady] = useState8(false);
+  const config = useConfig();
   const start = async () => {
     setIsLive(true);
     try {
@@ -2207,7 +2292,8 @@ var GptRealtimeComponent = ({ shape }) => {
       }));
       const offer = await peerConnection.createOffer();
       await peerConnection.setLocalDescription(offer);
-      const response = await fetch(`${AI_SERVICE_URL}/rtc-connect`, {
+      const aiServiceUrl = new URL("/rtc-connect", config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL);
+      const response = await fetch(aiServiceUrl, {
         method: "POST",
         body: offer.sdp,
         headers: {
@@ -2221,7 +2307,12 @@ var GptRealtimeComponent = ({ shape }) => {
       });
       const dataChannel = peerConnection.createDataChannel("response");
       const configureData = () => {
-        console.log("Configuring data channel");
+        log2.info("Configuring data channel", void 0, {
+          F: __dxlog_file7,
+          L: 87,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
         const event = {
           type: "session.update",
           session: {
@@ -2236,7 +2327,14 @@ var GptRealtimeComponent = ({ shape }) => {
         dataChannel.send(JSON.stringify(event));
       };
       dataChannel.addEventListener("open", (ev) => {
-        console.log("Opening data channel", ev);
+        log2.info("Opening data channel", {
+          ev
+        }, {
+          F: __dxlog_file7,
+          L: 100,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
         configureData();
       });
       dataChannel.addEventListener("message", async (ev) => {
@@ -2245,7 +2343,14 @@ var GptRealtimeComponent = ({ shape }) => {
         }
       });
     } catch (error) {
-      console.error("Error in realtime session:", error);
+      log2.error("Error in realtime session:", {
+        error
+      }, {
+        F: __dxlog_file7,
+        L: 140,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
       throw error;
     }
   };
@@ -2270,7 +2375,7 @@ var gptRealtimeShape = {
   }), S26.Struct({})),
   resizable: true
 };
-var AI_SERVICE_URL = "http://localhost:8788";
+var DEFAULT_AI_SERVICE_URL = "http://localhost:8788";
 
 // packages/ui/react-ui-canvas-compute/src/registry.ts
 var computeShapes = [
@@ -2377,7 +2482,6 @@ export {
   DatabaseComponent,
   DatabaseShape,
   FunctionBody,
-  FunctionComponent,
   FunctionShape,
   GptComponent,
   GptRealtimeComponent,