@dxos/plugin-automation 0.7.4 → 0.7.5-labs.5f04cf6

package/src/components/ChatContainer.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Capabilities, useCapabilities, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { createSystemPrompt, 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 { StackItem } from '@dxos/react-ui-stack';
+
+import { Thread } from './Thread';
+import { AutomationCapabilities } from '../capabilities';
+import { ChatProcessor } from '../hooks';
+import { type GptChatType } from '../types';
+
+export const ChatContainer = ({ chat, role }: { chat: GptChatType; role: string }) => {
+  const edgeClient = useEdgeClient();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const space = getSpace(chat);
+  const aiClient = useCapability(AutomationCapabilities.AiClient);
+  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
+  const globalTools = useCapabilities(Capabilities.Tools);
+  const tools = useMemo(
+    () => [...globalTools.flat(), ...artifactDefinitions.flatMap((definition) => definition.tools)],
+    [globalTools, artifactDefinitions],
+  );
+  const systemPrompt = useMemo(
+    () => createSystemPrompt({ artifacts: artifactDefinitions.map((definition) => definition.instructions) }),
+    [artifactDefinitions],
+  );
+
+  // TODO(burdon): Create hook.
+  // TODO(wittjosiah): Should these be created in the component?
+  // TODO(zan): Combine with ai service client?
+  const processor = useMemo(
+    () =>
+      new ChatProcessor(
+        aiClient,
+        tools,
+        { space, dispatch },
+        { model: '@anthropic/claude-3-5-sonnet-20241022', systemPrompt },
+      ),
+    [aiClient, tools, space, systemPrompt],
+  );
+  // TODO(wittjosiah): Remove transformation.
+  const queueDxn = useMemo(
+    () => new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space!.id, chat.queue.dxn.parts.at(-1)!]),
+    [chat.queue.dxn],
+  );
+  const queue = useQueue<Message>(edgeClient, queueDxn);
+  const messages = useMemo(
+    () => [...queue.items, ...processor.messages.value],
+    [queue.items, processor.messages.value],
+  );
+
+  const handleSubmit = useCallback(
+    async (message: string) => {
+      // TODO(burdon): Button to cancel. Otherwise queue request.
+      if (processor.isStreaming) {
+        await processor.cancel();
+      }
+
+      const messages = await processor.request(message, queue.items);
+      // TODO(burdon): Append on success only? If approved by user? Clinet/server.
+      await queue.append(messages);
+    },
+    [processor, queue],
+  );
+
+  return (
+    <StackItem.Content toolbar={false} role={role}>
+      <Thread messages={messages} streaming={processor.isStreaming.value} onSubmit={handleSubmit} />
+    </StackItem.Content>
+  );
+};
+
+export default ChatContainer;

package/src/components/PromptEditor/PromptEditor.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { create } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -34,14 +34,14 @@ const DefaultStory = () => {
     const space = client.spaces.default;
     return space.db.add(
       create(ChainType, {
-        prompts: [create(ChainPromptType, { command: 'test', template, inputs: [] })],
+        prompts: [makeRef(create(ChainPromptType, { command: 'test', template, inputs: [] }))],
       }),
     );
   });
 
   return (
     <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <PromptEditor prompt={chain.prompts![0]!} />
+      <PromptEditor prompt={chain.prompts![0]!.target!} />
     </div>
   );
 };

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

