@dxos/plugin-automation 0.7.5-staging.b81e783 → 0.8.0

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 { isNonNullable } 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(isNonNullable).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(isNonNullable).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/index.ts

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

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)];

package/src/components/PromptEditor/types.tsx

@@ -1,28 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-// TODO(burdon): Factor out (shared with backend). core/chain (@dxos/chain).
-// TODO(burdon): Agent/plan-and-execute (with tools). Create design doc/ontology of sequence/agent.
-
-export type Step = {
-  id: string;
-};
-
-export type Variable = {
-  name: string;
-  type: 'value' | 'function' | 'query' | 'retriever' | 'pass-through';
-};
-
-export type Prompt = Step & {
-  title?: string;
-  description?: string;
-  template: string;
-  variables: Variable[];
-};
-
-export type Sequence = Step & {
-  runnable: Step[];
-};
-
-export type Chain = {};

package/src/components/ServiceRegistry/ServiceRegistry.stories.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { ServiceRegistry } from './ServiceRegistry';
-import { ServiceType } from '../../types';
-
-const meta: Meta<typeof ServiceRegistry> = {
-  title: 'plugins/plugin-automation/ServiceRegistry',
-  component: ServiceRegistry,
-  render: ({ space: _ignore, ...args }) => {
-    const space = useSpace();
-    if (!space) {
-      return <div />;
-    }
-
-    return (
-      <div className='h-full w-[300px] overflow-hidden'>
-        <ServiceRegistry space={space} {...args} />
-      </div>
-    );
-  },
-  decorators: [
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [ServiceType],
-    }),
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
-    withTheme,
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ServiceRegistry>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -1,76 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Filter, type Space } from '@dxos/client/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { Icon, Input, List, ListItem } from '@dxos/react-ui';
-
-import { useServices } from '../../hooks';
-import { categoryIcons, ServiceType } from '../../types';
-
-// TODO(burdon): Option to show all/enabled/filter.
-export const ServiceRegistry = ({ space }: { space: Space }) => {
-  const matchingServices = useServices(space);
-  const enabledServices = useQuery(space, Filter.schema(ServiceType));
-
-  // Join matching services with enabled services.
-  const services = useMemo(() => {
-    return matchingServices.map((service) => enabledServices.find((s) => s.serviceId === service.serviceId) ?? service);
-  }, [matchingServices, enabledServices]);
-
-  // TODO(burdon): Reaplce with SpacePlugin intent.
-  const handleSetEnabled = (service: ServiceType, enabled: boolean) => {
-    if (enabled) {
-      space.db.add(service);
-    } else {
-      // TODO(burdon): Remove or disable?
-      space.db.remove(service);
-    }
-  };
-
-  return (
-    <List classNames='h-full grid auto-rows-[5rem] gap-2 p-2 pis-2 pie-2 overflow-y-auto scrollbar-thin'>
-      {services.map((service) => (
-        <ServiceItem
-          key={service.serviceId}
-          service={service}
-          enabled={service.enabled}
-          setEnabled={(enabled) => handleSetEnabled(service, enabled)}
-        />
-      ))}
-    </List>
-  );
-};
-
-const ServiceItem = ({
-  service,
-  enabled,
-  setEnabled,
-}: {
-  service: ServiceType;
-  enabled?: boolean;
-  setEnabled?: (enabled: boolean) => void;
-}) => {
-  return (
-    <ListItem.Root classNames='flex flex-col gap-1 p-1 overflow-hidden rounded-md border border-separator'>
-      <div className='grid grid-cols-[40px_1fr_40px]'>
-        <div className='flex gow justify-center items-center'>
-          <Icon icon={categoryIcons[service.category ?? 'default'] ?? 'ph--placeholder--regular'} size={6} />
-        </div>
-        <div className='grow items-center truncate mie-2'>{service.name}</div>
-        <div className='flex gow justify-center items-center'>
-          <Input.Root>
-            <Input.Switch checked={enabled} onClick={() => setEnabled?.(!enabled)} />
-          </Input.Root>
-        </div>
-      </div>
-      <div className='grid grid-cols-[40px_1fr]'>
-        <div />
-        <div className='text-sm text-subdued line-clamp-2 mie-1'>{service.description}</div>
-      </div>
-    </ListItem.Root>
-  );
-};

package/src/components/ServiceRegistry/index.ts

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

package/src/components/Thread/Thread.stories.tsx

@@ -1,210 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { type Message } from '@dxos/artifact';
-import { ObjectId } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
-
-import { Thread, type ThreadProps } from './Thread';
-import translations from '../../translations';
-
-faker.seed(1);
-
-const Render = ({ messages: _messages, ...props }: ThreadProps) => {
-  const [processing, setProcessing] = useState(false);
-  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
-  useEffect(() => {
-    setMessages(_messages ?? []);
-  }, [_messages]);
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
-      const response: Message = {
-        id: ObjectId.random(),
-        role: 'assistant',
-        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
-      };
-      setMessages([...messages, request, response]);
-      setProcessing(true);
-      setTimeout(() => {
-        response.content[0].pending = false;
-        setMessages([
-          ...messages,
-          request,
-          response,
-          {
-            id: ObjectId.random(),
-            role: 'assistant',
-            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
-          },
-        ]);
-        setProcessing(false);
-      }, 3_000);
-    },
-    [messages],
-  );
-
-  return (
-    <div className='flex grow justify-center overflow-center bg-baseSurface'>
-      <div className='flex w-[30rem] bg-white dark:bg-black'>
-        <Thread
-          {...props}
-          messages={messages}
-          processing={processing}
-          onSubmit={handleSubmit}
-          onCancel={() => setProcessing(false)}
-        />
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-automation/Thread',
-  render: Render,
-  component: Thread,
-  decorators: [
-    withSignals,
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
-    withPluginManager({ plugins: [IntentPlugin()] }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ThreadProps>;
-
-const TEST_MESSAGES: Message[] = [
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.sentence(5),
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        disposition: 'cot',
-        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
-          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
-          .join('\n'),
-      },
-      {
-        type: 'text',
-        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
-          .map(() => faker.lorem.paragraphs())
-          .join('\n\n'),
-      },
-      {
-        type: 'tool_use',
-        id: '1234',
-        name: 'search',
-        input: {},
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '1234',
-        content: 'This is a tool result.',
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'tool_use',
-        id: '4567',
-        name: 'create',
-        input: {},
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '4567',
-        content: 'This is a tool result.',
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.paragraphs(1),
-      },
-    ],
-  },
-];
-
-export const Default: Story = {
-  args: {
-    // debug: true,
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Input: Story = {
-  args: {
-    processing: true,
-  },
-};
-
-export const Collapse: Story = {
-  args: {
-    collapse: true,
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Incremental: Story = {
-  render: () => {
-    const [messages, setMessages] = useState<Message[]>([]);
-    useEffect(() => {
-      let i = 0;
-      const interval = setInterval(() => {
-        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
-        if (i >= TEST_MESSAGES.length) {
-          clearInterval(interval);
-        }
-      }, 2_000);
-
-      return () => clearInterval(interval);
-    }, []);
-
-    return <Render messages={messages} collapse />;
-  },
-};