@dxos/plugin-automation 0.7.5-labs.f5080a1 → 0.7.5-labs.ff2ff30

package/src/capabilities/app-graph-builder.ts

@@ -2,13 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { createExtension, toSignal } from '@dxos/plugin-graph';
+import { createExtension, type Node, ROOT_ID, toSignal } from '@dxos/plugin-graph';
 import { memoizeQuery } from '@dxos/plugin-space';
 import { getTypename, parseId, SpaceState } from '@dxos/react-client/echo';
 
-import { AUTOMATION_PLUGIN } from '../meta';
+import { AMBIENT_CHAT_DIALOG, AUTOMATION_PLUGIN } from '../meta';
 
 export default (context: PluginsContext) => {
   const resolve = (typename: string) =>
@@ -46,6 +46,37 @@ export default (context: PluginsContext) => {
         };
       },
     }),
+    createExtension({
+      id: `${AUTOMATION_PLUGIN}/ambient-chat`,
+      filter: (node): node is Node<null> => node.id === ROOT_ID,
+      actions: () => [
+        {
+          id: `${LayoutAction.UpdateDialog._tag}/ambient-chat/open`,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            await dispatch(
+              createIntent(LayoutAction.UpdateDialog, {
+                part: 'dialog',
+                subject: AMBIENT_CHAT_DIALOG,
+                options: {
+                  state: true,
+                  blockAlign: 'end',
+                },
+              }),
+            );
+          },
+          properties: {
+            label: ['open ambient chat label', { ns: AUTOMATION_PLUGIN }],
+            icon: 'ph--chat-centered-text--regular',
+            disposition: 'pin-end',
+            keyBinding: {
+              macos: 'shift+meta+k',
+              windows: 'shift+ctrl+k',
+            },
+          },
+        },
+      ],
+    }),
     createExtension({
       id: `${AUTOMATION_PLUGIN}/automation-for-subject`,
       resolver: ({ id }) => {

package/src/capabilities/react-surface.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { getSpace, isEchoObject, isSpace, type ReactiveEchoObject } from '@dxos/react-client/echo';
 
-import { AutomationPanel, ChatContainer, ServiceRegistry } from '../components';
-import { AUTOMATION_PLUGIN } from '../meta';
+import { AmbientChatDialog, AutomationPanel, ChatContainer, ServiceRegistry } from '../components';
+import { AUTOMATION_PLUGIN, AMBIENT_CHAT_DIALOG } from '../meta';
 import { AIChatType } from '../types';
 
 export default () =>
@@ -26,6 +26,12 @@ export default () =>
         <ServiceRegistry space={isSpace(data.subject) ? data.subject : getSpace(data.subject)!} />
       ),
     }),
+    createSurface({
+      id: AMBIENT_CHAT_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === AMBIENT_CHAT_DIALOG,
+      component: () => <AmbientChatDialog />,
+    }),
     createSurface({
       id: `${AUTOMATION_PLUGIN}/automation`,
       role: 'complementary--automation',

package/src/components/AmbientChatDialog/AmbientChatDialog.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+const preventDefault = (event: Event) => event.preventDefault();
+
+export const AmbientChatDialog = () => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  return (
+    <div role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
+      <Dialog.Content onInteractOutside={preventDefault} classNames='pointer-events-auto' inOverlayLayout>
+        <Dialog.Title classNames='sr-only'>{t('ambient chat dialog title')}</Dialog.Title>
+        <Dialog.Close>
+          <Icon icon='ph--x--regular' size={4} />
+        </Dialog.Close>
+        <h1>Hello</h1>
+      </Dialog.Content>
+    </div>
+  );
+};

package/src/components/AmbientChatDialog/index.ts

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

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

@@ -34,10 +34,9 @@ export const Default: Story = {
     return (
       <div className='flex flex-col w-[500px] p-4 bg-attention'>
         <ToggleContainer
+          open
           title={content[selected].title}
           classNames='p-1 rounded-lg bg-baseSurface border border-neutral-500'
-          toggle
-          defaultOpen
         >
           <div className='flex w-full overflow-hidden'>
             <Tabs length={content.length} selected={selected} onSelect={setSelected} />

package/src/components/Box/Tabbed.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+const numbers = [
+  { regular: 'ph--number-circle-zero--thin', active: 'ph--number-circle-zero--duotone' },
+  { regular: 'ph--number-circle-one--thin', active: 'ph--number-circle-one--duotone' },
+  { regular: 'ph--number-circle-two--thin', active: 'ph--number-circle-two--duotone' },
+  { regular: 'ph--number-circle-three--thin', active: 'ph--number-circle-three--duotone' },
+  { regular: 'ph--number-circle-four--thin', active: 'ph--number-circle-four--duotone' },
+  { regular: 'ph--number-circle-five--thin', active: 'ph--number-circle-five--duotone' },
+  { regular: 'ph--number-circle-six--thin', active: 'ph--number-circle-six--duotone' },
+  { regular: 'ph--number-circle-seven--thin', active: 'ph--number-circle-seven--duotone' },
+  { regular: 'ph--number-circle-eight--thin', active: 'ph--number-circle-eight--duotone' },
+  { regular: 'ph--number-circle-nine--thin', active: 'ph--number-circle-nine--duotone' },
+];
+
+export type TabsProps = ThemedClassName<{
+  length: number;
+  selected?: number;
+  onSelect?: (index: number) => void;
+}>;
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ classNames, length, selected = 0, onSelect }, forwardedRef) => {
+    return (
+      <div
+        ref={forwardedRef}
+        className={mx('flex flex-col overflow-hidden outline-none', classNames)}
+        tabIndex={-1}
+        onKeyDown={(ev) => {
+          // TODO(burdon): Focus when open Toggle.
+          switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowRight': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (selected < length - 1) {
+                onSelect?.(selected + 1);
+              }
+              break;
+            }
+            case 'ArrowUp':
+            case 'ArrowLeft': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (selected > 0) {
+                onSelect?.(selected - 1);
+              }
+              break;
+            }
+
+            case 'Enter': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              onSelect?.(selected);
+              break;
+            }
+          }
+        }}
+      >
+        {Array.from({ length }).map((_, i) => {
+          const icon = numbers[i + 1];
+          return (
+            <div
+              key={i}
+              className={mx(
+                'relative flex w-[24px] h-[28px] justify-center cursor-pointer text-subdued',
+                selected === i && '!text-cyan-550 !dark:text-cyan-300',
+              )}
+            >
+              {i < length - 1 && <div className='absolute left-[11.5px] top-[21px] w-[1px] h-[10px] bg-neutral-400' />}
+              <Icon
+                icon={selected === i ? icon.regular : icon.regular}
+                classNames='z-10 !p-0 !w-[24px] !h-[24px] outline-none'
+                onClick={() => onSelect?.(i)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);

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} />

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/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/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';