@dxos/plugin-automation 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/src/components/AmbientDialog/AmbientDialog.tsx

@@ -0,0 +1,103 @@
+//
+// 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;
+
+// TODO(burdon): Factor out.
+export const AmbientDialog = ({
+  children,
+  open: _open,
+  title,
+  onOpenChange,
+}: PropsWithChildren<{ open?: boolean; onOpenChange?: (open: boolean) => void; title?: string }>) => {
+  const [resizeKey, setReizeKey] = useState(0);
+  const [size, setSize] = useState<Size>('min-content');
+  const [open, setOpen] = useState(_open);
+
+  // Update controlled value.
+  useEffect(() => {
+    setOpen(_open);
+  }, [_open]);
+
+  // 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 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'
+        inOverlayLayout
+        {...resizeAttributes}
+        style={{
+          ...sizeStyle(size, 'vertical', true),
+          maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 8rem)',
+        }}
+        onInteractOutside={preventDefault}
+      >
+        <ResizeHandle
+          key={resizeKey}
+          side='block-start'
+          defaultSize='min-content'
+          minSize={minSize}
+          fallbackSize={minSize}
+          iconPosition='center'
+          onSizeChange={setSize}
+        />
+
+        <DialogHeader open={open} title={title} onToggle={handleToggle} />
+
+        {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/AmbientDialog/index.ts

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

package/src/components/AssistantDialog.tsx

@@ -0,0 +1,33 @@
+//
+// 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 { AUTOMATION_PLUGIN } from '../meta';
+import { type AutomationSettingsProps, type AIChatType } from '../types';
+
+export const AssistantDialog: FC<{ chat?: AIChatType }> = ({ chat }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const transcription = useCapabilities(TranscriptionCapabilities.Transcription).length > 0;
+  const settings = useCapability(Capabilities.SettingsStore).getStore<AutomationSettingsProps>(
+    AUTOMATION_PLUGIN,
+  )?.value;
+
+  // TODO(burdon): Refocus when open.
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AmbientDialog open={open} onOpenChange={setOpen} title={t('assistant dialog title')}>
+      <ThreadContainer chat={chat} onOpenChange={setOpen} settings={settings} transcription={transcription} />
+    </AmbientDialog>
+  );
+};
+
+export default AssistantDialog;

package/src/components/AutomationPanel/AutomationPanel.stories.tsx

@@ -15,7 +15,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { AutomationPanel } from './AutomationPanel';
 import { functions } from '../../testing';
 import translations from '../../translations';
