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

package/src/components/Thread/ThreadMessage.tsx

@@ -0,0 +1,195 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { type MessageContentBlock, type Message } from '@dxos/artifact';
+import { invariant } from '@dxos/invariant';
+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 { 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 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) {
+        case 'tool_use': {
+          request = tool;
+          // TODO(burdon): Get plugin name.
+          return `Calling ${tool.name}...`;
+        }
+        case 'tool_result': {
+          if (!request) {
+            return 'Error';
+          }
+
+          return `Processed ${request.name}`;
+        }
+        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>
+      </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-base',
+        block.type === 'text' && role === 'user' && 'bg-blue-200 dark:bg-blue-800',
+      )}
+    >
+      <Component block={block} onSuggest={onSuggest} />
+    </div>
+  );
+};
+
+const titles: Record<string, string> = {
+  ['cot' as const]: 'Chain of thought',
+
+  // TODO(burdon): Only show if debugging.
+  ['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 }>;
+
+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
+        }
+        defaultOpen={block.disposition === 'cot'}
+        toggle
+      >
+        <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'} toggle>
+            <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'} toggle>
+        <Json data={block} classNames='!p-1 text-xs' />
+      </ToggleContainer>
+    );
+  },
+};

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

@@ -0,0 +1,111 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { Icon, Input, Toolbar } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme, withSignals } from '@dxos/storybook-utils';
+
+import { ToggleContainer, type ToggleContainerProps } from './ToggleContainer';
+import { MarkdownViewer } from '../MarkdownViewer';
+
+class Generator {
+  private readonly _current = signal<string>(faker.lorem.sentence(5));
+  private readonly _lines = signal<string[]>([]);
+  private _running: NodeJS.Timeout | undefined;
+
+  readonly count = computed(() => this._lines.value.length);
+  readonly text: ReadonlySignal<string[]> = computed(() => [...this._lines.value, this._current.value]);
+
+  start() {
+    this.stop();
+    this._running = setInterval(() => {
+      if (this._current.value.length > 0) {
+        this._current.value += ' ';
+      }
+      this._current.value += faker.lorem.words(Math.ceil(Math.random() * 2));
+      if (Math.random() > 0.95) {
+        this._lines.value = [...this._lines.value, this._current.value + '.'];
+        this._current.value = '';
+      }
+    }, 100);
+  }
+
+  stop() {
+    if (this._running) {
+      clearInterval(this._running);
+      this._running = undefined;
+    }
+  }
+}
+
+const Render = ({ shrinkX, ...props }: ToggleContainerProps) => {
+  const generator = useMemo(() => new Generator(), []);
+  const [running, setRunning] = useState(false);
+  useEffect(() => {
+    if (running) {
+      generator.start();
+    } else {
+      generator.stop();
+    }
+  }, [running]);
+
+  return (
+    <div className='flex flex-col w-[500px]'>
+      <Toolbar.Root classNames='p-4'>
+        <Input.Root>
+          <Input.Switch checked={running} onCheckedChange={(checked) => setRunning(checked)} />
+        </Input.Root>
+        <div className='grow' />
+        <div>{generator.count.value}</div>
+      </Toolbar.Root>
+      <div className='flex p-4'>
+        <div className={mx('border border-border rounded-md p-2', !shrinkX && 'w-full')}>
+          <ToggleContainer
+            {...props}
+            shrinkX={shrinkX}
+            toggle
+            icon={
+              running ? (
+                <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
+              ) : undefined
+            }
+          >
+            <MarkdownViewer classNames='text-sm' content={generator.text.value.join('\n\n')} />
+          </ToggleContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ToggleContainer> = {
+  title: 'plugins/plugin-automation/ToggleContainer',
+  component: ToggleContainer,
+  render: Render,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center bg-base' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleContainer>;
+
+export const Default: Story = {
+  args: {
+    title: 'Markdown',
+  },
+};
+
+export const Shrink: Story = {
+  args: {
+    title: 'Markdown',
+    shrinkX: true,
+  },
+};

package/src/components/Thread/ToggleContainer.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
+
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ToggleContainerProps = ThemedClassName<
+  PropsWithChildren<{
+    title?: string | JSX.Element;
+    icon?: JSX.Element;
+    toggle?: boolean;
+    defaultOpen?: boolean;
+    duration?: number;
+    /** Should shrink the width when closed. */
+    shrinkX?: boolean;
+  }>
+>;
+
+// TODO(burdon): Externalize toggle state.
+export const ToggleContainer = ({
+  title,
+  icon,
+  toggle,
+  defaultOpen,
+  duration = 400,
+  shrinkX = false,
+  children,
+  classNames,
+}: ToggleContainerProps) => {
+  const [expand, setExpand] = useState(defaultOpen || !toggle);
+  const [expandX, setExpandX] = useState(shrinkX ? expand : true);
+  const [expandY, setExpandY] = useState(expand);
+
+  useEffect(() => {
+    let t: NodeJS.Timeout;
+    if (expand) {
+      if (shrinkX) {
+        setExpandX(true);
+      }
+      t = setTimeout(
+        () => {
+          setExpandY(true);
+        },
+        shrinkX ? duration : 0,
+      );
+    } else {
+      setExpandY(false);
+      if (shrinkX) {
+        t = setTimeout(() => {
+          setExpandX(false);
+        }, duration);
+      }
+    }
+
+    return () => clearTimeout(t);
+  }, [expand]);
+
+  return (
+    <div className={mx('overflow-hidden', classNames)}>
+      {title && (
+        <div
+          className='flex gap-1 py-1 items-center text-sm text-subdued cursor-pointer select-none'
+          onClick={toggle ? () => setExpand((open) => !open) : undefined}
+        >
+          {toggle && (
+            <div className='flex w-[24px] h-[24px] items-center justify-center'>
+              <Icon
+                size={4}
+                icon={'ph--caret-right--regular'}
+                style={{ transitionDuration: `${shrinkX ? duration * 2 : duration}ms` }}
+                classNames={['transition transition-transform ease-in-out', expand ? 'rotate-90' : 'transform-none']}
+              />
+            </div>
+          )}
+          <div className='flex-1 pis-1 pie-1 truncate'>{title}</div>
+          {icon}
+        </div>
+      )}
+      <div
+        style={{ transitionDuration: `${duration}ms` }}
+        className={mx(
+          'grid transition-[grid-template-columns] ease-in-out',
+          expandX ? 'grid-cols-[1fr]' : 'grid-cols-[0fr]',
+        )}
+      >
+        <div className='overflow-hidden'>
+          <div
+            style={{ transitionDuration: `${duration}ms` }}
+            className={mx(
+              'grid transition-[grid-template-rows] ease-in-out',
+              expandY ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+            )}
+          >
+            <div className={mx('flex overflow-hidden transition-opacity')}>{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -4,10 +4,13 @@
 
 import { lazy } from 'react';
 
+export * from './AutomationPanel';
+export * from './ChatContainer';
+export * from './MarkdownViewer';
 export * from './PromptEditor';
+export * from './ServiceRegistry';
 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/index.ts

@@ -3,4 +3,6 @@
 //
 
 export * from './processor';
+
+export * from './useServiceRegistry';
 export * from './useLocalTriggerManager';

package/src/hooks/processor.ts

@@ -2,16 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
+import { type Signal, batch, computed, signal } from '@preact/signals-core';
 
 import { type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { type Tool, Message } from '@dxos/artifact';
+import { type Tool, Message, type MessageContentBlock } from '@dxos/artifact';
 import {
+  isToolUse,
+  runTools,
   type AIServiceClientImpl,
   type GenerateRequest,
   type GenerationStream,
-  isToolUse,
-  runTools,
+  MixedStreamParser,
 } from '@dxos/assistant';
 import { createStatic } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -31,56 +32,95 @@ declare global {
   }
 }
 
+type RequestOptions = {
+  history?: Message[];
+  onComplete?: (messages: Message[]) => void;
+};
+
 /**
- * Handles interactions with an AI service.
- * Manages message history, and executes tools based on AI responses.
+ * 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.
  */
-// TODO(burdon): Tests.
 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[] = [];
 
-  /** Pending messages (incl. the initial user message). */
-  private _pending: Signal<Message[]> = signal([]);
+  /**
+   * Streaming state.
+   * @reactive
+   */
+  public readonly streaming: Signal<boolean> = computed(() => this._block.value !== undefined);
 
-  /** Streaming messages (from the AI service). */
-  private _streaming: Signal<Message[]> = signal([]);
+  /**
+   * 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);
+    }
 
-  /** Current streaming response. */
-  private _response: GenerationStream | undefined;
+    return messages;
+  });
 
   constructor(
     private readonly _client: AIServiceClientImpl,
     private readonly _tools?: Tool[],
     private readonly _extensions?: ToolContextExtensions,
     private readonly _options: Pick<GenerateRequest, 'model' | 'systemPrompt'> = defaultOptions,
-  ) {}
-
-  get isStreaming(): ReadonlySignal<boolean> {
-    return computed(() => this._pending.value.length > 0);
-  }
-
-  get messages(): ReadonlySignal<Message[]> {
-    return computed(() => [...this._pending.value, ...this._streaming.value]);
+  ) {
+    // 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;
+      });
+    });
   }
 
   /**
    * Make GPT request.
    */
