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

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -4,16 +4,22 @@
 
 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';
 
 import { ASSISTANT_PLUGIN } from '../../meta';
-import { type AssistantSettingsProps } from '../../types';
+import { LLM_PROVIDERS, type AssistantSettingsProps } from '../../types';
 
-// TODO(burdon): Factor out.
+// TODO(burdon): Factor out default Selector.
 const DEFAULT_VALUE = '__default';
 
+const LLM_PROVIDER_LABELS = {
+  edge: 'DXOS',
+  ollama: 'Ollama',
+  lmstudio: 'LM Studio',
+} as const;
+
 export const AssistantSettings = ({ settings }: { settings: AssistantSettingsProps }) => {
   const { t } = useTranslation(ASSISTANT_PLUGIN);
 
@@ -27,10 +33,26 @@ export const AssistantSettings = ({ settings }: { settings: AssistantSettingsPro
       </DeprecatedFormInput>
 
       <DeprecatedFormInput label={t('settings llm provider label')}>
-        <Input.Switch
-          checked={settings.llmProvider === 'ollama'}
-          onCheckedChange={(checked) => (settings.llmProvider = checked ? 'ollama' : 'edge')}
-        />
+        <Select.Root
+          value={settings.llmProvider ?? 'edge'}
+          onValueChange={(value) => {
+            settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
+          }}
+        >
+          <Select.TriggerButton placeholder={t('settings llm provider label')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
+                {LLM_PROVIDERS.map((model) => (
+                  <Select.Option key={model} value={model}>
+                    {LLM_PROVIDER_LABELS[model]}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
       </DeprecatedFormInput>
 
       <DeprecatedFormInput label={t('settings edge llm model label')}>

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/ChatContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { type FC } from 'react';
 
 import { Capabilities, useCapabilities, useCapability } from '@dxos/app-framework';
 import { type AssociatedArtifact } from '@dxos/artifact';
@@ -13,16 +13,14 @@ import { ThreadContainer } from './Thread';
 import { ASSISTANT_PLUGIN } from '../meta';
 import { type AssistantSettingsProps, type AIChatType } from '../types';
 
-// TODO(burdon): Attention.
-export const ChatContainer = ({
-  role,
-  chat,
-  associatedArtifact,
-}: {
+export type ChatContainerProps = {
   role: string;
   chat: AIChatType;
   associatedArtifact?: AssociatedArtifact;
-}) => {
+};
+
+// TODO(burdon): Attention.
+export const ChatContainer: FC<ChatContainerProps> = ({ role, chat, associatedArtifact }) => {
   const transcription = useCapabilities(TranscriptionCapabilities.Transcriber).length > 0;
   const settings = useCapability(Capabilities.SettingsStore).getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
 

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

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