@dxos/plugin-assistant 0.8.3 → 0.8.4-main.f9ba587

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

@@ -1,84 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Config } from '@dxos/client';
-import { faker } from '@dxos/random';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { Dialog, Toolbar, Button } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { AmbientDialog } from './AmbientDialog';
-import translations from '../../translations';
-
-const meta: Meta<typeof AmbientDialog> = {
-  title: 'plugins/plugin-assistant/AmbientDialog',
-  component: AmbientDialog,
-  render: () => {
-    const [open, setOpen] = useState(true);
-    const [items, setItems] = useState<string[]>([]);
-    return (
-      <>
-        <div>
-          <Toolbar.Root>
-            <Toolbar.Button onClick={() => setOpen(true)}>Open</Toolbar.Button>
-          </Toolbar.Root>
-        </div>
-        <Dialog.Root open={open} onOpenChange={setOpen}>
-          <AmbientDialog>
-            <div className='flex flex-col h-full overflow-hidden'>
-              <div className='flex flex-col h-full gap-2 overflow-auto'>
-                {items.map((item) => (
-                  <div key={item} className='px-2'>
-                    {item}
-                  </div>
-                ))}
-                {items.length > 0 && <div className='pbe-2' />}
-              </div>
-              <div className='shrink-0 h-[40px]'>
-                <Button onClick={() => setItems([...items, faker.lorem.word()])}>Add</Button>
-              </div>
-            </div>
-          </AmbientDialog>
-        </Dialog.Root>
-      </>
-    );
-  },
-  decorators: [
-    // TODO(burdon): Replace with ClientPlugin.
-    withClientProvider({
-      config: new Config({
-        runtime: {
-          client: { edgeFeatures: { signaling: true } },
-          services: {
-            edge: { url: 'https://edge.dxos.workers.dev/' },
-            iceProviders: [{ urls: 'https://edge.dxos.workers.dev/ice' }],
-          },
-        },
-      }),
-      createIdentity: true,
-      createSpace: true,
-    }),
-    withPluginManager({
-      plugins: [IntentPlugin()],
-    }),
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AmbientDialog>;
-
-export const Default: Story = {};

package/src/components/AmbientDialog/AmbientDialog.tsx

@@ -1,117 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren, useCallback, useEffect, useState } from 'react';
-
-import { Dialog, Icon, IconButton } from '@dxos/react-ui';
-import { resizeAttributes, ResizeHandle, type Size, sizeStyle } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/react-ui-theme';
-
-const preventDefault = (event: Event) => event.preventDefault();
-
-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,
-  resizeable = true,
-  onOpenChange,
-  onEscape,
-}: AmbientDialogProps) => {
-  const [resizeKey, setReizeKey] = useState(0);
-  const [size, setSize] = useState<Size>('min-content');
-  const [open, setOpen] = useState(controlledOpen);
-
-  // Update controlled value.
-  useEffect(() => {
-    setOpen(controlledOpen);
-  }, [controlledOpen]);
-
-  // Update size and key.
-  useEffect(() => {
-    setSize(open ? 'min-content' : minSize);
-    setReizeKey((key) => key + 1);
-  }, [open]);
-
-  // TODO(burdon): Animate open/close.
-  // NOTE: We set the min size to 5rem (80px), and the header and prompt bar to 40px (i.e., the rail-size) each.
-  // The dialog has no vertical padding and has box-content so that when closed it collapses to the size of the header and prompt bar.
-  const handleToggle = useCallback(() => {
-    setOpen((open) => {
-      onOpenChange?.(!open);
-      return !open;
-    });
-  }, []);
-
-  return (
-    <div role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
-      <Dialog.Content
-        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={{
-          ...(resizeable ? sizeStyle(size, 'vertical', true) : {}),
-          maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 9rem)',
-        }}
-        onEscapeKeyDown={onEscape}
-        onInteractOutside={preventDefault}
-      >
-        {(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} />
-          </>
-        )) || <Dialog.Title srOnly />}
-
-        {children}
-      </Dialog.Content>
-    </div>
-  );
-};
-
-/**
- * Matches same layout grid as PromptBar.
- */
-const DialogHeader = ({ open, title, onToggle }: { open?: boolean; title?: string; onToggle: () => void }) => {
-  return (
-    <div className='flex shrink-0 w-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] items-center overflow-hidden'>
-      <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-        <Dialog.Close>
-          <Icon icon='ph--x--regular' />
-        </Dialog.Close>
-      </div>
-      <div className='grow'>
-        <Dialog.Title classNames='flex justify-center text-xs text-subdued'>{title}</Dialog.Title>
-      </div>
-      <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
-        <IconButton
-          variant='ghost'
-          icon={'ph--caret-up--regular'}
-          classNames={mx('[&>svg]:transition [&>svg]:duration-200', open && '[&>svg]:rotate-180')}
-          iconOnly
-          label='Shrink'
-          onClick={onToggle}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/AssistantDialog.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, useState } from 'react';
-
-import { useCapability, Capabilities, useCapabilities } from '@dxos/app-framework';
-import { TranscriptionCapabilities } from '@dxos/plugin-transcription';
-import { useTranslation } from '@dxos/react-ui';
-
-import { AmbientDialog } from './AmbientDialog';
-import { ThreadContainer } from './Thread';
-import { ASSISTANT_PLUGIN } from '../meta';
-import { type AssistantSettingsProps, type AIChatType } from '../types';
-
-export const AssistantDialog: FC<{ chat?: AIChatType }> = ({ chat }) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
-  const transcription = useCapabilities(TranscriptionCapabilities.Transcriber).length > 0;
-  const settings = useCapability(Capabilities.SettingsStore).getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
-
-  // TODO(burdon): Refocus when open.
-  const [open, setOpen] = useState(false);
-
-  return (
-    <AmbientDialog open={open} onOpenChange={setOpen} title={t('assistant dialog title')}>
-      <ThreadContainer
-        part={'dialog'}
-        chat={chat}
-        onOpenChange={setOpen}
-        settings={settings}
-        transcription={transcription}
-      />
-    </AmbientDialog>
-  );
-};
-
-export default AssistantDialog;

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