-import { ChainPromptType } from '../../types';
+import { TemplateType } from '../../types';
 
 const DefaultStory = () => {
   const spaces = useSpaces();
@@ -36,7 +36,7 @@ const meta: Meta = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger, ChainPromptType],
+      types: [FunctionType, FunctionTrigger, TemplateType],
       onSpaceCreated: ({ space }) => {
         for (const fn of functions) {
           space.db.add(create(FunctionType, fn));

package/src/components/AutomationSettings/AutomationSettings.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { DEFAULT_LLM_MODELS } from '@dxos/assistant';
+import { Input, Select, useTranslation } from '@dxos/react-ui';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+import { type AutomationSettingsProps } from '../../types';
+
+export const AutomationSettings = ({ settings }: { settings: AutomationSettingsProps }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+
+  return (
+    <DeprecatedFormContainer>
+      <DeprecatedFormInput label={t('settings custom prompts label')}>
+        <Input.Switch
+          checked={!!settings.customPrompts}
+          onCheckedChange={(checked) => (settings.customPrompts = checked)}
+        />
+      </DeprecatedFormInput>
+
+      <DeprecatedFormInput label={t('settings llm model label')}>
+        <Select.Root
+          value={settings.llmModel ?? 'default'}
+          onValueChange={(value) => {
+            settings.llmModel = value;
+          }}
+        >
+          <Select.TriggerButton placeholder={t('settings default llm model label')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {DEFAULT_LLM_MODELS.map((model) => (
+                  <Select.Option key={model} value={model}>
+                    {model}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </DeprecatedFormInput>
+    </DeprecatedFormContainer>
+  );
+};

package/src/components/AutomationSettings/index.ts

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

package/src/components/ChatContainer.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, useCapabilities, useCapability } from '@dxos/app-framework';
+import { TranscriptionCapabilities } from '@dxos/plugin-transcription';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { ThreadContainer } from './Thread';
+import { AUTOMATION_PLUGIN } from '../meta';
+import { type AutomationSettingsProps, type AIChatType } from '../types';
+
+// TODO(burdon): Attention.
+export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }) => {
+  const transcription = useCapabilities(TranscriptionCapabilities.Transcription).length > 0;
+  const settings = useCapability(Capabilities.SettingsStore).getStore<AutomationSettingsProps>(
+    AUTOMATION_PLUGIN,
+  )?.value;
+
+  return (
+    <StackItem.Content toolbar={false} role={role} classNames='mli-auto w-full max-w-[50rem]'>
+      <ThreadContainer chat={chat} settings={settings} transcription={transcription} />
+    </StackItem.Content>
+  );
+};
+
+export default ChatContainer;

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

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { Prompt } from './Prompt';
+import { PromptBar } from './PromptBar';
+import translations from '../../translations';
+
+const meta: Meta<typeof Prompt> = {
+  title: 'plugins/plugin-automation/Prompt',
+  component: Prompt,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Prompt>;
+
+export const Default: Story = {
+  args: {
+    classNames: 'w-96 p-4 rounded outline outline-gray-200',
+    autoFocus: true,
+    onSubmit: (text) => {
+      console.log('onEnter', 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 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}
+      />
+    );
+  },
+};

package/src/components/Prompt/Prompt.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  type BasicExtensionsOptions,
+  createBasicExtensions,
+  createThemeExtensions,
+  keymap,
+  useTextEditor,
+  type UseTextEditorProps,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { createAutocompleteExtension, type AutocompleteOptions } from './autocomplete';
+
+// TODO(burdon): Handle object references.
+
+export interface PromptController {
+  focus(): void;
+  setText(text: string): void;
+}
+
+export type PromptProps = ThemedClassName<
+  {
+    onOpenChange?: (open: boolean) => void;
+  } & AutocompleteOptions &
+    Pick<UseTextEditorProps, 'autoFocus'> &
+    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
+>;
+
+export const Prompt = forwardRef<PromptController, PromptProps>(
+  ({ classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onOpenChange }, forwardRef) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, view } = useTextEditor(
+      {
+        autoFocus,
+        extensions: [
+          createBasicExtensions({
+            bracketMatching: false,
+            lineWrapping,
+            placeholder,
+          }),
+          createThemeExtensions({ themeMode }),
+          createAutocompleteExtension({ onSubmit, onSuggest }),
+          keymap.of([
+            {
+              key: 'Alt-ArrowUp',
+              preventDefault: true,
+              run: (view) => {
+                onOpenChange?.(true);
+                return true;
+              },
+            },
+            {
+              key: 'Alt-ArrowDown',
+              preventDefault: true,
+              run: (view) => {
+                onOpenChange?.(false);
+                return true;
+              },
+            },
+          ]),
+        ],
+      },
+      [themeMode, 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 overflow-hidden', classNames)} />;
+  },
+);

package/src/components/Prompt/PromptBar.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useRef, useState } from 'react';
+
+import { useVoiceInput } from '@dxos/plugin-transcription';
+import { Icon, IconButton, type ThemedClassName, 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 { AUTOMATION_PLUGIN } from '../../meta';
+
+export type PromptBarProps = ThemedClassName<
+  Pick<PromptProps, 'placeholder' | 'lineWrapping' | 'onSubmit' | 'onSuggest' | 'onOpenChange'> & {
+    processing?: boolean;
+    error?: Error;
+    microphone?: boolean;
+    onCancel?: () => void;
+  }
+>;
+
+export const PromptBar = ({
+  classNames,
+  placeholder,
+  processing,
+  error,
+  microphone,
+  onCancel,
+  ...props
+}: PromptBarProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+
+  const promptRef = useRef<PromptController>(null);
+
+  // TODO(burdon): Configure capability in TranscriptionPlugin.
+  const [active, setActive] = useState(false);
+  const { recording } = useVoiceInput({
+    active,
+    onUpdate: (text) => {
+      promptRef.current?.setText(text);
+      promptRef.current?.focus();
+    },
+  });
+
+  // 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',
+        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} />
+        )}
+      </div>
+      <Prompt
+        ref={promptRef}
+        autoFocus
+        classNames='pbs-2'
+        lineWrapping={true}
+        placeholder={placeholder ?? t('prompt placeholder')}
+        {...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>
+  );
+};