@dxos/react-ui-canvas-compute 0.7.5-labs.071a3e2

package/src/shapes/Boolean.tsx

@@ -0,0 +1,215 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { createAnchors, getAnchorPoints } from '@dxos/react-ui-canvas-editor';
+
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+
+//
+// Gate utils.
+// https://en.wikipedia.org/wiki/Logic_gate
+//
+
+type GateType = 'and' | 'or' | 'not';
+
+const GateShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.String,
+  }),
+);
+
+type GateShape = S.Schema.Type<typeof GateShape>;
+
+type CreateGateProps = CreateShapeProps<GateShape> & { type: GateType };
+
+const createGate = (props: CreateGateProps): GateShape =>
+  createShape<GateShape>({
+    size: { width: 64, height: 64 },
+    ...props,
+  });
+
+const GateComponent = (Symbol: FC<GateSymbolProps>) => () => {
+  return (
+    <div className='flex w-full justify-center items-center'>
+      <Symbol />
+    </div>
+  );
+};
+
+// TODO(burdon): Create custom icons.
+const defineShape = <S extends GateShape>({
+  type,
+  name,
+  icon,
+  Symbol,
+  createShape,
+  inputs,
+  outputs = [createAnchorId('output')],
+}: {
+  type: GateType;
+  Symbol: FC<GateSymbolProps>;
+  createShape: ShapeDef<S>['createShape'];
+  inputs: string[];
+  outputs?: string[];
+} & Pick<ShapeDef<GateShape>, 'name' | 'icon'>): ShapeDef<GateShape> => ({
+  type,
+  name,
+  icon,
+  component: GateComponent(Symbol),
+  createShape,
+  getAnchors: (shape) => createAnchors({ shape, inputs, outputs }),
+});
+
+//
+// Symbols
+//
+
+type PathConstructor = (props: { startX: number; endX: number; height: number }) => string[];
+
+type GateSymbolProps = {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+};
+
+// TODO(burdon): Note inputs should line up with anchors.
+const Symbol =
+  (pathConstructor: PathConstructor, inputs: number): FC<GateSymbolProps> =>
+  ({
+    width = 64,
+    height = 32,
+    // TODO(burdon): Same as line color.
+    className = 'fill-neutral-200 dark:fill-neutral-800 stroke-neutral-500',
+    strokeWidth = 1,
+  }) => {
+    const startX = width * 0.25;
+    const endX = width * 0.75;
+    const centerY = height / 2;
+    const paths = pathConstructor({ startX, endX, height });
+
+    return (
+      <svg viewBox={`0 0 ${width} ${height}`} className='w-full h-full'>
+        {/* Input line. */}
+        {getAnchorPoints({ x: 0, y: centerY }, inputs).map(({ x, y }, i) => (
+          <line key={i} x1={x} y1={y} x2={startX * 1.3} y2={y} strokeWidth={strokeWidth} className={className} />
+        ))}
+
+        {/* Output line. */}
+        <line x1={endX} y1={centerY} x2={width} y2={centerY} strokeWidth={strokeWidth} className={className} />
+
+        {/* And body. */}
+        {paths.map((path, i) => (
+          <path key={i} d={path} strokeWidth={strokeWidth} className={className} />
+        ))}
+      </svg>
+    );
+  };
+
+//
+// AND
+//
+
+const AndSymbol = Symbol(({ startX, endX, height }) => {
+  const arcRadius = (endX - startX) / 2;
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX - arcRadius},${height * 0.1}
+    A ${arcRadius},${height * 0.4} 0 0 1 ${endX - arcRadius},${height * 0.9}
+    L ${startX},${height * 0.9}
+    Z
+  `,
+  ];
+}, 2);
+
+export const AndShape = GateShape;
+export type AndShape = GateShape;
+
+export const createAnd = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
+  return createGate({ ...props, type: 'and' });
+};
+export const andShape = defineShape({
+  type: 'and',
+  name: 'AND',
+  icon: 'ph--intersection--regular',
+  Symbol: AndSymbol,
+  createShape: createAnd,
+  inputs: ['input.a', 'input.b'],
+});
+
+//
+// OR
+//
+
+// TODO(burdon): Should have sharper point.
+const OrSymbol = Symbol(({ startX, endX, height }) => {
+  const arcRadius = (endX - startX) / 2;
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX - arcRadius},${height * 0.1}
+    A ${arcRadius},${height * 0.4} 0 0 1 ${endX - arcRadius},${height * 0.9}
+    L ${startX},${height * 0.9}
+    C ${startX * 1.4},${height * 0.5} ${startX * 1.4},${height * 0.5} ${startX},${height * 0.1}
+    Z
+  `,
+  ];
+}, 2);
+
+export const OrShape = GateShape;
+export type OrShape = GateShape;
+
+export const createOr = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
+  return createGate({ ...props, type: 'or' });
+};
+export const orShape = defineShape({
+  type: 'or',
+  name: 'OR',
+  icon: 'ph--union--regular',
+  Symbol: OrSymbol,
+  createShape: createOr,
+  inputs: ['input.a', 'input.b'],
+});
+
+//
+// NOT
+//
+
+const NotSymbol = Symbol(({ startX, endX, height }) => {
+  return [
+    `
+    M ${startX},${height * 0.1}
+    L ${endX * 0.9},${height * 0.5}
+    L ${startX},${height * 0.9}
+    Z
+    `,
+    `
+    M ${endX - height * 0.2},${height * 0.5}
+    A ${height * 0.1} ${height * 0.1} 0 0 1 ${endX},${height * 0.5}
+    A ${height * 0.1} ${height * 0.1} 0 0 1 ${endX - height * 0.2},${height * 0.5}
+    Z
+  `,
+  ];
+}, 1);
+
+export const NotShape = GateShape;
+export type NotShape = GateShape;
+
+export const createNot = (props: Omit<CreateGateProps, 'type' | 'node'>) => {
+  return createGate({ ...props, type: 'not' });
+};
+export const notShape = defineShape({
+  type: 'not',
+  name: 'NOT',
+  icon: 'ph--x--regular',
+  Symbol: NotSymbol,
+  createShape: createNot,
+  inputs: [createAnchorId('input')],
+});

