@dxos/plugin-automation 0.7.5-main.b19bfc8 → 0.7.5-main.e94eead

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -1,76 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
-import { styleTags, tags } from '@lezer/highlight';
-import { handlebarsLanguage } from '@xiechao/codemirror-lang-handlebars';
-import React from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { useThemeContext, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-import { AUTOMATION_PLUGIN } from '../../meta';
-import { type TemplateType } from '../../types';
-
-handlebarsLanguage.configure({
-  props: [
-    styleTags({
-      '---': tags.lineComment,
-    }),
-  ],
-});
-
-export type TemplateEditorProps = ThemedClassName<{
-  template: TemplateType;
-}>;
-
-export const TemplateEditor = ({ classNames, template }: TemplateEditorProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: template.source,
-      extensions: [
-        createDataExtensions({
-          id: template.id,
-          text: template.source !== undefined ? createDocAccessor(template, ['template']) : undefined,
-        }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineWrapping: true,
-          placeholder: t('template placeholder'),
-        }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            content: { className: '!p-3' },
-          },
-        }),
-
-        // https://github.com/xiechao/lang-handlebars
-        new LanguageSupport(handlebarsLanguage, syntaxHighlighting(handlebarsHighlightStyle)),
-      ],
-    }),
-    [themeMode, prompt],
-  );
-
-  return <div ref={parentRef} className={mx(classNames)} />;
-};
-
-/**
- * https://github.com/xiechao/lang-handlebars/blob/direct/src/highlight.js
- */
-export const handlebarsHighlightStyle = HighlightStyle.define([
-  { tag: tags.tagName, class: 'text-redText' }, // Braces.
-  { tag: tags.variableName, class: 'text-blueText' },
-  { tag: tags.keyword, class: 'text-greenText' },
-  { tag: tags.comment, class: 'text-subdued' },
-]);

package/src/components/TemplateEditor/TemplateForm.stories.tsx

