@dxos/plugin-automation 0.7.2 → 0.7.3-main.2dd075e

package/src/components/AssistantPanel/system-instructions.ts

@@ -0,0 +1,166 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { asyncTimeout } from '@dxos/async';
+import type { ReactiveEchoObject } from '@dxos/echo-db';
+import { getTypename } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+import { Filter, getSpace, ResultFormat } from '@dxos/react-client/echo';
+
+// TODO(burdon): Move into assistant-protocol.
+export type ThreadContext = {
+  subject?: ReactiveEchoObject<any>;
+};
+
+export const createSystemInstructions = async (context: ThreadContext): Promise<string> => {
+  let instructions = `
+    <instructions>
+      Before replying always think step-by-step on how to proceed.
+      Print your thoughts inside <cot> tags.
+
+      <example>
+        <cot>To answer the question I need to ...</cot>
+      </example>
+    </instructions>
+
+    <current_time>${new Date().toLocaleString()}</current_time>
+  `;
+
+  if (context.subject) {
+    instructions += `
+      <user_attention>
+        The user is currently interacting with an object in Composer application:
+
+        ${await formatContextObject(context.subject)}
+      </user_attention>
+    `;
+  }
+
+  return looseFormatXml(instructions);
+};
+
+const formatContextObject = async (object: ReactiveEchoObject<any>): Promise<string> => {
+  let data;
+  try {
+    data = await asyncTimeout(preprocessContextObject(object), CONTEXT_OBJECT_QUERY_TIMEOUT);
+  } catch (err: any) {
+    log.error('Failed to preprocess context object:', { err });
+    data = object;
+  }
+
+  if (typeof data === 'string') {
+    return data;
+  } else {
+    return `
+      <object>
+        <type>${getTypename(object)}</type>
+        <id>${object.id}</id>
+        ${formatObjectAsXMLTags(data)}
+      </object>
+    `;
+  }
+};
+
+const preprocessContextObject = async (object: ReactiveEchoObject<any>): Promise<Record<string, any> | string> => {
+  const space = getSpace(object);
+  if (!space) {
+    return { ...object };
+  }
+
+  // TODO(dmaretskyi): Serialize based on schema annotations.
+  switch (getTypename(object)) {
+    // TODO(dmaretskyi): Reference types somehow without plugin-automation depending on other plugins.
+    case 'dxos.org/type/Document': {
+      const data = space.db
+        .query({ id: object.id }, { format: ResultFormat.Plain, include: { content: true } })
+        .first() ?? { content: { content: '' } };
+
+      return {
+        ...data,
+        threads: undefined,
+      };
+    }
+
+    case 'dxos.org/type/Table': {
+      // TODO(dmaretskyi): Load references.
+      const schema = object.view ? space?.db.schemaRegistry.getSchema(object.view.query.typename) : undefined;
+      const { objects: rows } =
+        (schema &&
+          (await space.db
+            .query(Filter.schema(schema), { format: ResultFormat.Plain, limit: TABLE_ROWS_LIMIT })
+            .run())) ??
+        {};
+
+      // TODO(dmaretskyi): Format table schema.
+      return `
+        <object>
+          <id>${object.id}</id>
+          <type>${getTypename(object)}</type>
+          ${formatObjectAsXMLTags(object)}
+
+          <rows>
+            <!-- Limited to first ${TABLE_ROWS_LIMIT} rows. -->
+            ${rows
+              ?.map(
+                (row: any) => `<row>
+                  ${formatObjectAsXMLTags(row)}
+                </row>`,
+              )
+              .join('\n')}
+          </rows>
+
+      `;
+    }
+
+    default:
+      return { ...object };
+  }
+};
+
+const formatObjectAsXMLTags = (object: any, depth = 1): string => {
+  return Object.entries(object)
+    .filter(([key, value]) => ['string', 'number', 'boolean', 'object'].includes(typeof value))
+    .map(([key, value]) => {
+      if (typeof value === 'object' && value !== null) {
+        if (depth === 0) {
+          return '';
+        } else {
+          return `<${key}>
+            ${formatObjectAsXMLTags(value, depth - 1)}
+          </${key}>`;
+        }
+      }
+
+      return `<${key}>${value}</${key}>`;
+    })
+    .join('\n');
+};
+
+const CONTEXT_OBJECT_QUERY_TIMEOUT = 5_000;
+
+const TABLE_ROWS_LIMIT = 10;
+
+/**
+ * Formats XML indentation for instructions so they are easier to read during debugging.
+ */
+const looseFormatXml = (xml: string): string => {
+  let currentIndent = 0;
+
+  return xml
+    .split('\n')
+    .map((line) => {
+      if (line.match(RE_CLOSE_TAG_LINE)) {
+        currentIndent--;
+      }
+      const indent = currentIndent;
+      if (line.match(RE_OPEN_TAG_LINE)) {
+        currentIndent++;
+      }
+      return ' '.repeat(indent * 2) + line.trimStart();
+    })
+    .join('\n');
+};
+
+const RE_OPEN_TAG_LINE = /^[ ]*<[a-zA-Z0-9\-_]+>[ ]*$/;
+const RE_CLOSE_TAG_LINE = /^[ ]*<\/[a-zA-Z0-9\-_]+>[ ]*$/;

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { FunctionTrigger } from '@dxos/functions';
+import { FunctionType } from '@dxos/plugin-script/types';
+import { create, useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { AutomationPanel } from './AutomationPanel';
+import { functions } from '../../testing';
+import translations from '../../translations';
+import { ChainPromptType } from '../../types';
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[1];
+
+  return (
+    <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
+      <AutomationPanel space={space} />
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-automation/AutomationPanel',
+  component: AutomationPanel,
+  render: DefaultStory,
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [FunctionType, FunctionTrigger, ChainPromptType],
+      onSpaceCreated: ({ space }) => {
+        for (const fn of functions) {
+          space.db.add(create(FunctionType, fn));
+        }
+      },
+    }),
+    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center m-2' }),
+    withTheme,
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { FunctionTriggerSchema, FunctionTrigger, type FunctionTriggerType } from '@dxos/functions';
+import { FunctionType, ScriptType } from '@dxos/plugin-script';
+import { type Client, useClient } from '@dxos/react-client';
+import { create, Filter, useQuery, type Space, type ReactiveObject, getSpace } from '@dxos/react-client/echo';
+import { IconButton, Input, useTranslation, Button } from '@dxos/react-ui';
+import { List } from '@dxos/react-ui-list';
+import { ghostHover, mx } from '@dxos/react-ui-theme';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+import { TriggerEditor, type TriggerEditorProps } from '../TriggerEditor';
+
+const grid = 'grid grid-cols-[40px_1fr_32px] min-bs-[2.5rem]';
+
+export type AutomationPanelProps = {
+  space: Space;
+  object?: ReactiveObject<any>;
+};
+
+// TODO(burdon): Factor out common layout with ViewEditor.
+export const AutomationPanel = ({ space }: AutomationPanelProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const client = useClient();
+  const triggers = useQuery(space, Filter.schema(FunctionTrigger));
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const scripts = useQuery(space, Filter.schema(ScriptType));
+
+  const [trigger, setTrigger] = useState<FunctionTriggerType>();
+  const [selected, setSelected] = useState<FunctionTrigger>();
+
+  const handleSelect = (trigger: FunctionTrigger) => {
+    const { id: _, ...values } = trigger;
+    setTrigger(values);
+    setSelected(trigger);
+  };
+
+  const handleAdd = () => {
+    setTrigger(create(FunctionTriggerSchema, {}));
+    setSelected(undefined);
+  };
+
+  const handleDelete = (trigger: FunctionTrigger) => {
+    space.db.remove(trigger);
+    setTrigger(undefined);
+    setSelected(undefined);
+  };
+
+  const handleSave: TriggerEditorProps['onSave'] = (trigger) => {
+    if (selected) {
+      Object.assign(selected, trigger);
+    } else {
+      space.db.add(create(FunctionTrigger, trigger));
+    }
+
+    setTrigger(undefined);
+    setSelected(undefined);
+  };
+
+  const handleCancel: TriggerEditorProps['onCancel'] = () => {
+    setTrigger(undefined);
+  };
+
+  return (
+    <div className='flex flex-col w-full divide-y divide-separator overflow-y-auto'>
+      <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>
+            ))}
+          </div>
+        )}
+      </List.Root>
+
+      {trigger && (
+        <TriggerEditor
+          space={space}
+          storedTrigger={selected}
+          trigger={trigger}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      )}
+
+      {!trigger && (
+        <div className='flex p-2 justify-center'>
+          <IconButton icon='ph--plus--regular' label={t('new trigger')} onClick={handleAdd} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
+  const spaceId = getSpace(trigger)!.id;
+  const edgeUrl = new URL(client.config.values.runtime!.services!.edge!.url!);
+  const isSecure = edgeUrl.protocol.startsWith('https') || edgeUrl.protocol.startsWith('wss');
+  edgeUrl.protocol = isSecure ? 'https' : 'http';
+  return new URL(`/webhook/${spaceId}:${trigger.id}`, edgeUrl).toString();
+};
+
+const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTriggerType) => {
+  const functionObject = functions.find((fn) => fn.name === trigger.function);
+  if (!functionObject) {
+    return trigger.function;
+  }
+  return scripts.find((s) => functionObject.source?.id === s.id)?.name ?? functionObject.name;
+};