@@ -1,32 +0,0 @@
-//
-// 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_DEFINITION } 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_DEFINITION,
-  },
-};

package/src/components/BlueprintEditor/index.ts

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

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

@@ -1,121 +0,0 @@
-//
-// 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 { Prompt } from './Prompt';
-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-assistant/Prompt',
-  component: Prompt,
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [IntentPlugin(), SettingsPlugin(), TranscriptionPlugin()],
-    }),
-    withTheme,
-    withLayout(),
-  ],
-  parameters: {
-    layout: 'centered',
-    translations,
-    controls: { disable: true },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DefaultStory>;
-
-export const Default: Story = {};
-
-export const WithSuggestions: Story = {
-  args: {
-    onSubmit: (text) => {
-      log('onSubmit', { text });
-    },
-    onSuggest: (text) => {
-      const trimmed = text.trim().toLowerCase();
-      if (trimmed.length < 2) {
-        return [];
-      }
-
-      const suggestions = [
-        'Create a kanban board',
-        'Create a new project',
-        'Find flights to Tokyo',
-        "Let's play chess",
-        'Show me Paris on a map',
-      ];
-
-      return suggestions.filter((s) => s.toLowerCase().startsWith(text));
-    },
-  },
-};
-
-export const WithReferences: Story = {
-  args: {
-    references: {
-      getReferences: async ({ query }) => {
-        const res = references.filter((i) => i.label.toLowerCase().startsWith(query.toLowerCase()));
-        log('getReferences', { query, res });
-        return res;
-      },
-      resolveReference: async ({ uri }) => {
-        const res = references.find((i) => i.uri === uri);
-        log('resolveReference', { uri, res });
-        return res ?? null;
-      },
-    },
-  },
-};

package/src/components/Prompt/Prompt.tsx

@@ -1,124 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Extension, Prec } from '@codemirror/state';
-import React, { forwardRef, useImperativeHandle } from 'react';
-
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import {
-  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 { autocompleteExtension, type AutocompleteOptions } from './autocomplete';
-import { promptReferences, type ReferencesProvider } from './references';
-
-// TODO(burdon): Handle object references.
-
-export interface PromptController {
-  focus(): void;
-  setText(text: string): void;
-}
-
-export type PromptProps = ThemedClassName<
-  {
-    extensions?: Extension;
-    references?: ReferencesProvider;
-    onOpenChange?: (open: boolean) => void;
-  } & AutocompleteOptions &
-    Pick<UseTextEditorProps, 'autoFocus'> &
-    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
->;
-
-export const Prompt = forwardRef<PromptController, PromptProps>(
-  (
-    {
-      classNames,
-      extensions,
-      references,
-      autoFocus,
-      lineWrapping = false,
-      placeholder,
-      onSubmit,
-      onSuggest,
-      onCancel,
-      onOpenChange,
-    },
-    forwardRef,
-  ) => {
-    const { themeMode } = useThemeContext();
-    const { parentRef, view } = useTextEditor(
-      {
-        debug: true,
-        autoFocus,
-        extensions: [
-          autocompleteExtension({ onSubmit, onSuggest, onCancel }),
-          createBasicExtensions({
-            bracketMatching: false,
-            lineWrapping,
-            placeholder,
-          }),
-          createThemeExtensions({ themeMode }),
-          references ? promptReferences({ provider: references }) : [],
-          Prec.highest(
-            keymap.of([
-              {
-                key: 'cmd-ArrowUp',
-                preventDefault: true,
-                run: () => {
-                  onOpenChange?.(true);
-                  return true;
-                },
-              },
-              {
-                key: 'cmd-ArrowDown',
-                preventDefault: true,
-                run: () => {
-                  onOpenChange?.(false);
-                  return true;
-                },
-              },
-            ]),
-          ),
-          extensions,
-        ].filter(isNonNullable),
-      },
-      [themeMode, extensions, onSubmit, onSuggest],
-    );
-
-    // Expose editor view.
-    useImperativeHandle(
-      forwardRef,
-      () => {
-        return {
-          focus: () => {
-            view?.focus();
-          },
-          setText: (text: string) => {
-            view?.dispatch({
-              changes: {
-                from: 0,
-                to: view.state.doc.length,
-                insert: text,
-              },
-              selection: {
-                anchor: text.length,
-                head: text.length,
-              },
-            });
-          },
-        };
-      },
-      [view, onSubmit],
-    );
-
-    return <div ref={parentRef} className={mx('w-full', classNames)} />;
-  },
-);

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

@@ -1,69 +0,0 @@
-//
-// 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,
-    controls: { disable: true },
-  },
-};
-
-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

@@ -1,105 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { forwardRef, useState } from 'react';
-
-import { useVoiceInput } from '@dxos/plugin-transcription';
-import { Icon, IconButton, type ThemedClassName, Tooltip, useForwardedRef, useTranslation } from '@dxos/react-ui';
-import { Spinner } from '@dxos/react-ui-sfx';
-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,
-    | 'extensions'
-    | 'references'
-    | 'placeholder'
-    | 'lineWrapping'
-    | 'onSubmit'
-    | 'onSuggest'
-    | 'onCancel'
-    | 'onOpenChange'
-  > & {
-    processing?: boolean;
-    error?: Error;
-    microphone?: boolean;
-  }
->;
-
-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);
-
-    // TODO(burdon): Configure capability in TranscriptionPlugin.
-    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.Trigger content={error.message} delayDuration={0}>
-              <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
-            </Tooltip.Trigger>
-          )) || <Spinner active={processing} />}
-        </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>
-    );
-  },
-);