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

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

@@ -1,166 +0,0 @@
-//
-// 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.type) : 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/PromptEditor/PromptEditor.stories.tsx

@@ -1,64 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { create, makeRef } from '@dxos/live-object';
-import { useClient } from '@dxos/react-client';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { PromptEditor } from './PromptEditor';
-import translations from '../../translations';
-import { ChainPromptType, ChainType } from '../../types';
-
-const template = [
-  '# Comment',
-  '',
-  'You are a machine that is an expert chess player.',
-  'The move history of the current game is: {history}',
-  'If asked to suggest a move explain why it is a good move.',
-  '',
-  '---',
-  '',
-  '{input}',
-].join('\n');
-
-const DefaultStory = () => {
-  const client = useClient();
-  const [chain] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(
-      create(ChainType, {
-        prompts: [makeRef(create(ChainPromptType, { command: 'test', template, inputs: [] }))],
-      }),
-    );
-  });
-
-  return (
-    <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <PromptEditor prompt={chain.prompts![0]!.target!} />
-    </div>
-  );
-};
-
-export const Default = {};
-
-const meta: Meta = {
-  title: 'plugins/plugin-automation/PromptTemplate',
-  render: DefaultStory,
-  decorators: [
-    withClientProvider({ createIdentity: true, createSpace: true, types: [ChainType, ChainPromptType] }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;

package/src/components/PromptEditor/PromptEditor.tsx

@@ -1,222 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Schema as S } from '@effect/schema';
-import React, { useEffect } from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { Input, Select, useThemeContext, useTranslation } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { attentionSurface, groupBorder, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
-
-import { nameRegex, promptExtension } from './prompt-extension';
-import { AUTOMATION_PLUGIN } from '../../meta';
-import { type ChainInput, ChainInputType, type ChainPromptType } from '../../types';
-
-const inputTypes = [
-  {
-    value: ChainInputType.VALUE,
-    label: 'Value',
-  },
-  {
-    value: ChainInputType.PASS_THROUGH,
-    label: 'Pass through',
-  },
-  {
-    value: ChainInputType.RETRIEVER,
-    label: 'Retriever',
-  },
-  // {
-  //   value: ChainInputType.FUNCTION,
-  //   label: 'Function',
-  // },
-  // {
-  //   value: ChainInputType.QUERY,
-  //   label: 'Query',
-  // },
-  {
-    value: ChainInputType.RESOLVER,
-    label: 'Resolver',
-  },
-  {
-    value: ChainInputType.CONTEXT,
-    label: 'Context',
-  },
-  {
-    value: ChainInputType.SCHEMA,
-    label: 'Schema',
-  },
-];
-
-const getInputType = (type: string) => inputTypes.find(({ value }) => String(value) === type)?.value;
-
-const usePromptInputs = (prompt: ChainPromptType) => {
-  useEffect(() => {
-    const text = prompt.template ?? '';
-    if (!prompt.inputs) {
-      prompt.inputs = []; // TODO(burdon): Required?
-    }
-
-    const regex = new RegExp(nameRegex, 'g');
-    const variables = new Set<string>([...text.matchAll(regex)].map((m) => m[1]));
-
-    // Create map of unclaimed inputs.
-    const unclaimed = new Map<string, ChainInput>(
-      prompt.inputs?.filter(nonNullable).map((input) => [input.name, input]),
-    );
-    const missing: string[] = [];
-    Array.from(variables.values()).forEach((name) => {
-      if (unclaimed.has(name)) {
-        unclaimed.delete(name);
-      } else {
-        missing.push(name);
-      }
-    });
-
-    // Match or create new inputs.
-    const values = unclaimed.values();
-    missing.forEach((name) => {
-      const next = values.next().value;
-      if (next) {
-        next.name = name;
-      } else {
-        prompt.inputs?.push({ name });
-      }
-    });
-
-    // Remove unclaimed (deleted) inputs.
-    // TODO(burdon): If user types incorrect name value, it will be deleted. Garbage collect?
-    for (const input of values) {
-      prompt.inputs.splice(prompt.inputs.indexOf(input), 1);
-    }
-  }, [prompt.template]);
-};
-
-export type PromptEditorProps = {
-  prompt: ChainPromptType;
-  commandEditable?: boolean;
-  schema?: S.Schema<any, any, any>;
-};
-
-export const PromptEditor = ({ prompt, commandEditable = true }: PromptEditorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const { themeMode } = useThemeContext();
-
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: prompt.template,
-      extensions: [
-        createDataExtensions({
-          id: prompt.id,
-          text: prompt.template !== undefined ? createDocAccessor(prompt, ['template']) : undefined,
-        }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineWrapping: true,
-          placeholder: t('template placeholder'),
-        }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            content: { className: '!p-3' },
-          },
-        }),
-        promptExtension,
-      ],
-    }),
-    [themeMode, prompt],
-  );
-
-  usePromptInputs(prompt);
-
-  return (
-    <div className={mx('flex flex-col w-full overflow-hidden gap-4', groupBorder)}>
-      {commandEditable && (
-        <div className='flex items-center pl-4'>
-          <span className='text-neutral-500'>/</span>
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('command placeholder')}
-              classNames={mx('is-full bg-transparent m-2')}
-              value={prompt.command ?? ''}
-              onChange={(event) => {
-                prompt.command = event.target.value.replace(/\w/g, '');
-              }}
-            />
-          </Input.Root>
-        </div>
-      )}
-
-      <div ref={parentRef} className={mx(attentionSurface, 'rounded', 'min-h-[120px]')} />
-
-      {(prompt.inputs?.length ?? 0) > 0 && (
-        <div className='flex flex-col'>
-          {/* TODO(zan): Improve layout with grid */}
-          <table className='w-full table-fixed border-collapse my-2'>
-            <tbody>
-              {prompt.inputs?.filter(nonNullable).map((input) => (
-                <tr key={input.name}>
-                  <td className='w-[160px] p-1 font-mono text-sm whitespace-nowrap truncate'>
-                    <code className='px-2'>{input.name}</code>
-                  </td>
-                  <td className='w-[120px] p-1'>
-                    <Input.Root>
-                      <Select.Root
-                        value={String(input.type)}
-                        onValueChange={(type) => {
-                          input.type = getInputType(type) ?? ChainInputType.VALUE;
-                        }}
-                      >
-                        <Select.TriggerButton placeholder='Type' classNames='is-full' />
-                        <Select.Portal>
-                          <Select.Content>
-                            <Select.Viewport>
-                              {inputTypes.map(({ value, label }) => (
-                                <Select.Option key={value} value={String(value)}>
-                                  {label}
-                                </Select.Option>
-                              ))}
-                            </Select.Viewport>
-                          </Select.Content>
-                        </Select.Portal>
-                      </Select.Root>
-                    </Input.Root>
-                  </td>
-                  <td className='p-1 pr-2'>
-                    {input.type !== undefined &&
-                      [
-                        ChainInputType.VALUE,
-                        ChainInputType.CONTEXT,
-                        ChainInputType.RESOLVER,
-                        ChainInputType.SCHEMA,
-                      ].includes(input.type) && (
-                        <div>
-                          <Input.Root>
-                            <Input.TextInput
-                              placeholder={t('command placeholder')}
-                              classNames={mx('is-full bg-transparent')}
-                              value={input.value ?? ''}
-                              onChange={(event) => {
-                                input.value = event.target.value;
-                              }}
-                            />
-                          </Input.Root>
-                        </div>
-                      )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/PromptEditor/prompt-extension.ts

@@ -1,43 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
-import { type Extension } from '@codemirror/state';
-
-import { tags } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-export const nameRegex = /\{([\w-]+)}/;
-
-const parser = StreamLanguage.define({
-  token: (stream) => {
-    if (stream.eatSpace()) {
-      return null;
-    }
-    if (stream.match(/^#.*/)) {
-      return 'lineComment';
-    }
-    if (stream.match(/^-+$/)) {
-      return 'lineComment';
-    }
-    if (stream.match(nameRegex)) {
-      return 'variableName';
-    }
-    stream.next();
-    return null;
-  },
-});
-
-/**
- * https://codemirror.net/examples/styling
- * https://lezer.codemirror.net/docs/ref/#highlight
- */
-const highlightStyles = HighlightStyle.define([
-  {
-    tag: tags.variableName,
-    class: mx('rounded border border-yellow-500 bg-yellow-100 text-black font-mono text-sm'),
-  },
-]);
-
-export const promptExtension: Extension = [parser, syntaxHighlighting(highlightStyles)];