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

package/src/capabilities/react-surface.tsx

@@ -2,16 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import { Effect } from 'effect';
+import React, { useEffect, useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { isInstanceOf, getTypename } from '@dxos/echo-schema';
+import { Capabilities, contributes, createIntent, createSurface, useIntentDispatcher } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+import { Filter, isInstanceOf, Query } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
-import { fullyQualifiedId, getSpace, isLiveObject, type SpaceId } from '@dxos/react-client/echo';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import {
+  type AnyLiveObject,
+  fullyQualifiedId,
+  getSpace,
+  getTypename,
+  isEchoObject,
+  type SpaceId,
+} from '@dxos/react-client/echo';
 
 import { AssistantDialog, AssistantSettings, ChatContainer, PromptSettings, TemplateContainer } from '../components';
 import { ASSISTANT_PLUGIN, ASSISTANT_DIALOG } from '../meta';
-import { AIChatType, type AssistantSettingsProps, TemplateType } from '../types';
+import { AIChatType, AssistantAction, type AssistantSettingsProps, CompanionTo, TemplateType } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
@@ -32,17 +42,16 @@ export default () =>
       id: `${ASSISTANT_PLUGIN}/chat`,
       role: 'article',
       filter: (data): data is { subject: AIChatType; variant: undefined } =>
-        isInstanceOf(AIChatType, data.subject) && data.variant !== 'assistant-chat',
+        Obj.instanceOf(AIChatType, data.subject) && data.variant !== 'assistant-chat',
       component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
     }),
     createSurface({
       id: `${ASSISTANT_PLUGIN}/object-chat`,
       role: 'article',
-      filter: (data): data is { companionTo: AIChatType; subject: 'assistant-chat' } =>
-        isLiveObject(data.companionTo) &&
-        (data as any).companionTo.assistantChatQueue &&
-        data.subject === 'assistant-chat',
+      filter: (data): data is { companionTo: AnyLiveObject<any>; subject: AIChatType | 'assistant-chat' } =>
+        isEchoObject(data.companionTo) && (isInstanceOf(AIChatType, data.subject) || data.subject === 'assistant-chat'),
       component: ({ data, role }) => {
+        const { dispatch } = useIntentDispatcher();
         const associatedArtifact = useMemo(
           () => ({
             id: fullyQualifiedId(data.companionTo),
@@ -51,19 +60,55 @@ export default () =>
           }),
           [data.companionTo],
         );
-        return <ChatContainer role={role} chat={data.companionTo} associatedArtifact={associatedArtifact} />;
+
+        // TODO(wittjosiah): Factor out to container.
+        useEffect(() => {
+          const timeout = setTimeout(async () => {
+            const space = getSpace(data.companionTo);
+            if (space && data.subject === 'assistant-chat') {
+              const result = await space.db
+                .query(Query.select(Filter.ids(data.companionTo.id)).targetOf(CompanionTo).source())
+                .run();
+              if (result.objects.length > 0) {
+                return;
+              }
+
+              const program = Effect.gen(function* () {
+                const { object } = yield* dispatch(createIntent(AssistantAction.CreateChat, { space }));
+                yield* dispatch(createIntent(SpaceAction.AddObject, { object, target: space, hidden: true }));
+                yield* dispatch(
+                  createIntent(SpaceAction.AddRelation, {
+                    space,
+                    schema: CompanionTo,
+                    source: object,
+                    target: data.companionTo,
+                  }),
+                );
+              });
+              void Effect.runPromise(program);
+            }
+          });
+
+          return () => clearTimeout(timeout);
+        }, [data.subject]);
+
+        if (data.subject === 'assistant-chat') {
+          return null;
+        }
+
+        return <ChatContainer role={role} chat={data.subject} associatedArtifact={associatedArtifact} />;
       },
     }),
     createSurface({
       id: `${ASSISTANT_PLUGIN}/template`,
       role: 'article',
-      filter: (data): data is { subject: TemplateType } => isInstanceOf(TemplateType, data.subject),
+      filter: (data): data is { subject: TemplateType } => Obj.instanceOf(TemplateType, data.subject),
       component: ({ data, role }) => <TemplateContainer role={role} template={data.subject} />,
     }),
     createSurface({
       id: `${ASSISTANT_PLUGIN}/prompt-settings`,
       role: 'object-settings',
-      filter: (data): data is { subject: TemplateType } => isInstanceOf(TemplateType, data.subject),
+      filter: (data): data is { subject: TemplateType } => Obj.instanceOf(TemplateType, data.subject),
       component: ({ data }) => <PromptSettings template={data.subject} />,
     }),
   ]);

