@dxos/react-ui-canvas-compute 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/index.mjs

@@ -644,7 +644,7 @@ var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
   invariant4(shape.type, void 0, {
     F: __dxlog_file5,
-    L: 30,
+    L: 29,
     S: void 0,
     A: [
       "shape.type",
@@ -1435,6 +1435,7 @@ var functionShape = {
 import * as Schema12 from "effect/Schema";
 import React13, { useEffect as useEffect4, useState as useState6 } from "react";
 import { GptInput, GptOutput } from "@dxos/conductor";
+import { ScrollArea } from "@dxos/react-ui";
 var GptShape = Schema12.extend(ComputeShape, Schema12.Struct({
   type: Schema12.Literal("gpt")
 }));
@@ -1483,9 +1484,10 @@ var GptComponent = ({ shape }) => {
   ]);
   return /* @__PURE__ */ React13.createElement(FunctionBody, {
     shape,
-    content: /* @__PURE__ */ React13.createElement("div", {
-      className: "pli-2 plb-1 overflow-y-auto"
-    }, text),
+    content: /* @__PURE__ */ React13.createElement(ScrollArea.Root, {
+      orientation: "vertical",
+      thin: true
+    }, /* @__PURE__ */ React13.createElement(ScrollArea.Viewport, null, text)),
     status: `${tokens} tokens`,
     inputSchema: meta.input,
     outputSchema: meta.output
@@ -1634,6 +1636,7 @@ var ifElseShape = {
 import * as Schema15 from "effect/Schema";
 import React16, { Fragment } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
+import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
 var QueueShape = Schema15.extend(ComputeShape, Schema15.Struct({
   type: Schema15.Literal("queue")
@@ -1658,15 +1661,17 @@ var QueueComponent = ({ shape }) => {
     shape,
     status: `${items.length} items`,
     onAction: handleAction
-  }, /* @__PURE__ */ React16.createElement("div", {
-    className: "flex flex-col is-full overflow-y-auto divide-y divide-separator"
+  }, /* @__PURE__ */ React16.createElement(ScrollArea2.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React16.createElement(ScrollArea2.Viewport, {
+    classNames: "divide-y divide-separator"
   }, [
     ...items
   ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
     key: i,
     classNames: "p-1 pli-2",
     item
-  }))));
+  })))));
 };
 var QueueItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
@@ -1818,7 +1823,7 @@ var scopeShape = {
 // src/shapes/Surface.tsx
 import * as Schema18 from "effect/Schema";
 import React19 from "react";
-import { Surface } from "@dxos/app-framework/react";
+import { Surface } from "@dxos/app-framework/ui";
 import { DEFAULT_INPUT as DEFAULT_INPUT6 } from "@dxos/conductor";
 import { createAnchorMap as createAnchorMap9 } from "@dxos/react-ui-canvas-editor";
 var SurfaceShape = Schema18.extend(ComputeShape, Schema18.Struct({
@@ -1844,7 +1849,7 @@ var SurfaceComponent = ({ shape }) => {
   return /* @__PURE__ */ React19.createElement(Box, {
     shape,
     onAction: handleAction
-  }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
+  }, value !== null && /* @__PURE__ */ React19.createElement(Surface.Surface, {
     role: "card--extrinsic",
     data: {
       value
@@ -2072,6 +2077,7 @@ var textShape = {
 import * as Schema23 from "effect/Schema";
 import React24, { useEffect as useEffect7, useRef as useRef6 } from "react";
 import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2 } from "@dxos/conductor";
+import { ScrollArea as ScrollArea3 } from "@dxos/react-ui";
 import { Message as Message2 } from "@dxos/types";
 import { mx as mx3 } from "@dxos/ui-theme";
 var InputSchema2 = createInputSchema2(Message2.Message);
@@ -2099,19 +2105,22 @@ var ThreadComponent = ({ shape }) => {
   ]);
   return /* @__PURE__ */ React24.createElement(Box, {
     shape
-  }, /* @__PURE__ */ React24.createElement("div", {
-    ref: scrollRef,
-    className: "flex flex-col is-full overflow-y-auto gap-2 p-2"
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Viewport, {
+    classNames: "gap-2 p-2",
+    ref: scrollRef
   }, [
     ...items
   ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
     key: i,
     item
-  }))));
+  })))));
 };
 var ThreadItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
     return /* @__PURE__ */ React24.createElement("div", {
+      role: "none",
       className: mx3(classNames)
     }, item);
   }