package/src/shapes/Chat.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useRef } from 'react';
+
+import { DEFAULT_OUTPUT } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import {
+  type ShapeComponentProps,
+  type ShapeDef,
+  TextBox,
+  type TextBoxControl,
+  type TextBoxProps,
+} 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';
+import { useComputeNodeState } from '../hooks';
+
+//
+// Data
+//
+
+export const ChatShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('chat'),
+  }),
+);
+
+export type ChatShape = S.Schema.Type<typeof ChatShape>;
+
+//
+// Component
+//
+
+export type TextInputComponentProps = ShapeComponentProps<ChatShape> & TextBoxProps & { title?: string };
+
+export const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+  const { runtime } = useComputeNodeState(shape);
+  const inputRef = useRef<TextBoxControl>(null);
+
+  const handleEnter: TextBoxProps['onEnter'] = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      runtime.setOutput(DEFAULT_OUTPUT, value);
+      inputRef.current?.setText('');
+    }
+  };
+
+  return (
+    <Box shape={shape} title={title}>
+      <TextBox ref={inputRef} onEnter={handleEnter} {...props} />
+    </Box>
+  );
+};
+
+//
+// Defs
+//
+
+export type CreateChatProps = CreateShapeProps<ChatShape>;
+
+export const createChat = (props: CreateChatProps) =>
+  createShape<ChatShape>({ type: 'chat', size: { width: 256, height: 128 }, ...props });
+
+export const chatShape: ShapeDef<ChatShape> = {
+  type: 'chat',
+  name: 'Chat',
+  icon: 'ph--textbox--regular',
+  component: (props) => <TextInputComponent {...props} title={'Prompt'} placeholder={'Message'} />,
+  createShape: createChat,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+  resizable: true,
+};

