@dxos/plugin-automation 0.7.4 → 0.7.5-labs.401163d

package/src/components/Prompt/prompt-autocomplete.ts

@@ -0,0 +1,200 @@
+//
+// 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
+   */
+  onEnter?: (text: string) => 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[];
+};
+
+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;
+  }
+}
+
+/**
+ * Creates an autocomplete extension that shows inline suggestions.
+ * Pressing Tab will complete the suggestion.
+ */
+export const createAutocompleteExtension = ({ onEnter, 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',
+          run: (view) => {
+            const plugin = view.plugin(suggestionPlugin);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'ArrowRight',
+          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();
+            if (onEnter) {
+              onEnter(text);
+              // Clear the document after calling onEnter
+              view.dispatch({
+                changes: {
+                  from: 0,
+                  to: view.state.doc.length,
+                  insert: '',
+                },
+              });
+              return true;
+            }
+            return false;
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          run: (view) => {
+            view.dispatch({
+              changes: {
+                from: view.state.selection.main.head,
+                insert: '\n',
+              },
+            });
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          run: (view) => {
+            // Clear the entire document.
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: '',
+              },
+            });
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
+};

package/src/components/PromptEditor/PromptEditor.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { create } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -28,20 +28,20 @@ const template = [
   '{input}',
 ].join('\n');
 
-const DefaultStory = () => {
+const Render = () => {
   const client = useClient();
   const [chain] = useState(() => {
     const space = client.spaces.default;
     return space.db.add(
       create(ChainType, {
-        prompts: [create(ChainPromptType, { command: 'test', template, inputs: [] })],
+        prompts: [makeRef(create(ChainPromptType, { command: 'test', template, inputs: [] }))],
       }),
     );
   });
 
   return (
     <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <PromptEditor prompt={chain.prompts![0]!} />
+      <PromptEditor prompt={chain.prompts![0]!.target!} />
     </div>
   );
 };
@@ -49,8 +49,8 @@ const DefaultStory = () => {
 export const Default = {};
 
 const meta: Meta = {
-  title: 'plugins/plugin-automation/PromptTemplate',
-  render: DefaultStory,
+  title: 'plugins/plugin-automation/PromptEditor',
+  render: Render,
   decorators: [
     withClientProvider({ createIdentity: true, createSpace: true, types: [ChainType, ChainPromptType] }),
     withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),

package/src/components/PromptEditor/PromptEditor.tsx

@@ -14,7 +14,7 @@ import {
   useTextEditor,
 } from '@dxos/react-ui-editor';
 import { attentionSurface, groupBorder, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { nameRegex, promptExtension } from './prompt-extension';
 import { AUTOMATION_PLUGIN } from '../../meta';
@@ -69,7 +69,7 @@ const usePromptInputs = (prompt: ChainPromptType) => {
 
     // Create map of unclaimed inputs.
     const unclaimed = new Map<string, ChainInput>(
-      prompt.inputs?.filter(nonNullable).map((input) => [input.name, input]),
+      prompt.inputs?.filter(isNonNullable).map((input) => [input.name, input]),
     );
     const missing: string[] = [];
     Array.from(variables.values()).forEach((name) => {
@@ -161,7 +161,7 @@ export const PromptEditor = ({ prompt, commandEditable = true }: PromptEditorPro
           {/* TODO(zan): Improve layout with grid */}
           <table className='w-full table-fixed border-collapse my-2'>
             <tbody>
-              {prompt.inputs?.filter(nonNullable).map((input) => (
+              {prompt.inputs?.filter(isNonNullable).map((input) => (
                 <tr key={input.name}>
                   <td className='w-[160px] p-1 font-mono text-sm whitespace-nowrap truncate'>
                     <code className='px-2'>{input.name}</code>

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/Thread/Thread.stories.tsx

@@ -0,0 +1,197 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { ObjectId } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+
+import { Thread, type ThreadProps } from './Thread';
+import translations from '../../translations';
+
+faker.seed(1);
+
+const Render = ({ messages: _messages, ...props }: ThreadProps) => {
+  const [streaming, setStreaming] = useState(false);
+  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
+  useEffect(() => {
+    setMessages(_messages ?? []);
+  }, [_messages]);
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
+      const response: Message = {
+        id: ObjectId.random(),
+        role: 'assistant',
+        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
+      };
+      setMessages([...messages, request, response]);
+      setStreaming(true);
+      setTimeout(() => {
+        response.content[0].pending = false;
+        setMessages([
+          ...messages,
+          request,
+          response,
+          {
+            id: ObjectId.random(),
+            role: 'assistant',
+            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
+          },
+        ]);
+        setStreaming(false);
+      }, 3_000);
+    },
+    [messages],
+  );
+
+  return (
+    <div className='flex grow justify-center overflow-center bg-baseSurface'>
+      <div className='flex w-[500px] bg-white dark:bg-black'>
+        <Thread {...props} messages={messages} streaming={streaming} onSubmit={handleSubmit} onStop={() => {}} />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<ThreadProps> = {
+  title: 'plugins/plugin-automation/Thread',
+  render: Render,
+  component: Thread,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ThreadProps>;
+
+const TEST_MESSAGES: Message[] = [
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.sentence(5),
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        disposition: 'cot',
+        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
+          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
+          .join('\n'),
+      },
+      {
+        type: 'text',
+        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
+          .map(() => faker.lorem.paragraphs())
+          .join('\n\n'),
+      },
+      {
+        type: 'tool_use',
+        id: '1234',
+        name: 'search',
+        input: {},
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '1234',
+        content: 'This is a tool result.',
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'tool_use',
+        id: '4567',
+        name: 'create',
+        input: {},
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '4567',
+        content: 'This is a tool result.',
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.paragraphs(1),
+      },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    // debug: true,
+    messages: TEST_MESSAGES,
+  },
+};
+
+export const Input: Story = {
+  args: {
+    streaming: true,
+  },
+};
+
+export const Collapse: Story = {
+  args: {
+    collapse: true,
+    messages: TEST_MESSAGES,
+  },
+};
+
+export const Incremental: Story = {
+  render: () => {
+    const [messages, setMessages] = useState<Message[]>([]);
+    useEffect(() => {
+      let i = 0;
+      const interval = setInterval(() => {
+        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
+        if (i >= TEST_MESSAGES.length) {
+          clearInterval(interval);
+        }
+      }, 2_000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return <Render messages={messages} collapse />;
+  },
+};