@dxos/plugin-assistant 0.8.2-staging.7ac8446 → 0.8.2

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: [

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-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';
@@ -30,7 +30,7 @@ const DefaultStory = () => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
+    return space.db.add(live(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
   });
 
   return (
@@ -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.