package/src/components/AutomationPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { AutomationPanel } from './AutomationPanel';
+
+export default AutomationPanel;

package/src/components/PromptEditor/PromptEditor.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { create } from '@dxos/echo-schema';
+import { create } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';

package/src/components/TriggerEditor/TriggerEditor.stories.tsx

@@ -7,47 +7,18 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { AST, S, create, toJsonSchema } from '@dxos/echo-schema';
 import { FunctionTrigger, TriggerKind } from '@dxos/functions';
+import { create } from '@dxos/live-object';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { TriggerEditor } from './TriggerEditor';
+import { functions } from '../../testing';
 import translations from '../../translations';
 import { ChainPromptType } from '../../types';
 
-// TODO(burdon): Extract type?
-const functions = [
-  {
-    name: 'example.com/function/chess',
-    version: 1,
-    inputSchema: toJsonSchema(
-      S.Struct({
-        level: S.Number.annotations({
-          [AST.TitleAnnotationId]: 'Level',
-        }),
-      }),
-    ),
-  },
-  {
-    name: 'example.com/function/forex',
-    version: 1,
-    binding: 'FOREX',
-    inputSchema: toJsonSchema(
-      S.Struct({
-        from: S.String.annotations({
-          [AST.TitleAnnotationId]: 'Currency from',
-        }),
-        to: S.String.annotations({
-          [AST.TitleAnnotationId]: 'Currency to',
-        }),
-      }),
-    ),
-  },
-];
-
 const DefaultStory = () => {
   const spaces = useSpaces();
   const space = spaces[1];
@@ -82,7 +53,6 @@ const meta: Meta = {
       createSpace: true,
       types: [FunctionType, FunctionTrigger, ChainPromptType],
       onSpaceCreated: ({ space }) => {
-        console.log(space.id);
         for (const fn of functions) {
           space.db.add(create(FunctionType, fn));
         }

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { FunctionTriggerSchema, type FunctionTriggerType, type FunctionTrigger, TriggerKind } from '@dxos/functions';
-import { FunctionType } from '@dxos/plugin-script/types';
+import { FunctionType, ScriptType } from '@dxos/plugin-script/types';
 import { Filter, useQuery, type Space } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { Form, SelectInput } from '@dxos/react-ui-form';
@@ -14,67 +14,35 @@ import { AUTOMATION_PLUGIN } from '../../meta';
 
 export type TriggerEditorProps = {
   space: Space;
-  trigger: FunctionTrigger;
+  trigger: FunctionTriggerType;
+  storedTrigger?: FunctionTrigger;
+  onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;
+  onCancel?: () => void;
 };
 
-// TODO(burdon): Functions (new def).
-// TODO(burdon): Function meta (remove meta from existing trigger def).
-// TODO(burdon): Actual integration.
-
-export const TriggerEditor = ({ space, trigger }: TriggerEditorProps) => {
+export const TriggerEditor = ({ space, trigger, onSave, onCancel, storedTrigger }: TriggerEditorProps) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const functions = useQuery(space, Filter.schema(FunctionType));
+  const scripts = useQuery(space, Filter.schema(ScriptType));
 
-  // const script = useMemo(() => scripts.find((script) => script.id === trigger.function), [trigger.function, scripts]);
-  // useLocalTriggerManager(space);
-
-  // useEffect(() => {
-  //   void space.db.schemaRegistry
-  //     .query()
-  //     .then((schemas) => {
-  //       // TODO(zan): We should solve double adding of stored schemas in the schema registry.
-  //       state.schemas = distinctBy([...state.schemas, ...schemas], (schema) => schema.typename).sort((a, b) =>
-  //         a.typename < b.typename ? -1 : 1,
-  //       );
-  //     })
-  //     .catch(() => {});
-  // }, [space]);
-
-  // Keen an enriched version of the schema in memory so we can share it with prompt editor.
-  // useEffect(() => {
-  //   const spec = trigger.spec;
-  //   invariant(spec);
-  //   if (spec.type === 'subscription') {
-  //     if (spec.filter) {
-  //       const type = spec.filter.type;
-  //       const foundSchema = state.schemas.find((schema) => schema.typename === type);
-  //       if (foundSchema) {
-  //         state.selectedSchema[trigger.id] = foundSchema;
-  //       }
-  //     }
-  //   }
-  //   // TODO(burdon): API issue.
-  // }, [JSON.stringify(trigger.spec), state.schemas]);
-
-  // useEffect(() => {
-  //   if (!trigger.meta) {
-  //     const extension = getFunctionMetaExtension(trigger, script);
-  //     trigger.meta = extension?.initialValue?.();
-  //   }
-  // }, [trigger.function, trigger.meta]);
+  const handleSave = (values: FunctionTriggerType) => {
+    onSave?.(values);
+  };
 
   return (
     <Form<FunctionTriggerType>
       schema={FunctionTriggerSchema}
       values={trigger}
       filter={(props) => props.filter((p) => p.name !== 'meta')}
+      onSave={handleSave}
+      onCancel={onCancel}
       Custom={{
         ['function' satisfies keyof FunctionTriggerType]: (props) => (
           <SelectInput<FunctionTriggerType>
             {...props}
-            options={functions.map(({ name }) => ({
-              value: name,
-              label: name,
+            options={functions.map((fn) => ({
+              value: fn.name,
+              label: getFunctionName(scripts, fn),
             }))}
           />
         ),
@@ -91,3 +59,7 @@ export const TriggerEditor = ({ space, trigger }: TriggerEditorProps) => {
     />
   );
 };
+
+const getFunctionName = (scripts: ScriptType[], fn: FunctionType) => {
+  return scripts.find((s) => fn.source?.id === s.id)?.name ?? fn.name;
+};

package/src/components/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './AutomationPanel';
-export * from './PromptEditor';
-export * from './TriggerEditor';
+import { lazy } from 'react';
+
+export const AssistantPanel = lazy(() => import('./AssistantPanel'));
+export const AutomationPanel = lazy(() => import('./AutomationPanel'));

package/src/hooks/email.ts

@@ -3,11 +3,11 @@
 //
 
 import { findObjectWithForeignKey } from '@dxos/echo-db';
-import { create, foreignKey } from '@dxos/echo-schema';
+import { foreignKey } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { MailboxType } from '@dxos/plugin-inbox/types';
 import { MessageType } from '@dxos/plugin-space/types';
-import { type Space, Filter } from '@dxos/react-client/echo';
+import { type Space, Filter, create } from '@dxos/react-client/echo';
 
 export const SOURCE_ID = 'hub.dxos.network/api/mailbox';
 

package/src/meta.ts

@@ -10,7 +10,7 @@ export default {
   id: AUTOMATION_PLUGIN,
   name: 'Automation',
   description: 'Automation workflows.',
-  icon: 'ph--flow-arrow--regular',
+  icon: 'ph--magic-wand--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-automation',
   tags: ['experimental'],
 } satisfies PluginMeta;

package/src/presets.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { create } from '@dxos/echo-schema';
+import { create } from '@dxos/live-object';
 
 import { ChainInputType, ChainPromptType } from './types';
 

package/src/testing/index.ts

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

package/src/testing/testing.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { AST, S, toJsonSchema } from '@dxos/echo-schema';
+
+export const functions = [
+  {
+    name: 'example.com/function/chess',
+    version: '0.0.1',
+    inputSchema: toJsonSchema(
+      S.Struct({
+        level: S.Number.annotations({
+          [AST.TitleAnnotationId]: 'Level',
+        }),
+      }),
+    ),
+  },
+  {
+    name: 'example.com/function/forex',
+    version: '0.0.1',
+    binding: 'FOREX',
+    inputSchema: toJsonSchema(
+      S.Struct({
+        from: S.String.annotations({
+          [AST.TitleAnnotationId]: 'Currency from',
+        }),
+        to: S.String.annotations({
+          [AST.TitleAnnotationId]: 'Currency to',
+        }),
+      }),
+    ),
+  },
+];

package/src/translations.ts

@@ -34,6 +34,9 @@ export default [
         'trigger cron': 'Cron',
         'trigger method': 'Method',
         'trigger endpoint': 'Endpoint',
+
+        'open assistant panel label': 'Show Assistant',
+        'assistant panel label': 'Assistant',
       },
     },
   },

package/src/types/types.ts

@@ -9,16 +9,14 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-client';
 import { type PanelProvides } from '@dxos/plugin-deck/types';
+import { type SchemaProvides } from '@dxos/plugin-space';
 
-import { AUTOMATION_PLUGIN } from '../meta';
+// import { AUTOMATION_PLUGIN } from '../meta';
 
-const AUTOMATION_ACTION = `${AUTOMATION_PLUGIN}/action`;
+// const AUTOMATION_ACTION = `${AUTOMATION_PLUGIN}/action`;
 
-export enum AutomationAction {
-  CREATE = `${AUTOMATION_ACTION}/create`,
-}
+export enum AutomationAction {}
 
 export type AutomationPluginProvides = SurfaceProvides &
   IntentResolverProvides &

package/dist/types/src/components/AutomationPanel.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AutomationPanel: () => React.JSX.Element;
-//# sourceMappingURL=AutomationPanel.d.ts.map

package/dist/types/src/components/AutomationPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AutomationPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/AutomationPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBAY3B,CAAC"}