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

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin, Capabilities, useCapabilities, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { capabilities } from '@dxos/artifact-testing';
+import { ChessPlugin } from '@dxos/plugin-chess';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { MapPlugin } from '@dxos/plugin-map';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { TablePlugin } from '@dxos/plugin-table';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+
+import { Toolbox } from './Toolbox';
+
+const Render = () => {
+  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
+  return (
+    <Toolbox artifacts={artifactDefinitions} classNames='w-[30rem] h-[15rem] rounded-md border border-separator' />
+  );
+};
+
+const meta: Meta<typeof Toolbox> = {
+  title: 'plugins/plugin-automation/Toolbox',
+  component: Toolbox,
+  render: Render,
+  decorators: [
+    withSignals,
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin({ observability: false }),
+        SettingsPlugin(),
+        IntentPlugin(),
+        ChessPlugin(),
+        MapPlugin(),
+        TablePlugin(),
+      ],
+      capabilities,
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = Meta<typeof Toolbox>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/Toolbox/Toolbox.tsx

@@ -0,0 +1,117 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useState, useEffect, Fragment } from 'react';
+
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { type ArtifactDefinition, type Tool } from '@dxos/artifact';
+import { FunctionType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { createToolsFromService } from '../../tools';
+import { ServiceType } from '../../types';
+
+export type ToolboxProps = ThemedClassName<{
+  artifacts?: ArtifactDefinition[];
+  functions?: FunctionType[];
+  services?: { service: ServiceType; tools: Tool[] }[];
+  striped?: boolean;
+}>;
+
+const stripeClassNames = 'odd:bg-neutral-50 dark:odd:bg-neutral-800';
+
+export const Toolbox = ({ classNames, artifacts, functions, services, striped }: ToolboxProps) => {
+  const gridClassNames = 'grid grid-cols-[8rem_8rem_1fr]';
+  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs px-2', striped && stripeClassNames);
+
+  return (
+    <div className={mx('flex flex-col overflow-y-auto box-content', classNames)}>
+      {artifacts && artifacts.length > 0 && (
+        <div>
+          <h1 className='px-2 text-sm'>Artifacts</h1>
+          <div className={gridClassNames}>
+            {artifacts.map(({ id, description, tools }) => (
+              <Fragment key={id}>
+                <div className={subGridClassNames}>
+                  <div className='text-primary-500 truncate'>{id}</div>
+                  <div className='col-span-2 line-clamp-2'>{description}</div>
+                </div>
+                {tools.map(({ name, description }, i) => (
+                  <div key={`${name}-${i}`} className={subGridClassNames}>
+                    <div />
+                    <div className='truncate'>{name}</div>
+                    <div className='text-subdued line-clamp-3'>{description}</div>
+                  </div>
+                ))}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {services && services.length > 0 && (
+        <div>
+          <h1 className='px-2 text-sm'>Services</h1>
+          <div className={gridClassNames}>
+            {services.map(({ service, tools }) => (
+              <Fragment key={service.serviceId}>
+                <div className={subGridClassNames}>
+                  <div className='text-primary-500 truncate'>{service.name ?? service.serviceId}</div>
+                  <div className='col-span-2 line-clamp-2'>{service.description}</div>
+                </div>
+                {tools.map(({ name, description }, i) => (
+                  <div key={name} className={mx(subGridClassNames, striped && stripeClassNames)}>
+                    <div className='text-primary-500 truncate'>{i === 0 && service.serviceId}</div>
+                    <div className='truncate'>{name}</div>
+                    <div className='truncate'>{description}</div>
+                  </div>
+                ))}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {functions && functions.length > 0 && (
+        <div>
+          <h1 className='px-2 text-sm'>Functions</h1>
+          <div className={gridClassNames}>
+            {functions.map(({ name, description }) => (
+              <div key={name} className={mx(subGridClassNames, striped && stripeClassNames)}>
+                <div className='text-primary-500 truncate'>function</div>
+                <div className='truncate'>{name}</div>
+                <div className='truncate'>{description}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ToolboxContainer = ({ classNames, space }: ThemedClassName<{ space?: Space }>) => {
+  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const services = useQuery(space, Filter.schema(ServiceType));
+
+  const [serviceTools, setServiceTools] = useState<{ service: ServiceType; tools: Tool[] }[]>([]);
+  useEffect(() => {
+    log('creating service tools...');
+    queueMicrotask(async () => {
+      const tools = await Promise.all(
+        services.map(async (service) => ({ service, tools: await createToolsFromService(service) })),
+      );
+
+      setServiceTools(tools);
+    });
+  }, [services]);
+
+  return (
+    <Toolbox classNames={classNames} artifacts={artifactDefinitions} functions={functions} services={serviceTools} />
+  );
+};

package/src/components/Toolbox/index.ts

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

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

@@ -16,7 +16,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { TriggerEditor } from './TriggerEditor';
 import { functions } from '../../testing';
 import translations from '../../translations';
-import { ChainPromptType } from '../../types';
+import { TemplateType } from '../../types';
 
 const DefaultStory = () => {
   const spaces = useSpaces();
@@ -50,7 +50,7 @@ const meta: Meta = {
     withClientProvider({
       createIdentity: true,
       createSpace: true,
-      types: [FunctionType, FunctionTrigger, ChainPromptType],
+      types: [FunctionType, FunctionTrigger, TemplateType],
       onSpaceCreated: ({ space }) => {
         for (const fn of functions) {
           space.db.add(create(FunctionType, fn));

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -2,8 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { ComputeGraph } from '@dxos/conductor';
 import {
   FunctionType,
   FunctionTriggerSchema,
@@ -29,6 +30,7 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
   const { t } = useTranslation(AUTOMATION_PLUGIN);
 
   const functions = useQuery(space, Filter.schema(FunctionType));
+  const workflows = useQuery(space, Filter.schema(ComputeGraph));
   const scripts = useQuery(space, Filter.schema(ScriptType));
 
   const handleSave = (values: FunctionTriggerType) => {
@@ -43,16 +45,13 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
       onCancel={onCancel}
       Custom={{
         ['function' satisfies keyof FunctionTriggerType]: (props) => (
-          <SelectInput<FunctionTriggerType>
+          <SelectInput
             {...props}
-            options={functions.map((fn) => ({
-              value: fn.name,
-              label: getFunctionName(scripts, fn),
-            }))}
+            options={getWorkflowOptions(workflows).concat(getFunctionOptions(scripts, functions))}
           />
         ),
         ['spec.type' as const]: (props) => (
-          <SelectInput<FunctionTriggerType>
+          <SelectInput
             {...props}
             options={Object.values(TriggerKind).map((kind) => ({
               value: kind,
@@ -61,12 +60,10 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
           />
         ),
         ['meta' as const]: (props) => {
-          const meta = props.getValue('meta')!;
-
+          const meta = props.getValue()!;
+          useEffect(() => props.onValueChange('object', { ...meta }), []);
           const [newMetaFieldName, setNewMetaFieldName] = useState('');
 
-          React.useEffect(() => props.onValueChange('meta', 'object', { ...meta }), []);
-
           return (
             <>
               <div>{props.label}</div>
@@ -75,7 +72,12 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
                 return (
                   <div key={compositeKey} role='none' className='flex items-center mt-2 gap-1'>
                     <div role='none' className='flex-1'>
-                      <TextInput {...props} property={compositeKey} type={'string'} label={key} />
+                      <TextInput
+                        {...props}
+                        getValue={() => (props.getValue() as any)[key]}
+                        type={'string'}
+                        label={key}
+                      />
                     </div>
                     <IconButton
                       icon='ph--trash--regular'
@@ -83,9 +85,9 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
                       classNames={'mt-6'}
                       label={t('trigger meta remove')}
                       onClick={() => {
-                        const newValues: any = { ...props.getValue('meta') };
+                        const newValues: any = { ...props.getValue() };
                         delete newValues[key];
-                        props.onValueChange('meta', 'object', newValues);
+                        props.onValueChange('object', newValues);
                       }}
                     />
                   </div>
@@ -107,10 +109,10 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
                   label={t('trigger meta add')}
                   onClick={() => {
                     if (newMetaFieldName.length) {
-                      const meta = props.getValue('meta') ?? {};
+                      const meta = props.getValue() ?? {};
                       const metaWithNewProp = { ...meta, [newMetaFieldName]: '' };
                       setNewMetaFieldName('');
-                      props.onValueChange('meta', 'object', metaWithNewProp);
+                      props.onValueChange('object', metaWithNewProp);
                     }
                   }}
                 />
@@ -123,6 +125,11 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
   );
 };
 
-const getFunctionName = (scripts: ScriptType[], fn: FunctionType) => {
-  return scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
+const getWorkflowOptions = (graphs: ComputeGraph[]) => {
+  return graphs.map((graph) => ({ label: `compute-${graph.id}`, value: `dxn:echo:@:${graph.id}` }));
+};
+
+const getFunctionOptions = (scripts: ScriptType[], functions: FunctionType[]) => {
+  const getLabel = (fn: FunctionType) => scripts.find((s) => fn.source?.target?.id === s.id)?.name ?? fn.name;
+  return functions.map((fn) => ({ label: getLabel(fn), value: `dxn:worker:${fn.name}` }));
 };

package/src/components/index.ts

@@ -4,5 +4,15 @@
 
 import { lazy } from 'react';
 
-export const AssistantPanel = lazy(() => import('./AssistantPanel'));
+export * from './AutomationPanel';
+export * from './AutomationSettings';
+export * from './ServiceRegistry';
+export * from './TemplateEditor';
+export * from './Thread';
+export * from './TriggerEditor';
+export * from './Toolbox';
+
+export const AssistantDialog = lazy(() => import('./AssistantDialog'));
 export const AutomationPanel = lazy(() => import('./AutomationPanel'));
+export const ChatContainer = lazy(() => import('./ChatContainer'));
+export const TemplateContainer = lazy(() => import('./TemplateContainer'));

package/src/hooks/index.ts

@@ -2,4 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './processor';
+
+export * from './useChatProcessor';
 export * from './useLocalTriggerManager';
+export * from './useMessageQueue';
+export * from './useServices';
+export * from './useTextInputEvents';

package/src/hooks/processor.test.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, it } from 'vitest';
+
+import { ChatProcessor } from './processor';
+
+describe('ChatProcessor', () => {
+  it('should be instantiable', ({ expect }) => {
+    const client = {} as any; // TODO(burdon): Create mock.
+    const processor = new ChatProcessor(client);
+    expect(processor).toBeDefined();
+  });
+});

package/src/hooks/processor.ts

@@ -0,0 +1,219 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Signal, batch, computed, signal } from '@preact/signals-core';
+
+import { type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { type Tool, Message, type MessageContentBlock } from '@dxos/artifact';
+import {
+  isToolUse,
+  runTools,
+  type AIServiceClientImpl,
+  type GenerateRequest,
+  type GenerationStream,
+  MixedStreamParser,
+  DEFAULT_LLM_MODEL,
+} from '@dxos/assistant';
+import { createStatic } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+
+// TODO(burdon): Factor out.
+declare global {
+  interface ToolContextExtensions {
+    space?: Space;
+    dispatch?: PromiseIntentDispatcher;
+  }
+}
+
+type RequestOptions = {
+  history?: Message[];
+  onComplete?: (messages: Message[]) => void;
+};
+
+export type ChatProcessorOptions = Pick<GenerateRequest, 'model' | 'systemPrompt'>;
+
+const defaultOptions: ChatProcessorOptions = {
+  model: DEFAULT_LLM_MODEL,
+  systemPrompt: 'you are a helpful assistant',
+};
+
+/**
+ * Handles interactions with the AI service.
+ * Maintains a queue of messages and handles streaming responses from the AI service.
+ * Executes tools based on AI responses.
+ * Supports cancellation of in-progress requests.
+ */
+export class ChatProcessor {
+  /** SSE stream parser. */
+  private readonly _parser = new MixedStreamParser();
+
+  /** Current streaming response (iterator). */
+  private _stream: GenerationStream | undefined;
+
+  /** Pending messages (incl. the user request). */
+  private readonly _pending: Signal<Message[]> = signal([]);
+
+  /** Current streaming block (from the AI service). */
+  private readonly _block: Signal<MessageContentBlock | undefined> = signal(undefined);
+
+  /** Prior history from queue. */
+  private _history: Message[] = [];
+
+  /**
+   * Streaming state.
+   * @reactive
+   */
+  public readonly streaming: Signal<boolean> = computed(() => this._block.value !== undefined);
+
+  /**
+   * Last error.
+   * @reactive
+   */
+  public readonly error: Signal<Error | undefined> = signal(undefined);
+
+  /**
+   * Array of Messages (incl. the current message being streamed).
+   * @reactive
+   */
+  public readonly messages: Signal<Message[]> = computed(() => {
+    const messages = [...this._pending.value];
+    if (this._block.value) {
+      const current = messages.pop();
+      invariant(current);
+      const { content, ...rest } = current;
+      const message = { ...rest, content: [...content, this._block.value] };
+      messages.push(message);
+    }
+
+    return messages;
+  });
+
+  constructor(
+    private readonly _client: AIServiceClientImpl,
+    private _tools?: Tool[],
+    private readonly _extensions?: ToolContextExtensions,
+    private readonly _options: ChatProcessorOptions = defaultOptions,
+  ) {
+    // Message complete.
+    this._parser.message.on((message) => {
+      batch(() => {
+        this._pending.value = [...this._pending.value, message];
+        this._block.value = undefined;
+      });
+    });
+
+    // Streaming update (happens before message complete).
+    this._parser.update.on((block) => {
+      batch(() => {
+        this._block.value = block;
+      });
+    });
+  }
+
+  /**
+   * Update tools.
+   */
+  setTools(tools: Tool[]) {
+    this._tools = tools;
+  }
+
+  /**
+   * Make GPT request.
+   */
+  async request(message: string, options: RequestOptions = {}): Promise<Message[]> {
+    batch(() => {
+      this._history = options.history ?? [];
+      this._pending.value = [
+        createStatic(Message, {
+          role: 'user',
+          content: [{ type: 'text', text: message }],
+        }),
+      ];
+      this._block.value = undefined;
+    });
+
+    await this._generate();
+    options.onComplete?.(this._pending.value);
+    return this._reset();
+  }
+
+  /**
+   * Cancel pending requests.
+   * @returns Pending requests (incl. the request message).
+   */
+  async cancel(): Promise<Message[]> {
+    log.info('cancelling...');
+    this._stream?.abort();
+    return this._reset();
+  }
+
+  private async _reset(): Promise<Message[]> {
+    const messages = this._pending.value;
+    batch(() => {
+      this._history = [];
+      this._pending.value = [];
+      this._block.value = undefined;
+    });
+
+    return messages;
+  }
+
+  /**
+   * Generate a response from the AI service.
+   * Iterates over tool requests.
+   */
+  private async _generate() {
+    try {
+      let more = false;
+      do {
+        log.info('requesting', { history: this._history.length, messages: this._pending.value.length });
+        this._stream = await this._client.generate({
+          ...this._options,
+          // TODO(burdon): Rename messages or separate history/message.
+          history: [...this._history, ...this._pending.value],
+          tools: this._tools,
+        });
+
+        // Wait until complete.
+        await this._parser.parse(this._stream);
+        await this._stream.complete();
+
+        // Add messages.
+        log.info('response', { messages: this._pending.value });
+
+        // Resolve tool use locally.
+        more = false;
+        const message = this._pending.value.at(-1);
+        invariant(message);
+        if (isToolUse(message)) {
+          log.info('tool request...');
+          const response = await runTools({
+            message: this._pending.value.at(-1)!,
+            tools: this._tools ?? [],
+            extensions: this._extensions,
+          });
+
+          log.info('tool response', { response });
+          switch (response.type) {
+            case 'continue': {
+              this._pending.value = [...this._pending.value, response.message];
+              more = true;
+              break;
+            }
+          }
+        }
+      } while (more);
+
+      log.info('done');
+    } catch (err) {
+      log.catch(err);
+      this.error.value = new Error('AI service error', { cause: err });
+    } finally {
+      this._stream = undefined;
+      this.error.value = undefined;
+    }
+  }
+}

package/src/hooks/useChatProcessor.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Capabilities, useCapabilities, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { createSystemPrompt, type Tool } from '@dxos/artifact';
+import { DEFAULT_LLM_MODEL } from '@dxos/assistant';
+import { FunctionType } from '@dxos/functions';
+import { log } from '@dxos/log';
+import { useConfig } from '@dxos/react-client';
+import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
+import { isNonNullable } from '@dxos/util';
+
+import { AutomationCapabilities } from '../capabilities';
+import { ChatProcessor } from '../hooks';
+import { covertFunctionToTool, createToolsFromService } from '../tools';
+import { type AutomationSettingsProps, ServiceType } from '../types';
+
+/**
+ * Configure and create ChatProcessor.
+ */
+export const useChatProcessor = (space?: Space, settings?: AutomationSettingsProps): ChatProcessor => {
+  const aiClient = useCapability(AutomationCapabilities.AiClient);
+  const globalTools = useCapabilities(Capabilities.Tools);
+  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+
+  // Services.
+  const services = useQuery(space, Filter.schema(ServiceType));
+  const [serviceTools, setServiceTools] = useState<Tool[]>([]);
+  useEffect(() => {
+    log('creating service tools...');
+    queueMicrotask(async () => {
+      const tools = await Promise.all(services.map((service) => createToolsFromService(service)));
+      setServiceTools(tools.flat());
+    });
+  }, [services]);
+
+  // Tools and context.
+  const config = useConfig();
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const [tools, extensions] = useMemo(() => {
+    log('creating tools...');
+    const tools = [
+      ...globalTools.flat(),
+      ...artifactDefinitions.flatMap((definition) => definition.tools),
+      ...serviceTools,
+      ...functions
+        .map((fn) => covertFunctionToTool(fn, config.values.runtime?.services?.edge?.url ?? '', space?.id))
+        .filter(isNonNullable),
+    ];
+    const extensions = { space, dispatch };
+    return [tools, extensions];
+  }, [dispatch, globalTools, artifactDefinitions, space, serviceTools, functions]);
+
+  // Prompt.
+  const systemPrompt = useMemo(
+    () => createSystemPrompt({ artifacts: artifactDefinitions.map((definition) => definition.instructions) }),
+    [artifactDefinitions],
+  );
+
+  // Create processor.
+  // TODO(burdon): Updated on each query update above. Should just update current processor.
+  const processor = useMemo(() => {
+    log('creating processor...', { settings });
+    return new ChatProcessor(aiClient, tools, extensions, {
+      // TODO(burdon): Remove defualt (let backend decide if not specified).
+      model: settings?.llmModel ?? DEFAULT_LLM_MODEL,
+      // TOOD(burdon): Query.
+      systemPrompt,
+    });
+  }, [aiClient, tools, extensions, systemPrompt, settings?.llmModel]);
+
+  return processor;
+};

package/src/hooks/useMessageQueue.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { DXN, QueueSubspaceTags } from '@dxos/keys';
+import { getSpace } from '@dxos/react-client/echo';
+import { useEdgeClient, useQueue } from '@dxos/react-edge-client';
+
+import { type AIChatType } from '../types';
+
+export const useMessageQueue = (chat?: AIChatType) => {
+  const space = getSpace(chat);
+  const queueDxn = useMemo(() => {
+    const dxn = space && chat?.queue.dxn;
+    return dxn ? new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space.id, dxn.parts.at(-1)!]) : undefined;
+  }, [space, chat?.queue.dxn]);
+
+  const edgeClient = useEdgeClient();
+  return useQueue<Message>(edgeClient, queueDxn);
+};