package/src/shapes/Constant.tsx

@@ -0,0 +1,125 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useRef, useState } from 'react';
+
+import { ComputeValueType } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { Input } from '@dxos/react-ui';
+import {
+  type ShapeComponentProps,
+  type ShapeDef,
+  TextBox,
+  type TextBoxControl,
+  type TextBoxProps,
+} from '@dxos/react-ui-canvas-editor';
+import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
+import { safeParseJson } from '@dxos/util';
+
+import { Box, TypeSelect } from './common';
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+//
+// Data
+//
+
+export const ConstantShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('constant'),
+    value: S.optional(S.Any),
+  }),
+);
+
+export type ConstantShape = S.Schema.Type<typeof ConstantShape>;
+
+//
+// Component
+//
+
+export type ConstantComponentProps = ShapeComponentProps<ConstantShape> &
+  TextBoxProps & { title?: string; chat?: boolean };
+
+const inferType = (value: any): string | undefined => {
+  if (typeof value === 'string') {
+    return 'string';
+  } else if (typeof value === 'number') {
+    return 'number';
+  } else if (typeof value === 'boolean') {
+    return 'boolean';
+  } else if (typeof value === 'object') {
+    return 'object';
+  }
+};
+
+export const ConstantComponent = ({ shape, title, chat, ...props }: ConstantComponentProps) => {
+  const { node } = useComputeNodeState(shape);
+  const [type, setType] = useState(inferType(node.value) ?? ComputeValueType.literals[0]);
+  const inputRef = useRef<TextBoxControl>(null);
+
+  const handleEnter = useCallback<NonNullable<TextBoxProps['onEnter']>>(
+    (text) => {
+      const value = text.trim();
+      if (value.length) {
+        // TODO(burdon): Set text filter.
+        if (type === 'number') {
+          const floatValue = parseFloat(value);
+          if (!isNaN(floatValue)) {
+            node.value = floatValue;
+          }
+        } else if (type === 'object') {
+          node.value = safeParseJson(value, {});
+        } else {
+          node.value = value;
+        }
+
+        inputRef.current?.focus();
+      }
+    },
+    [type],
+  );
+
+  return (
+    <Box shape={shape} title={title} status={<TypeSelect value={type} onValueChange={setType} />}>
+      {(type === 'string' || type === 'number') && (
+        <TextBox {...props} ref={inputRef} value={node.value} onEnter={handleEnter} />
+      )}
+      {type === 'object' && (
+        <TextBox {...props} ref={inputRef} value={JSON.stringify(node.value, null, 2)} language={'json'} />
+      )}
+      {type === 'boolean' && (
+        <div className='flex grow justify-center items-center'>
+          <Input.Root>
+            <Input.Switch
+              checked={node.value}
+              onCheckedChange={(value) => {
+                node.value = value;
+              }}
+            />
+          </Input.Root>
+        </div>
+      )}
+    </Box>
+  );
+};
+
+//
+// Defs
+//
+
+export type CreateConstantProps = CreateShapeProps<ConstantShape>;
+
+export const createConstant = (props: CreateConstantProps) =>
+  createShape<ConstantShape>({ type: 'constant', size: { width: 192, height: 128 }, ...props });
+
+export const constantShape: ShapeDef<ConstantShape> = {
+  type: 'constant',
+  name: 'Value',
+  icon: 'ph--dots-three-circle--regular',
+  component: (props) => <ConstantComponent {...props} placeholder={'Constant'} />,
+  createShape: createConstant,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+  resizable: true,
+};