@@ -1,65 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useState } from 'react';
-
-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';
-
-import { TemplateForm } from './TemplateForm';
-import translations from '../../translations';
-import { TemplateType } from '../../types';
-
-const TEMPLATE = [
-  '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 Render = () => {
-  const client = useClient();
-  const [template] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: TEMPLATE }));
-  });
-
-  return (
-    <div role='none' className='flex w-[40rem] border border-separator overflow-hidden'>
-      <TemplateForm template={template} />
-    </div>
-  );
-};
-
-const meta: Meta<typeof TemplateForm> = {
-  title: 'plugins/plugin-automation/TemplateForm',
-  component: TemplateForm,
-  render: Render,
-  decorators: [
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [TemplateType],
-    }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-    withTheme,
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = Meta<typeof TemplateForm>;
-
-export const Default: Story = {};

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -1,184 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Schema as S } from '@effect/schema';
-import React, { Fragment, useEffect } from 'react';
-
-import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { attentionSurface, groupBorder, mx } from '@dxos/react-ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { TemplateEditor } from './TemplateEditor';
-import { AUTOMATION_PLUGIN } from '../../meta';
-import { type TemplateInput, TemplateInputType, type TemplateType } from '../../types';
-
-export type TemplateFormProps = {
-  template: TemplateType;
-  schema?: S.Schema<any, any, any>;
-  commandEditable?: boolean;
-};
-
-export const TemplateForm = ({ template, commandEditable = true }: TemplateFormProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-
-  usePromptInputs(template);
-
-  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={template.command ?? ''}
-              onChange={(event) => {
-                template.command = event.target.value.replace(/\w/g, '');
-              }}
-            />
-          </Input.Root>
-        </div>
-      )}
-
-      <TemplateEditor template={template} classNames={[attentionSurface, 'min-h-[120px]']} />
-
-      {(template.inputs?.length ?? 0) > 0 && (
-        <div className='grid grid-cols-[10rem_10rem_1fr] gap-1 items-center'>
-          {template.inputs?.filter(isNonNullable).map((input) => (
-            <Fragment key={input.name}>
-              <div className='pis-3 text-blueText'>{input.name}</div>
-
-              <Input.Root>
-                <Select.Root
-                  value={String(input.type)}
-                  onValueChange={(type) => {
-                    input.type = getInputType(type) ?? TemplateInputType.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>
-
-              <div>
-                {input.type !== undefined &&
-                  [
-                    TemplateInputType.VALUE,
-                    TemplateInputType.CONTEXT,
-                    TemplateInputType.RESOLVER,
-                    TemplateInputType.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>
-                  )}
-              </div>
-            </Fragment>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-const inputTypes = [
-  {
-    value: TemplateInputType.VALUE,
-    label: 'Value',
-  },
-  {
-    value: TemplateInputType.PASS_THROUGH,
-    label: 'Pass through',
-  },
-  {
-    value: TemplateInputType.RETRIEVER,
-    label: 'Retriever',
-  },
-  // {
-  //   value: TemplateInputType.FUNCTION,
-  //   label: 'Function',
-  // },
-  // {
-  //   value: TemplateInputType.QUERY,
-  //   label: 'Query',
-  // },
-  {
-    value: TemplateInputType.RESOLVER,
-    label: 'Resolver',
-  },
-  {
-    value: TemplateInputType.CONTEXT,
-    label: 'Context',
-  },
-  {
-    value: TemplateInputType.SCHEMA,
-    label: 'Schema',
-  },
-];
-
-export const nameRegex = /\{\{([\w-]+)\}\}/;
-
-const getInputType = (type: string) => inputTypes.find(({ value }) => String(value) === type)?.value;
-
-const usePromptInputs = (template: TemplateType) => {
-  useEffect(() => {
-    const text = template.source ?? '';
-    if (!template.inputs) {
-      template.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, TemplateInput>(
-      template.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 {
-        template.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) {
-      template.inputs.splice(template.inputs.indexOf(input), 1);
-    }
-  }, [template.source]);
-};

package/src/components/TemplateEditor/index.ts

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

package/src/components/TemplateEditor/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/Thread/Thread.stories.tsx

@@ -1,212 +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 { withClientProvider } from '@dxos/react-client/testing';
-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 w-[30rem] bg-white dark:bg-black'>
-      <Thread
-        {...props}
-        messages={messages}
-        processing={processing}
-        onSubmit={handleSubmit}
-        onCancel={() => setProcessing(false)}
-      />
-    </div>
-  );
-};
-
-const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-automation/Thread',
-  render: Render,
-  component: Thread,
-  decorators: [
-    withSignals,
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-    }),
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
-  ],
-  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: {
-    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 />;
-  },
-};

package/src/components/Thread/Thread.tsx

@@ -1,97 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
-
-import { type Message } from '@dxos/artifact';
-import { type Space } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
-import { mx } from '@dxos/react-ui-theme';
-import { keyToFallback } from '@dxos/util';
-
-import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
-import { messageReducer } from './reducer';
-import { PromptBar, type PromptBarProps } from '../Prompt';
-
-export type ThreadProps = ThemedClassName<{
-  space?: Space;
-  messages?: Message[];
-  collapse?: boolean;
-  transcription?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}> &
-  Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'onPrompt' | 'onDelete'>;
-
-/**
- * Chat thread component.
- */
-export const Thread = ({
-  classNames,
-  space,
-  messages,
-  collapse = true,
-  transcription,
-  processing,
-  error,
-  onSubmit,
-  onCancel,
-  onOpenChange,
-  ...props
-}: ThreadProps) => {
-  const scroller = useRef<ScrollController>(null);
-
-  const identity = useIdentity();
-  const fallbackValue = keyToFallback(identity!.identityKey);
-  const userHue = identity!.profile?.data?.hue || fallbackValue.hue;
-
-  const handleSubmit = useCallback<NonNullable<PromptBarProps['onSubmit']>>(
-    (value: string) => {
-      onSubmit?.(value);
-      scroller.current?.scrollToBottom();
-      return true;
-    },
-    [onSubmit],
-  );
-
-  // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
-  const { messages: filteredMessages = [] } = useMemo(() => {
-    if (collapse) {
-      return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(messageReducer, {
-        messages: [],
-      });
-    } else {
-      return { messages: messages ?? [] };
-    }
-  }, [messages, collapse]);
-
-  return (
-    <div role='none' className={mx('flex flex-col grow overflow-hidden', classNames)}>
-      <ScrollContainer ref={scroller} fade>
-        <div
-          role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6')}
-          style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
-        >
-          {filteredMessages.map((message) => (
-            <ThreadMessage key={message.id} classNames='px-4 pbe-4' space={space} message={message} {...props} />
-          ))}
-        </div>
-      </ScrollContainer>
-
-      {onSubmit && (
-        <PromptBar
-          microphone={transcription}
-          processing={processing}
-          error={error}
-          onSubmit={handleSubmit}
-          onCancel={onCancel}
-          onOpenChange={onOpenChange}
-        />
-      )}
-    </div>
-  );
-};