@dxos/plugin-assistant 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/src/components/Prompt/Prompt.tsx

@@ -2,21 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Prec } from '@codemirror/state';
+import { type Extension, Prec } from '@codemirror/state';
 import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
-  type BasicExtensionsOptions,
   createBasicExtensions,
   createThemeExtensions,
   keymap,
   useTextEditor,
+  type BasicExtensionsOptions,
   type UseTextEditorProps,
 } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
 
-import { createAutocompleteExtension, type AutocompleteOptions } from './autocomplete';
+import { autocompleteExtension, type AutocompleteOptions } from './autocomplete';
 import { promptReferences, type ReferencesProvider } from './references';
 
 // TODO(burdon): Handle object references.
@@ -28,8 +29,9 @@ export interface PromptController {
 
 export type PromptProps = ThemedClassName<
   {
-    onOpenChange?: (open: boolean) => void;
+    extensions?: Extension;
     references?: ReferencesProvider;
+    onOpenChange?: (open: boolean) => void;
   } & AutocompleteOptions &
     Pick<UseTextEditorProps, 'autoFocus'> &
     Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
@@ -37,7 +39,18 @@ export type PromptProps = ThemedClassName<
 
 export const Prompt = forwardRef<PromptController, PromptProps>(
   (
-    { classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onOpenChange, references },
+    {
+      classNames,
+      extensions,
+      references,
+      autoFocus,
+      lineWrapping = false,
+      placeholder,
+      onSubmit,
+      onSuggest,
+      onCancel,
+      onOpenChange,
+    },
     forwardRef,
   ) => {
     const { themeMode } = useThemeContext();
@@ -46,6 +59,7 @@ export const Prompt = forwardRef<PromptController, PromptProps>(
         debug: true,
         autoFocus,
         extensions: [
+          autocompleteExtension({ onSubmit, onSuggest, onCancel }),
           createBasicExtensions({
             bracketMatching: false,
             lineWrapping,
@@ -53,13 +67,12 @@ export const Prompt = forwardRef<PromptController, PromptProps>(
           }),
           createThemeExtensions({ themeMode }),
           references ? promptReferences({ provider: references }) : [],
-          createAutocompleteExtension({ onSubmit, onSuggest }),
           Prec.highest(
             keymap.of([
               {
                 key: 'cmd-ArrowUp',
                 preventDefault: true,
-                run: (view) => {
+                run: () => {
                   onOpenChange?.(true);
                   return true;
                 },
@@ -67,16 +80,17 @@ export const Prompt = forwardRef<PromptController, PromptProps>(
               {
                 key: 'cmd-ArrowDown',
                 preventDefault: true,
-                run: (view) => {
+                run: () => {
                   onOpenChange?.(false);
                   return true;
                 },
               },
             ]),
           ),
-        ],
+          extensions,
+        ].filter(isNonNullable),
       },
-      [themeMode, onSubmit, onSuggest],
+      [themeMode, extensions, onSubmit, onSuggest],
     );
 
     // Expose editor view.

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

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { log } from '@dxos/log';
+import { TranscriptionPlugin } from '@dxos/plugin-transcription';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { PromptBar } from './PromptBar';
+import translations from '../../translations';
+
+const meta: Meta<typeof PromptBar> = {
+  title: 'plugins/plugin-assistant/PromptBar',
+  component: PromptBar,
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin(), SettingsPlugin(), TranscriptionPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PromptBar>;
+
+export const Default: Story = {
+  // args: {
+  //   classNames: 'w-96 p-4 rounded outline outline-gray-200',
+  // },
+};
+
+export const Toolbar: Story = {
+  render: (args) => {
+    const [processing, setProcessing] = useState(false);
+    useEffect(() => {
+      let t: NodeJS.Timeout;
+      if (processing) {
+        t = setTimeout(() => setProcessing(false), 10_000);
+      }
+      return () => clearTimeout(t);
+    }, [processing]);
+    log.info('processing', { processing });
+
+    return (
+      <PromptBar
+        classNames='w-[25rem] p-1 overflow-hidden border border-gray-200 rounded'
+        microphone
+        processing={processing}
+        onSubmit={() => setProcessing(true)}
+        onCancel={() => setProcessing(false)}
+        {...args}
+      />
+    );
+  },
+};

package/src/components/Prompt/PromptBar.tsx

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { useVoiceInput } from '@dxos/plugin-transcription';
-import { Icon, IconButton, type ThemedClassName, Tooltip, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, type ThemedClassName, Tooltip, useForwardedRef, useTranslation } from '@dxos/react-ui';
 import { Spinner } from '@dxos/react-ui-sfx';
 import { errorText, mx } from '@dxos/react-ui-theme';
 
@@ -13,91 +13,93 @@ import { Prompt, type PromptController, type PromptProps } from './Prompt';
 import { ASSISTANT_PLUGIN } from '../../meta';
 
 export type PromptBarProps = ThemedClassName<
-  Pick<PromptProps, 'placeholder' | 'lineWrapping' | 'onSubmit' | 'onSuggest' | 'onOpenChange' | 'references'> & {
+  Pick<
+    PromptProps,
+    | 'extensions'
+    | 'references'
+    | 'placeholder'
+    | 'lineWrapping'
+    | 'onSubmit'
+    | 'onSuggest'
+    | 'onCancel'
+    | 'onOpenChange'
+  > & {
     processing?: boolean;
     error?: Error;
     microphone?: boolean;
-    onCancel?: () => void;
   }
 >;
 
-export const PromptBar = ({
-  classNames,
-  placeholder,
-  processing,
-  error,
-  microphone,
-  onCancel,
-  references,
-  ...props
-}: PromptBarProps) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
+export const PromptBar = forwardRef<PromptController, PromptBarProps>(
+  ({ classNames, placeholder, processing, error, microphone, references, onCancel, ...props }, forwardedRef) => {
+    const { t } = useTranslation(ASSISTANT_PLUGIN);
+    const promptRef = useForwardedRef<PromptController>(forwardedRef);
+    const [active, setActive] = useState(false);
 
-  const promptRef = useRef<PromptController>(null);
+    // TODO(burdon): Configure capability in TranscriptionPlugin.
+    const { recording } = useVoiceInput({
+      active,
+      onUpdate: (text) => {
+        promptRef.current?.setText(text);
+        promptRef.current?.focus();
+      },
+    });
 
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const [active, setActive] = useState(false);
-  const { recording } = useVoiceInput({
-    active,
-    onUpdate: (text) => {
-      promptRef.current?.setText(text);
-      promptRef.current?.focus();
-    },
-  });
-
-  return (
-    <div
-      className={mx(
-        'shrink-0 w-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] overflow-hidden',
-        classNames,
-      )}
-    >
-      <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-        {(error && (
-          <Tooltip.Trigger content={error.message} delayDuration={0}>
-            <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
-          </Tooltip.Trigger>
-        )) || <Spinner active={processing} />}
-      </div>
-      <Prompt
-        ref={promptRef}
-        autoFocus
-        classNames='pbs-2'
-        lineWrapping={true}
-        placeholder={placeholder ?? t('prompt placeholder')}
-        references={references}
-        {...props}
-      />
-      {(onCancel || microphone) && (
+    return (
+      <div
+        className={mx(
+          'shrink-0 w-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] overflow-hidden',
+          classNames,
+        )}
+      >
         <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-          {processing && onCancel && (
-            <IconButton
-              classNames='px-1.5'
-              variant='ghost'
-              size={5}
-              icon='ph--x--regular'
-              iconOnly
-              label={t('cancel processing button')}
-              onClick={onCancel}
-            />
-          )}
-          {!processing && microphone && (
-            <IconButton
-              classNames={mx('px-1.5', recording && 'bg-primary-500')}
-              variant='ghost'
-              size={5}
-              icon='ph--microphone--regular'
-              iconOnly
-              noTooltip
-              label={t('microphone button')}
-              onMouseDown={() => setActive(true)}
-              onMouseUp={() => setActive(false)}
-              onTouchStart={() => setActive(true)}
-              onTouchEnd={() => setActive(false)}
-            />
-          )}
+          {(error && (
+            <Tooltip.Trigger content={error.message} delayDuration={0}>
+              <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
+            </Tooltip.Trigger>
+          )) || <Spinner active={processing} />}
         </div>
-      )}
-    </div>
-  );
-};
+        <Prompt
+          ref={promptRef}
+          autoFocus
+          classNames='pbs-2'
+          lineWrapping={true}
+          placeholder={placeholder ?? t('prompt placeholder')}
+          references={references}
+          onCancel={onCancel}
+          {...props}
+        />
+        {(onCancel || microphone) && (
+          <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
+            {processing && onCancel && (
+              <IconButton
+                classNames='px-1.5'
+                variant='ghost'
+                size={5}
+                icon='ph--x--regular'
+                iconOnly
+                label={t('cancel processing button')}
+                onClick={onCancel}
+              />
+            )}
+            {!processing && microphone && (
+              <IconButton
+                classNames={mx('px-1.5', recording && 'bg-primary-500')}
+                variant='ghost'
+                size={5}
+                icon='ph--microphone--regular'
+                iconOnly
+                noTooltip
+                label={t('microphone button')}
+                onMouseDown={() => setActive(true)}
+                onMouseUp={() => setActive(false)}
+                onTouchStart={() => setActive(true)}
+                onTouchEnd={() => setActive(false)}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Prompt/autocomplete.ts

@@ -27,14 +27,20 @@ export type AutocompleteOptions = {
    * @returns Array of suggestion strings
    */
   onSuggest?: (text: string) => string[];
+
+  /**
+   * ESC pressed.
+   */
+  onCancel?: () => void;
 };
 
 /**
  * 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(
+// TODO(burdon): Move to react-ui-editor.
+export const autocompleteExtension = ({ onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
+  const suggest = ViewPlugin.fromClass(
     class {
       _decorations: DecorationSet;
       _currentSuggestion: string | null = null;
@@ -103,21 +109,20 @@ export const createAutocompleteExtension = ({ onSubmit, onSuggest }: Autocomplet
   );
 
   return [
-    suggestionPlugin,
+    suggest,
     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);
+            const plugin = view.plugin(suggest);
             return plugin?.completeSuggestion(view) ?? false;
           },
         },
@@ -130,7 +135,7 @@ export const createAutocompleteExtension = ({ onSubmit, onSuggest }: Autocomplet
               return false;
             }
 
-            const plugin = view.plugin(suggestionPlugin);
+            const plugin = view.plugin(suggest);
             return plugin?.completeSuggestion(view) ?? false;
           },
         },
@@ -186,6 +191,7 @@ export const createAutocompleteExtension = ({ onSubmit, onSuggest }: Autocomplet
                 insert: '',
               },
             });
+            onCancel?.();
             return true;
           },
         },
@@ -199,14 +205,14 @@ class InlineSuggestionWidget extends WidgetType {
     super();
   }
 
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const span = document.createElement('span');
     span.textContent = this.suffix;
     span.className = 'cm-inline-suggestion';
     return span;
   }
 
-  override eq(other: InlineSuggestionWidget) {
+  override eq(other: InlineSuggestionWidget): boolean {
     return other.suffix === this.suffix;
   }
 }

package/src/components/Prompt/references.ts

@@ -163,18 +163,18 @@ class ReferenceWidget extends WidgetType {
     super();
   }
 
-  override toDOM() {
+  override toDOM(): HTMLSpanElement {
     const span = document.createElement('span');
     span.textContent = `@ ${this.data.label}`;
     span.className = 'cm-reference-pill';
     return span;
   }
 
-  override eq(other: ReferenceWidget) {
+  override eq(other: ReferenceWidget): boolean {
     return other.data.uri === this.data.uri;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return true;
   }
 }

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

@@ -42,14 +42,14 @@ const DefaultStory = ({ text }: TemplateEditorProps & { text: string }) => {
   });
 
   return (
-    <div role='none' className='flex w-[40rem] border border-separator overflow-hidden'>
+    <div role='none' className='flex w-[50rem] overflow-hidden border-x border-separator'>
       <TemplateEditor template={template} />
     </div>
   );
 };
 
 const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-automation/TemplateEditor',
+  title: 'plugins/plugin-assistant/TemplateEditor',
   component: TemplateEditor,
   render: DefaultStory,
   decorators: [

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

@@ -41,7 +41,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta<typeof TemplateForm> = {
-  title: 'plugins/plugin-automation/TemplateForm',
+  title: 'plugins/plugin-assistant/TemplateForm',
   component: TemplateForm,
   render: DefaultStory,
   decorators: [

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

@@ -7,9 +7,9 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { type Message } from '@dxos/ai';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { type Message } from '@dxos/artifact';
 import { Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
@@ -69,7 +69,7 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
 };
 
 const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-automation/Thread',
+  title: 'plugins/plugin-assistant/Thread',
   render: DefaultStory,
   component: Thread,
   decorators: [

package/src/components/Thread/Thread.tsx

@@ -4,7 +4,7 @@
 
 import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
 
-import { type Message } from '@dxos/artifact';
+import { type Message } from '@dxos/ai';
 import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -32,7 +32,7 @@ export type ThreadProps = ThemedClassName<{
   contextProvider?: ContextProvider;
 }> &
   Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete'>;
+  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
 
 /**
  * Chat thread component.