-  async request(message: string, history: Message[] = []): Promise<Message[]> {
-    log.info('requesting...', { message, history: history.length });
-    this._history = history;
-    this._pending.value = [
-      createStatic(Message, {
-        role: 'user',
-        content: [{ type: 'text', text: message }],
-      }),
-    ];
-    this._streaming.value = [];
-
-    await this.generate();
+  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();
   }
 
@@ -90,51 +130,52 @@ export class ChatProcessor {
    */
   async cancel(): Promise<Message[]> {
     log.info('cancelling...');
-    this._response?.abort();
+    this._stream?.abort();
     return this._reset();
   }
 
   private async _reset(): Promise<Message[]> {
-    const pending = this._pending.value;
-    this._history = [];
-    this._pending.value = [];
-    this._streaming.value = [];
-    return pending;
+    const messages = this._pending.value;
+    batch(() => {
+      this._history = [];
+      this._pending.value = [];
+      this._block.value = undefined;
+    });
+
+    return messages;
   }
 
-  private async generate() {
+  /**
+   * 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, pending: this._pending.value.length });
-        this._response = await this._client.generate({
+        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,
         });
 
-        // Process the stream.
-        queueMicrotask(async () => {
-          invariant(this._response);
-          for await (const event of this._response) {
-            log.info('event', { event: event.type });
-            this._streaming.value = this._response.accumulatedMessages.map((message) => createStatic(Message, message));
-          }
-        });
+        // Wait until complete.
+        await this._parser.parse(this._stream);
+        await this._stream.complete();
 
-        // Update pending messages.
-        const messages = await this._response.complete();
-        log.info('response', { messages: messages.length });
-        this._pending.value.push(...messages.map((message) => createStatic(Message, message)));
-        this._streaming.value = [];
+        // Add messages.
+        log.info('response', { messages: this._pending.value });
 
         // Resolve tool use locally.
         more = false;
-        if (messages.length > 0 && isToolUse(messages.at(-1)!)) {
+        const message = this._pending.value.at(-1);
+        invariant(message);
+        if (isToolUse(message)) {
           log.info('tool request...');
           const response = await runTools({
-            message: messages.at(-1)!,
+            message: this._pending.value.at(-1)!,
             tools: this._tools ?? [],
             extensions: this._extensions,
           });
@@ -142,7 +183,7 @@ export class ChatProcessor {
           log.info('tool response', { response });
           switch (response.type) {
             case 'continue': {
-              this._pending.value.push(response.message);
+              this._pending.value = [...this._pending.value, response.message];
               more = true;
               break;
             }
@@ -154,8 +195,7 @@ export class ChatProcessor {
       log.catch('request failed', { err });
     } finally {
       log.info('done');
-      this._response = undefined;
-      this._streaming.value = [];
+      this._stream = undefined;
     }
   }
 }