@dxos/plugin-script 0.6.13 → 0.6.14-main.1366248

package/src/components/ScriptSettings/ScriptSettings.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
+import { useClient } from '@dxos/react-client';
+import { Button, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormInput } from '@dxos/react-ui-data';
+
+import { SCRIPT_PLUGIN } from '../../meta';
+import { type ScriptSettingsProps } from '../../types';
+
+export const ScriptSettings = ({ settings }: { settings: ScriptSettingsProps }) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const client = useClient();
+
+  // TODO(burdon): Check token.
+  const handleAuthenticate = async () => {
+    const { identityKey } = client.halo.identity.get()!;
+    await client.halo.writeCredentials([
+      {
+        issuer: identityKey,
+        issuanceDate: new Date(),
+        subject: {
+          id: identityKey,
+          assertion: {
+            '@type': 'dxos.halo.credentials.ServiceAccess',
+            serverName: 'hub.dxos.network',
+            serverKey: identityKey,
+            identityKey,
+            capabilities: ['composer:beta'],
+          },
+        },
+      } satisfies Credential,
+    ]);
+  };
+
+  return (
+    <>
+      <DeprecatedFormInput label={t('authenticate action label')}>
+        <Button onClick={handleAuthenticate}>{t('authenticate button label')}</Button>
+      </DeprecatedFormInput>
+    </>
+  );
+};

package/src/components/ScriptSettings/index.ts

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

package/src/components/ScriptSettingsPanel.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ChangeEvent, useCallback } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Button, Icon, Input, useControlledValue, useTranslation } from '@dxos/react-ui';
+
+import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../edge';
+import { SCRIPT_PLUGIN } from '../meta';
+import { FunctionType, type ScriptType } from '../types';
+
+export type ScriptSettingsPanelProps = {
+  script: ScriptType;
+};
+
+export const ScriptSettingsPanel = ({ script }: ScriptSettingsPanelProps) => {
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const client = useClient();
+  const space = getSpace(script);
+  // TODO(dmaretskyi): Parametric query.
+  const [fn] = useQuery(
+    space,
+    Filter.schema(FunctionType, (fn) => fn.source === script),
+  );
+
+  const handleNameChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      script.name = event.target.value;
+    },
+    [script],
+  );
+
+  const [binding, setBinding] = useControlledValue(fn?.binding ?? '');
+  const handleBindingChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setBinding(event.target.value);
+    },
+    [setBinding],
+  );
+  const handleBindingBlur = useCallback(() => {
+    fn.binding = binding;
+  }, [fn, binding]);
+
+  const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
+  const functionUrl =
+    functionPath &&
+    getInvocationUrl(functionPath, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+    });
+
+  // TODO(wittjosiah): Use ClipboardProvider.
+  const handleCopy = useCallback(() => functionUrl && navigator.clipboard.writeText(functionUrl), [functionUrl]);
+
+  return (
+    <div role='form' className='flex flex-col w-full p-2 gap-4'>
+      <Input.Root>
+        <div role='none' className='flex flex-col gap-1'>
+          <Input.Label>{t('name label')}</Input.Label>
+          <Input.TextInput
+            placeholder={t('object title placeholder')}
+            value={script.name ?? ''}
+            onChange={handleNameChange}
+          />
+        </div>
+      </Input.Root>
+      {fn && (
+        <>
+          <hr className='border-separator' />
+          <h2>{t('remote function settings heading')}</h2>
+          <Input.Root>
+            <div role='none' className='flex flex-col gap-1'>
+              <Input.Label>{t('function url label')}</Input.Label>
+              <div role='none' className='flex gap-1'>
+                <Input.TextInput
+                  disabled
+                  value={functionUrl}
+                  onChange={(event) => {
+                    fn.name = event.target.value;
+                  }}
+                />
+                <Button onClick={handleCopy}>
+                  <Icon icon='ph--copy--regular' size={4} />
+                </Button>
+              </div>
+            </div>
+          </Input.Root>
+          <Input.Root>
+            <div role='none' className='flex flex-col gap-1'>
+              <Input.Label>{t('function binding label')}</Input.Label>
+              <Input.TextInput
+                placeholder={t('function binding placeholder')}
+                value={binding}
+                onChange={handleBindingChange}
+                onBlur={handleBindingBlur}
+              />
+            </div>
+          </Input.Root>
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Toolbar } from './Toolbar';
+import { templates } from '../../templates';
+
+export const Default = {
+  args: {
+    binding: 'example',
+    deployed: true,
+    templates,
+    onFormat: () => console.log('Format'),
+    onTogglePanel: () => {},
+  },
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-script/Toolbar',
+  component: Toolbar,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+};
+
+export default meta;

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,177 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import {
+  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 (
+    <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>
+  );
+};
+
+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}

@@ -4,57 +4,39 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { useMemo } from 'react';
 
-import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
+import { createDocAccessor, createObject } 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'),
-];
-
-const Story = () => {
-  const object = useMemo(() => createEchoObject({ content: examples[0] }), []);
+// TODO(burdon): JSX.
+// TODO(burdon): Effect schema.
+// TODO(burdon): react-buddy for storybook?
+
+const DefaultStory = () => {
+  const object = useMemo(() => createObject({ 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 {
-  title: 'plugin-script/TypescriptEditor',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-script/TypescriptEditor',
   component: TypescriptEditor,
-  render: Story,
+  render: DefaultStory,
 };
 
-export const Default = {};
+export default meta;

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

@@ -2,7 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
-export const ScriptEditor = React.lazy(() => import('./ScriptEditor'));
-export const TypescriptEditor = React.lazy(() => import('./TypescriptEditor'));
+export * from './ScriptSettings';
+export * from './ScriptSettingsPanel';
+
+export const AutomationPanel = lazy(() => import('./AutomationPanel'));
+export const ScriptContainer = lazy(() => import('./ScriptContainer'));

package/src/edge/functions.ts

@@ -9,6 +9,7 @@ import { type Config } from '@dxos/client';
 import { type Halo } from '@dxos/client-protocol';
 import { type ObjectMeta } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import type { SpaceId } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { type Credential } from '@dxos/protocols/proto/dxos/halo/credentials';
 
@@ -17,6 +18,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
@@ -132,3 +134,20 @@ const presentationForIdentity = async ({ halo, timeout }: { halo: Halo; timeout?
 
   return { Authorization: `Bearer ${codec.encode(presentation)}` };
 };
+
+export type InvocationOptions = {
+  spaceId?: SpaceId;
+  subjectId?: string;
+};
+
+export const getInvocationUrl = (functionUrl: string, edgeUrl: string, options: InvocationOptions = {}) => {
+  const baseUrl = new URL('functions/', edgeUrl);
+
+  // Leading slashes cause the URL to be treated as an absolute path.
+  const relativeUrl = functionUrl.replace(/^\//, '');
+  const url = new URL(`./${relativeUrl}`, baseUrl.toString());
+  options.spaceId && url.searchParams.set('spaceId', options.spaceId);
+  options.subjectId && url.searchParams.set('subjectId', options.subjectId);
+  url.protocol = 'https';
+  return url.toString();
+};

package/src/meta.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const SCRIPT_PLUGIN = 'dxos.org/plugin/script';
+
+export default {
+  id: SCRIPT_PLUGIN,
+  name: 'Scripts',
+  description: 'Distributed functions.',
+  icon: 'ph--code--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',
+  tags: ['experimental'],
+} satisfies PluginMeta;

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,
+}