@dxos/react-ui-canvas-compute 0.7.5-labs.5f04cf6

package/src/shapes/Table.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { createInputSchema, createOutputSchema, GptMessage } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, Box } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+
+const InputSchema = createInputSchema(GptMessage);
+const OutputSchema = createOutputSchema(S.mutable(S.Array(GptMessage)));
+
+export const TableShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('table'),
+  }),
+);
+
+export type TableShape = S.Schema.Type<typeof TableShape>;
+
+export type CreateTableProps = CreateShapeProps<TableShape>;
+
+export const createTable = (props: CreateTableProps) =>
+  createShape<TableShape>({ type: 'table', size: { width: 320, height: 512 }, ...props });
+
+export const TableComponent = ({ shape }: ShapeComponentProps<TableShape>) => {
+  // const items = shape.node.items.value;
+
+  return <Box shape={shape}></Box>;
+};
+
+export const tableShape: ShapeDef<TableShape> = {
+  type: 'table',
+  name: 'Table',
+  icon: 'ph--table--regular',
+  component: TableComponent,
+  createShape: createTable,
+  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+  resizable: true,
+};

package/src/shapes/Template.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useRef } from 'react';
+
+import { ComputeValueType, getTemplateInputSchema, TemplateOutput, VoidInput } from '@dxos/conductor';
+import { S, toJsonSchema } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import {
+  type ShapeComponentProps,
+  type ShapeDef,
+  TextBox,
+  type TextBoxControl,
+  type TextBoxProps,
+} from '@dxos/react-ui-canvas-editor';
+
+import { Box, createFunctionAnchors, TypeSelect } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+//
+// Data
+//
+
+export const TemplateShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('template'),
+    valueType: S.optional(ComputeValueType),
+  }),
+);
+
+export type TemplateShape = S.Schema.Type<typeof TemplateShape>;
+
+//
+// Component
+//
+
+type TextInputComponentProps = ShapeComponentProps<TemplateShape> & TextBoxProps & { title?: string };
+
+const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+  const { node } = useComputeNodeState(shape);
+  const inputRef = useRef<TextBoxControl>(null);
+
+  const handleEnter: TextBoxProps['onEnter'] = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      const schema = getTemplateInputSchema(node);
+
+      node.value = value;
+      node.inputSchema = toJsonSchema(schema);
+    }
+  };
+
+  const handleTypeChange = (newType: string) => {
+    invariant(S.is(ComputeValueType)(newType), 'Invalid type');
+
+    node.valueType = newType;
+    node.inputSchema = toJsonSchema(getTemplateInputSchema(node));
+  };
+
+  return (
+    <Box
+      shape={shape}
+      title={'Template'}
+      status={<TypeSelect value={node.valueType ?? 'string'} onValueChange={handleTypeChange} />}
+    >
+      <TextBox
+        {...props}
+        ref={inputRef}
+        value={node.value}
+        language={node.valueType === 'object' ? 'json' : undefined}
+        onBlur={handleEnter}
+        onEnter={handleEnter}
+      />
+    </Box>
+  );
+};
+
+//
+// Defs
+//
+
+export type CreateTemplateProps = CreateShapeProps<TemplateShape> & { text?: string };
+
+export const createTemplate = (props: CreateTemplateProps) =>
+  createShape<TemplateShape>({ type: 'template', size: { width: 256, height: 384 }, ...props });
+
+export const templateShape: ShapeDef<TemplateShape> = {
+  type: 'template',
+  name: 'Template',
+  icon: 'ph--article--regular',
+  component: (props) => <TextInputComponent {...props} placeholder={'Prompt'} />,
+  createShape: createTemplate,
+  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput, TemplateOutput),
+  resizable: true,
+};

