@dxos/plugin-automation 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/src/components/Prompt/autocomplete.ts

@@ -0,0 +1,212 @@
+//
+// 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

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

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

@@ -0,0 +1,49 @@
+//
+// 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

@@ -0,0 +1,76 @@
+//
+// 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

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

package/src/components/TemplateContainer.tsx

@@ -0,0 +1,21 @@
+//
+// 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

@@ -0,0 +1,72 @@
+//
+// 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 = {};

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
+import { styleTags, tags } from '@lezer/highlight';
+import { handlebarsLanguage } from '@xiechao/codemirror-lang-handlebars';
+import React from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { useThemeContext, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+import { type TemplateType } from '../../types';
+
+handlebarsLanguage.configure({
+  props: [
+    styleTags({
+      '---': tags.lineComment,
+    }),
+  ],
+});
+
+export type TemplateEditorProps = ThemedClassName<{
+  template: TemplateType;
+}>;
+
+export const TemplateEditor = ({ classNames, template }: TemplateEditorProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(
+    () => ({
+      initialValue: template.source,
+      extensions: [
+        createDataExtensions({
+          id: template.id,
+          text: template.source !== undefined ? createDocAccessor(template, ['template']) : undefined,
+        }),
+        createBasicExtensions({
+          bracketMatching: false,
+          lineWrapping: true,
+          placeholder: t('template placeholder'),
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            content: { className: '!p-3' },
+          },
+        }),
+
+        // https://github.com/xiechao/lang-handlebars
+        new LanguageSupport(handlebarsLanguage, syntaxHighlighting(handlebarsHighlightStyle)),
+      ],
+    }),
+    [themeMode, prompt],
+  );
+
+  return <div ref={parentRef} className={mx(classNames)} />;
+};
+
+/**
+ * https://github.com/xiechao/lang-handlebars/blob/direct/src/highlight.js
+ */
+export const handlebarsHighlightStyle = HighlightStyle.define([
+  { tag: tags.tagName, class: 'text-redText' }, // Braces.
+  { tag: tags.variableName, class: 'text-blueText' },
+  { tag: tags.keyword, class: 'text-greenText' },
+  { tag: tags.comment, class: 'text-subdued' },
+]);

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

@@ -0,0 +1,65 @@
+//
+// 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 { TemplateForm } from './TemplateForm';
+import translations from '../../translations';
+import { TemplateType } from '../../types';
+
+const TEMPLATE = [
+  '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.',
+  '',
+  '---',
+  '',
+  '{{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'>
+      <TemplateForm template={template} />
+    </div>
+  );
+};
+
+const meta: Meta<typeof TemplateForm> = {
+  title: 'plugins/plugin-automation/TemplateForm',
+  component: TemplateForm,
+  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 TemplateForm>;
+
+export const Default: Story = {};