@dxos/plugin-assistant 0.8.0 → 0.8.1-main.013e445

package/src/capabilities/ai-client.ts

@@ -2,11 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext } from '@dxos/app-framework';
-import { AIServiceClientImpl } from '@dxos/assistant';
+import { effect, signal } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type AIServiceClient, AIServiceEdgeClient, OllamaClient } from '@dxos/assistant';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
 import { AssistantCapabilities } from './capabilities';
+import { ASSISTANT_PLUGIN } from '../meta';
+import { type AssistantSettingsProps } from '../types';
 
 // TODO(wittjosiah): Factor out.
 const DEFAULT_AI_SERVICE_URL = 'http://localhost:8788';
@@ -14,6 +18,21 @@ const DEFAULT_AI_SERVICE_URL = 'http://localhost:8788';
 export default (context: PluginsContext) => {
   const client = context.requestCapability(ClientCapabilities.Client);
   const endpoint = client.config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL;
-  const aiClient = new AIServiceClientImpl({ endpoint });
-  return contributes(AssistantCapabilities.AiClient, aiClient);
+
+  const ai = signal<AIServiceClient>(new AIServiceEdgeClient({ endpoint }));
+
+  const unsubscribe = effect(() => {
+    // TODO(burdon): Could be undefined.
+    const settings = context
+      .requestCapability(Capabilities.SettingsStore)
+      .getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
+
+    if (settings?.llmProvider === 'ollama') {
+      ai.value = new OllamaClient();
+    } else {
+      ai.value = new AIServiceEdgeClient({ endpoint });
+    }
+  });
+
+  return contributes(AssistantCapabilities.AiClient, ai, () => unsubscribe());
 };

package/src/capabilities/app-graph-builder.ts

@@ -11,14 +11,14 @@ import {
   type PluginsContext,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { createExtension, type Node, ROOT_ID } from '@dxos/plugin-graph';
+import { memoizeQuery } from '@dxos/plugin-space';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { type Space, Filter, getSpace } from '@dxos/react-client/echo';
+import { type Space, Filter, fullyQualifiedId, getSpace, isSpace } from '@dxos/react-client/echo';
 
 import { ASSISTANT_DIALOG, ASSISTANT_PLUGIN } from '../meta';
-import { AIChatType, AssistantAction } from '../types';
+import { AIChatType, AssistantAction, TemplateType } from '../types';
 
 export default (context: PluginsContext) =>
   contributes(Capabilities.AppGraphBuilder, [
@@ -51,7 +51,6 @@ export default (context: PluginsContext) =>
             }
 
             if (!chat) {
-              log.warn('no chat found');
               return;
             }
 
@@ -82,6 +81,51 @@ export default (context: PluginsContext) =>
         },
       ],
     }),
+
+    createExtension({
+      id: `${ASSISTANT_PLUGIN}/root`,
+      filter: (node): node is Node<Space> => isSpace(node.data),
+      connector: ({ node }) => {
+        const templates = memoizeQuery(node.data, Filter.schema(TemplateType));
+        return templates.length > 0
+          ? [
+              {
+                id: `${ASSISTANT_PLUGIN}/templates`,
+                type: `${ASSISTANT_PLUGIN}/templates`,
+                data: null,
+                properties: {
+                  label: ['templates label', { ns: ASSISTANT_PLUGIN }],
+                  icon: 'ph--file-code--regular',
+                  space: node.data,
+                },
+              },
+            ]
+          : [];
+      },
+    }),
+
+    createExtension({
+      id: `${ASSISTANT_PLUGIN}/templates`,
+      filter: (node): node is Node<null, { space: Space }> => node.id === `${ASSISTANT_PLUGIN}/templates`,
+      connector: ({ node }) => {
+        const templates = memoizeQuery(node.properties.space, Filter.schema(TemplateType));
+        return templates
+          .toSorted((a, b) => {
+            const nameA = a.name ?? '';
+            const nameB = b.name ?? '';
+            return nameA.localeCompare(nameB);
+          })
+          .map((template) => ({
+            id: fullyQualifiedId(template),
+            type: `${ASSISTANT_PLUGIN}/template`,
+            data: template,
+            properties: {
+              label: template.name ?? ['template title placeholder', { ns: ASSISTANT_PLUGIN }],
+              icon: 'ph--file-code--regular',
+            },
+          }));
+      },
+    }),
   ]);
 
 // TODO(burdon): Factor out.

