@dxos/plugin-automation 0.7.4 → 0.7.5-labs.401163d

package/src/components/Thread/Thread.tsx

@@ -0,0 +1,156 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type KeyboardEventHandler, useCallback, useMemo, useRef, useState } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { IconButton, Input, useTranslation } from '@dxos/react-ui';
+import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
+import { Spinner } from '@dxos/react-ui-sfx';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+export type ThreadProps = {
+  messages?: Message[];
+  streaming?: boolean;
+  onSubmit?: (message: string) => void;
+  onStop?: () => void;
+} & Pick<ThreadMessageProps, 'collapse' | 'debug' | 'onSuggest' | 'onDelete'>;
+
+// TODO(burdon): Factor out scroll logic.
+export const Thread = ({
+  messages,
+  streaming,
+  collapse,
+  debug,
+  onSubmit,
+  onStop,
+  onSuggest,
+  onDelete,
+}: ThreadProps) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const scroller = useRef<ScrollController>(null);
+
+  const [text, setText] = useState('');
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
+    (ev) => {
+      switch (ev.key) {
+        case 'Escape': {
+          setText('');
+          break;
+        }
+
+        case 'Enter': {
+          const value = text.trim();
+          if (value.length > 0) {
+            scroller.current?.scrollToBottom();
+            onSubmit?.(value);
+            setText('');
+          }
+          break;
+        }
+      }
+    },
+    [text],
+  );
+
+  /**
+   * Reduce message blocks into collections of messages that contain related contiguous blocks.
+   * For example, collapse all tool request/response pairs into a single message.
+   */
+  // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
+  const { messages: lines = [] } = useMemo(() => {
+    if (!collapse) {
+      return { messages: messages ?? [] };
+    }
+
+    return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(
+      ({ current, messages }, message) => {
+        let i = 0;
+        for (const block of message.content) {
+          switch (block.type) {
+            case 'tool_use':
+            case 'tool_result': {
+              if (current) {
+                current.content.push(block);
+              } else {
+                current = {
+                  id: [message.id, i].join('_'),
+                  role: message.role,
+                  content: [block],
+                };
+                messages.push(current);
+              }
+              break;
+            }
+
+            case 'text':
+            default: {
+              current = undefined;
+              messages.push({
+                id: [message.id, i].join('_'),
+                role: message.role,
+                content: [block],
+              });
+              break;
+            }
+          }
+
+          i++;
+        }
+
+        return { current, messages };
+      },
+      { messages: [] as Message[] },
+    );
+  }, [messages, collapse]);
+
+  return (
+    <div className='flex flex-col grow overflow-hidden'>
+      <ScrollContainer ref={scroller} classNames='py-2 gap-2 overflow-x-hidden'>
+        {lines.map((message) => (
+          <ThreadMessage
+            key={message.id}
+            classNames='px-4'
+            message={message}
+            collapse={collapse}
+            debug={debug}
+            onSuggest={onSuggest}
+            onDelete={onDelete}
+          />
+        ))}
+      </ScrollContainer>
+
+      {onSubmit && (
+        <div className='flex p-4 gap-3 items-center'>
+          <Spinner active={streaming} />
+          <Input.Root>
+            <Input.TextInput
+              autoFocus
+              classNames='px-2 baseSurface rounded'
+              placeholder={t('chat input placeholder')}
+              value={text}
+              onChange={(ev) => setText(ev.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+          </Input.Root>
+          {onStop && (
+            <IconButton
+              disabled={!streaming}
+              classNames={mx('!p-1 !opacity-20 transition', streaming && '!opacity-80')}
+              variant='ghost'
+              size={5}
+              onClick={onStop}
+              icon='ph--x--regular'
+              label={t('chat stop')}
+              iconOnly
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Thread/ThreadMessage.tsx

@@ -0,0 +1,225 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { ToggleContainer, StatusLine, Tabs } from '../Box';
+import { MarkdownViewer } from '../MarkdownViewer';
+
+export type ThreadMessageProps = ThemedClassName<{
+  message: Message;
+  collapse?: boolean;
+  debug?: boolean;
+  onSuggest?: (text: string) => void;
+  onDelete?: (id: string) => void;
+}>;
+
+export const ThreadMessage: FC<ThreadMessageProps> = ({
+  classNames,
+  message,
+  collapse,
+  debug,
+  onSuggest,
+  onDelete,
+}) => {
+  if (typeof message !== 'object') {
+    return <div className={mx(classNames)}>{message}</div>;
+  }
+
+  const { role, content = [] } = message;
+
+  // TODO(burdon): Factor out tool blocks.
+  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 = block;
+          // TODO(burdon): Get plugin name.
+          return { title: `Calling ${block.name}...`, block };
+        }
+
+        case 'tool_result': {
+          if (!request) {
+            log.warn('unexpected message', { block });
+            return { title: 'Error', block };
+          }
+
+          return { title: `Processed ${request.name}`, block };
+        }
+
+        default: {
+          request = undefined;
+          return { title: 'Error', block };
+        }
+      }
+    });
+
+    return (
+      <div className={mx('flex', classNames)}>
+        <div className='w-full p-1 px-2 overflow-hidden rounded-md bg-baseSurface'>
+          <TabbedContainer items={items} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={mx('flex flex-col shrink-0 gap-2')}>
+      {debug && (
+        <div className='text-xs text-subdued'>
+          {message.id}{' '}
+          {onDelete && (
+            <span className='cursor-pointer underline' onClick={() => onDelete(message.id)}>
+              delete
+            </span>
+          )}
+        </div>
+      )}
+      {content.map((block, idx) => (
+        <div key={idx} className={mx('flex', classNames, block.type === 'text' && role === 'user' && 'justify-end')}>
+          <Block role={role} block={block} onSuggest={onSuggest ?? (() => {})} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Block = ({
+  block,
+  role,
+  onSuggest,
+}: Pick<Message, 'role'> & { block: MessageContentBlock; onSuggest: (text: string) => void }) => {
+  const Component = componentMap[block.type] ?? componentMap.default;
+  return (
+    <div
+      className={mx(
+        'p-1 px-2 overflow-hidden rounded-md',
+        (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} />
+    </div>
+  );
+};
+
+const titles: Record<string, string> = {
+  ['cot' as const]: 'Chain of thought',
+  ['artifact' as const]: 'Artifact',
+  ['tool_use' as const]: 'Tool request',
+  ['tool_result' as const]: 'Tool result',
+};
+
+type BlockComponent = FC<{ block: MessageContentBlock; onSuggest: (text: string) => void }>;
+
+const componentMap: Record<string, BlockComponent> = {
+  text: ({ block }) => {
+    invariant(block.type === 'text');
+    const title = block.disposition ? titles[block.disposition] : undefined;
+    if (!title) {
+      return (
+        <MarkdownViewer content={block.text} classNames={[block.disposition === 'cot' && 'text-sm text-subdued']} />
+      );
+    }
+
+    return (
+      <ToggleContainer
+        title={title}
+        icon={
+          block.pending ? (
+            <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
+          ) : undefined
+        }
+        open={block.disposition === 'cot'}
+      >
+        <MarkdownViewer content={block.text} classNames={[block.disposition === 'cot' && 'text-sm text-subdued']} />
+      </ToggleContainer>
+    );
+  },
+
+  json: ({ block, onSuggest }) => {
+    invariant(block.type === 'json');
+
+    switch (block.disposition) {
+      case 'suggest': {
+        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 (
+          <ButtonGroup>
+            {options.map((option) => (
+              <Button key={option} onClick={() => onSuggest(option)}>
+                {option}
+              </Button>
+            ))}
+          </ButtonGroup>
+        );
+      }
+
+      default: {
+        const title = block.disposition ? titles[block.disposition] : undefined;
+        return (
+          <ToggleContainer title={title ?? 'JSON'}>
+            <Json data={safeParseJson(block.json ?? block)} classNames='!p-1 text-xs' />
+          </ToggleContainer>
+        );
+      }
+    }
+  },
+
+  default: ({ block }) => {
+    let title = titles[block.type];
+    if (block.type === 'tool_use') {
+      title = `Tool [${block.name}]`; // TODO(burdon): Get label from tool.
+    }
+
+    return (
+      <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/Thread/index.ts

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

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

@@ -7,9 +7,8 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { FunctionTrigger, TriggerKind } from '@dxos/functions';
+import { FunctionType, FunctionTrigger, TriggerKind } from '@dxos/functions';
 import { create } from '@dxos/live-object';
-import { FunctionType } from '@dxos/plugin-script/types';
 import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';

package/src/components/TriggerEditor/TriggerEditor.tsx

@@ -2,27 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { FunctionTriggerSchema, type FunctionTriggerType, type FunctionTrigger, TriggerKind } from '@dxos/functions';
-import { FunctionType, ScriptType } from '@dxos/plugin-script/types';
+import { ComputeGraph } from '@dxos/conductor';
+import {
+  FunctionType,
+  FunctionTriggerSchema,
+  type FunctionTriggerType,
+  type FunctionTrigger,
+  ScriptType,
+  TriggerKind,
+} from '@dxos/functions';
 import { Filter, useQuery, type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { Form, SelectInput } from '@dxos/react-ui-form';
+import { IconButton, Input, useTranslation } from '@dxos/react-ui';
+import { Form, SelectInput, TextInput } from '@dxos/react-ui-form';
 
 import { AUTOMATION_PLUGIN } from '../../meta';
 
 export type TriggerEditorProps = {
   space: Space;
   trigger: FunctionTriggerType;
-  storedTrigger?: FunctionTrigger;
   onSave?: (trigger: Omit<FunctionTrigger, 'id'>) => void;
   onCancel?: () => void;
 };
 
-export const TriggerEditor = ({ space, trigger, onSave, onCancel, storedTrigger }: TriggerEditorProps) => {
+export const TriggerEditor = ({ space, trigger, onSave, onCancel }: TriggerEditorProps) => {
   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) => {
@@ -33,21 +41,17 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel, storedTrigger
     <Form<FunctionTriggerType>
       schema={FunctionTriggerSchema}
       values={trigger}
-      filter={(props) => props.filter((p) => p.name !== 'meta')}
       onSave={handleSave}
       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,
@@ -55,11 +59,77 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel, storedTrigger
             }))}
           />
         ),
+        ['meta' as const]: (props) => {
+          const meta = props.getValue()!;
+          useEffect(() => props.onValueChange('object', { ...meta }), []);
+          const [newMetaFieldName, setNewMetaFieldName] = useState('');
+
+          return (
+            <>
+              <div>{props.label}</div>
+              {[...Object.keys(meta)].map((key) => {
+                const compositeKey: any = `meta.${key}`;
+                return (
+                  <div key={compositeKey} role='none' className='flex items-center mt-2 gap-1'>
+                    <div role='none' className='flex-1'>
+                      <TextInput
+                        {...props}
+                        getValue={() => (props.getValue() as any)[key]}
+                        type={'string'}
+                        label={key}
+                      />
+                    </div>
+                    <IconButton
+                      icon='ph--trash--regular'
+                      iconOnly
+                      classNames={'mt-6'}
+                      label={t('trigger meta remove')}
+                      onClick={() => {
+                        const newValues: any = { ...props.getValue() };
+                        delete newValues[key];
+                        props.onValueChange('object', newValues);
+                      }}
+                    />
+                  </div>
+                );
+              })}
+              <div role='none' className='flex items-center mt-2 gap-1 plb-1'>
+                <div role='none' className='flex-1'>
+                  <Input.Root>
+                    <Input.TextInput
+                      placeholder={t('trigger meta prop name placeholder')}
+                      value={newMetaFieldName}
+                      onChange={(event) => setNewMetaFieldName(event.target.value)}
+                    />
+                  </Input.Root>
+                </div>
+                <IconButton
+                  icon='ph--plus--regular'
+                  iconOnly
+                  label={t('trigger meta add')}
+                  onClick={() => {
+                    if (newMetaFieldName.length) {
+                      const meta = props.getValue() ?? {};
+                      const metaWithNewProp = { ...meta, [newMetaFieldName]: '' };
+                      setNewMetaFieldName('');
+                      props.onValueChange('object', metaWithNewProp);
+                    }
+                  }}
+                />
+              </div>
+            </>
+          );
+        },
       }}
     />
   );
 };
 
-const getFunctionName = (scripts: ScriptType[], fn: FunctionType) => {
-  return scripts.find((s) => fn.source?.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,14 @@
 
 import { lazy } from 'react';
 
-export const AssistantPanel = lazy(() => import('./AssistantPanel'));
+export * from './AmbientChatDialog';
+export * from './AutomationPanel';
+export * from './ChatContainer';
+export * from './MarkdownViewer';
+export * from './PromptEditor';
+export * from './ServiceRegistry';
+export * from './Thread';
+export * from './TriggerEditor';
+
 export const AutomationPanel = lazy(() => import('./AutomationPanel'));
+export const ChatContainer = lazy(() => import('./ChatContainer'));

package/src/hooks/email.ts

@@ -7,7 +7,7 @@ import { foreignKey } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { MailboxType } from '@dxos/plugin-inbox/types';
 import { MessageType } from '@dxos/plugin-space/types';
-import { type Space, Filter, create } from '@dxos/react-client/echo';
+import { type Space, Filter, create, makeRef } from '@dxos/react-client/echo';
 
 export const SOURCE_ID = 'hub.dxos.network/api/mailbox';
 
@@ -41,7 +41,7 @@ export const handleEmail = async (space: Space, data: any) => {
           },
         ),
       );
-      mailbox.messages?.push(object);
+      mailbox.messages?.push(makeRef(object));
     }
   }
 

package/src/hooks/index.ts

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

package/src/hooks/invocation-handler.ts

@@ -4,12 +4,12 @@
 
 import { sleep } from '@dxos/async';
 import { getObjectCore, ResultFormat } from '@dxos/echo-db';
-import type { AnyObjectData } from '@dxos/echo-schema';
+import { type AnyObjectData } from '@dxos/echo-schema';
+import { FunctionType } from '@dxos/functions';
 import { type FunctionTrigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { DXN, LOCAL_SPACE_TAG } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { FunctionType } from '@dxos/plugin-script';
 import { type Client, type Config } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 

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();
+  });
+});