@dxos/plugin-script 0.6.13 → 0.6.14-main.7bd9c89

package/src/ScriptPlugin.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Code, type IconProps } from '@phosphor-icons/react';
 // @ts-ignore
 import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
 import React from 'react';
@@ -17,8 +16,9 @@ import { loadObjectReferences } from '@dxos/react-client/echo';
 
 import { initializeBundler } from './bundler';
 import { Compiler } from './compiler';
-import { ScriptEditor } from './components';
+import { AutomationPanel, ScriptContainer, ScriptSettings } from './components';
 import meta, { SCRIPT_PLUGIN } from './meta';
+import { templates } from './templates';
 import translations from './translations';
 import { FunctionType, ScriptType } from './types';
 import { ScriptAction, type ScriptPluginProvides } from './types';
@@ -45,12 +45,12 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       await initializeBundler({ wasmUrl });
     },
     provides: {
+      settings: {},
       metadata: {
         records: {
           [ScriptType.typename]: {
             placeholder: ['object title placeholder', { ns: SCRIPT_PLUGIN }],
-            icon: (props: IconProps) => <Code {...props} />,
-            iconSymbol: 'ph--code--regular',
+            icon: 'ph--code--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (script: ScriptType) => loadObjectReferences(script, (script) => [script.source]),
           },
@@ -60,6 +60,12 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
       echo: {
         schema: [ScriptType, FunctionType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create object label', { ns: SCRIPT_PLUGIN }],
+          action: ScriptAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -93,8 +99,7 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
                   },
                   properties: {
                     label: ['create object label', { ns: SCRIPT_PLUGIN }],
-                    icon: (props: IconProps) => <Code {...props} />,
-                    iconSymbol: 'ph--code--regular',
+                    icon: 'ph--code--regular',
                     testId: 'scriptPlugin.createObject',
                   },
                 },
@@ -103,31 +108,24 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
           });
         },
       },
-      stack: {
-        creators: [
-          {
-            id: 'create-stack-section-script',
-            testId: 'scriptPlugin.createSection',
-            type: ['plugin name', { ns: SCRIPT_PLUGIN }],
-            label: ['create stack section label', { ns: SCRIPT_PLUGIN }],
-            icon: (props: any) => <Code {...props} />,
-            intent: {
-              plugin: SCRIPT_PLUGIN,
-              action: ScriptAction.CREATE,
-            },
-          },
-        ],
-      },
       surface: {
         component: ({ data, role }) => {
-          if (role && !['article', 'section'].includes(role)) {
-            return null;
-          }
+          switch (role) {
+            case 'settings': {
+              return data.plugin === meta.id ? <ScriptSettings settings={{}} /> : null;
+            }
 
-          if (data.object instanceof ScriptType) {
-            return <ScriptEditor env={compiler.environment} script={data.object} role={role} />;
-          }
+            case 'article': {
+              if (data.object instanceof ScriptType) {
+                return <ScriptContainer script={data.object} env={compiler.environment} />;
+              }
+              break;
+            }
 
+            case 'complementary--automation': {
+              return <AutomationPanel subject={data.subject as any} />;
+            }
+          }
           return null;
         },
       },
@@ -135,7 +133,7 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
         resolver: (intent) => {
           switch (intent.action) {
             case ScriptAction.CREATE: {
-              return { data: create(ScriptType, { source: create(TextType, { content: example }) }) };
+              return { data: create(ScriptType, { source: create(TextType, { content: templates[0].source }) }) };
             }
           }
         },
@@ -143,14 +141,3 @@ export const ScriptPlugin = (): PluginDefinition<ScriptPluginProvides> => {
     },
   };
 };
-
-// TODO(burdon): Import.
-const example = [
-  'export default async ({ ',
-  '  event: { data: { request } },',
-  '  context: { space, ai } ',
-  '}: any) => {',
-  "  return new Response('Hello DXOS!');",
-  '};',
-  '',
-].join('\n');

package/src/bundler/bundler.test.ts

@@ -2,11 +2,21 @@
 // Copyright 2022 DXOS.org
 //
 
-import { describe, expect, test } from 'vitest';
+// @ts-ignore
+import wasmUrl from 'esbuild-wasm/esbuild.wasm?url';
+import { beforeAll, describe, expect, test } from 'vitest';
 
