@dxos/plugin-automation 0.7.5-main.ff8607b → 0.7.5-staging.b81e783

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

@@ -0,0 +1,81 @@
+//
+// 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-automation/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: [
+    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, tooltips: true }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AmbientDialog>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC, useState } from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+import { type AIChatType } from '../../types';
+import { AmbientDialog } from '../AmbientDialog';
+import { ThreadContainer } from '../Thread';
+
+export const AssistantDialog: FC<{ chat?: AIChatType }> = ({ chat }) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AmbientDialog open={open} onOpenChange={setOpen} title={t('assistant dialog title')}>
+      <ThreadContainer chat={chat} onOpenChange={setOpen} />
+    </AmbientDialog>
+  );
+};

package/src/components/AssistantDialog/index.ts

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

package/src/components/ChatContainer/ChatContainer.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { type AIChatType } from '../../types';
+import { ThreadContainer } from '../Thread';
+
+// TODO(burdon): Attention.
+export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }) => {
+  return (
+    <StackItem.Content toolbar={false} role={role} classNames='mli-auto w-full max-w-[50rem]'>
+      <ThreadContainer chat={chat} />
+    </StackItem.Content>
+  );
+};

package/src/components/ChatContainer/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ChatContainer } from './ChatContainer';
+
+export * from './ChatContainer';
+
+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,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  type BasicExtensionsOptions,
+  createBasicExtensions,
+  createThemeExtensions,
+  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<
+  AutocompleteOptions &
+    Pick<UseTextEditorProps, 'autoFocus'> &
+    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
+>;
+
+export const Prompt = forwardRef<PromptController, PromptProps>(
+  ({ classNames, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest }, forwardRef) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, view } = useTextEditor(
+      {
+        autoFocus,
+        extensions: [
+          createBasicExtensions({
+            bracketMatching: false,
+            lineWrapping,
+            placeholder,
+          }),
+          createThemeExtensions({ themeMode }),
+          createAutocompleteExtension({ onSubmit, onSuggest }),
+        ],
+      },
+      [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'> & {
+    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>
+  );
+};