package/src/shapes/Database.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 DatabaseShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('database'),
+  }),
+);
+
+export type DatabaseShape = S.Schema.Type<typeof DatabaseShape>;
+
+export type CreateDatabaseProps = CreateShapeProps<DatabaseShape>;
+
+export const createDatabase = (props: CreateDatabaseProps) =>
+  createShape<DatabaseShape>({ type: 'database', size: { width: 128, height: 64 }, ...props });
+
+export const DatabaseComponent = ({ shape }: ShapeComponentProps<DatabaseShape>) => {
+  return <Box shape={shape} />;
+};
+
+export const databaseShape: ShapeDef<DatabaseShape> = {
+  type: 'database',
+  name: 'ECHO',
+  icon: 'ph--database--regular',
+  component: DatabaseComponent,
+  createShape: createDatabase,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+};

package/src/shapes/Function.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { AnyOutput, FunctionInput } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+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 FunctionShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('function'),
+  }),
+);
+
+export type FunctionShape = S.Schema.Type<typeof FunctionShape>;
+
+export type CreateFunctionProps = CreateShapeProps<FunctionShape>;
+
+export const createFunction = (props: CreateFunctionProps) =>
+  createShape<FunctionShape>({ type: 'function', size: { width: 192, height: getHeight(FunctionInput) }, ...props });
+
+export const FunctionComponent = ({ shape }: ShapeComponentProps<FunctionShape>) => {
+  return <FunctionBody shape={shape} inputSchema={FunctionInput} outputSchema={AnyOutput} />;
+};
+
+export const functionShape: ShapeDef<FunctionShape> = {
+  type: 'function',
+  name: 'Function',
+  icon: 'ph--function--regular',
+  component: FunctionComponent,
+  createShape: createFunction,
+  // TODO(burdon): Get dynamic schema.
+  getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput),
+};

package/src/shapes/Gpt.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import type { GenerationStreamEvent } from '@dxos/assistant';
+import { GptInput, GptOutput } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, FunctionBody, getHeight } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+export const GptShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('gpt'),
+  }),
+);
+
+export type GptShape = S.Schema.Type<typeof GptShape>;
+
+export type CreateGptProps = CreateShapeProps<GptShape>;
+
+export const createGpt = (props: CreateGptProps) =>
+  createShape<GptShape>({
+    type: 'gpt',
+    size: { width: 256, height: Math.max(getHeight(GptInput), getHeight(GptOutput)) },
+    ...props,
+  });
+
+export const GptComponent = ({ shape }: ShapeComponentProps<GptShape>) => {
+  const { meta, runtime } = useComputeNodeState(shape);
+  const [text, setText] = useState('');
+  const [tokens, setTokens] = useState(0);
+
+  useEffect(() => {
+    return runtime.subscribeToEventLog((ev) => {
+      switch (ev.type) {
+        case 'begin-compute': {
+          setText('');
+          break;
+        }
+        case 'custom': {
+          const token: GenerationStreamEvent = ev.event;
+          switch (token.type) {
+            case 'content_block_delta':
+              switch (token.delta.type) {
+                case 'text_delta': {
+                  const delta = token.delta.text;
+                  setText((prev) => {
+                    const text = prev + delta;
+                    // TODO(burdon): Get token count.
+                    setTokens(text.split(' ').length);
+                    return text;
+                  });
+                  break;
+                }
+              }
+              break;
+
+            // TODO(dmaretskyi): Handle other types of events.
+          }
+          break;
+        }
+      }
+    });
+  }, [runtime?.subscribeToEventLog]);
+
+  return (
+    <FunctionBody
+      shape={shape}
+      content={<div className='px-2 py-1 overflow-y-scroll'>{text}</div>}
+      status={`${tokens} tokens`}
+      inputSchema={meta.input}
+      outputSchema={meta.output}
+    />
+  );
+};
+
+export const gptShape: ShapeDef<GptShape> = {
+  type: 'gpt',
+  name: 'GPT',
+  icon: 'ph--brain--regular',
+  component: GptComponent,
+  createShape: createGpt,
+  getAnchors: (shape) => createFunctionAnchors(shape, GptInput, GptOutput),
+  openable: true,
+};