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

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Match, type Schema as S } from 'effect';
+import { Match, type Schema } from 'effect';
 import React, { type ChangeEvent, useCallback } from 'react';
 
 import { debounce } from '@dxos/async';
@@ -17,7 +17,7 @@ export const PromptSettings = ({ template }: { template: TemplateType }) => {
   const handleKindChange = useCallback(
     (value: string) => {
       const kind = Match.type<string>().pipe(
-        Match.withReturnType<S.Schema.Type<typeof TemplateKindSchema>>(),
+        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: '' })),

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/TemplateEditor/TemplateForm.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Schema as S } from 'effect';
+import { type Schema } from 'effect';
 import React, { Fragment, useEffect } from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
@@ -15,7 +15,7 @@ import { type TemplateInput, TemplateInputType, type TemplateType } from '../../
 
 export type TemplateFormProps = {
   template: TemplateType;
-  schema?: S.Schema<any, any, any>;
+  schema?: Schema.Schema<any, any, any>;
   commandEditable?: boolean;
 };
 

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

@@ -7,10 +7,10 @@ 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 { ObjectId } from '@dxos/echo-schema';
+import { Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
@@ -29,9 +29,9 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
 
   const handleSubmit = useCallback(
     (text: string) => {
-      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
+      const request: Message = { id: Type.ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
       const response: Message = {
-        id: ObjectId.random(),
+        id: Type.ObjectId.random(),
         role: 'assistant',
         content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
       };
@@ -44,7 +44,7 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
           request,
           response,
           {
-            id: ObjectId.random(),
+            id: Type.ObjectId.random(),
             role: 'assistant',
             content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
           },
@@ -69,18 +69,15 @@ 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: [
     withSignals,
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-    }),
+    withClientProvider({ createIdentity: true, createSpace: true }),
     withPluginManager({ plugins: [IntentPlugin()] }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
+    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
   ],
   parameters: {
     translations,
@@ -93,7 +90,7 @@ type Story = StoryObj<ThreadProps>;
 
 const TEST_MESSAGES: Message[] = [
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -103,7 +100,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -128,7 +125,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -139,7 +136,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -151,7 +148,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -162,7 +159,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {

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.