@dxos/plugin-automation 0.7.1 → 0.7.2-main.f1adc9f

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,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { type ReactiveObject, S } from '@dxos/echo-schema';
+import { FunctionTriggerSchema, FunctionTrigger, type FunctionTriggerType } from '@dxos/functions';
+import { create, Filter, useQuery, type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, useTranslation } 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 triggers = useQuery(space, Filter.schema(FunctionTrigger));
+  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>
+                <List.ItemTitle classNames='px-2 cursor-pointer' onClick={() => handleSelect(trigger)}>
+                  {trigger.function}
+                </List.ItemTitle>
+                <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
+              </List.Item>
+            ))}
+          </div>
+        )}
+      </List.Root>
+
+      {trigger && <TriggerEditor space={space} 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>
+  );
+};

package/src/components/AutomationPanel/index.ts

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

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

@@ -8,42 +8,30 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
-import { FunctionDef, FunctionTrigger } from '@dxos/functions/types';
-import { useClient } from '@dxos/react-client';
+import { FunctionTrigger, TriggerKind } from '@dxos/functions';
+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';
 
-const functions: Omit<FunctionDef, 'id'>[] = [
-  {
-    uri: 'dxos.org/function/email-worker',
-    route: '/email',
-    handler: 'email-worker',
-    description: 'Email Sync',
-  },
-  {
-    uri: 'dxos.org/function/gpt',
-    route: '/gpt',
-    handler: 'gpt',
-    description: 'GPT Chat',
-  },
-];
-
-const Story = () => {
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[1];
   const [trigger, setTrigger] = useState<FunctionTrigger>();
-  const client = useClient();
-  const space = client.spaces.default;
   useEffect(() => {
     if (!space) {
       return;
     }
 
-    const trigger = space.db.add(create(FunctionTrigger, { function: '', spec: { type: 'timer', cron: '0 0 * * *' } }));
+    const trigger = space.db.add(create(FunctionTrigger, { spec: { type: TriggerKind.Timer, cron: '' } }));
     setTrigger(trigger);
-  }, [space, setTrigger]);
+  }, [space]);
+
   if (!space || !trigger) {
     return <div />;
   }
@@ -55,20 +43,18 @@ const Story = () => {
   );
 };
 
-export const Default = {};
-
 const meta: Meta = {
   title: 'plugins/plugin-automation/TriggerEditor',
   component: TriggerEditor,
-  render: Story,
+  render: DefaultStory,
   decorators: [
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionTrigger, FunctionDef, ChainPromptType],
+      types: [FunctionType, FunctionTrigger, ChainPromptType],
       onSpaceCreated: ({ space }) => {
         for (const fn of functions) {
-          space.db.add(create(FunctionDef, fn));
+          space.db.add(create(FunctionType, fn));
         }
       },
     }),
@@ -81,3 +67,5 @@ const meta: Meta = {
 };
 
 export default meta;
+
+export const Default = {};