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

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -0,0 +1,76 @@
+//
+// 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

@@ -0,0 +1,65 @@
+//
+// 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

@@ -0,0 +1,184 @@
+//
+// 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/{PromptEditor → TemplateEditor}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './PromptEditor';
+export * from './TemplateEditor';

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

@@ -0,0 +1,212 @@
+//
+// 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

@@ -0,0 +1,97 @@
+//
+// 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>
+  );
+};