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

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { SettingsStore } from '@dxos/local-storage';
+import { getSpace, isEchoObject, isSpace, type ReactiveEchoObject } from '@dxos/react-client/echo';
+
+import {
+  AssistantDialog,
+  AutomationPanel,
+  AutomationSettings,
+  ChatContainer,
+  ServiceRegistry,
+  TemplateContainer,
+} from '../components';
+import { AUTOMATION_PLUGIN, ASSISTANT_DIALOG } from '../meta';
+import { AIChatType, type AutomationSettingsProps, TemplateType } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<AutomationSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === AUTOMATION_PLUGIN,
+      component: ({ data: { subject } }) => <AutomationSettings settings={subject.value} />,
+    }),
+    createSurface({
+      id: ASSISTANT_DIALOG,
+      role: 'dialog',
+      filter: (data): data is { props: { chat: AIChatType } } => data.component === ASSISTANT_DIALOG,
+      component: ({ data }) => <AssistantDialog {...data.props} />,
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/chat`,
+      role: 'article',
+      filter: (data): data is { subject: AIChatType } => data.subject instanceof AIChatType,
+      component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/template`,
+      role: 'article',
+      filter: (data): data is { subject: TemplateType } => data.subject instanceof TemplateType,
+      component: ({ data, role }) => <TemplateContainer role={role} template={data.subject} />,
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/automation`,
+      role: 'complementary--automation',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } =>
+        isEchoObject(data.subject) && !!getSpace(data.subject),
+      component: ({ data }) => <AutomationPanel space={getSpace(data.subject)!} object={data.subject} />,
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/service-registry`,
+      role: 'complementary--service-registry',
+      component: ({ data }) => (
+        <ServiceRegistry space={isSpace(data.subject) ? data.subject : getSpace(data.subject)!} />
+      ),
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { AUTOMATION_PLUGIN } from '../meta';
+import { type AutomationSettingsProps, AutomationSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create<AutomationSettingsProps>({});
+
+  return contributes(Capabilities.Settings, {
+    schema: AutomationSettingsSchema,
+    prefix: AUTOMATION_PLUGIN,
+    value: settings,
+  });
+};

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

@@ -9,6 +9,7 @@ import {
   FunctionType,
   FunctionTrigger,
   FunctionTriggerSchema,
+  TriggerKind,
   type FunctionTriggerType,
   ScriptType,
 } from '@dxos/functions';
@@ -29,7 +30,7 @@ export type AutomationPanelProps = {
 };
 
 // TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ space }: AutomationPanelProps) => {
+export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const client = useClient();
   const triggers = useQuery(space, Filter.schema(FunctionTrigger));
@@ -46,7 +47,7 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
   };
 
   const handleAdd = () => {
-    setTrigger(create(FunctionTriggerSchema, {}));
+    setTrigger(create(FunctionTriggerSchema, { meta: {} }));
     setSelected(undefined);
   };
 
@@ -76,43 +77,46 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
       <List.Root<FunctionTrigger> items={triggers} isItem={S.is(FunctionTrigger)} getId={(field) => field.id}>
         {({ items: triggers }) => (
           <div role='list' className='flex flex-col w-full'>
-            {triggers?.map((trigger) => (
-              <List.Item<FunctionTrigger>
-                key={trigger.id}
-                item={trigger}
-                classNames={mx(grid, ghostHover, 'items-center')}
-              >
-                <Input.Root>
-                  <Input.Switch checked={trigger.enabled} onCheckedChange={(checked) => (trigger.enabled = checked)} />
-                </Input.Root>
-
-                <div className={'flex'}>
-                  <List.ItemTitle classNames='px-2 cursor-pointer w-0 shrink' onClick={() => handleSelect(trigger)}>
-                    {getFunctionName(scripts, functions, trigger)}
-                  </List.ItemTitle>
-
-                  {/* TODO: a better way to expose URL copy action */}
-                  <Button onClick={() => navigator.clipboard.writeText(getWebhookUrl(client, trigger))}>
-                    Copy URL
-                  </Button>
-                </div>
-
-                <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-              </List.Item>
-            ))}
+            {triggers?.map((trigger) => {
+              const copyAction = getCopyAction(client, trigger);
+              return (
+                <List.Item<FunctionTrigger>
+                  key={trigger.id}
+                  item={trigger}
+                  classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+                >
+                  <Input.Root>
+                    <Input.Switch
+                      checked={trigger.enabled}
+                      onCheckedChange={(checked) => (trigger.enabled = checked)}
+                    />
+                  </Input.Root>
+
+                  <div className={'flex'}>
+                    <List.ItemTitle
+                      classNames='px-1 cursor-pointer w-0 shrink truncate'
+                      onClick={() => handleSelect(trigger)}
+                    >
+                      {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                    </List.ItemTitle>
+
+                    {/* TODO: a better way to expose copy action */}
+                    {copyAction && (
+                      <Button onClick={() => navigator.clipboard.writeText(copyAction.contentProvider())}>
+                        {t(copyAction.translationKey)}
+                      </Button>
+                    )}
+                  </div>
+
+                  <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
+                </List.Item>
+              );
+            })}
           </div>
         )}
       </List.Root>
 
-      {trigger && (
-        <TriggerEditor
-          space={space}
-          storedTrigger={selected}
-          trigger={trigger}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
+      {trigger && <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />}
 
       {!trigger && (
         <div className='flex p-2 justify-center'>
@@ -123,6 +127,18 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
   );
 };
 
+const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) => {
+  if (trigger?.spec?.type === TriggerKind.Email) {
+    return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
+  }
+
+  if (trigger?.spec?.type === TriggerKind.Webhook) {
+    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
+  }
+
+  return undefined;
+};
+
 const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
   const spaceId = getSpace(trigger)!.id;
   const edgeUrl = new URL(client.config.values.runtime!.services!.edge!.url!);
@@ -132,9 +148,10 @@ const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
 };
 
 const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTriggerType) => {
+  const shortId = trigger.function && `${trigger.function?.slice(0, 16)}…`;
   const functionObject = functions.find((fn) => fn.name === trigger.function);
   if (!functionObject) {
-    return trigger.function;
+    return shortId;
   }
-  return scripts.find((s) => functionObject.source?.target?.id === s.id)?.name ?? functionObject.name;
+  return scripts.find((s) => functionObject.source?.target?.id === s.id)?.name ?? shortId;
 };

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