@dxos/plugin-automation 0.7.5-main.b19bfc8 → 0.7.5-main.d9d2d4e

package/src/components/Prompt/Prompt.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { forwardRef, useImperativeHandle } from 'react';
-
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import {
-  type BasicExtensionsOptions,
-  createBasicExtensions,
-  createThemeExtensions,
-  keymap,
-  useTextEditor,
-  type UseTextEditorProps,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-import { createAutocompleteExtension, type AutocompleteOptions } from './autocomplete';
-
-// TODO(burdon): Handle object references.
-
-export interface PromptController {
-  focus(): void;
-  setText(text: string): void;
-}
-
-export type PromptProps = ThemedClassName<
-  {
-    onOpenChange?: (open: boolean) => void;
-  } & AutocompleteOptions &
-    Pick<UseTextEditorProps, 'autoFocus'> &
-    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
->;
-
-export const Prompt = forwardRef<PromptController, PromptProps>(
-  ({ classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onOpenChange }, forwardRef) => {
-    const { themeMode } = useThemeContext();
-    const { parentRef, view } = useTextEditor(
-      {
-        autoFocus,
-        extensions: [
-          createBasicExtensions({
-            bracketMatching: false,
-            lineWrapping,
-            placeholder,
-          }),
-          createThemeExtensions({ themeMode }),
-          createAutocompleteExtension({ onSubmit, onSuggest }),
-          keymap.of([
-            {
-              key: 'Alt-ArrowUp',
-              preventDefault: true,
-              run: (view) => {
-                onOpenChange?.(true);
-                return true;
-              },
-            },
-            {
-              key: 'Alt-ArrowDown',
-              preventDefault: true,
-              run: (view) => {
-                onOpenChange?.(false);
-                return true;
-              },
-            },
-          ]),
-        ],
-      },
-      [themeMode, onSubmit, onSuggest],
-    );
-
-    // Expose editor view.
-    useImperativeHandle(
-      forwardRef,
-      () => {
-        return {
-          focus: () => {
-            view?.focus();
-          },
-          setText: (text: string) => {
-            view?.dispatch({
-              changes: {
-                from: 0,
-                to: view.state.doc.length,
-                insert: text,
-              },
-              selection: {
-                anchor: text.length,
-                head: text.length,
-              },
-            });
-          },
-        };
-      },
-      [view, onSubmit],
-    );
-
-    return <div ref={parentRef} className={mx('w-full overflow-hidden', classNames)} />;
-  },
-);

package/src/components/Prompt/PromptBar.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useRef, useState } from 'react';
-
-import { useVoiceInput } from '@dxos/plugin-transcription';
-import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Spinner } from '@dxos/react-ui-sfx';
-import { errorText, mx } from '@dxos/react-ui-theme';
-
-import { Prompt, type PromptController, type PromptProps } from './Prompt';
-import { AUTOMATION_PLUGIN } from '../../meta';
-
-export type PromptBarProps = ThemedClassName<
-  Pick<PromptProps, 'placeholder' | 'lineWrapping' | 'onSubmit' | 'onSuggest' | 'onOpenChange'> & {
-    processing?: boolean;
-    error?: Error;
-    microphone?: boolean;
-    onCancel?: () => void;
-  }
->;
-
-export const PromptBar = ({
-  classNames,
-  placeholder,
-  processing,
-  error,
-  microphone,
-  onCancel,
-  ...props
-}: PromptBarProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-
-  const promptRef = useRef<PromptController>(null);
-
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const [active, setActive] = useState(false);
-  const { recording } = useVoiceInput({
-    active,
-    onUpdate: (text) => {
-      promptRef.current?.setText(text);
-      promptRef.current?.focus();
-    },
-  });
-
-  // TODO(burdon): Tooltip for error.
-  return (
-    <div
-      className={mx(
-        'flex shrink-0 w-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] overflow-hidden',
-        classNames,
-      )}
-    >
-      <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-        {(error && <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />) || (
-          <Spinner active={processing} />
-        )}
-      </div>
-      <Prompt
-        ref={promptRef}
-        autoFocus
-        classNames='pbs-2'
-        lineWrapping={true}
-        placeholder={placeholder ?? t('prompt placeholder')}
-        {...props}
-      />
-      {(onCancel || microphone) && (
-        <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-          {processing && onCancel && (
-            <IconButton
-              classNames='px-1.5'
-              variant='ghost'
-              size={5}
-              icon='ph--x--regular'
-              iconOnly
-              label={t('cancel processing button')}
-              onClick={onCancel}
-            />
-          )}
-          {!processing && microphone && (
-            <IconButton
-              classNames={mx('px-1.5', recording && 'bg-primary-500')}
-              variant='ghost'
-              size={5}
-              icon='ph--microphone--regular'
-              iconOnly
-              noTooltip
-              label={t('microphone button')}
-              onMouseDown={() => setActive(true)}
-              onMouseUp={() => setActive(false)}
-              onTouchStart={() => setActive(true)}
-              onTouchEnd={() => setActive(false)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/Prompt/autocomplete.ts

@@ -1,212 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Prec, type Extension } from '@codemirror/state';
-import {
-  EditorView,
-  Decoration,
-  ViewPlugin,
-  keymap,
-  type DecorationSet,
-  type ViewUpdate,
-  WidgetType,
-} from '@codemirror/view';
-
-export type AutocompleteOptions = {
-  /**
-   * Callback triggered when Enter is pressed.
-   * @param text The current text in the editor
-   * @returns true if the editor should reset the document.
-   */
-  onSubmit?: (text: string) => boolean | void;
-
-  /**
-   * Function that returns a list of suggestions based on the current text.
-   * @param text The current text before the cursor
-   * @returns Array of suggestion strings
-   */
-  onSuggest?: (text: string) => string[];
-};
-
-/**
- * Creates an autocomplete extension that shows inline suggestions.
- * Pressing Tab will complete the suggestion.
- */
-export const createAutocompleteExtension = ({ onSubmit, onSuggest }: AutocompleteOptions): Extension => {
-  const suggestionPlugin = ViewPlugin.fromClass(
-    class {
-      _decorations: DecorationSet;
-      _currentSuggestion: string | null = null;
-
-      constructor(view: EditorView) {
-        this._decorations = this.computeDecorations(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged || update.selectionSet) {
-          this._decorations = this.computeDecorations(update.view);
-        }
-      }
-
-      private computeDecorations(view: EditorView): DecorationSet {
-        const text = view.state.doc.toString();
-        const suggestions = onSuggest?.(text) ?? [];
-        if (!suggestions.length) {
-          this._currentSuggestion = null;
-          return Decoration.none;
-        }
-
-        // Get the first suggestion.
-        this._currentSuggestion = suggestions[0];
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return Decoration.none;
-        }
-
-        // Always show ghost text at the end of the document.
-        return Decoration.set([
-          Decoration.widget({
-            widget: new InlineSuggestionWidget(suffix),
-            side: 1,
-          }).range(view.state.doc.length),
-        ]);
-      }
-
-      completeSuggestion(view: EditorView): boolean {
-        if (!this._currentSuggestion) {
-          return false;
-        }
-
-        const text = view.state.doc.toString();
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return false;
-        }
-
-        view.dispatch({
-          changes: {
-            from: view.state.doc.length,
-            insert: suffix,
-          },
-          selection: {
-            anchor: view.state.doc.length + suffix.length,
-          },
-        });
-
-        return true;
-      }
-    },
-    {
-      decorations: (v) => v._decorations,
-    },
-  );
-
-  return [
-    suggestionPlugin,
-    EditorView.theme({
-      '.cm-inline-suggestion': {
-        opacity: 0.4,
-      },
-    }),
-
-    // Accept the current suggestion.
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Tab',
-          preventDefault: true,
-          run: (view) => {
-            const plugin = view.plugin(suggestionPlugin);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-        {
-          key: 'ArrowRight',
-          preventDefault: true,
-          run: (view) => {
-            // Only complete if cursor is at the end
-            if (view.state.selection.main.head !== view.state.doc.length) {
-              return false;
-            }
-
-            const plugin = view.plugin(suggestionPlugin);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-        {
-          key: 'Enter',
-          preventDefault: true,
-          run: (view) => {
-            const text = view.state.doc.toString().trim();
-            if (text.length > 0 && onSubmit) {
-              const reset = onSubmit(text);
-
-              // Clear the document after calling onEnter.
-              if (reset) {
-                view.dispatch({
-                  changes: {
-                    from: 0,
-                    to: view.state.doc.length,
-                    insert: '',
-                  },
-                });
-              }
-            }
-
-            return true;
-          },
-        },
-        {
-          key: 'Shift-Enter',
-          preventDefault: true,
-          run: (view) => {
-            view.dispatch({
-              changes: {
-                from: view.state.selection.main.head,
-                insert: '\n',
-              },
-              selection: {
-                anchor: view.state.selection.main.head + 1,
-                head: view.state.selection.main.head + 1,
-              },
-            });
-            return true;
-          },
-        },
-        {
-          key: 'Escape',
-          preventDefault: true,
-          run: (view) => {
-            // Clear the entire document.
-            view.dispatch({
-              changes: {
-                from: 0,
-                to: view.state.doc.length,
-                insert: '',
-              },
-            });
-            return true;
-          },
-        },
-      ]),
-    ),
-  ];
-};
-
-class InlineSuggestionWidget extends WidgetType {
-  constructor(private suffix: string) {
-    super();
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.textContent = this.suffix;
-    span.className = 'cm-inline-suggestion';
-    return span;
-  }
-
-  override eq(other: InlineSuggestionWidget) {
-    return other.suffix === this.suffix;
-  }
-}

package/src/components/Prompt/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Prompt';
-export * from './PromptBar';

package/src/components/ServiceRegistry/ServiceRegistry.stories.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { ServiceRegistry } from './ServiceRegistry';
-import { ServiceType } from '../../types';
-
-const meta: Meta<typeof ServiceRegistry> = {
-  title: 'plugins/plugin-automation/ServiceRegistry',
-  component: ServiceRegistry,
-  render: ({ space: _ignore, ...args }) => {
-    const space = useSpace();
-    if (!space) {
-      return <div />;
-    }
-
-    return (
-      <div className='h-full w-[300px] overflow-hidden'>
-        <ServiceRegistry space={space} {...args} />
-      </div>
-    );
-  },
-  decorators: [
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [ServiceType],
-    }),
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
-    withTheme,
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ServiceRegistry>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -1,76 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Filter, type Space } from '@dxos/client/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { Icon, Input, List, ListItem } from '@dxos/react-ui';
-
-import { useServices } from '../../hooks';
-import { categoryIcons, ServiceType } from '../../types';
-
-// TODO(burdon): Option to show all/enabled/filter.
-export const ServiceRegistry = ({ space }: { space: Space }) => {
-  const matchingServices = useServices(space);
-  const enabledServices = useQuery(space, Filter.schema(ServiceType));
-
-  // Join matching services with enabled services.
-  const services = useMemo(() => {
-    return matchingServices.map((service) => enabledServices.find((s) => s.serviceId === service.serviceId) ?? service);
-  }, [matchingServices, enabledServices]);
-
-  // TODO(burdon): Reaplce with SpacePlugin intent.
-  const handleSetEnabled = (service: ServiceType, enabled: boolean) => {
-    if (enabled) {
-      space.db.add(service);
-    } else {
-      // TODO(burdon): Remove or disable?
-      space.db.remove(service);
-    }
-  };
-
-  return (
-    <List classNames='h-full grid auto-rows-[5rem] gap-2 p-2 pis-2 pie-2 overflow-y-auto scrollbar-thin'>
-      {services.map((service) => (
-        <ServiceItem
-          key={service.serviceId}
-          service={service}
-          enabled={service.enabled}
-          setEnabled={(enabled) => handleSetEnabled(service, enabled)}
-        />
-      ))}
-    </List>
-  );
-};
-
-const ServiceItem = ({
-  service,
-  enabled,
-  setEnabled,
-}: {
-  service: ServiceType;
-  enabled?: boolean;
-  setEnabled?: (enabled: boolean) => void;
-}) => {
-  return (
-    <ListItem.Root classNames='flex flex-col gap-1 p-1 overflow-hidden rounded-md border border-separator'>
-      <div className='grid grid-cols-[40px_1fr_40px]'>
-        <div className='flex gow justify-center items-center'>
-          <Icon icon={categoryIcons[service.category ?? 'default'] ?? 'ph--placeholder--regular'} size={6} />
-        </div>
-        <div className='grow items-center truncate mie-2'>{service.name}</div>
-        <div className='flex gow justify-center items-center'>
-          <Input.Root>
-            <Input.Switch checked={enabled} onClick={() => setEnabled?.(!enabled)} />
-          </Input.Root>
-        </div>
-      </div>
-      <div className='grid grid-cols-[40px_1fr]'>
-        <div />
-        <div className='text-sm text-subdued line-clamp-2 mie-1'>{service.description}</div>
-      </div>
-    </ListItem.Root>
-  );
-};

package/src/components/ServiceRegistry/index.ts

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

package/src/components/TemplateContainer.tsx

@@ -1,21 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { TemplateEditor } from './TemplateEditor';
-import { type TemplateType } from '../types';
-
-// TODO(burdon): Attention.
-export const TemplateContainer = ({ template, role }: { template: TemplateType; role: string }) => {
-  return (
-    <StackItem.Content toolbar={false} role={role} classNames='mli-auto w-full max-w-[50rem]'>
-      <TemplateEditor template={template} />
-    </StackItem.Content>
-  );
-};
-
-export default TemplateContainer;

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { create } from '@dxos/live-object';
-import { useClient } from '@dxos/react-client';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { TemplateEditor } from './TemplateEditor';
-import translations from '../../translations';
-import { TemplateType } from '../../types';
-
-const TEMPLATE = [
-  '{{! System Prompt }}',
-  '',
-  'You are a machine that is an expert chess player.',
-  'The move history of the current game is: {{history}}',
-  'If asked to suggest a move explain why it is a good move.',
-  '',
-  '{{#each artifacts}}',
-  '- {{this}}',
-  '{{/each}}',
-  '',
-  '---',
-  '',
-  '{{input}}',
-  '',
-].join('\n');
-
-const Render = () => {
-  const client = useClient();
-  const [template] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: TEMPLATE }));
-  });
-
-  return (
-    <div role='none' className='flex w-[40rem] border border-separator overflow-hidden'>
-      <TemplateEditor template={template} />
-    </div>
-  );
-};
-
-const meta: Meta<typeof TemplateEditor> = {
-  title: 'plugins/plugin-automation/TemplateEditor',
-  component: TemplateEditor,
-  render: Render,
-  decorators: [
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [TemplateType],
-    }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-    withTheme,
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = Meta<typeof TemplateEditor>;
-
-export const Default: Story = {};