package/src/shapes/Text.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { DEFAULT_INPUT } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { TextBox, type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { Box, type BoxActionHandler } from './common';
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+export const TextShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('text'),
+  }),
+);
+
+export type TextShape = S.Schema.Type<typeof TextShape>;
+
+export type CreateTextProps = CreateShapeProps<TextShape>;
+
+export const createText = (props: CreateTextProps) =>
+  createShape<TextShape>({ type: 'text', size: { width: 384, height: 384 }, ...props });
+
+export const TextComponent = ({ shape }: ShapeComponentProps<TextShape>) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT];
+  const value = input?.type === 'executed' ? input.value : 0;
+
+  const handleAction: BoxActionHandler = (action) => {
+    if (action === 'run') {
+      runtime.evalNode();
+    }
+  };
+
+  return (
+    <Box shape={shape} onAction={handleAction}>
+      <TextBox value={value} />
+    </Box>
+  );
+};
+
+export const textShape: ShapeDef<TextShape> = {
+  type: 'text',
+  name: 'Text',
+  icon: 'ph--article--regular',
+  component: TextComponent,
+  createShape: createText,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('input')]: { x: -1, y: 0 } }),
+  resizable: true,
+};

package/src/shapes/TextToImage.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+
+import { Box } from './common';
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+
+export const TextToImageShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('text-to-image'),
+  }),
+);
+
+export type TextToImageShape = S.Schema.Type<typeof TextToImageShape>;
+
+export type CreateTextToImageProps = CreateShapeProps<TextToImageShape>;
+
+export const createTextToImage = (props: CreateTextToImageProps) =>
+  createShape<TextToImageShape>({ type: 'text-to-image', size: { width: 128, height: 64 }, ...props });
+
+export const TextToImageComponent = ({ shape }: ShapeComponentProps<TextToImageShape>) => {
+  return <Box shape={shape} />;
+};
+
+export const textToImageShape: ShapeDef<TextToImageShape> = {
+  type: 'text-to-image',
+  name: 'Image',
+  icon: 'ph--image--regular',
+  component: TextToImageComponent,
+  createShape: createTextToImage,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+};

package/src/shapes/Thread.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useRef } from 'react';
+
+import { createInputSchema, createOutputSchema, GptMessage } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { createFunctionAnchors, Box } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+
+const InputSchema = createInputSchema(GptMessage);
+const OutputSchema = createOutputSchema(S.mutable(S.Array(GptMessage)));
+
+export const ThreadShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('thread'),
+  }),
+);
+
+export type ThreadShape = S.Schema.Type<typeof ThreadShape>;
+
+export type CreateThreadProps = CreateShapeProps<ThreadShape>;
+
+export const createThread = (props: CreateThreadProps) =>
+  createShape<ThreadShape>({ type: 'thread', size: { width: 384, height: 384 }, ...props });
+
+export const ThreadComponent = ({ shape }: ShapeComponentProps<ThreadShape>) => {
+  const items: any[] = [];
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [items]);
+
+  return (
+    <Box shape={shape}>
+      <div ref={scrollRef} className='flex flex-col w-full overflow-y-scroll gap-2 p-2'>
+        {[...items].map((item, i) => (
+          <ThreadItem key={i} item={item} />
+        ))}
+      </div>
+    </Box>
+  );
+};
+
+export const ThreadItem = ({ classNames, item }: ThemedClassName<{ item: any }>) => {
+  if (typeof item !== 'object') {
+    return <div className={mx(classNames)}>{item}</div>;
+  }
+
+  // TODO(burdon): Hack; introspect type.
+  // TODO(burdon): Markdown parser.
+  const { role, message } = item;
+  return (
+    <div className={mx('flex', classNames, role === 'user' && 'justify-end')}>
+      <div
+        className={mx(
+          'block rounded-md p-1 px-2 text-sm',
+          role === 'user'
+            ? 'bg-blue-100 dark:bg-blue-800'
+            : role === 'system'
+              ? 'bg-red-100, dark:bg-red-800'
+              : 'whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800',
+        )}
+      >
+        {message}
+      </div>
+    </div>
+  );
+};
+
+export const threadShape: ShapeDef<ThreadShape> = {
+  type: 'thread',
+  name: 'Thread',
+  icon: 'ph--chats-circle--regular',
+  component: ThreadComponent,
+  createShape: createThread,
+  getAnchors: (shape) => createFunctionAnchors(shape, InputSchema, OutputSchema),
+  resizable: true,
+};