package/src/capabilities/capabilities.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type ReadonlySignal } from '@preact/signals-core';
+
 import { defineCapability } from '@dxos/app-framework';
-import { type AIServiceClientImpl } from '@dxos/assistant';
+import { type AIServiceClient } from '@dxos/assistant';
 
 import { ASSISTANT_PLUGIN } from '../meta';
 
 export namespace AssistantCapabilities {
-  export const AiClient = defineCapability<AIServiceClientImpl>(`${ASSISTANT_PLUGIN}/capability/ai-client`);
+  export const AiClient = defineCapability<ReadonlySignal<AIServiceClient>>(`${ASSISTANT_PLUGIN}/capability/ai-client`);
 }

package/src/capabilities/intent-resolver.ts

@@ -30,7 +30,7 @@ export default () => [
       intent: AssistantAction.CreateTemplate,
       resolve: ({ name }) => ({
         data: {
-          object: create(TemplateType, { name, source: '{{! Template }}' }),
+          object: create(TemplateType, { name, kind: { include: 'manual' }, source: '{{! Template }}' }),
         },
       }),
     }),

package/src/capabilities/react-surface.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace, isSpace } from '@dxos/react-client/echo';
 
@@ -30,13 +31,13 @@ export default () =>
     createSurface({
       id: `${ASSISTANT_PLUGIN}/chat`,
       role: 'article',
-      filter: (data): data is { subject: AIChatType } => data.subject instanceof AIChatType,
+      filter: (data): data is { subject: AIChatType } => isInstanceOf(AIChatType, data.subject),
       component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
     }),
     createSurface({
       id: `${ASSISTANT_PLUGIN}/template`,
       role: 'article',
-      filter: (data): data is { subject: TemplateType } => data.subject instanceof TemplateType,
+      filter: (data): data is { subject: TemplateType } => isInstanceOf(TemplateType, data.subject),
       component: ({ data, role }) => <TemplateContainer role={role} template={data.subject} />,
     }),
     createSurface({

package/src/components/AmbientDialog/AmbientDialog.tsx

@@ -12,21 +12,21 @@ const preventDefault = (event: Event) => event.preventDefault();
 
 const minSize = 5;
 
-// TODO(burdon): Factor out.
-export const AmbientDialog = ({
-  children,
-  open: _open,
-  title,
-  onOpenChange,
-}: PropsWithChildren<{ open?: boolean; onOpenChange?: (open: boolean) => void; title?: string }>) => {
+export type AmbientDialogProps = PropsWithChildren<{
+  open?: boolean;
+  title?: string;
+  onOpenChange?: (open: boolean) => void;
+}>;
+
+export const AmbientDialog = ({ children, open: controlledOpen, title, onOpenChange }: AmbientDialogProps) => {
   const [resizeKey, setReizeKey] = useState(0);
   const [size, setSize] = useState<Size>('min-content');
-  const [open, setOpen] = useState(_open);
+  const [open, setOpen] = useState(controlledOpen);
 
   // Update controlled value.
   useEffect(() => {
-    setOpen(_open);
-  }, [_open]);
+    setOpen(controlledOpen);
+  }, [controlledOpen]);
 
   // Update size and key.
   useEffect(() => {
@@ -52,7 +52,7 @@ export const AmbientDialog = ({
         {...resizeAttributes}
         style={{
           ...sizeStyle(size, 'vertical', true),
-          maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 8rem)',
+          maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 9rem)',
         }}
         onInteractOutside={preventDefault}
       >

package/src/components/AssistantDialog.tsx

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

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -4,13 +4,16 @@
 
 import React from 'react';
 
-import { DEFAULT_LLM_MODELS } from '@dxos/assistant';
+import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from '@dxos/assistant';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { ASSISTANT_PLUGIN } from '../../meta';
 import { type AssistantSettingsProps } from '../../types';
 
+// TODO(burdon): Factor out.
+const DEFAULT_VALUE = '__default';
+
 export const AssistantSettings = ({ settings }: { settings: AssistantSettingsProps }) => {
   const { t } = useTranslation(ASSISTANT_PLUGIN);
 
@@ -23,18 +26,49 @@ export const AssistantSettings = ({ settings }: { settings: AssistantSettingsPro
         />
       </DeprecatedFormInput>
 
-      <DeprecatedFormInput label={t('settings llm model label')}>
+      <DeprecatedFormInput label={t('settings llm provider label')}>
+        <Input.Switch
+          checked={settings.llmProvider === 'ollama'}
+          onCheckedChange={(checked) => (settings.llmProvider = checked ? 'ollama' : 'edge')}
+        />
+      </DeprecatedFormInput>
+
+      <DeprecatedFormInput label={t('settings edge llm model label')}>
+        <Select.Root
+          value={settings.edgeModel ?? DEFAULT_VALUE}
+          onValueChange={(value) => {
+            settings.edgeModel = value === DEFAULT_VALUE ? undefined : value;
+          }}
+        >
+          <Select.TriggerButton placeholder={t('settings default llm model label')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                {DEFAULT_EDGE_MODELS.map((model) => (
+                  <Select.Option key={model} value={model}>
+                    {model}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </DeprecatedFormInput>
+
+      <DeprecatedFormInput label={t('settings ollama llm model label')}>
         <Select.Root
-          value={settings.llmModel ?? 'default'}
+          value={settings.ollamaModel ?? DEFAULT_VALUE}
           onValueChange={(value) => {
-            settings.llmModel = value;
+            settings.ollamaModel = value === DEFAULT_VALUE ? undefined : value;
           }}
         >
           <Select.TriggerButton placeholder={t('settings default llm model label')} />
           <Select.Portal>
             <Select.Content>
               <Select.Viewport>
-                {DEFAULT_LLM_MODELS.map((model) => (
+                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                {DEFAULT_OLLAMA_MODELS.map((model) => (
                   <Select.Option key={model} value={model}>
                     {model}
                   </Select.Option>

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

@@ -11,6 +11,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Prompt } from './Prompt';
 import { PromptBar } from './PromptBar';
+import type { ReferenceData } from './references';
 import translations from '../../translations';
 
 const meta: Meta<typeof Prompt> = {
@@ -77,3 +78,36 @@ export const Toolbar: Story = {
     );
   },
 };
+
+export const Includes: 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 });
+        return res;
+      },
+      resolveReference: async ({ uri }) => {
+        const res = references.find((i) => i.uri === uri);
+        console.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,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Prec } from '@codemirror/state';
 import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
@@ -16,6 +17,7 @@ import {
 import { mx } from '@dxos/react-ui-theme';
 
 import { createAutocompleteExtension, type AutocompleteOptions } from './autocomplete';
+import { promptReferences, type ReferencesProvider } from './references';
 
 // TODO(burdon): Handle object references.
 
@@ -27,16 +29,21 @@ export interface PromptController {
 export type PromptProps = ThemedClassName<
   {
     onOpenChange?: (open: boolean) => void;
+    references?: ReferencesProvider;
   } & AutocompleteOptions &
     Pick<UseTextEditorProps, 'autoFocus'> &
     Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
 >;
 
 export const Prompt = forwardRef<PromptController, PromptProps>(
-  ({ classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onOpenChange }, forwardRef) => {
+  (
+    { classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onOpenChange, references },
+    forwardRef,
+  ) => {
     const { themeMode } = useThemeContext();
     const { parentRef, view } = useTextEditor(
       {
+        debug: true,
         autoFocus,
         extensions: [
           createBasicExtensions({
@@ -45,25 +52,28 @@ export const Prompt = forwardRef<PromptController, PromptProps>(
             placeholder,
           }),
           createThemeExtensions({ themeMode }),
+          references ? promptReferences({ provider: references }) : [],
           createAutocompleteExtension({ onSubmit, onSuggest }),
-          keymap.of([
-            {
-              key: 'Alt-ArrowUp',
-              preventDefault: true,
-              run: (view) => {
-                onOpenChange?.(true);
-                return true;
+          Prec.highest(
+            keymap.of([
+              {
+                key: 'cmd-ArrowUp',
+                preventDefault: true,
+                run: (view) => {
+                  onOpenChange?.(true);
+                  return true;
+                },
               },
-            },
-            {
-              key: 'Alt-ArrowDown',
-              preventDefault: true,
-              run: (view) => {
-                onOpenChange?.(false);
-                return true;
+              {
+                key: 'cmd-ArrowDown',
+                preventDefault: true,
+                run: (view) => {
+                  onOpenChange?.(false);
+                  return true;
+                },
               },
-            },
-          ]),
+            ]),
+          ),
         ],
       },
       [themeMode, onSubmit, onSuggest],
@@ -95,6 +105,6 @@ export const Prompt = forwardRef<PromptController, PromptProps>(
       [view, onSubmit],
     );
 
-    return <div ref={parentRef} className={mx('w-full overflow-hidden', classNames)} />;
+    return <div ref={parentRef} className={mx('w-full', classNames)} />;
   },
 );

package/src/components/Prompt/PromptBar.tsx

@@ -5,7 +5,7 @@
 import React, { useRef, useState } from 'react';
 
 import { useVoiceInput } from '@dxos/plugin-transcription';
-import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Icon, IconButton, type ThemedClassName, Tooltip, useTranslation } from '@dxos/react-ui';
 import { Spinner } from '@dxos/react-ui-sfx';
 import { errorText, mx } from '@dxos/react-ui-theme';
 
@@ -13,7 +13,7 @@ import { Prompt, type PromptController, type PromptProps } from './Prompt';
 import { ASSISTANT_PLUGIN } from '../../meta';
 
 export type PromptBarProps = ThemedClassName<
-  Pick<PromptProps, 'placeholder' | 'lineWrapping' | 'onSubmit' | 'onSuggest' | 'onOpenChange'> & {
+  Pick<PromptProps, 'placeholder' | 'lineWrapping' | 'onSubmit' | 'onSuggest' | 'onOpenChange' | 'references'> & {
     processing?: boolean;
     error?: Error;
     microphone?: boolean;
@@ -28,6 +28,7 @@ export const PromptBar = ({
   error,
   microphone,
   onCancel,
+  references,
   ...props
 }: PromptBarProps) => {
   const { t } = useTranslation(ASSISTANT_PLUGIN);
@@ -44,18 +45,27 @@ export const PromptBar = ({
     },
   });
 
-  // TODO(burdon): Tooltip for error.
   return (
     <div
       className={mx(
-        'flex shrink-0 w-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] overflow-hidden',
+        '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 && <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />) || (
-          <Spinner active={processing} />
-        )}
+        {(error && (
+          <Tooltip.Root delayDuration={0}>
+            <Tooltip.Trigger>
+              <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content>
+                <div className='text-sm text-error-500'>{error.message}</div>
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+        )) || <Spinner active={processing} />}
       </div>
       <Prompt
         ref={promptRef}
@@ -63,6 +73,7 @@ export const PromptBar = ({
         classNames='pbs-2'
         lineWrapping={true}
         placeholder={placeholder ?? t('prompt placeholder')}
+        references={references}
         {...props}
       />
       {(onCancel || microphone) && (

package/src/components/Prompt/references.ts

@@ -0,0 +1,180 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { autocompletion, completionKeymap, type CompletionResult } from '@codemirror/autocomplete';
+import { type Extension, RangeSet } from '@codemirror/state';
+import {
+  Decoration,
+  EditorView,
+  keymap,
+  ViewPlugin,
+  WidgetType,
+  type DecorationSet,
+  type ViewUpdate,
+} from '@codemirror/view';
+
+import { Mutex } from '@dxos/async';
+
+export type ReferenceData = {
+  uri: string;
+  label: string;
+  // TODO(dmaretskyi): Consider adding details renderer for when you hover over the reference.
+};
+
+export interface ReferencesProvider {
+  getReferences({ query }: { query: string }): Promise<ReferenceData[]>;
+
+  resolveReference({ uri }: { uri: string }): Promise<ReferenceData | null>;
+}
+
+export type PromptReferencesOptions = {
+  provider: ReferencesProvider;
+  /**
+   * Will prevent the autocomplete from closing when the user blurs the editor.
+   * @default false
+   */
+  debug?: boolean;
+  /**
+   * @default '@'
+   */
+  triggerCharacter?: string;
+};
+
+/**
+ * Include references into text.
+ */
+export const promptReferences = ({
+  provider,
+  debug = false,
+  triggerCharacter = '@',
+}: PromptReferencesOptions): Extension => {
+  if (triggerCharacter.length !== 1) {
+    throw new Error('triggerCharacter must be a single character');
+  }
+
+  const decorationField = ViewPlugin.fromClass(
+    class ReferenceView {
+      private _mutex = new Mutex();
+
+      decorations: DecorationSet = Decoration.set([]);
+
+      constructor(view: EditorView) {
+        queueMicrotask(async () => {
+          const guard = await this._mutex.acquire();
+          try {
+            this.decorations = await this._computeDecorations(view);
+          } finally {
+            guard.release();
+          }
+        });
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          queueMicrotask(async () => {
+            const guard = await this._mutex.acquire();
+            try {
+              this.decorations = await this._computeDecorations(update.view);
+            } finally {
+              guard.release();
+            }
+          });
+        }
+      }
+
+      private async _computeDecorations(view: EditorView): Promise<DecorationSet> {
+        const text = view.state.doc.toString();
+        const references = text.matchAll(new RegExp(`${triggerCharacter}[a-zA-Z0-9@:]+\\s`, 'g'));
+
+        const decorations = [];
+        for (const match of references) {
+          const reference = match[0];
+          const uri = reference.slice(1, -1);
+          const data = await provider.resolveReference({ uri });
+          if (data) {
+            decorations.push(
+              Decoration.replace({
+                widget: new ReferenceWidget(data),
+              }).range(match.index!, match.index! + reference.length),
+            );
+          }
+        }
+
+        return Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      provide: (plugin) => [
+        EditorView.atomicRanges.of(
+          (view): DecorationSet => view.plugin(decorationField)?.decorations ?? RangeSet.empty,
+        ),
+      ],
+    },
+  );
+
+  return [
+    decorationField,
+
+    EditorView.theme({
+      '.cm-reference-pill': {
+        borderRadius: '0.25rem',
+        borderWidth: '1px',
+        marginRight: '0.25rem',
+        marginLeft: '0.25rem',
+      },
+    }),
+
+    autocompletion({
+      activateOnTyping: true,
+      override: [
+        async (context): Promise<CompletionResult | null> => {
+          const match = context.matchBefore(new RegExp(`${triggerCharacter}[a-zA-Z0-9]+`));
+
+          if (!match || match?.to === match?.from) {
+            return null;
+          }
+
+          const query = match.text.slice(1);
+          const references = await provider.getReferences({ query });
+
+          return {
+            from: match.from,
+            filter: false,
+            options: references.map((reference) => ({
+              label: reference.label,
+              apply: `${triggerCharacter}${reference.uri} `,
+            })),
+          };
+        },
+      ],
+      closeOnBlur: !debug,
+      tooltipClass: () => 'shadow rounded',
+      aboveCursor: true,
+    }),
+
+    keymap.of(completionKeymap),
+  ];
+};
+
+class ReferenceWidget extends WidgetType {
+  constructor(private data: ReferenceData) {
+    super();
+  }
+
+  override toDOM() {
+    const span = document.createElement('span');
+    span.textContent = `@ ${this.data.label}`;
+    span.className = 'cm-reference-pill';
+    return span;
+  }
+
+  override eq(other: ReferenceWidget) {
+    return other.data.uri === this.data.uri;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+}