@dxos/plugin-script 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -2,29 +2,68 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { Atom, Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
 
-import { type Meta } from '@storybook/react';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Script } from '@dxos/compute';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { type ScriptToolbarState, type ScriptToolbarStateStore } from '#hooks';
+import { translations } from '#translations';
 
 import { ScriptToolbar } from './ScriptToolbar';
-import { templates } from '../../templates';
-
-export const Default = {
-  args: {
-    binding: 'example',
-    deployed: true,
-    templates,
-    onFormat: () => console.log('Format'),
-    onTogglePanel: () => {},
-  },
+
+// Create a mock store for stories.
+const createMockStore = (initialState: ScriptToolbarState = {}): ScriptToolbarStateStore => {
+  const registry = Registry.make();
+  const atom = Atom.make<ScriptToolbarState>(initialState);
+  return {
+    atom,
+    get value() {
+      return registry.get(atom);
+    },
+    update: (updater) => registry.set(atom, updater(registry.get(atom))),
+    set: (key, value) => registry.set(atom, { ...registry.get(atom), [key]: value }),
+  };
 };
 
-const meta: Meta = {
-  title: 'plugins/plugin-script/Toolbar',
-  component: ScriptToolbar,
-  decorators: [withTheme, withLayout()],
+const ScriptToolbarStory = () => {
+  const state = useMemo(() => createMockStore(), []);
+  const script = useMemo(
+    () =>
+      Script.make({
+        name: 'test',
+        description: 'test',
+        source: 'test',
+      }),
+    [],
+  );
+  return <ScriptToolbar state={state} script={script} />;
 };
 
+const meta = {
+  title: 'plugins/plugin-script/components/Toolbar',
+  component: ScriptToolbarStory,
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [
+    withTheme(),
+    withLayout({ classNames: 'w-document-max-width' }),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof ScriptToolbarStory>;
+
 export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -2,57 +2,59 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { type Script } from '@dxos/compute';
+import { ElevationProvider, useTranslation } from '@dxos/react-ui';
+import { type ActionGraphProps, Menu, MenuRootProps, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 import {
   type CreateDeployOptions,
-  type ScriptToolbarState,
+  type ScriptToolbarStateStore,
   createDeploy,
   createFormat,
   createTemplateSelect,
   useDeployDeps,
-} from '../../hooks';
-import { SCRIPT_PLUGIN } from '../../meta';
+} from '#hooks';
+import { meta } from '#meta';
 
-const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
-  Rx.make((get) =>
-    get(
-      rxFromSignal(() => {
-        const templateSelect = createTemplateSelect(script);
-        const format = createFormat(script);
-        const gap = createGapSeparator();
-        const deploy = createDeploy({ state, script, ...options });
-        return {
-          nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
-          edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
-        };
-      }),
-    ),
-  );
+export type ScriptToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
+  script: Script.Script;
+  state: ScriptToolbarStateStore;
+};
 
-export type ScriptToolbarProps = ThemedClassName<{
-  role?: string;
-  script: ScriptType;
-  state: ScriptToolbarState;
-}>;
+export const ScriptToolbar = composable<HTMLDivElement, ScriptToolbarProps>(
+  ({ script, attendableId, role, state, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const options = useDeployDeps({ script });
+    const menuCreator = useMemo(
+      () => createToolbarActions({ state, script, t, ...options }),
+      [state, script, options, t],
+    );
+    const menuActions = useMenuActions(menuCreator);
 
-export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-  const options = useDeployDeps({ script });
-  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);
-  const menu = useMenuActions(toolbarCreator);
+    return (
+      <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+        <Menu.Root {...menuActions} attendableId={attendableId}>
+          <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+        </Menu.Root>
+      </ElevationProvider>
+    );
+  },
+);
 
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
-        <ToolbarMenu classNames={classNames} />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-};
+const createToolbarActions = ({ state, script, ...options }: CreateDeployOptions): Atom.Atom<ActionGraphProps> =>
+  Atom.make((get) => {
+    // Subscribe to state changes.
+    get(state.atom);
+    const templateSelect = createTemplateSelect(script);
+    const format = createFormat(script);
+    const gap = createGapSeparator();
+    const deploy = createDeploy({ state, script, ...options });
+    return {
+      nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
+      edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
+    };
+  });

package/src/components/TestPanel/TestPanel.tsx

@@ -2,251 +2,190 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { log } from '@dxos/log';
-import { Avatar, Icon, Input, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { errorText, mx } from '@dxos/react-ui-theme';
+import { Avatar, Icon, Input, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '#meta';
 
-type State = 'pending' | 'responding';
+type State = 'pending';
 
 /**
  * Request or response.
  */
-type Message = { type: 'request' | 'response'; text?: string; data?: any; error?: Error };
+type Message = {
+  type: 'request' | 'response';
+  text?: string;
+  data?: any;
+  error?: Error;
+};
 
 export type TestPanelProps = ThemedClassName<{
-  functionUrl?: string;
+  onInvoke?: (input: unknown) => Promise<unknown>;
 }>;
 
-// TODO(burdon): Need persistent history (currently lost when switching tabs)..
-export const TestPanel = ({ classNames, functionUrl }: TestPanelProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [input, setInput] = useState('');
-  const [result, setResult] = useState('');
-  const [state, setState] = useState<State | null>(null);
-
-  // TODO(burdon): Persistent history (thread).
-  const [history, setHistory] = useState<Message[]>([]);
-
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const handleScroll = () => {
-    if (scrollerRef.current) {
-      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
-    }
-  };
-
-  const controller = useRef<AbortController>();
-  useEffect(() => {
-    return () => {
-      handleStop();
+// TODO(burdon): Need persistent history (currently lost when switching tabs).
+export const TestPanel = composable<HTMLDivElement, TestPanelProps>(
+  ({ classNames, onInvoke, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [input, setInput] = useState('');
+    const [state, setState] = useState<State | null>(null);
+
+    // TODO(burdon): Persistent history (thread).
+    const [history, setHistory] = useState<Message[]>([]);
+
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const handleScroll = () => {
+      if (scrollerRef.current) {
+        scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+      }
+    };
+
+    const handleClear = () => {
+      setInput('');
+      setHistory([]);
+      inputRef.current?.focus();
+    };
+
+    const handleResponse = ({
+      text,
+      data,
+      error,
+    }: {
+      text?: string;
+      data?: any;
+      error?: Error;
+    } = {}) => {
+      setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
+      setState(null);
+      handleScroll();
     };
-  }, []);
-
-  const handleStop = () => {
-    controller.current?.abort('stop');
-    controller.current = undefined;
-  };
-
-  const handleClear = () => {
-    handleStop();
-    setInput('');
-    setResult('');
-    setHistory([]);
-    inputRef.current?.focus();
-  };
-
-  const handleResponse = ({ text, data, error }: { text?: string; data?: any; error?: Error } = {}) => {
-    controller.current = undefined;
-    setHistory((history) => [...history, { type: 'response', text, data, error } satisfies Message]);
-    setResult('');
-    setState(null);
-    handleScroll();
-  };
-
-  const handleRequest = async (input: string) => {
-    // Returns a promise that resolves when a value has been received.
-    try {
-      setState('pending');
-
-      let data = null;
-      // Detect JSON input.
+
+    const handleRequest = async (input: string) => {
+      if (!onInvoke) {
+        handleResponse({ error: new Error('Function not deployed') });
+        return;
+      }
+
+      let data: unknown = input;
+      let displayText = input;
       if (input.charAt(0) === '{') {
         try {
           const validJsonString = input.replace(/'/g, '"').replace(/([{,]\s*)([a-zA-Z0-9_]+)(\s*:)/g, '$1"$2"$3');
           data = JSON.parse(validJsonString);
-          input = JSON.stringify(data, null, 2);
+          displayText = JSON.stringify(data, null, 2);
         } catch (err) {
-          inputRef.current?.focus();
+          handleResponse({ error: new Error('Invalid JSON input') });
           return;
         }
       }
 
-      setInput('');
-      setResult('');
-      setHistory((history) => [...history, { type: 'request', text: input }]);
-      setTimeout(() => {
-        handleScroll();
-      });
-
-      // Throws DOMException when aborted.
-      controller.current = new AbortController();
-      const response = await fetch(functionUrl!, {
-        signal: controller.current.signal,
-        method: 'POST',
-        body: input,
-        headers: {
-          'Content-Type': data ? 'application/json' : 'text/plain',
-        },
-      });
-
-      // Check for error.
-      if (!response.ok) {
-        const text = await response.text();
-        handleResponse({ error: new Error(text || response.statusText || String(response.status)) });
-        return;
-      }
+      try {
+        setState('pending');
+        setInput('');
+        setHistory((history) => [...history, { type: 'request', text: displayText }]);
+        setTimeout(handleScroll);
 
-      // Check for JSON.
-      const contentType = response.headers.get('content-type');
-      if (contentType === 'application/json') {
-        const data = await response.json();
-        handleResponse({ data });
-        return;
-      }
+        const result = await onInvoke(data);
 
-      // Text (including streaming).
-      setState('responding');
-      let text = '';
-      const reader = response.body!.getReader();
-      const pump = async ({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> => {
-        text = text + new TextDecoder().decode(value);
-        if (!controller.current || done) {
-          handleResponse({ text });
-          return;
+        if (typeof result === 'string') {
+          handleResponse({ text: result });
+        } else {
+          handleResponse({ data: result });
         }
-
-        setResult(text);
-        setTimeout(() => {
-          handleScroll();
-        });
-
-        return reader.read().then(pump);
-      };
-
-      void reader
-        .read()
-        .then(pump)
-        .catch((err) => {
-          if (err.name !== 'AbortError') {
-            log.catch(err);
-          }
-        });
-    } catch (err: any) {
-      if (err !== 'stop') {
-        const error = err instanceof Error ? err : new Error(err);
+      } catch (err: any) {
+        const error = err instanceof Error ? err : new Error(String(err));
         handleResponse({ error });
         log.catch(err);
-      } else {
-        handleResponse();
       }
-    }
-  };
+    };
 
-  return (
-    <div className={mx('flex flex-col h-full overflow-hidden', classNames)}>
-      {/* TODO(burdon): Replace with Thread. */}
-      <MessageThread ref={scrollerRef} state={state} result={result} history={history} />
-      {/* TODO(burdon): Replace with Form based on the function's input schema. */}
-      <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.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>
-  );
-};
+    return (
+      <div
+        {...composableProps(props, { classNames: ['flex flex-col h-full overflow-hidden', classNames] })}
+        ref={forwardedRef}
+      >
+        {/* TODO(burdon): Replace with Thread. */}
+        <MessageThread ref={scrollerRef} state={state} history={history} />
+        {/* TODO(burdon): Replace with Form based on the function's input schema. */}
+        <Toolbar.Root>
+          <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.IconButton icon='ph--play--regular' label='Execute' iconOnly onClick={() => handleRequest(input)} />
+          <Toolbar.IconButton icon='ph--trash--regular' label='Clear' iconOnly onClick={handleClear} />
+        </Toolbar.Root>
+      </div>
+    );
+  },
+);
 
 // TODO(burdon): Replace with thread?
 // TODO(burdon): Button to edit/re-run question.
 type MessageThreadProps = {
   state: State | null;
   history: Message[];
-  result: string;
 };
 
 const MessageThread = forwardRef<HTMLDivElement, MessageThreadProps>(
-  ({ state, history, result }: MessageThreadProps, forwardedRef) => {
+  ({ state, history }: MessageThreadProps, forwardedRef) => {
     return (
-      <div ref={forwardedRef} className='flex flex-col gap-6 h-full p-2 overflow-x-hidden overflow-y-auto'>
-        {history.map((message, i) => (
-          <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} />
+      <ScrollArea.Root orientation='vertical' classNames='h-full' ref={forwardedRef}>
+        <ScrollArea.Viewport classNames='gap-6 p-2'>
+          {history.map((message, i) => (
+            <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>
-        ))}
-
-        {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 }} />
+          ))}
+
+          {state === 'pending' && (
+            <div className='grid grid-cols-[2rem_1fr_2rem]'>
+              <div className='p-1'>
+                <Icon icon='ph--spinner--regular' size={6} classNames='animate-spin' />
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
     );
   },
 );
 
 const MessageItem = ({ classNames, message }: ThemedClassName<{ message: Message }>) => {
   const { type, text, data, error } = message;
-  const wrapper = 'p-1 px-2 rounded-md bg-hoverSurface overflow-auto';
+  const wrapper = 'p-1 px-2 rounded-md bg-hover-surface overflow-auto';
   return (
     <div className={mx('flex', type === 'request' ? 'ml-[1rem] justify-end' : 'mr-[1rem]', classNames)}>
-      {error && <div className={mx(wrapper, 'whitespace-pre', errorText)}>{String(error)}</div>}
+      {error && <div className={mx(wrapper, 'whitespace-pre text-error-text')}>{String(error)}</div>}
 
       {text !== undefined && (
-        <div className={mx(wrapper, type === 'request' && 'bg-primary-400 dark:bg-primary-600')}>
+        <div className={mx(wrapper, type === 'request' && 'bg-primary-500 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>
-      )}
+      {data && <JsonHighlighter data={data} classNames={mx(wrapper, 'text-xs')} />}
     </div>
   );
 };
 
 const RobotAvatar = () => (
   <Avatar.Root>
-    <Avatar.Content size={6} variant='circle' icon='ph--robot--regular' />
+    <Avatar.Content size={6} variant='circle' icon='ph--drone--regular' />
   </Avatar.Root>
 );

package/src/components/TestPanel/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './TestContainer';
 export * from './TestPanel';