@dxos/plugin-automation 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

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

@@ -28,7 +28,7 @@ const template = [
   '{input}',
 ].join('\n');
 
-const DefaultStory = () => {
+const Render = () => {
   const client = useClient();
   const [chain] = useState(() => {
     const space = client.spaces.default;
@@ -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/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,75 @@
+//
+// 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]);
+
+  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

@@ -5,48 +5,57 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { type Message } from '@dxos/artifact';
 import { ObjectId } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { IconButton, Input, Toolbar } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
 import { Thread, type ThreadProps } from './Thread';
+import translations from '../../translations';
 
-faker.seed(0);
+faker.seed(1);
 
 const Render = ({ messages: _messages, ...props }: ThreadProps) => {
-  const [messages, setMessages] = useState(_messages);
+  const [streaming, setStreaming] = useState(false);
+  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
   useEffect(() => {
-    const message: Message = {
-      id: ObjectId.random(),
-      role: 'assistant',
-      content: [
-        {
-          type: 'text',
-          text: '',
-        },
-      ],
-    };
-
-    const i = setInterval(() => {
-      const block = message.content[0];
-      invariant(block.type === 'text');
-      block.text += ' ' + faker.lorem.word();
-      setMessages([..._messages, message]);
-    }, 200);
-
-    return () => clearInterval(i);
-  }, []);
+    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-white dark:bg-black'>
-      <div className='flex w-[500px] bg-base'>
-        <Thread {...props} messages={messages} />
+    <div className='flex grow justify-center overflow-center bg-base'>
+      <div className='flex w-[500px] bg-white dark:bg-black'>
+        <Thread {...props} messages={messages} streaming={streaming} onSubmit={handleSubmit} onStop={() => {}} />
       </div>
     </div>
   );
@@ -57,86 +66,132 @@ const meta: Meta<ThreadProps> = {
   render: Render,
   component: Thread,
   decorators: [withSignals, withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<ThreadProps>;
 
-export const Default: Story = {
-  args: {
-    streaming: true,
-    messages: [
+const TEST_MESSAGES: Message[] = [
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
       {
-        id: ObjectId.random(),
-        role: 'user',
-        content: [
-          {
-            type: 'text',
-            text: 'hello',
-          },
-        ],
+        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: 'assistant',
-      //   content: [
-      //     {
-      //       type: 'text',
-      //       disposition: 'cot',
-      //       text: ['1. Consider the question.', '2. Plan the route.', '3. Plot the course.'].join('\n'),
-      //     },
-      //     {
-      //       type: 'text',
-      //       text: 'Things',
-      //     },
-      //     {
-      //       type: 'json',
-      //       json: '{}',
-      //     },
-      //   ],
-      // },
     ],
   },
+  {
+    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 Line = {
+export const Input: Story = {
+  args: {
+    streaming: true,
+  },
+};
+
+export const Collapse: Story = {
+  args: {
+    collapse: true,
+    messages: TEST_MESSAGES,
+  },
+};
+
+export const Incremental: Story = {
   render: () => {
-    const [lines, setLines] = useState<string[]>([]);
-    const [expanded, setExpanded] = useState(false);
-    return (
-      <div className='flex grow justify-center overflow-center bg-white dark:bg-black'>
-        <div className='flex flex-col w-[500px] bg-base'>
-          <Toolbar.Root>
-            <IconButton
-              icon='ph--plus--regular'
-              label='Add'
-              iconOnly
-              onClick={() => {
-                setLines((lines) => [...lines, faker.lorem.sentence(5)]);
-                // setExpanded((expanded) => !expanded);
-              }}
-            />
-          </Toolbar.Root>
-          <div>
-            {lines.map((line, i) => (
-              <div key={i} className='flex h-[32px] p-1 px-3 items-center'>
-                {line}
-              </div>
-            ))}
-          </div>
-          <div
-            className={mx(
-              'flex flex-col justify-end p-1 items-center h-[40px] transition-h duration-[250ms]',
-              expanded && 'h-[72px]',
-            )}
-          >
-            <Input.Root>
-              <Input.TextInput placeholder='Enter message...' />
-            </Input.Root>
-          </div>
-        </div>
-      </div>
-    );
+    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 />;
   },
 };