@dxos/plugin-script 0.6.12-main.5cc132e → 0.6.12-main.c974201

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,180 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import {
+  DensityProvider,
+  ElevationProvider,
+  Icon,
+  Select,
+  type ThemedClassName,
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToolbarButtonProps,
+  Toolbar as NaturalToolbar,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+import { type Template } from '../../templates';
+
+export type ToolbarProps = ThemedClassName<
+  {
+    deployed?: boolean;
+    error?: string;
+    functionUrl?: string;
+    onDeploy?: () => Promise<void>;
+    onFormat?: () => Promise<void>;
+  } & TemplateSelectProps &
+    ViewSelectorProps
+>;
+
+export const Toolbar = ({
+  classNames,
+  deployed,
+  error,
+  functionUrl,
+  view,
+  templates,
+  onDeploy,
+  onFormat,
+  onViewChange,
+  onTemplateSelect,
+}: ToolbarProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const [pending, setPending] = useState(false);
+
+  const handleCopyLink = async () => {
+    if (!functionUrl) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(functionUrl);
+  };
+
+  const handleDeploy = async () => {
+    if (!pending) {
+      setPending(true);
+      await onDeploy?.();
+      setPending(false);
+    }
+  };
+
+  // TODO(burdon): Factor out common toolbar components with sheet/editor?
+  return (
+    <DensityProvider density='fine'>
+      <ElevationProvider elevation='chrome'>
+        <NaturalToolbar.Root classNames={['p-1', classNames]} style={{ contain: 'layout' }}>
+          {templates && <TemplateSelect templates={templates} onTemplateSelect={onTemplateSelect} />}
+          {onFormat && <ToolbarIconButton icon='ph--magic-wand--regular' text={t('format label')} onClick={onFormat} />}
+
+          <div role='separator' className='grow' />
+
+          {error ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                <Icon icon='ph--warning-circle--regular' size={4} />
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content>
+                  <Tooltip.Arrow />
+                  {error}
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          ) : null}
+
+          {functionUrl && deployed && (
+            <ToolbarIconButton icon='ph--link--regular' text={t('copy link label')} onClick={handleCopyLink} />
+          )}
+
+          {onDeploy && (
+            <ToolbarIconButton
+              icon={pending ? 'ph--spinner-gap--regular' : 'ph--cloud-arrow-up--regular'}
+              classNames={[pending && 'animate-spin']}
+              text={pending ? t('pending label') : t('deploy label')}
+              onClick={handleDeploy}
+            />
+          )}
+
+          <ViewSelector view={view} onViewChange={onViewChange} />
+        </NaturalToolbar.Root>
+      </ElevationProvider>
+    </DensityProvider>
+  );
+};
+
+const ToolbarIconButton = ({
+  icon,
+  text,
+  classNames,
+  disabled,
+  onClick,
+}: { icon: string; text: string } & Pick<ToolbarButtonProps, 'classNames' | 'disabled' | 'onClick'>) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' disabled={disabled} onClick={onClick}>
+          <Icon icon={icon} size={4} classNames={classNames} />
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content>
+          <Tooltip.Arrow />
+          {text}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+export type ViewType = 'editor' | 'split' | 'preview';
+
+export type TemplateSelectProps = {
+  templates?: Template[];
+  onTemplateSelect?: (id: string) => void;
+};
+
+export const TemplateSelect = ({ templates = [], onTemplateSelect }: TemplateSelectProps) => {
+  return (
+    <Select.Root value={''} onValueChange={onTemplateSelect}>
+      <Select.TriggerButton />
+      <Select.Portal>
+        <Select.Content>
+          <Select.Viewport>
+            <Select.Option value={''}>Template</Select.Option>
+            {templates.map(({ id, name }) => (
+              <Select.Option key={id} value={id}>
+                {name}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+export type ViewSelectorProps = {
+  view?: ViewType;
+  onViewChange?: (view: ViewType) => void;
+};
+
+export const ViewSelector = ({ view, onViewChange }: ViewSelectorProps) => {
+  return (
+    <ToggleGroup type='single' value={view} onValueChange={(value) => onViewChange?.(value as ViewType)}>
+      <ToggleGroupItem value='editor' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--code--regular' size={4} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='split' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--square-split-vertical--regular' size={4} />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='preview' classNames='bg-transparent text-subdued'>
+        <Icon icon='ph--eye--regular' size={4} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};

package/src/components/{ScriptBlock/Splitter → Toolbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Splitter';
+export * from './Toolbar';

package/src/components/{TypescriptEditor.stories.tsx → TypescriptEditor/TypescriptEditor.stories.tsx}

@@ -10,45 +10,24 @@ import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { createDataExtensions } from '@dxos/react-ui-editor';
 
 import { TypescriptEditor } from './TypescriptEditor';
+import { templates } from '../../templates';
 
-// TODO(burdon): Typescript.
-// TODO(burdon): Effect schema.
-// TODO(burdon): JSX.
-// TODO(burdon): react-buddy for storybook?
-
-// Marijn
+// TODO(burdon): Features:
 // - language support for S
 // - hierarchical editor (DND)
 // - virtual document image rendering
 // - mobile rendering error
 
-const examples: string[] = [
-  [
-    '// Example function.',
-    'export default function() {',
-    '  const value = 100',
-    '  return <div>{value}</div>;',
-    '}',
-  ].join('\n'),
-  [
-    '// Example schema.',
-    'S.Struct({',
-    '  timestamp: S.Date,',
-    '  title: S.String,',
-    '  content: R.Text,',
-    "}).pipe(S.identifier('dxos.org/schema/Test'))",
-    '',
-  ].join('\n'),
-];
+// TODO(burdon): JSX.
+// TODO(burdon): Effect schema.
+// TODO(burdon): react-buddy for storybook?
 
 const Story = () => {
-  const object = useMemo(() => createEchoObject({ content: examples[0] }), []);
+  const object = useMemo(() => createEchoObject({ content: templates[0].source }), []);
   const initialValue = useMemo(() => object.content, [object]);
   const accessor = useMemo(() => createDocAccessor(object, ['content']), [object]);
   const extensions = useMemo(() => [createDataExtensions({ id: object.id, text: accessor })], [object.id, accessor]);
-
-  // TODO(wittjosiah): Scroll past end breaks the editor.
-  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} scrollPastEnd={false} />;
+  return <TypescriptEditor id='test' initialValue={initialValue} extensions={extensions} />;
 };
 
 export default {

package/src/components/{TypescriptEditor.tsx → TypescriptEditor/TypescriptEditor.tsx}

@@ -23,13 +23,11 @@ import { nonNullable } from '@dxos/util';
 
 export type TypescriptEditorProps = {
   id: string;
-  scrollPastEnd?: boolean;
   env?: VirtualTypeScriptEnvironment;
 } & Pick<UseTextEditorProps, 'className' | 'initialValue' | 'extensions' | 'scrollTo' | 'selection'>;
 
 export const TypescriptEditor = ({
   id,
-  scrollPastEnd,
   env,
   className,
   initialValue,
@@ -49,7 +47,7 @@ export const TypescriptEditor = ({
           indentWithTab: true,
           lineNumbers: true,
           lineWrapping: false,
-          scrollPastEnd,
+          scrollPastEnd: true,
         }),
         createThemeExtensions({
           themeMode,

package/src/components/TypescriptEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './TypescriptEditor';

package/src/components/index.ts

@@ -4,5 +4,6 @@
 
 import React from 'react';
 
-export const ScriptEditor = React.lazy(() => import('./ScriptEditor'));
-export const TypescriptEditor = React.lazy(() => import('./TypescriptEditor'));
+export * from './ScriptSettings';
+
+export const ScriptContainer = React.lazy(() => import('./ScriptContainer'));

package/src/edge/functions.ts

@@ -17,6 +17,7 @@ import { matchServiceCredential } from './hub-protocol';
 
 // TODO: use URL scheme for source?
 const USERFUNCTIONS_META_KEY = 'dxos.org/service/function';
+export const USERFUNCTIONS_PRESET_META_KEY = 'dxos.org/service/function-preset';
 const USERFUNCTIONS_CREDENTIAL_CAPABILITY = 'composer:beta';
 
 // TODO: Synchronize API types with server

package/src/meta.tsx

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Code, type IconProps } from '@phosphor-icons/react';
-import React from 'react';
-
 import { pluginMeta } from '@dxos/app-framework';
 
 export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
@@ -12,8 +9,7 @@ export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
 export default pluginMeta({
   id: SCRIPT_PLUGIN,
   name: 'Scripts',
-  description: 'Live code notebooks.',
+  description: 'Distributed functions.',
   tags: ['experimental'],
-  iconComponent: (props: IconProps) => <Code {...props} />,
-  iconSymbol: 'ph--code--regular',
+  icon: 'ph--code--regular',
 });

package/src/templates/chat.ts

@@ -0,0 +1,102 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @ts-ignore
+import { transformServerSentEvents } from 'https://esm.sh/@dxos/script-toolbox';
+
+/**
+ * Chatbot that answers questions based on the context data.
+ */
+export default async ({
+  event: {
+    data: { request },
+  },
+  context: { space, ai },
+}: any) => {
+  const textBody = await request.text();
+  let parsedRequest: any;
+  try {
+    parsedRequest = JSON.parse(textBody);
+  } catch (err) {
+    const answer = await ai.run('@cf/meta/llama-3.1-8b-instruct', {
+      stream: true,
+      prompt: `
+     Using only the context data below to answer the user's question.
+     If you cannot answer the question from the provided content, then reply with "I don't know."
+
+     CONTEXT:
+     ${await getContext({ space })}
+
+     QUESTION:
+     ${textBody}
+    `,
+    });
+    return new Response(transformServerSentEvents(answer));
+  }
+
+  const promptId = parsedRequest.trigger.promptId;
+  const promptObject = await space.crud.query({ id: promptId }).first();
+
+  if (parsedRequest.data.objects.length !== 1) {
+    return new Response('Message batches not supported.');
+  }
+
+  const messageId = parsedRequest.data.objects[0];
+  let message;
+  try {
+    message = await space.crud.query({ id: messageId }).first();
+  } catch (err) {
+    return new Response('Message not replicated yet.', { status: 409 });
+  }
+
+  if (message.text.includes('--------')) {
+    return new Response('Message was already processed.');
+  }
+
+  let prompt = promptObject.template;
+  for (const input of promptObject.inputs) {
+    let value: string | null = null;
+    if (input.type === ChainInputType.VALUE) {
+      value = String(input.value);
+    } else if (input.type === ChainInputType.RETRIEVER) {
+      value = await getContext({ space });
+    } else if (input.type === ChainInputType.PASS_THROUGH) {
+      value = message.text;
+    }
+    if (value) {
+      prompt = prompt.replaceAll(`{${input.name}}`, value);
+    }
+  }
+
+  const answer = await ai.run('@cf/meta/llama-3.1-8b-instruct', {
+    stream: false,
+    prompt,
+  });
+  const response = { response: answer.response, prompt, message };
+  const textWithAnswer = message.text + '\n--------\n\n' + answer.response;
+  await space.crud.update({ id: messageId }, { text: textWithAnswer });
+
+  return new Response(JSON.stringify(response));
+};
+
+const getContext = async ({ space }: any) => {
+  let context = '';
+  const { objects: docs } = await space.crud.query({ __typename: 'dxos.org/type/Document' }).run();
+  for (const doc of docs) {
+    const { content } = await space.crud.query({ id: doc.content }).first();
+    context += content + '\n\n';
+  }
+  return context;
+};
+
+enum ChainInputType {
+  VALUE = 0,
+  PASS_THROUGH = 1,
+  RETRIEVER = 2,
+  FUNCTION = 3,
+  QUERY = 4,
+  RESOLVER = 5,
+  CONTEXT = 6,
+  SCHEMA = 7,
+}

package/src/templates/chess.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @ts-ignore
+import { Chess } from 'https://esm.sh/chess.js@0.13.1';
+
+/**
+ * Plays a random move in a chess game.
+ */
+export default async ({
+  event: {
+    data: { request },
+  },
+  context: { space },
+}: any) => {
+  const {
+    data: {
+      objects: [gameId],
+      player = 'b',
+    },
+  } = await request.json();
+
+  const { pgn } = await space.crud.query({ id: gameId }).first();
+  const game = new Chess();
+  game.load_pgn(pgn);
+  if (game.turn() !== player) {
+    return new Response('Invalid turn', { status: 409 });
+  }
+
+  const moves = game.moves();
+  const move = moves[Math.floor(Math.random() * moves.length)];
+  if (!move) {
+    return new Response('No legal moves', { status: 406 });
+  }
+
+  game.move(move);
+  const newPgn = game.pgn();
+  await space.crud.update({ id: gameId }, { pgn: newPgn });
+  return new Response(game.ascii());
+};

package/src/templates/echo.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/**
+ * Echos the request data.
+ */
+export default async ({
+  event: {
+    data: { request },
+  },
+}: any) => {
+  const data = await request.json();
+  return new Response(JSON.stringify(data ?? {}), { headers: { 'Content-Type': 'application/json' } });
+};

package/src/templates/email.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/**
+ * Stores a message into ECHO Mailbox object.
+ */
+export default async ({
+  event: {
+    data: { request },
+  },
+  context: { space },
+}: any) => {
+  const {
+    data: {
+      objects: [message],
+    },
+  } = await request.json();
+
+  const mailbox = await space.crud.query({ __typename: 'dxos.org/type/MailboxType' }).first();
+  if (!mailbox) {
+    return new Response('Mailbox not found.', { status: 500 });
+  }
+
+  await space.crud.push(
+    { id: mailbox.id },
+    {
+      sender: { email: message.from },
+      timestamp: new Date(message.created).toISOString(),
+      text: message.body,
+      properties: {
+        subject: message.subject,
+        to: [{ email: message.to }],
+      },
+    },
+  );
+  return new Response(JSON.stringify(message));
+};

package/src/templates/forex.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+/**
+ * Returns the exchange rate between two currencies.
+ */
+export default async ({
+  event: {
+    data: { request },
+  },
+}: any) => {
+  const { args: [from = 'EUR', to = 'USD'] = [] } = await request.json();
+
+  const res = await fetch(`https://free.ratesdb.com/v1/rates?from=${from}&to=${to}`);
+  const {
+    data: { rates },
+  } = await res.json();
+
+  return new Response(rates[to].toString());
+};

package/src/templates.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @ts-ignore
+import chat from './templates/chat.ts?raw';
+// @ts-ignore
+import chess from './templates/chess.ts?raw';
+// @ts-ignore
+import echo from './templates/echo.ts?raw';
+// @ts-ignore
+import email from './templates/email.ts?raw';
+// @ts-ignore
+import forex from './templates/forex.ts?raw';
+
+const removeHeader = (str: string) => str.split('\n').slice(4).join('\n');
+
+export type Template = {
+  id: string;
+  name: string;
+  source: string;
+  presetId?: string;
+};
+
+export const templates: Template[] = [
+  {
+    id: 'dxos.org/script/echo',
+    name: 'Echo',
+    source: removeHeader(echo),
+  },
+  {
+    id: 'dxos.org/script/forex',
+    name: 'Forex',
+    source: removeHeader(forex),
+  },
+  {
+    id: 'dxos.org/script/gpt',
+    name: 'Gpt',
+    source: removeHeader(chat),
+    presetId: 'dxos.org/function/gpt',
+  },
+  {
+    id: 'dxos.org/script/chess',
+    name: 'Chess',
+    source: removeHeader(chess),
+    presetId: 'dxos.org/function/chess',
+  },
+  {
+    id: 'dxos.org/script/email',
+    name: 'Email',
+    source: removeHeader(email),
+    presetId: 'dxos.org/function/email',
+  },
+];

package/src/translations.ts

@@ -20,6 +20,8 @@ export default [
         'copy link label': 'Copy function link',
         'format label': 'Format',
         'toggle details label': 'Toggle details panel',
+        'authenticate action label': 'Authenticate functions service',
+        'authenticate button label': 'Authenticate',
       },
     },
   },

package/src/types/types.ts

@@ -6,11 +6,12 @@ import type {
   GraphBuilderProvides,
   IntentResolverProvides,
   MetadataRecordsProvides,
+  SettingsProvides,
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
 import { type SchemaProvides } from '@dxos/plugin-client';
-import { type StackProvides } from '@dxos/plugin-stack';
+import { type SpaceInitProvides } from '@dxos/plugin-space';
 
 import { SCRIPT_PLUGIN } from '../meta';
 
@@ -18,10 +19,13 @@ export enum ScriptAction {
   CREATE = `${SCRIPT_PLUGIN}/create`,
 }
 
-export type ScriptPluginProvides = SurfaceProvides &
+export type ScriptSettingsProps = {};
+
+export type ScriptPluginProvides = GraphBuilderProvides &
   IntentResolverProvides &
-  GraphBuilderProvides &
   MetadataRecordsProvides &
-  TranslationsProvides &
   SchemaProvides &
-  StackProvides;
+  SettingsProvides<ScriptSettingsProps> &
+  SpaceInitProvides &
+  SurfaceProvides &
+  TranslationsProvides;