@dxos/plugin-assistant 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

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,69 @@
+//
+// 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,
+    controls: { disable: true },
+  },
+};
+
+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,110 +2,104 @@
 // 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 { errorMessageColors, errorText, mx } from '@dxos/react-ui-theme';
+import { errorText, mx } from '@dxos/react-ui-theme';
 
 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.Root delayDuration={0}>
-            <Tooltip.Trigger>
+    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>
-            <Tooltip.Portal>
-              <Tooltip.Content>
-                <div className={mx('text-sm', errorMessageColors)}>{error.message}</div>
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-        )) || <Spinner active={processing} />}
-      </div>
-      <Prompt
-        ref={promptRef}
-        autoFocus
-        classNames='pbs-2'
-        lineWrapping={true}
-        placeholder={placeholder ?? t('prompt placeholder')}
-        references={references}
-        {...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)}
-            />
-          )}
+          )) || <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/PromptSettings.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Match, type Schema } from 'effect';
+import React, { type ChangeEvent, useCallback } from 'react';
+
+import { debounce } from '@dxos/async';
+import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { ASSISTANT_PLUGIN } from '../meta';
+import { TemplateKinds, type TemplateType, type TemplateKindSchema } from '../types';
+
+export const PromptSettings = ({ template }: { template: TemplateType }) => {
+  const { t } = useTranslation(ASSISTANT_PLUGIN);
+
+  const handleKindChange = useCallback(
+    (value: string) => {
+      const kind = Match.type<string>().pipe(
+        Match.withReturnType<Schema.Schema.Type<typeof TemplateKindSchema>>(),
+        Match.when('always', () => ({ include: 'always' })),
+        Match.when('schema-matching', () => ({ include: 'schema-matching', typename: '' })),
+        Match.when('automatically', () => ({ include: 'automatically', description: '' })),
+        Match.orElse(() => ({ include: 'manual' })),
+      )(value);
+
+      template.kind = kind;
+    },
+    [template],
+  );
+
+  const handleTypenameChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'schema-matching') {
+        template.kind.typename = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
+  const handleDescriptionChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'automatically') {
+        template.kind.description = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
+  return (
+    <div className='p-2 flex flex-col gap-4'>
+      <h2>{t('prompt rules label')}</h2>
+      <Toolbar.Root>
+        <Select.Root value={template.kind.include} onValueChange={handleKindChange}>
+          <Toolbar.Button asChild>
+            <Select.TriggerButton />
+          </Toolbar.Button>
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {TemplateKinds.map((kind) => (
+                  <Select.Option key={kind} value={kind}>
+                    {kind}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        {template.kind.include === 'schema-matching' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('typename placeholder')}
+              defaultValue={template.kind.typename}
+              onChange={handleTypenameChange}
+            />
+          </Input.Root>
+        )}
+        {template.kind.include === 'automatically' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('description placeholder')}
+              defaultValue={template.kind.description}
+              onChange={handleDescriptionChange}
+            />
+          </Input.Root>
+        )}
+      </Toolbar.Root>
+    </div>
+  );
+};

package/src/components/TemplateContainer.tsx

@@ -2,92 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Match, type Schema as S } from 'effect';
-import React, { type ChangeEvent, useCallback } from 'react';
+import React from 'react';
 
-import { debounce } from '@dxos/async';
-import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { TemplateEditor } from './TemplateEditor';
-import { ASSISTANT_PLUGIN } from '../meta';
-import { TemplateKinds, type TemplateKindSchema, type TemplateType } from '../types';
+import { type TemplateType } from '../types';
 
 export const TemplateContainer = ({ template, role }: { template: TemplateType; role: string }) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
-
-  const handleKindChange = useCallback(
-    (value: string) => {
-      const kind = Match.type<string>().pipe(
-        Match.withReturnType<S.Schema.Type<typeof TemplateKindSchema>>(),
-        Match.when('always', () => ({ include: 'always' })),
-        Match.when('schema-matching', () => ({ include: 'schema-matching', typename: '' })),
-        Match.when('automatically', () => ({ include: 'automatically', description: '' })),
-        Match.orElse(() => ({ include: 'manual' })),
-      )(value);
-
-      template.kind = kind;
-    },
-    [template],
-  );
-
-  const handleTypenameChange = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      if (template.kind.include === 'schema-matching') {
-        template.kind.typename = event.target.value;
-      }
-    }, 300),
-    [template.kind.include],
-  );
-
-  const handleDescriptionChange = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      if (template.kind.include === 'automatically') {
-        template.kind.description = event.target.value;
-      }
-    }, 300),
-    [template.kind.include],
-  );
-
   return (
-    <StackItem.Content role={role} toolbar classNames='container-max-width'>
-      {/* TODO(wittjosiah): Move this toolbar into c11y sidebar. */}
-      <Toolbar.Root>
-        <Select.Root value={template.kind.include} onValueChange={handleKindChange}>
-          <Toolbar.Button asChild>
-            <Select.TriggerButton />
-          </Toolbar.Button>
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {TemplateKinds.map((kind) => (
-                  <Select.Option key={kind} value={kind}>
-                    {kind}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-        {template.kind.include === 'schema-matching' && (
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('typename placeholder')}
-              defaultValue={template.kind.typename}
-              onChange={handleTypenameChange}
-            />
-          </Input.Root>
-        )}
-        {template.kind.include === 'automatically' && (
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('description placeholder')}
-              defaultValue={template.kind.description}
-              onChange={handleDescriptionChange}
-            />
-          </Input.Root>
-        )}
-      </Toolbar.Root>
+    <StackItem.Content role={role} classNames='container-max-width'>
       <TemplateEditor template={template} />
     </StackItem.Content>
   );

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

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { createSystemPrompt } from '@dxos/artifact';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -38,18 +38,18 @@ const DefaultStory = ({ text }: TemplateEditorProps & { text: string }) => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: text, kind: { include: 'manual' } }));
+    return space.db.add(live(TemplateType, { source: text, kind: { include: 'manual' } }));
   });
 
   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: [