-import { Bundler } from './bundler';
+import { isNode } from '@dxos/util';
+
+import { Bundler, initializeBundler } from './bundler';
 
 describe('Bundler', () => {
+  beforeAll(async () => {
+    if (!isNode()) {
+      await initializeBundler({ wasmUrl });
+    }
+  });
+
   test('Basic', async () => {
     const bundler = new Bundler({ platform: 'node', sandboxedModules: [], remoteModules: {} });
     const result = await bundler.bundle('const x = 100'); // TODO(burdon): Test import.

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import type { EchoReactiveObject } from '@dxos/client/echo';
+import { failUndefined } from '@dxos/debug';
+import { useClient } from '@dxos/react-client';
+import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Select } from '@dxos/react-ui';
+
+import { getInvocationUrl, getUserFunctionUrlInMetadata } from '../../edge';
+import { FunctionType, ScriptType } from '../../types';
+import { DebugPanel } from '../DebugPanel';
+
+export interface AutomationPanelProps {
+  subject: EchoReactiveObject<any>;
+}
+
+export const AutomationPanel = ({ subject }: AutomationPanelProps) => {
+  const space = getSpace(subject);
+
+  // TODO(dmaretskyi): Parametric query.
+  const functions = useQuery(
+    space ?? undefined,
+    Filter.schema(FunctionType, (fn) => (subject instanceof ScriptType ? fn.source === subject : fn.binding != null)),
+    {},
+    [subject],
+  );
+  const [selectedFunction, setSelectedFunction] = useState<FunctionType | null>(null);
+  const functionToChatWith = subject instanceof ScriptType ? functions[0] : selectedFunction;
+
+  return (
+    <div className='h-full flex flex-col'>
+      {!(subject instanceof ScriptType) && (
+        <BindingSelect
+          selectedFunction={selectedFunction}
+          setSelectedFunction={setSelectedFunction}
+          functions={functions}
+        />
+      )}
+      {functionToChatWith && <ChatPanel fn={functionToChatWith} subject={subject} />}
+      {subject instanceof ScriptType && functions.length === 0 && <p>Deploy function to interact with it.</p>}
+    </div>
+  );
+};
+
+export interface ChatPanelProps {
+  fn: FunctionType;
+  subject: EchoReactiveObject<any>;
+}
+
+const ChatPanel = ({ fn, subject }: ChatPanelProps) => {
+  const client = useClient();
+  const space = getSpace(fn);
+  const existingFunctionUrl = getUserFunctionUrlInMetadata(getMeta(fn));
+  const functionUrl = useMemo(() => {
+    if (!existingFunctionUrl) {
+      return;
+    }
+
+    return getInvocationUrl(existingFunctionUrl, client.config.values.runtime?.services?.edge?.url ?? '', {
+      spaceId: space?.id,
+      subjectId: subject?.id,
+    });
+  }, [existingFunctionUrl, space, subject]);
+
+  return <DebugPanel functionUrl={functionUrl} classNames='flex-1' />;
+};
+
+export interface BindingSelectProps {
+  selectedFunction: FunctionType | null;
+  setSelectedFunction: (fn: FunctionType) => void;
+  functions: FunctionType[];
+}
+
+const BindingSelect = ({ selectedFunction, setSelectedFunction, functions }: BindingSelectProps) => {
+  return (
+    <Select.Root
+      value={selectedFunction?.id}
+      onValueChange={(id) => setSelectedFunction(functions.find((fn) => fn.id === id) ?? failUndefined())}
+    >
+      <Select.TriggerButton placeholder='Select value' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {functions.map(({ id, binding }) => (
+              <Select.Option key={id} value={id}>
+                {binding}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/components/AutomationPanel/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { AutomationPanel } from './AutomationPanel';
+
+export * from './AutomationPanel';
+
+export default AutomationPanel;

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

@@ -5,20 +5,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import {
-  Avatar,
-  DensityProvider,
-  Icon,
-  Input,
-  type ThemedClassName,
-  Toolbar,
-  useControlledValue,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useControlledValue, useTranslation } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 
-import { SCRIPT_PLUGIN } from '../meta';
+import { SCRIPT_PLUGIN } from '../../meta';
 
 type State = 'pending' | 'responding';
 
@@ -31,9 +22,16 @@ export type DebugPanelProps = ThemedClassName<{
   functionUrl?: string;
   binding?: string;
   onBindingChange?: (binding: string) => void;
+  showBindingConfig?: boolean;
 }>;
 
-export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindingChange }: DebugPanelProps) => {
+export const DebugPanel = ({
+  classNames,
+  functionUrl,
+  binding: _binding,
+  onBindingChange,
+  showBindingConfig = false,
+}: DebugPanelProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
 
   const bindingInputRef = useRef<HTMLInputElement>(null);
@@ -47,7 +45,7 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   const [result, setResult] = useState('');
   const [state, setState] = useState<State | null>(null);
 
-  // TODO(burdon): Persistent history (non-space ECHO data?)
+  // TODO(burdon): Persistent history -- at least for session (non-space ECHO data?)
   const [history, setHistory] = useState<Message[]>([]);
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -175,24 +173,24 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
   };
 
   return (
-    <DensityProvider density='fine'>
-      <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
-        {/* TODO(burdon): Replace with Thread? */}
-        <div ref={scrollerRef} className='flex flex-col gap-6 h-full p-4 overflow-x-hidden overflow-y-auto'>
-          <MessageThread state={state} result={result} history={history} />
-        </div>
+    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+      {/* TODO(burdon): Replace with Thread? */}
+      <div ref={scrollerRef} className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
+        <MessageThread state={state} result={result} history={history} />
+      </div>
 
-        <Toolbar.Root classNames='p-2'>
-          <Input.Root>
-            <Input.TextInput
-              ref={inputRef}
-              autoFocus
-              placeholder={t('function request placeholder')}
-              value={input}
-              onChange={(ev) => setInput(ev.target.value)}
-              onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
-            />
-          </Input.Root>
+      <Toolbar.Root classNames='p-2'>
+        <Input.Root>
+          <Input.TextInput
+            ref={inputRef}
+            autoFocus
+            placeholder={t('function request placeholder')}
+            value={input}
+            onChange={(ev) => setInput(ev.target.value)}
+            onKeyDown={(ev) => ev.key === 'Enter' && handleRequest(input)}
+          />
+        </Input.Root>
+        {showBindingConfig && (
           <Input.Root>
             <Input.TextInput
               ref={bindingInputRef}
@@ -203,67 +201,74 @@ export const DebugPanel = ({ classNames, functionUrl, binding: _binding, onBindi
               onBlur={handleBlur}
             />
           </Input.Root>
-          <Toolbar.Button onClick={() => handleRequest(input)}>
-            <Icon icon='ph--play--regular' size={4} />
-          </Toolbar.Button>
-          <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
-            <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
-          </Toolbar.Button>
-        </Toolbar.Root>
-      </div>
-    </DensityProvider>
+        )}
+        <Toolbar.Button onClick={() => handleRequest(input)}>
+          <Icon icon='ph--play--regular' size={4} />
+        </Toolbar.Button>
+        <Toolbar.Button onClick={() => (state ? handleStop() : handleClear())}>
+          <Icon icon={state ? 'ph--stop--regular' : 'ph--trash--regular'} size={4} />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    </div>
   );
 };
 
-const RobotAvatar = () => (
-  <Avatar.Root size={6} variant='circle'>
-    <Avatar.Frame>
-      <Avatar.Icon icon='ph--robot--regular' />
-    </Avatar.Frame>
-  </Avatar.Root>
-);
-
-const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
-  const { text, data, error } = message;
-  if (error) {
-    return <span className={mx(classNames, 'whitespace-pre text-error')}>{String(error)}</span>;
-  } else if (data) {
-    return (
-      <SyntaxHighlighter language='json' className={mx('text-xs', classNames)}>
-        {JSON.stringify(data, null, 2)}
-      </SyntaxHighlighter>
-    );
-  }
-
-  return <span className={mx(classNames)}>{text || '\u00D8'}</span>;
-};
-
 // TODO(burdon): Replace with thread?
 // TODO(burdon): Button to delete individual messages.
-// TODO(burdon): Button to re-run question.
+// TODO(burdon): Button to edit/re-run question.
 const MessageThread = ({ state, result, history }: { state: State | null; result: string; history: Message[] }) => {
   return (
     <>
       {history.map((message, i) => (
-        <div key={i} className='grid grid-cols-[3rem_1fr]'>
-          <div>{message.type === 'response' && <RobotAvatar />}</div>
-          <div className={mx('flex', message.type === 'request' && 'justify-end')}>
-            <MessageItem
-              classNames={[message.type === 'request' && 'p-1 px-2 rounded-lg bg-hoverSurface']}
-              message={message}
-            />
+        <div key={i} className='grid grid-cols-[2rem_1fr_2rem]'>
+          <div className='p-1'>{message.type === 'response' && <RobotAvatar />}</div>
+          <div className='overflow-auto'>
+            <MessageItem message={message} />
           </div>
         </div>
       ))}
-      <div className='grid grid-cols-[3rem_1fr]'>
-        <div>
-          {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin-slow' />) ||
-            (result.length > 0 && <RobotAvatar />)}
-        </div>
-        <div>
-          <span>{result}</span>
+      {result?.length > 0 && (
+        <div className='grid grid-cols-[2rem_1fr_2rem]'>
+          <div className='p-1'>
+            {(state === 'pending' && <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />) || (
+              <Icon icon='ph--robot--regular' size={6} classNames='animate-[pulse_1s_ease-in-out_infinite]' />
+            )}
+          </div>
+          <div className='overflow-auto'>
+            <MessageItem message={{ type: 'response', text: result }} />
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 };
+
+const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
+  const { type, text, data, error } = message;
+  const wrapper = 'p-1 px-2 rounded-lg bg-hoverSurface overflow-auto';
+  return (
+    <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
+      {error && <div className={mx(wrapper, 'whitespace-pre text-error')}>{String(error)}</div>}
+
+      {text !== undefined && (
+        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
+          {text || '\u00D8'}
+        </div>
+      )}
+
+      {data && (
+        <SyntaxHighlighter language='json' className={mx(wrapper, 'px-8 py-2 text-xs')}>
+          {JSON.stringify(data, null, 2)}
+        </SyntaxHighlighter>
+      )}
+    </div>
+  );
+};
+
+const RobotAvatar = () => (
+  <Avatar.Root size={6} variant='circle'>
+    <Avatar.Frame>
+      <Avatar.Icon icon='ph--robot--regular' />
+    </Avatar.Frame>
+  </Avatar.Root>
+);

package/src/components/DebugPanel/index.ts

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

package/src/components/{ScriptBlock/FrameContainer → FrameContainer}/FrameContainer.tsx

@@ -11,7 +11,7 @@ import { baseSurface, mx } from '@dxos/react-ui-theme';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
 
-import { type BundlerResult } from '../../../bundler';
+import { type BundlerResult } from '../../bundler';
 
 export type FrameContainerProps = {
   containerUrl: string;

package/src/components/ScriptBlock/ScriptBlock.stories.tsx

@@ -3,19 +3,21 @@
 //
 
 import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useMemo } from 'react';
 
 import { createSpaceObjectGenerator, TestSchemaType } from '@dxos/echo-generator';
 import { TextType } from '@dxos/plugin-markdown/types';
 import { useClient } from '@dxos/react-client';
-import { create, createEchoObject, useSpaces } from '@dxos/react-client/echo';
+import { create, createObject, useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-// @ts-ignore
-import mainUrl from './FrameContainer/frame?url';
 import { ScriptBlock } from './ScriptBlock';
 import { ScriptType } from '../../types';
+// @ts-ignore
+import mainUrl from '../FrameContainer/frame?url';
 
 const code = [
   "import { Filter, useQuery, useSpaces} from '@dxos/react-client/echo';",
@@ -29,7 +31,7 @@ const code = [
   '}',
 ].join('\n');
 
-const Story = () => {
+const DefaultStory = () => {
   const client = useClient();
   const spaces = useSpaces();
   console.log(spaces.length);
@@ -51,21 +53,20 @@ const Story = () => {
   }, [client]);
 
   // TODO(burdon): Review what's the right way to create automerge-backed objects.
-  const object = useMemo(
-    () => createEchoObject(create(ScriptType, { source: create(TextType, { content: code }) })),
-    [],
-  );
+  const object = useMemo(() => createObject(create(ScriptType, { source: create(TextType, { content: code }) })), []);
 
   // TODO(dmaretskyi): Not sure how to provide `containerUrl` here since the html now lives in composer-app.
   // TODO(burdon): Normalize html/frame.tsx with composer-app to test locally.
   return <ScriptBlock script={object} containerUrl={mainUrl} />;
 };
 
-export default {
-  title: 'plugin-script/ScriptBlock',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-script/ScriptBlock',
   component: ScriptBlock,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true }), withClientProvider({ createSpace: true })],
-  render: Story,
+  render: DefaultStory,
+  decorators: [withClientProvider({ createSpace: true }), withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
-export const Default = {};
+export default meta;