@@ -0,0 +1,142 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { ObjectId } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { faker } from '@dxos/random';
+import { IconButton, Input, Toolbar } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+
+import { Thread, type ThreadProps } from './Thread';
+
+faker.seed(0);
+
+const Render = ({ messages: _messages, ...props }: ThreadProps) => {
+  const [messages, setMessages] = useState(_messages);
+  useEffect(() => {
+    const message: Message = {
+      id: ObjectId.random(),
+      role: 'assistant',
+      content: [
+        {
+          type: 'text',
+          text: '',
+        },
+      ],
+    };
+
+    const i = setInterval(() => {
+      const block = message.content[0];
+      invariant(block.type === 'text');
+      block.text += ' ' + faker.lorem.word();
+      setMessages([..._messages, message]);
+    }, 200);
+
+    return () => clearInterval(i);
+  }, []);
+
+  return (
+    <div className='flex grow justify-center overflow-center bg-white dark:bg-black'>
+      <div className='flex w-[500px] bg-base'>
+        <Thread {...props} messages={messages} />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<ThreadProps> = {
+  title: 'plugins/plugin-automation/Thread',
+  render: Render,
+  component: Thread,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, tooltips: true })],
+};
+
+export default meta;
+
+type Story = StoryObj<ThreadProps>;
+
+export const Default: Story = {
+  args: {
+    streaming: true,
+    messages: [
+      {
+        id: ObjectId.random(),
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: 'hello',
+          },
+        ],
+      },
+      // {
+      //   id: ObjectId.random(),
+      //   role: 'assistant',
+      //   content: [
+      //     {
+      //       type: 'text',
+      //       disposition: 'cot',
+      //       text: ['1. Consider the question.', '2. Plan the route.', '3. Plot the course.'].join('\n'),
+      //     },
+      //     {
+      //       type: 'text',
+      //       text: 'Things',
+      //     },
+      //     {
+      //       type: 'json',
+      //       json: '{}',
+      //     },
+      //   ],
+      // },
+    ],
+  },
+};
+
+export const Line = {
+  render: () => {
+    const [lines, setLines] = useState<string[]>([]);
+    const [expanded, setExpanded] = useState(false);
+    return (
+      <div className='flex grow justify-center overflow-center bg-white dark:bg-black'>
+        <div className='flex flex-col w-[500px] bg-base'>
+          <Toolbar.Root>
+            <IconButton
+              icon='ph--plus--regular'
+              label='Add'
+              iconOnly
+              onClick={() => {
+                setLines((lines) => [...lines, faker.lorem.sentence(5)]);
+                // setExpanded((expanded) => !expanded);
+              }}
+            />
+          </Toolbar.Root>
+          <div>
+            {lines.map((line, i) => (
+              <div key={i} className='flex h-[32px] p-1 px-3 items-center'>
+                {line}
+              </div>
+            ))}
+          </div>
+          <div
+            className={mx(
+              'flex flex-col justify-end p-1 items-center h-[40px] transition-h duration-[250ms]',
+              expanded && 'h-[72px]',
+            )}
+          >
+            <Input.Root>
+              <Input.TextInput placeholder='Enter message...' />
+            </Input.Root>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Thread/Thread.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { Icon, Input, useThemeContext, type ThemedClassName } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { Ball } from '@dxos/react-ui-sfx';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ThreadProps = {
+  messages: Message[];
+  streaming?: boolean;
+  onSubmit: (message: string) => void;
+};
+
+export const Thread = ({ messages, streaming, onSubmit }: ThreadProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scroll = () => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+  const [text, setText] = useState('');
+  useEffect(() => scroll(), [messages]);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
+    (ev) => {
+      switch (ev.key) {
+        case 'Escape': {
+          setText('');
+          break;
+        }
+        case 'Enter': {
+          const value = text.trim();
+          if (value.length > 0) {
+            onSubmit(value);
+            setText('');
+            scroll();
+          }
+          break;
+        }
+      }
+    },
+    [text],
+  );
+
+  return (
+    <div className='flex flex-col grow overflow-hidden'>
+      <div
+        ref={scrollRef}
+        className='flex flex-col grow overflow-x-hidden overflow-y-scroll scrollbar-thin divide-y divide-separator'
+      >
+        {messages.map((message, i) => (
+          <ThreadMessage key={i} classNames='px-4 py-2' message={message} />
+        ))}
+      </div>
+
+      <div className='flex p-4 gap-3 items-center'>
+        <Ball active={streaming} />
+        <Input.Root>
+          <Input.TextInput
+            autoFocus
+            classNames='px-2 bg-base rounded'
+            placeholder='Ask a question...'
+            value={text}
+            onChange={(ev) => setText(ev.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </Input.Root>
+        <Icon
+          icon={'ph--spinner-gap--regular'}
+          classNames={mx('animate-spin opacity-0 transition duration-500', streaming && 'opacity-100')}
+          size={6}
+        />
+      </div>
+    </div>
+  );
+};
+
+export type ThreadMessageProps = ThemedClassName<{
+  message: Message;
+}>;
+
+export const ThreadMessage = ({ classNames, message }: ThreadMessageProps) => {
+  if (typeof message !== 'object') {
+    return <div className={mx(classNames)}>{message}</div>;
+  }
+
+  const { role, content = [] } = message;
+  return (
+    <div className={mx('flex', classNames, role === 'user' && 'justify-end')}>
+      <div
+        className={mx(
+          'block rounded-md p-1 px-2 bg-base overflow-hidden divide-y divid-separator',
+          role === 'user' ? 'dark:bg-blue-800' : 'whitespace-pre-wrap',
+        )}
+      >
+        {/* TODO(burdon): Use message ID for stable rendering. */}
+        {content.map((item, idx) => {
+          switch (item.type) {
+            case 'text':
+              return <Markdown key={idx} text={item.text.trim()} />;
+            case 'json':
+              return <Json key={idx} data={item.json} />;
+            default:
+              return <Json key={idx} data={item} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+const Markdown = ({ text, classNames }: ThemedClassName<{ text: string }>) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef, view } = useTextEditor(() => ({
+    initialValue: text,
+    extensions: [
+      // TOOD(burdon): Optional line wrapping.
+      createBasicExtensions({ lineWrapping: true, readonly: true }),
+      createMarkdownExtensions(),
+      createThemeExtensions({ themeMode }),
+      decorateMarkdown(),
+    ],
+  }));
+
+  useEffect(() => {
+    view?.dispatch({
+      // TODO(burdon): Append?
+      changes: { from: 0, to: view.state.doc.length, insert: text },
+    });
+  }, [text]);
+
+  return <div ref={parentRef} className={mx('w-full overflow-hidden', classNames)} />;
+};
+
+const Json = ({ data, classNames }: ThemedClassName<{ data: any }>) => {
+  return (
+    <SyntaxHighlighter language='json' classNames='w-full overflow-hidden text-sm'>
+      {JSON.stringify(data, null, 2)}
+    </SyntaxHighlighter>
+  );
+};

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, { 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,74 @@ export const TriggerEditor = ({ space, trigger, onSave, onCancel, storedTrigger
             }))}
           />
         ),
+        ['meta' as const]: (props) => {
+          const meta = props.getValue()!;
+
+          const [newMetaFieldName, setNewMetaFieldName] = useState('');
+
+          React.useEffect(() => props.onValueChange('object', { ...meta }), []);
+
+          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} 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,10 @@
 
 import { lazy } from 'react';
 
+export * from './PromptEditor';
+export * from './Thread';
+export * from './TriggerEditor';
+
 export const AssistantPanel = lazy(() => import('./AssistantPanel'));
 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,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './processor';
 export * from './useLocalTriggerManager';

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