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

package/src/components/{Thread → Box}/ToggleContainer.stories.tsx

@@ -71,7 +71,6 @@ const Render = ({ shrinkX, ...props }: ToggleContainerProps) => {
           <ToggleContainer
             {...props}
             shrinkX={shrinkX}
-            toggle
             icon={
               running ? (
                 <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
@@ -90,7 +89,7 @@ const meta: Meta<typeof ToggleContainer> = {
   title: 'plugins/plugin-automation/ToggleContainer',
   component: ToggleContainer,
   render: Render,
-  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center bg-base' })],
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center bg-baseSurface' })],
 };
 
 export default meta;

package/src/components/{Thread → Box}/ToggleContainer.tsx

@@ -4,39 +4,38 @@
 
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
-import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { Icon, useControlledState, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 export type ToggleContainerProps = ThemedClassName<
   PropsWithChildren<{
     title?: string | JSX.Element;
     icon?: JSX.Element;
-    toggle?: boolean;
-    defaultOpen?: boolean;
+    open?: boolean;
     duration?: number;
     /** Should shrink the width when closed. */
     shrinkX?: boolean;
+    onChangeOpen?: (open: boolean) => void;
   }>
 >;
 
-// TODO(burdon): Externalize toggle state.
 export const ToggleContainer = ({
+  classNames,
   title,
   icon,
-  toggle,
-  defaultOpen,
+  open: _open,
   duration = 400,
   shrinkX = false,
   children,
-  classNames,
+  onChangeOpen,
 }: ToggleContainerProps) => {
-  const [expand, setExpand] = useState(defaultOpen || !toggle);
-  const [expandX, setExpandX] = useState(shrinkX ? expand : true);
-  const [expandY, setExpandY] = useState(expand);
+  const [open, setOpen] = useControlledState(_open);
+  const [expandX, setExpandX] = useState(shrinkX ? open : true);
+  const [expandY, setExpandY] = useState(open);
 
   useEffect(() => {
     let t: NodeJS.Timeout;
-    if (expand) {
+    if (open) {
       if (shrinkX) {
         setExpandX(true);
       }
@@ -56,25 +55,31 @@ export const ToggleContainer = ({
     }
 
     return () => clearTimeout(t);
-  }, [expand]);
+  }, [open]);
+
+  const handleToggle = () => {
+    if (onChangeOpen) {
+      onChangeOpen(!open);
+    } else {
+      setOpen((open) => !open);
+    }
+  };
 
   return (
     <div className={mx('overflow-hidden', classNames)}>
       {title && (
         <div
           className='flex gap-1 py-1 items-center text-sm text-subdued cursor-pointer select-none'
-          onClick={toggle ? () => setExpand((open) => !open) : undefined}
+          onClick={handleToggle}
         >
-          {toggle && (
-            <div className='flex w-[24px] h-[24px] items-center justify-center'>
-              <Icon
-                size={4}
-                icon={'ph--caret-right--regular'}
-                style={{ transitionDuration: `${shrinkX ? duration * 2 : duration}ms` }}
-                classNames={['transition transition-transform ease-in-out', expand ? 'rotate-90' : 'transform-none']}
-              />
-            </div>
-          )}
+          <div className='flex w-[24px] h-[24px] items-center justify-center'>
+            <Icon
+              size={4}
+              icon={'ph--caret-right--regular'}
+              style={{ transitionDuration: `${shrinkX ? duration * 2 : duration}ms` }}
+              classNames={['transition transition-transform ease-in-out', open ? 'rotate-90' : 'transform-none']}
+            />
+          </div>
           <div className='flex-1 pis-1 pie-1 truncate'>{title}</div>
           {icon}
         </div>

package/src/components/Box/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './StatusLine';
+export * from './Tabbed';
+export * from './ToggleContainer';

package/src/components/ChatContainer/ChatContainer.tsx

@@ -2,98 +2,28 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 
-import { Capabilities, useCapabilities, useCapability, useIntentDispatcher } from '@dxos/app-framework';
-import { createSystemPrompt, type Message, type Tool } from '@dxos/artifact';
-import { FunctionType } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { DXN, QueueSubspaceTags } from '@dxos/keys';
-import { useConfig } from '@dxos/react-client';
-import { Filter, getSpace, useQuery } from '@dxos/react-client/echo';
-import { useEdgeClient, useQueue } from '@dxos/react-edge-client';
 import { StackItem } from '@dxos/react-ui-stack';
-import { isNotNullOrUndefined } from '@dxos/util';
 
-import { AutomationCapabilities } from '../../capabilities';
-import { ChatProcessor } from '../../hooks';
-import { covertFunctionToTool, createToolsFromService } from '../../tools';
-import { MockServiceRegistry, type AIChatType } from '../../types';
+import { useChatProcessor, useMessageQueue } from '../../hooks';
+import { type AIChatType } from '../../types';
 import { Thread } from '../Thread';
 
 export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }) => {
-  const config = useConfig();
-  const space = getSpace(chat);
-  const aiClient = useCapability(AutomationCapabilities.AiClient);
-
-  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  const globalTools = useCapabilities(Capabilities.Tools);
-  const functions = useQuery(space, Filter.schema(FunctionType));
-  const serviceRegistry = useMemo(() => new MockServiceRegistry(), []);
-
-  const [serviceTools, setServiceTools] = useState<Tool[]>([]);
-  useEffect(() => {
-    queueMicrotask(async () => {
-      const services = await serviceRegistry.queryServices({});
-      const tools = await Promise.all(services.map((service) => createToolsFromService(service)));
-      setServiceTools(tools.flat());
-    });
-  }, []);
-
-  const tools = useMemo(
-    () => [
-      ...globalTools.flat(),
-      ...artifactDefinitions.flatMap((definition) => definition.tools),
-      ...functions
-        .map((fn) => covertFunctionToTool(fn, config.values.runtime?.services?.edge?.url ?? '', space?.id))
-        .filter(isNotNullOrUndefined),
-      ...serviceTools,
-    ],
-    [globalTools, artifactDefinitions, functions, serviceTools, space?.id],
-  );
-  const systemPrompt = useMemo(
-    () => createSystemPrompt({ artifacts: artifactDefinitions.map((definition) => definition.instructions) }),
-    [artifactDefinitions],
-  );
-
-  // TODO(burdon): Create hook.
-  // TODO(wittjosiah): Should these be created in the component?
-  // TODO(zan): Combine with ai service client?
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const processor = useMemo(
-    () =>
-      new ChatProcessor(
-        aiClient,
-        tools,
-        {
-          space,
-          dispatch,
-        },
-        {
-          model: '@anthropic/claude-3-5-sonnet-20241022',
-          systemPrompt,
-        },
-      ),
-    [aiClient, tools, space, dispatch, systemPrompt],
-  );
-
-  // TODO(wittjosiah): Remove transformation.
-  const queueDxn = useMemo(
-    () => new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space!.id, chat.queue.dxn.parts.at(-1)!]),
-    [chat.queue.dxn],
-  );
-  const edgeClient = useEdgeClient();
-  const messageQueue = useQueue<Message>(edgeClient, queueDxn);
+  const processor = useChatProcessor(chat);
+  const messageQueue = useMessageQueue(chat);
   const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
 
   const handleSubmit = useCallback(
-    async (message: string) => {
+    async (text: string) => {
       if (processor.streaming.value) {
         await processor.cancel();
       }
 
       invariant(messageQueue);
-      await processor.request(message, {
+      await processor.request(text, {
         history: messageQueue.items,
         onComplete: (messages) => messageQueue.append(messages),
       });
@@ -109,9 +39,14 @@ export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }
 
   return (
     <StackItem.Content toolbar={false} role={role}>
-      <Thread messages={messages} streaming={processor.streaming.value} onSubmit={handleSubmit} onStop={handleStop} />
+      <Thread
+        messages={messages}
+        streaming={processor.streaming.value}
+        collapse={true}
+        onSubmit={handleSubmit}
+        onSuggest={handleSubmit}
+        onStop={handleStop}
+      />
     </StackItem.Content>
   );
 };
-
-export default ChatContainer;

package/src/components/Prompt/Prompt.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Prompt } from './Prompt';
+
+const meta: Meta<typeof Prompt> = {
+  title: 'plugins/plugin-automation/Prompt',
+  component: Prompt,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Prompt>;
+
+export const Default: Story = {
+  args: {
+    classNames: 'w-96 p-4 rounded outline outline-gray-200',
+    autoFocus: true,
+    onEnter: (text) => {
+      console.log('onEnter', text);
+    },
+    onSuggest: (text) => {
+      const trimmed = text.trim().toLowerCase();
+      if (trimmed.length < 2) {
+        return [];
+      }
+
+      const suggestions = [
+        'Create a CRM',
+        'Create a new project',
+        'Find flights to Tokyo',
+        "Let's play chess",
+        'Show me Paris on a map',
+      ];
+
+      return suggestions.filter((s) => s.toLowerCase().startsWith(text));
+    },
+  },
+};

package/src/components/Prompt/Prompt.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createThemeExtensions,
+  useTextEditor,
+  type UseTextEditorProps,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { createAutocompleteExtension, type AutocompleteOptions } from './prompt-autocomplete';
+
+export type PromptProps = ThemedClassName<AutocompleteOptions & Pick<UseTextEditorProps, 'autoFocus'>>;
+
+export const Prompt = ({ classNames, autoFocus, onEnter, onSuggest }: PromptProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor({
+    autoFocus,
+    extensions: [
+      createBasicExtensions({
+        bracketMatching: false,
+        lineWrapping: false,
+        placeholder: 'Ask a question...',
+      }),
+      createThemeExtensions({ themeMode }),
+      createAutocompleteExtension({ onEnter, onSuggest }),
+    ],
+  });
+
+  return <div ref={parentRef} className={mx(classNames)} />;
+};

package/src/components/Prompt/index.ts

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

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

@@ -12,6 +12,7 @@ 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',
@@ -32,7 +33,7 @@ const meta: Meta<typeof ServiceRegistry> = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      // types: [ServiceType], // TODO(burdon): Doesn't fit type constraint???
+      types: [ServiceType],
     }),
     withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
     withTheme,

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -8,12 +8,12 @@ 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 { useServiceRegistry } from '../../hooks';
-import { ServiceType } from '../../types';
+import { useServices } from '../../hooks';
+import { categoryIcons, ServiceType } from '../../types';
 
-// TODO(burdon): Option to show all/enabled.
+// TODO(burdon): Option to show all/enabled/filter.
 export const ServiceRegistry = ({ space }: { space: Space }) => {
-  const matchingServices = useServiceRegistry(space);
+  const matchingServices = useServices(space);
   const enabledServices = useQuery(space, Filter.schema(ServiceType));
 
   // Join matching services with enabled services.
@@ -31,7 +31,7 @@ export const ServiceRegistry = ({ space }: { space: Space }) => {
   };
 
   return (
-    <List classNames='h-full grid auto-rows-[5rem] gap-2 p-2 pis-2 pie-3 overflow-y-auto scrollbar-thin'>
+    <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}
@@ -57,7 +57,7 @@ const ServiceItem = ({
     <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='ph--placeholder--regular' size={6} />
+          <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'>
@@ -68,7 +68,7 @@ const ServiceItem = ({
       </div>
       <div className='grid grid-cols-[40px_1fr]'>
         <div />
-        <div className='text-sm text-subdued line-clamp-2'>{service.description}</div>
+        <div className='text-sm text-subdued line-clamp-2 mie-1'>{service.description}</div>
       </div>
     </ListItem.Root>
   );

package/src/components/Thread/Thread.stories.tsx

@@ -159,7 +159,7 @@ const TEST_MESSAGES: Message[] = [
 
 export const Default: Story = {
   args: {
-    debug: true,
+    // debug: true,
     messages: TEST_MESSAGES,
   },
 };
@@ -170,6 +170,13 @@ export const Input: Story = {
   },
 };
 
+export const Collapse: Story = {
+  args: {
+    collapse: true,
+    messages: TEST_MESSAGES,
+  },
+};
+
 export const Incremental: Story = {
   render: () => {
     const [messages, setMessages] = useState<Message[]>([]);

package/src/components/Thread/Thread.tsx

@@ -6,10 +6,10 @@ import React, { type KeyboardEventHandler, useCallback, useMemo, useRef, useStat
 
 import { type Message } from '@dxos/artifact';
 import { IconButton, Input, useTranslation } from '@dxos/react-ui';
+import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
 import { Spinner } from '@dxos/react-ui-sfx';
 import { mx } from '@dxos/react-ui-theme';
 
-import { ScrollContainer, type ScrollController } from './ScrollContainer';
 import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
 import { AUTOMATION_PLUGIN } from '../../meta';
 
@@ -130,7 +130,7 @@ export const Thread = ({
           <Input.Root>
             <Input.TextInput
               autoFocus
-              classNames='px-2 bg-base rounded'
+              classNames='px-2 baseSurface rounded'
               placeholder={t('chat input placeholder')}
               value={text}
               onChange={(ev) => setText(ev.target.value)}