package/src/components/AmbientDialog/AmbientDialog.stories.tsx

@@ -19,7 +19,7 @@ import { AmbientDialog } from './AmbientDialog';
 import translations from '../../translations';
 
 const meta: Meta<typeof AmbientDialog> = {
-  title: 'plugins/plugin-automation/AmbientDialog',
+  title: 'plugins/plugin-assistant/AmbientDialog',
   component: AmbientDialog,
   render: () => {
     const [open, setOpen] = useState(true);
@@ -69,7 +69,7 @@ const meta: Meta<typeof AmbientDialog> = {
       plugins: [IntentPlugin()],
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
+    withLayout({ fullscreen: true }),
   ],
   parameters: {
     translations,

package/src/components/AmbientDialog/AmbientDialog.tsx

@@ -15,10 +15,19 @@ const minSize = 5;
 export type AmbientDialogProps = PropsWithChildren<{
   open?: boolean;
   title?: string;
+  resizeable?: boolean;
   onOpenChange?: (open: boolean) => void;
+  onEscape?: () => void;
 }>;
 
-export const AmbientDialog = ({ children, open: controlledOpen, title, onOpenChange }: AmbientDialogProps) => {
+export const AmbientDialog = ({
+  children,
+  open: controlledOpen,
+  title,
+  resizeable = true,
+  onOpenChange,
+  onEscape,
+}: AmbientDialogProps) => {
   const [resizeKey, setReizeKey] = useState(0);
   const [size, setSize] = useState<Size>('min-content');
   const [open, setOpen] = useState(controlledOpen);
@@ -47,26 +56,31 @@ export const AmbientDialog = ({ children, open: controlledOpen, title, onOpenCha
   return (
     <div role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
       <Dialog.Content
-        classNames='relative box-content py-0 px-2 md:is-[35rem] md:max-is-none overflow-hidden pointer-events-auto transition-[block-size] ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200'
+        classNames='relative box-content p-0 md:is-[35rem] md:max-is-none overflow-hidden pointer-events-auto transition-[block-size] ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200'
         inOverlayLayout
         {...resizeAttributes}
         style={{
-          ...sizeStyle(size, 'vertical', true),
+          ...(resizeable ? sizeStyle(size, 'vertical', true) : {}),
           maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 9rem)',
         }}
+        onEscapeKeyDown={onEscape}
         onInteractOutside={preventDefault}
       >
-        <ResizeHandle
-          key={resizeKey}
-          side='block-start'
-          defaultSize='min-content'
-          minSize={minSize}
-          fallbackSize={minSize}
-          iconPosition='center'
-          onSizeChange={setSize}
-        />
+        {(resizeable && (
+          <>
+            <ResizeHandle
+              key={resizeKey}
+              side='block-start'
+              defaultSize='min-content'
+              minSize={minSize}
+              fallbackSize={minSize}
+              iconPosition='center'
+              onSizeChange={setSize}
+            />
 
-        <DialogHeader open={open} title={title} onToggle={handleToggle} />
+            <DialogHeader open={open} title={title} onToggle={handleToggle} />
+          </>
+        )) || <Dialog.Title srOnly />}
 
         {children}
       </Dialog.Content>

package/src/components/AssistantDialog.tsx

@@ -24,10 +24,10 @@ export const AssistantDialog: FC<{ chat?: AIChatType }> = ({ chat }) => {
   return (
     <AmbientDialog open={open} onOpenChange={setOpen} title={t('assistant dialog title')}>
       <ThreadContainer
+        part={'dialog'}
         chat={chat}
         onOpenChange={setOpen}
         settings={settings}
-        part={'dialog'}
         transcription={transcription}
       />
     </AmbientDialog>

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/assistant';
+import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/ai';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 

package/src/components/BlueprintEditor/BlueprintEditor.stories.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { BlueprintEditor } from './BlueprintEditor';
+import { RESEARCH_BLUEPRINT } from '../../testing';
+import translations from '../../translations';
+
+const meta: Meta<typeof BlueprintEditor> = {
+  title: 'plugins/plugin-assistant/BlueprintEditor',
+  component: BlueprintEditor,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'mli-auto max-is-[50rem] justify-center' })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlueprintEditor>;
+
+export const Default: Story = {
+  args: {
+    blueprint: RESEARCH_BLUEPRINT,
+  },
+};

package/src/components/BlueprintEditor/BlueprintEditor.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Blueprint, type BlueprintParser } from '@dxos/assistant';
+import { toJsonSchema } from '@dxos/echo-schema';
+import { useThemeContext, type ThemedClassName } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createJsonExtensions,
+  createThemeExtensions,
+  editorMonospace,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+export type BlueprintEditorProps = ThemedClassName<{
+  blueprint: BlueprintParser.DSL;
+}>;
+
+// TODO(burdon): Factor out JsonEditor.
+// TODO(burdon): Make editable.
+export const BlueprintEditor = ({ classNames, blueprint }: BlueprintEditorProps) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor({
+    initialValue: JSON.stringify(blueprint, null, 2),
+    extensions: [
+      createBasicExtensions({ lineWrapping: false }),
+      createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+      // TODO(burdon): ERROR: reference "/schemas/any" resolves to more than one schema
+      createJsonExtensions({ schema: toJsonSchema(Blueprint) }),
+      editorMonospace,
+    ],
+  });
+
+  return (
+    <div ref={parentRef} className={mx('flex w-full pli-2 overflow-x-scroll border-x border-separator', classNames)} />
+  );
+};

package/src/components/BlueprintEditor/index.ts

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

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

@@ -7,17 +7,65 @@ 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 { Prompt } from './Prompt';
-import { PromptBar } from './PromptBar';
+import { PromptBar, type PromptBarProps } from './PromptBar';
 import type { ReferenceData } from './references';
 import translations from '../../translations';
 
+const references: ReferenceData[] = [
+  {
+    uri: 'dxn:echo:@:AAAAAAAA',
+    label: 'Meeting Notes',
+  },
+  {
+    uri: 'dxn:echo:@:BBBBBBBB',
+    label: 'Project Plan',
+  },
+  {
+    uri: 'dxn:echo:@:CCCCCCCC',
+    label: 'Meeting Plan',
+  },
+];
+
+const DefaultStory = (props: PromptBarProps) => {
+  const [processing, setProcessing] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout;
+    if (processing) {
+      t = setTimeout(() => setProcessing(false), 10_000);
+    }
+    return () => clearTimeout(t);
+  }, [processing]);
+
+  return (
+    <PromptBar
+      classNames='w-[25rem] p-1 overflow-hidden border border-gray-200 rounded'
+      microphone
+      processing={processing}
+      onSubmit={() => setProcessing(true)}
+      onCancel={() => setProcessing(false)}
+      {...props}
+    />
+  );
+};
+
 const meta: Meta<typeof Prompt> = {
-  title: 'plugins/plugin-automation/Prompt',
+  title: 'plugins/plugin-assistant/Prompt',
   component: Prompt,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [IntentPlugin(), SettingsPlugin(), TranscriptionPlugin()],
+    }),
+    withTheme,
+    withLayout(),
+  ],
   parameters: {
     layout: 'centered',
     translations,
@@ -26,14 +74,14 @@ const meta: Meta<typeof Prompt> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Prompt>;
+type Story = StoryObj<typeof DefaultStory>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+export const WithSuggestions: Story = {
   args: {
-    classNames: 'w-96 p-4 rounded outline outline-gray-200',
-    autoFocus: true,
     onSubmit: (text) => {
-      console.log('onEnter', text);
+      log('onSubmit', { text });
     },
     onSuggest: (text) => {
       const trimmed = text.trim().toLowerCase();
@@ -54,60 +102,19 @@ export const Default: Story = {
   },
 };
 
-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]);
-    console.log('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}
-      />
-    );
-  },
-};
-
-export const Includes: Story = {
+export const WithReferences: Story = {
   args: {
-    classNames: 'w-96 p-4 rounded outline outline-gray-200',
     references: {
       getReferences: async ({ query }) => {
         const res = references.filter((i) => i.label.toLowerCase().startsWith(query.toLowerCase()));
-        console.log('getReferences', { query, res });
+        log('getReferences', { query, res });
         return res;
       },
       resolveReference: async ({ uri }) => {
         const res = references.find((i) => i.uri === uri);
-        console.log('resolveReference', { uri, res });
+        log('resolveReference', { uri, res });
         return res ?? null;
       },
     },
   },
 };
-
-const references: ReferenceData[] = [
-  {
-    uri: 'dxn:echo:@:AAAAAAAA',
-    label: 'Meeting Notes',
-  },
-  {
-    uri: 'dxn:echo:@:BBBBBBBB',
-    label: 'Project Plan',
-  },
-  {
-    uri: 'dxn:echo:@:CCCCCCCC',
-    label: 'Meeting Plan',
-  },
-];

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}
+      />
+    );
+  },
+};