@dxos/plugin-automation 0.7.5-labs.e27f9b9 → 0.7.5-labs.ea4b4c2

package/src/components/Thread/ThreadMessage.tsx

@@ -2,17 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React, { useEffect, useRef, useState, type FC } from 'react';
 
 import { type MessageContentBlock, type Message } from '@dxos/artifact';
 import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
 import { Button, ButtonGroup, Icon, type ThemedClassName } from '@dxos/react-ui';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
 import { safeParseJson } from '@dxos/util';
 
-import { StatusLine } from './StatusLine';
-import { ToggleContainer } from './ToggleContainer';
+import { ToggleContainer, StatusLine, Tabs } from '../Box';
 import { MarkdownViewer } from '../MarkdownViewer';
 
 export type ThreadMessageProps = ThemedClassName<{
@@ -38,34 +38,37 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({
   const { role, content = [] } = message;
 
   // TODO(burdon): Factor out tool blocks.
-  const tools = content.filter((block) => block.type === 'tool_use' || block.type === 'tool_result');
-  if (collapse && tools.length > 0) {
-    let request: MessageContentBlock & { type: 'tool_use' };
-    const lines = tools.map((tool) => {
-      switch (tool.type) {
+  const toolBlocks = content.filter((block) => block.type === 'tool_use' || block.type === 'tool_result');
+  if (collapse && toolBlocks.length > 0) {
+    let request: (MessageContentBlock & { type: 'tool_use' }) | undefined;
+    const items = toolBlocks.map((block) => {
+      switch (block.type) {
         case 'tool_use': {
-          request = tool;
+          request = block;
           // TODO(burdon): Get plugin name.
-          return `Calling ${tool.name}...`;
+          return { title: `Calling ${block.name}...`, block };
         }
+
         case 'tool_result': {
           if (!request) {
-            return 'Error';
+            log.warn('unexpected message', { block });
+            return { title: 'Error', block };
           }
 
-          return `Processed ${request.name}`;
+          return { title: `Processed ${request.name}`, block };
+        }
+
+        default: {
+          request = undefined;
+          return { title: 'Error', block };
         }
-        default:
-          return 'Error';
       }
     });
 
     return (
       <div className={mx('flex', classNames)}>
-        <div className='w-full p-1 px-2 overflow-hidden rounded-md bg-base'>
-          <ToggleContainer title={<StatusLine lines={lines} autoAdvance />} toggle>
-            <Json data={content[content.length - 1]} classNames='!p-1 text-xs' />
-          </ToggleContainer>
+        <div className='w-full p-1 px-2 overflow-hidden rounded-md bg-baseSurface'>
+          <TabbedContainer items={items} />
         </div>
       </div>
     );
@@ -102,8 +105,8 @@ const Block = ({
     <div
       className={mx(
         'p-1 px-2 overflow-hidden rounded-md',
-        (block.type !== 'text' || block.disposition) && 'w-full bg-base',
-        block.type === 'text' && role === 'user' && 'bg-blue-200 dark:bg-blue-800',
+        (block.type !== 'text' || block.disposition) && 'w-full bg-baseSurface',
+        block.type === 'text' && role === 'user' && 'bg-primary-200 dark:bg-primary-500',
       )}
     >
       <Component block={block} onSuggest={onSuggest} />
@@ -113,12 +116,9 @@ const Block = ({
 
 const titles: Record<string, string> = {
   ['cot' as const]: 'Chain of thought',
-
-  // TODO(burdon): Only show if debugging.
+  ['artifact' as const]: 'Artifact',
   ['tool_use' as const]: 'Tool request',
   ['tool_result' as const]: 'Tool result',
-
-  ['artifact' as const]: 'Artifact',
 };
 
 type BlockComponent = FC<{ block: MessageContentBlock; onSuggest: (text: string) => void }>;
@@ -141,8 +141,7 @@ const componentMap: Record<string, BlockComponent> = {
             <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
           ) : undefined
         }
-        defaultOpen={block.disposition === 'cot'}
-        toggle
+        open={block.disposition === 'cot'}
       >
         <MarkdownViewer content={block.text} classNames={[block.disposition === 'cot' && 'text-sm text-subdued']} />
       </ToggleContainer>
@@ -157,6 +156,7 @@ const componentMap: Record<string, BlockComponent> = {
         const { text = '' }: { text: string } = safeParseJson(block.json ?? '{}') ?? ({} as any);
         return <Button onClick={() => onSuggest(text)}>{text}</Button>;
       }
+
       case 'select': {
         const { options = [] }: { options: string[] } = safeParseJson(block.json ?? '{}') ?? ({} as any);
         return (
@@ -169,10 +169,11 @@ const componentMap: Record<string, BlockComponent> = {
           </ButtonGroup>
         );
       }
+
       default: {
         const title = block.disposition ? titles[block.disposition] : undefined;
         return (
-          <ToggleContainer title={title ?? 'JSON'} toggle>
+          <ToggleContainer title={title ?? 'JSON'}>
             <Json data={safeParseJson(block.json ?? block)} classNames='!p-1 text-xs' />
           </ToggleContainer>
         );
@@ -187,9 +188,38 @@ const componentMap: Record<string, BlockComponent> = {
     }
 
     return (
-      <ToggleContainer title={title ?? 'JSON'} toggle>
+      <ToggleContainer title={title ?? 'JSON'}>
         <Json data={block} classNames='!p-1 text-xs' />
       </ToggleContainer>
     );
   },
 };
+
+const TabbedContainer = ({ items }: { items: { title: string; block: any }[] }) => {
+  const lines = items.map((item) => item.title);
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const [selected, setSelected] = useState(0);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (open) {
+      tabsRef.current?.focus();
+    }
+  }, [open]);
+
+  const handleSelect = (index: number) => {
+    if (index === selected) {
+      setOpen(false);
+    } else {
+      setSelected(index);
+    }
+  };
+
+  return (
+    <ToggleContainer title={<StatusLine lines={lines} autoAdvance />} open={open} onChangeOpen={setOpen}>
+      <div className='flex gap-2 w-full'>
+        <Tabs ref={tabsRef} length={items.length} selected={selected} onSelect={handleSelect} />
+        <Json data={items[selected].block} classNames='!p-1 text-xs' />
+      </div>
+    </ToggleContainer>
+  );
+};

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { ComputeGraph } from '@dxos/conductor';
 import {
@@ -61,11 +61,9 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEdito
         ),
         ['meta' as const]: (props) => {
           const meta = props.getValue()!;
-
+          useEffect(() => props.onValueChange('object', { ...meta }), []);
           const [newMetaFieldName, setNewMetaFieldName] = useState('');
 
-          React.useEffect(() => props.onValueChange('object', { ...meta }), []);
-
           return (
             <>
               <div>{props.label}</div>
@@ -74,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} type={'string'} label={key} />
+                      <TextInput
+                        {...props}
+                        getValue={() => (props.getValue() as any)[key]}
+                        type={'string'}
+                        label={key}
+                      />
                     </div>
                     <IconButton
                       icon='ph--trash--regular'

package/src/components/index.ts

@@ -4,6 +4,7 @@
 
 import { lazy } from 'react';
 
+export * from './AmbientChatDialog';
 export * from './AutomationPanel';
 export * from './ChatContainer';
 export * from './MarkdownViewer';

package/src/hooks/index.ts

@@ -4,5 +4,7 @@
 
 export * from './processor';
 
-export * from './useServiceRegistry';
+export * from './useChatProcessor';
 export * from './useLocalTriggerManager';
+export * from './useMessageQueue';
+export * from './useServices';

package/src/hooks/processor.ts

@@ -19,11 +19,6 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 
-const defaultOptions: Pick<GenerateRequest, 'model' | 'systemPrompt'> = {
-  model: '@anthropic/claude-3-5-sonnet-20241022',
-  systemPrompt: '',
-};
-
 // TODO(burdon): Factor out.
 declare global {
   interface ToolContextExtensions {
@@ -37,6 +32,13 @@ type RequestOptions = {
   onComplete?: (messages: Message[]) => void;
 };
 
+export type ChatProcessorOptions = Pick<GenerateRequest, 'model' | 'systemPrompt'>;
+
+const defaultOptions: ChatProcessorOptions = {
+  model: '@anthropic/claude-3-5-sonnet-20241022',
+  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.
@@ -84,9 +86,9 @@ export class ChatProcessor {
 
   constructor(
     private readonly _client: AIServiceClientImpl,
-    private readonly _tools?: Tool[],
+    private _tools?: Tool[],
     private readonly _extensions?: ToolContextExtensions,
-    private readonly _options: Pick<GenerateRequest, 'model' | 'systemPrompt'> = defaultOptions,
+    private readonly _options: ChatProcessorOptions = defaultOptions,
   ) {
     // Message complete.
     this._parser.message.on((message) => {
@@ -104,6 +106,13 @@ export class ChatProcessor {
     });
   }
 
+  /**
+   * Update tools.
+   */
+  setTools(tools: Tool[]) {
+    this._tools = tools;
+  }
+
   /**
    * Make GPT request.
    */

package/src/hooks/useChatProcessor.tsx

@@ -0,0 +1,86 @@
+//
+// 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 { FunctionType } from '@dxos/functions';
+import { useConfig } from '@dxos/react-client';
+import { Filter, getSpace, useQuery } from '@dxos/react-client/echo';
+import { isNotNullOrUndefined } from '@dxos/util';
+
+import { AutomationCapabilities } from '../capabilities';
+import { ChatProcessor } from '../hooks';
+import { covertFunctionToTool, createToolsFromService } from '../tools';
+import { ServiceType, type AIChatType } from '../types';
+
+/**
+ * Creates a processor for the chat.
+ */
+export const useChatProcessor = (chat: AIChatType) => {
+  const aiClient = useCapability(AutomationCapabilities.AiClient);
+  const globalTools = useCapabilities(Capabilities.Tools);
+  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const space = getSpace(chat);
+
+  // Services.
+  const services = useQuery(space, Filter.schema(ServiceType));
+  const [serviceTools, setServiceTools] = useState<Tool[]>([]);
+  useEffect(() => {
+    queueMicrotask(async () => {
+      const tools = await Promise.all(services.map((service) => createToolsFromService(service)));
+      setServiceTools(tools.flat());
+    });
+  }, [services]);
+
+  // Tools.
+  const config = useConfig();
+  const functions = useQuery(space, Filter.schema(FunctionType));
+  const tools = useMemo(
+    () => [
+      ...globalTools.flat(),
+      ...artifactDefinitions.flatMap((definition) => definition.tools),
+      ...serviceTools,
+      ...functions
+        .map((fn) => covertFunctionToTool(fn, config.values.runtime?.services?.edge?.url ?? '', space?.id))
+        .filter(isNotNullOrUndefined),
+    ],
+    [globalTools, artifactDefinitions, serviceTools, functions, space?.id],
+  );
+
+  // Prompt.
+  const systemPrompt = useMemo(
+    () => createSystemPrompt({ artifacts: artifactDefinitions.map((definition) => definition.instructions) }),
+    [artifactDefinitions],
+  );
+
+  // Create processor.
+  const processor = useMemo(
+    () =>
+      new ChatProcessor(
+        aiClient,
+        tools,
+        {
+          space,
+          dispatch,
+        },
+        {
+          model: '@anthropic/claude-3-5-sonnet-20241022',
+          systemPrompt,
+        },
+      ),
+    [aiClient, tools, space, dispatch, systemPrompt],
+  );
+
+  // Update processor.
+  // useEffect(() => {
+  //   if (processor) {
+  //     processor.setTools(tools.flat());
+  //   }
+  // }, [processor, tools]);
+
+  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 edgeClient = useEdgeClient();
+  const space = getSpace(chat);
+  const queueDxn = useMemo(
+    () => new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space!.id, chat.queue.dxn.parts.at(-1)!]),
+    [chat.queue.dxn],
+  );
+
+  return useQueue<Message>(edgeClient, queueDxn);
+};

package/src/hooks/{useServiceRegistry.ts → useServices.ts}

@@ -4,9 +4,15 @@
 
 import { useEffect, useMemo, useState } from 'react';
 
-import { type ServiceType, MockServiceRegistry, type ServiceQuery } from '../types';
+import { type Space } from '@dxos/client/echo';
 
-export const useServiceRegistry = (query: ServiceQuery): ServiceType[] => {
+import { MockServiceRegistry } from '../testing';
+import { type ServiceType, type ServiceQuery } from '../types';
+
+/**
+ * Retrieves matching services from the registry.
+ */
+export const useServices = (space: Space, query?: ServiceQuery): ServiceType[] => {
   const registry = useMemo(() => new MockServiceRegistry(), []);
   const [services, setServices] = useState<ServiceType[]>([]);
   useEffect(() => {

package/src/meta.ts

@@ -6,10 +6,13 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const AUTOMATION_PLUGIN = 'dxos.org/plugin/automation';
 
+export const AMBIENT_CHAT_DIALOG = `${AUTOMATION_PLUGIN}/ambient-chat/dialog`;
+
 export const meta = {
   id: AUTOMATION_PLUGIN,
   name: 'Automation',
-  description: 'Automation workflows.',
+  description:
+    'The Automation tab allows you to trigger pre-defined workflows related to the element you are interacting with inside of Composer.',
   icon: 'ph--magic-wand--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-automation',
   tags: ['experimental'],

package/src/testing/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './testing';
+export * from './test-functions';
+export * from './test-services';

package/src/testing/test-services.ts

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createStatic } from '@dxos/echo-schema';
+
+import {
+  type ApiAuthorization,
+  type BaseServiceRegistry,
+  type ServiceQuery,
+  ServiceType,
+  categoryIcons,
+} from '../types';
+
+export class MockServiceRegistry implements BaseServiceRegistry {
+  async queryServices(query?: ServiceQuery): Promise<ServiceType[]> {
+    return TEST_SERVICES;
+  }
+}
+
+// TODO(burdon): Can we generalize credentials?
+
+const AMADEUS_AUTH: ApiAuthorization = {
+  type: 'oauth',
+  clientId: 'BOEnpLd1sMyKjAPGKYeAPFFy60u53QEG',
+  clientSecret: 'n4qldSN7usvD57gm',
+  tokenUrl: 'https://test.api.amadeus.com/v1/security/oauth2/token',
+  grantType: 'client_credentials',
+};
+
+const VISUAL_CROSSING_CREDENTIALS: ApiAuthorization = {
+  type: 'api-key',
+  key: 'FDPRVS953KB4GQQLD25GRT975',
+  placement: {
+    type: 'query',
+    name: 'key',
+  },
+};
+
+// Registries:
+//  - https://apis.guru
+//  - https://rapidapi.com
+//  - https://github.com/konfig-sdks/openapi-examples
+//  - https://publicapis.io/?utm_source=chatgpt.com
+
+// Examples:
+//  - https://petstore.swagger.io/v2/swagger.json (testing)
+//  - https://lichess.org/api
+//  - https://github.com/konfig-sdks/openapi-examples/tree/main/xkcd
+//  - https://api.coindesk.com/v1/bpi/currentprice.json
+//  - https://www.coingecko.com/en/api/documentation
+
+// TODO(burdon): Support yaml endpoints.
+//  - e.g., https://github.com/konfig-sdks/openapi-examples/blob/main/xkcd/openapi.yaml
+
+const TEST_SERVICES: ServiceType[] = [
+  createStatic(ServiceType, {
+    serviceId: 'amadeus.com/service/FlightSearch',
+    name: 'Amadeus Flight Search',
+    description: 'Search for local and international flights.',
+    category: 'travel',
+    interfaces: [
+      {
+        kind: 'api',
+        schemaUrl: 'https://api.apis.guru/v2/specs/amadeus.com/amadeus-flight-availabilities-search/1.0.2/swagger.json',
+        authorization: AMADEUS_AUTH,
+      },
+    ],
+  }),
+
+  createStatic(ServiceType, {
+    serviceId: 'amadeus.com/service/HotelSearch',
+    name: 'Amadeus Hotel Search',
+    description: 'Search for local and international hotels.',
+    category: 'travel',
+    interfaces: [
+      {
+        kind: 'api',
+        schemaUrl: 'https://api.apis.guru/v2/specs/amadeus.com/amadeus-hotel-search/3.0.8/swagger.json',
+        authorization: AMADEUS_AUTH,
+      },
+    ],
+  }),
+
+  createStatic(ServiceType, {
+    serviceId: 'visualcrossing.com/service/Weather',
+    name: 'Visual Crossing Weather',
+    description: 'Search for global weather forecasts.',
+    category: 'weather',
+    interfaces: [
+      {
+        kind: 'api',
+        schemaUrl: 'https://api.apis.guru/v2/specs/visualcrossing.com/weather/4.6/openapi.json',
+        authorization: VISUAL_CROSSING_CREDENTIALS,
+      },
+    ],
+  }),
+
+  // TODO(burdon): Needs auth.
+  createStatic(ServiceType, {
+    serviceId: 'abstractapi.com/service/GeoLocation',
+    name: 'Abstract GeoLocation',
+    description: 'Get the location of any IP address.',
+    category: 'geolocation',
+    interfaces: [
+      {
+        kind: 'api',
+        schemaUrl: 'https://api.apis.guru/v2/specs/abstractapi.com/geolocation/1.0.0/openapi.json',
+      },
+    ],
+  }),
+
+  //
+  // Testing
+  //
+
+  ...Array.from({ length: 20 }, (_, i) =>
+    createStatic(ServiceType, {
+      serviceId: `example.com/service/test-${i}`,
+      name: `Test ${i}`,
+      description: `Test ${i}`,
+      category: Object.keys(categoryIcons)[Math.floor(Math.random() * Object.keys(categoryIcons).length)],
+      interfaces: [
+        {
+          kind: 'api',
+          schemaUrl: 'https://petstore.swagger.io/v2/swagger.json',
+        },
+      ],
+    }),
+  ),
+] as const;

package/src/translations.ts

@@ -40,6 +40,7 @@ export default [
         'trigger type websocket': 'Websocket',
         'trigger type subscription': 'Subscription',
         'trigger type email': 'Email',
+        'trigger type queue': 'Queue',
 
         'trigger filter': 'Filter',
         'trigger cron': 'Cron',

package/src/types/registry.ts

@@ -2,88 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createStatic } from '@dxos/echo-schema';
+import { type ServiceType } from './schema';
 
-import { type ApiAuthorization, ServiceType } from './schema';
-
-export type ServiceQuery = {};
+export type ServiceQuery = {
+  name?: string;
+  category?: string;
+};
 
 export interface BaseServiceRegistry {
-  queryServices(query: ServiceQuery): Promise<ServiceType[]>;
-}
-
-export class MockServiceRegistry implements BaseServiceRegistry {
-  async queryServices(query: ServiceQuery): Promise<ServiceType[]> {
-    return TEST_SERVICES;
-  }
+  queryServices(query?: ServiceQuery): Promise<ServiceType[]>;
 }
 
-// TODO(burdon): Can we generalize credentials?
-
-const AMADEUS_AUTH: ApiAuthorization = {
-  type: 'oauth',
-  clientId: 'BOEnpLd1sMyKjAPGKYeAPFFy60u53QEG',
-  clientSecret: 'n4qldSN7usvD57gm',
-  tokenUrl: 'https://test.api.amadeus.com/v1/security/oauth2/token',
-  grantType: 'client_credentials',
-};
-
-const VISUAL_CROSSING_CREDENTIALS: ApiAuthorization = {
-  type: 'api-key',
-  key: 'FDPRVS953KB4GQQLD25GRT975',
-  placement: {
-    type: 'query',
-    name: 'key',
-  },
-};
-
-const TEST_SERVICES: ServiceType[] = [
-  /**
-   * dxn:service:example.com/service/FlightSearch
-   */
-  createStatic(ServiceType, {
-    serviceId: 'example.com/service/FlightSearch',
-    name: 'Amadeus Flight Search',
-    description: 'Search for local and international flights.',
-    interfaces: [
-      {
-        kind: 'api',
-        schemaUrl: 'https://api.apis.guru/v2/specs/amadeus.com/amadeus-flight-availabilities-search/1.0.2/swagger.json',
-        authorization: AMADEUS_AUTH,
-      },
-    ],
-  }),
-
-  /**
-   * dxn:service:example.com/service/HotelSearch
-   */
-  // TODO(burdon): Not working.
-  createStatic(ServiceType, {
-    serviceId: 'example.com/service/HotelSearch',
-    name: 'Amadeus Hotel Search',
-    description: 'Search for local and international hotels.',
-    interfaces: [
-      {
-        kind: 'api',
-        schemaUrl: 'https://api.apis.guru/v2/specs/amadeus.com/amadeus-hotel-search/3.0.8/swagger.json',
-        authorization: AMADEUS_AUTH,
-      },
-    ],
-  }),
-
-  /**
-   * dxn:service:example.com/service/Weather
-   */
-  createStatic(ServiceType, {
-    serviceId: 'example.com/service/Weather',
-    name: 'Visual Crossing Weather',
-    description: 'Search for global weather forecasts.',
-    interfaces: [
-      {
-        kind: 'api',
-        schemaUrl: 'https://api.apis.guru/v2/specs/visualcrossing.com/weather/4.6/openapi.json',
-        authorization: VISUAL_CROSSING_CREDENTIALS,
-      },
-    ],
-  }),
-] as const;
+export const categoryIcons: Record<string, string> = {
+  finance: 'ph--bank--regular',
+  health: 'ph--heart--regular',
+  geolocation: 'ph--globe-simple--regular',
+  education: 'ph--books--regular',
+  entertainment: 'ph--music-notes--regular',
+  shopping: 'ph--shopping-cart--regular',
+  travel: 'ph--airplane-takeoff--regular',
+  utilities: 'ph--lightning--regular',
+  weather: 'ph--cloud-rain--regular',
+} as const;