package/src/shapes/Trigger.tsx

@@ -0,0 +1,152 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect } from 'react';
+
+import {
+  EmailTriggerOutput,
+  SubscriptionTriggerOutput,
+  TimerTriggerOutput,
+  VoidInput,
+  WebhookTriggerOutput,
+} from '@dxos/conductor';
+import { Ref, S } from '@dxos/echo-schema';
+import {
+  type EmailTrigger,
+  FunctionTrigger,
+  type SubscriptionTrigger,
+  type TimerTrigger,
+  TriggerKind,
+  type TriggerType,
+  type WebhookTrigger,
+} from '@dxos/functions';
+import { create, makeRef } from '@dxos/react-client/echo';
+import { Select, type SelectRootProps } from '@dxos/react-ui';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, FunctionBody, getHeight } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+
+export const TriggerShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('trigger'),
+    functionTrigger: S.optional(Ref(FunctionTrigger)),
+  }),
+);
+export type TriggerShape = S.Schema.Type<typeof TriggerShape>;
+
+export type CreateTriggerProps = CreateShapeProps<Omit<TriggerShape, 'functionTrigger'>> & {
+  triggerKind?: TriggerKind;
+};
+
+export const createTrigger = (props: CreateTriggerProps): TriggerShape => {
+  const functionTrigger = create(FunctionTrigger, {
+    enabled: true,
+    spec: createTriggerSpec(props.triggerKind ?? TriggerKind.Email),
+  });
+  return createShape<TriggerShape>({
+    type: 'trigger',
+    functionTrigger: makeRef(functionTrigger),
+    size: { width: 192, height: getHeight(EmailTriggerOutput) },
+    ...props,
+  });
+};
+
+export type TriggerComponentProps = ShapeComponentProps<TriggerShape>;
+
+export const TriggerComponent = ({ shape }: TriggerComponentProps) => {
+  const functionTrigger = shape.functionTrigger?.target;
+
+  useEffect(() => {
+    if (functionTrigger && !functionTrigger.spec) {
+      functionTrigger.spec = createTriggerSpec(TriggerKind.Email);
+    }
+  }, [functionTrigger, functionTrigger?.spec]);
+
+  useEffect(() => {
+    shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.type ?? TriggerKind.Email));
+  }, [functionTrigger?.spec?.type]);
+
+  const setKind = (kind: TriggerKind) => {
+    if (functionTrigger?.spec?.type !== kind) {
+      functionTrigger!.spec = createTriggerSpec(kind);
+    }
+  };
+
+  if (!functionTrigger?.spec) {
+    return;
+  }
+
+  return (
+    <FunctionBody
+      shape={shape}
+      status={
+        <TriggerKindSelect value={functionTrigger.spec?.type} onValueChange={(kind) => setKind(kind as TriggerKind)} />
+      }
+      inputSchema={VoidInput}
+      outputSchema={getOutputSchema(functionTrigger.spec!.type!)}
+    />
+  );
+};
+
+// TODO(burdon): Factor out.
+const TriggerKindSelect = ({ value, onValueChange }: Pick<SelectRootProps, 'value' | 'onValueChange'>) => {
+  return (
+    <Select.Root value={value} onValueChange={onValueChange}>
+      <Select.TriggerButton variant='ghost' classNames='w-full !px-0' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {Object.values(TriggerKind).map((type) => (
+              <Select.Option key={type} value={type}>
+                {type}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+const createTriggerSpec = (kind: TriggerKind): TriggerType => {
+  switch (kind) {
+    case TriggerKind.Timer:
+      return { type: TriggerKind.Timer, cron: '0 0 * * *' } satisfies TimerTrigger;
+    case TriggerKind.Webhook:
+      return { type: TriggerKind.Webhook, method: 'POST' } satisfies WebhookTrigger;
+    case TriggerKind.Subscription:
+      return { type: TriggerKind.Subscription, filter: {} } satisfies SubscriptionTrigger;
+    case TriggerKind.Email:
+      return { type: TriggerKind.Email } satisfies EmailTrigger;
+  }
+};
+
+const getOutputSchema = (kind: TriggerKind) => {
+  const kindToSchema: Record<TriggerKind, S.Schema<any>> = {
+    [TriggerKind.Email]: EmailTriggerOutput,
+    [TriggerKind.Subscription]: SubscriptionTriggerOutput,
+    [TriggerKind.Timer]: TimerTriggerOutput,
+    [TriggerKind.Webhook]: WebhookTriggerOutput,
+  };
+  return kindToSchema[kind];
+};
+
+export const triggerShape: ShapeDef<TriggerShape> = {
+  type: 'trigger',
+  name: 'Trigger',
+  icon: 'ph--lightning--regular',
+  component: TriggerComponent,
+  createShape: createTrigger,
+  getAnchors: (shape) =>
+    createFunctionAnchors(
+      shape,
+      VoidInput,
+      getOutputSchema(shape.functionTrigger?.target?.spec?.type ?? TriggerKind.Email),
+    ),
+};

package/src/shapes/common/Box.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, type PropsWithChildren, type ReactNode } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
+import { useEditorContext, useShapeDef } from '@dxos/react-ui-canvas-editor';
+import { type Shape } from '@dxos/react-ui-canvas-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+export const headerHeight = 32;
+export const footerHeight = 32;
+
+export type BoxActionHandler = (action: 'run' | 'open' | 'close') => void;
+
+export type BoxProps = PropsWithChildren<
+  ThemedClassName<{
+    shape: Shape;
+    title?: string;
+    status?: string | ReactNode;
+    open?: boolean;
+    onAction?: BoxActionHandler;
+  }>
+>;
+
+export const Box = forwardRef<HTMLDivElement, BoxProps>(
+  ({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
+    invariant(shape.type);
+    const { icon, name, openable } = useShapeDef(shape.type) ?? { icon: 'ph--placeholder--regular' };
+    const { debug } = useEditorContext();
+
+    return (
+      <div ref={forwardedRef} className='flex flex-col h-full w-full justify-between'>
+        <div className='flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface'>
+          <Icon icon={icon} classNames='mx-2' />
+          <div className='grow text-sm truncate'>{debug ? shape.type : name ?? shape.text ?? title}</div>
+          <IconButton
+            classNames='p-1 text-green-500'
+            variant='ghost'
+            icon='ph--play--regular'
+            size={4}
+            label='run'
+            iconOnly
+            onDoubleClick={(ev) => ev.stopPropagation()}
+            onClick={(ev) => {
+              ev.stopPropagation();
+              onAction?.('run');
+            }}
+          />
+        </div>
+        <div className={mx('flex flex-col h-full grow overflow-hidden', classNames)}>{children}</div>
+        <div className='flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface'>
+          <div className='grow px-2 text-sm truncate'>{debug ? shape.id : status}</div>
+          {openable && (
+            <IconButton
+              classNames='p-1'
+              variant='ghost'
+              icon={open ? 'ph--caret-up--regular' : 'ph--caret-down--regular'}
+              size={4}
+              label={open ? 'close' : 'open'}
+              iconOnly
+              onClick={(ev) => {
+                ev.stopPropagation();
+                onAction?.(open ? 'close' : 'open');
+              }}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/shapes/common/FunctionBody.tsx

@@ -0,0 +1,122 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type JSX, useRef, useState } from 'react';
+
+import { VoidInput, VoidOutput } from '@dxos/conductor';
+import { AST, type S } from '@dxos/echo-schema';
+import { useCanvasContext } from '@dxos/react-ui-canvas';
+import { type Polygon, type Shape } from '@dxos/react-ui-canvas-editor';
+import { getParentShapeElement, createAnchors, rowHeight } from '@dxos/react-ui-canvas-editor';
+
+import { Box, type BoxProps, footerHeight, headerHeight } from '../common';
+import { createAnchorId, getProperties } from '../defs';
+
+const bodyPadding = 8;
+const expandedHeight = 200;
+
+export type FunctionBodyProps = {
+  shape: Shape;
+  name?: string;
+  content?: JSX.Element;
+  inputSchema?: S.Schema.Any;
+  outputSchema?: S.Schema.Any;
+} & Pick<BoxProps, 'status'>;
+
+export const FunctionBody = ({
+  shape,
+  name,
+  content,
+  inputSchema = VoidInput,
+  outputSchema = VoidOutput,
+  ...props
+}: FunctionBodyProps) => {
+  const { scale } = useCanvasContext();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleAction: BoxProps['onAction'] = (action) => {
+    if (!rootRef.current) {
+      return;
+    }
+
+    switch (action) {
+      case 'open': {
+        const el = getParentShapeElement(rootRef.current, shape.id)!;
+        const { height } = el.getBoundingClientRect();
+        el.style.height = `${height / scale + expandedHeight}px`;
+        setOpen(true);
+        break;
+      }
+      case 'close': {
+        const el = getParentShapeElement(rootRef.current, shape.id)!;
+        el.style.height = '';
+        setOpen(false);
+        break;
+      }
+    }
+  };
+
+  // TODO(burdon): Move labels to anchor?
+  const inputs = getProperties(inputSchema.ast);
+  const outputs = getProperties(outputSchema.ast);
+  const columnCount = inputs.length && outputs.length ? 2 : 1;
+
+  return (
+    <Box
+      ref={rootRef}
+      shape={shape}
+      title={name}
+      classNames='divide-y divide-separator'
+      open={open}
+      onAction={handleAction}
+      {...props}
+    >
+      <div
+        className={`grid grid-cols-${columnCount} items-center`}
+        style={{ paddingTop: bodyPadding, paddingBottom: bodyPadding }}
+      >
+        {(inputs?.length ?? 0) > 0 && (
+          <div className='flex flex-col'>
+            {inputs?.map(({ name }) => (
+              <div key={name} className='px-2 truncate text-sm font-mono items-center' style={{ height: rowHeight }}>
+                {name}
+              </div>
+            ))}
+          </div>
+        )}
+        {(outputs?.length ?? 0) > 0 && (
+          <div className='flex flex-col'>
+            {outputs?.map(({ name }) => (
+              <div
+                key={name}
+                className='px-2 truncate text-sm font-mono items-center text-right'
+                style={{ height: rowHeight }}
+              >
+                {name}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {open && <div className='flex flex-col grow overflow-hidden'>{content}</div>}
+    </Box>
+  );
+};
+
+export const getHeight = (input: S.Schema<any>) => {
+  const properties = AST.getPropertySignatures(input.ast);
+  return headerHeight + footerHeight + bodyPadding * 2 + properties.length * rowHeight + 2; // Incl. borders.
+};
+
+export const createFunctionAnchors = (
+  shape: Polygon,
+  input: S.Schema<any> = VoidInput,
+  output: S.Schema<any> = VoidOutput,
+) => {
+  // TODO(burdon): Set type.
+  const inputs = AST.getPropertySignatures(input.ast).map(({ name }) => createAnchorId('input', name.toString()));
+  const outputs = AST.getPropertySignatures(output.ast).map(({ name }) => createAnchorId('output', name.toString()));
+  return createAnchors({ shape, inputs, outputs, center: { x: 0, y: (headerHeight - footerHeight) / 2 + 1 } });
+};