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

package/src/components/Thread/Thread.tsx

@@ -2,33 +2,39 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react';
+import React, { type KeyboardEventHandler, useCallback, useMemo, 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 { 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[];
+  messages?: Message[];
   streaming?: boolean;
-  onSubmit: (message: string) => void;
-};
+  onSubmit?: (message: string) => void;
+  onStop?: () => void;
+} & Pick<ThreadMessageProps, 'collapse' | 'debug' | 'onSuggest' | 'onDelete'>;
 
-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]);
+// 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) {
@@ -36,12 +42,13 @@ export const Thread = ({ messages, streaming, onSubmit }: ThreadProps) => {
           setText('');
           break;
         }
+
         case 'Enter': {
           const value = text.trim();
           if (value.length > 0) {
-            onSubmit(value);
+            scroller.current?.scrollToBottom();
+            onSubmit?.(value);
             setText('');
-            scroll();
           }
           break;
         }
@@ -50,100 +57,100 @@ export const Thread = ({ messages, streaming, onSubmit }: ThreadProps) => {
     [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;
-}>;
+  /**
+   * 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 ?? [] };
+    }
 
-export const ThreadMessage = ({ classNames, message }: ThreadMessageProps) => {
-  if (typeof message !== 'object') {
-    return <div className={mx(classNames)}>{message}</div>;
-  }
+    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;
+            }
 
-  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} />;
+            default: {
+              current = undefined;
+              messages.push({
+                id: [message.id, i].join('_'),
+                role: message.role,
+                content: [block],
+              });
+              break;
+            }
           }
-        })}
-      </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(),
-    ],
-  }));
+          i++;
+        }
 
-  useEffect(() => {
-    view?.dispatch({
-      // TODO(burdon): Append?
-      changes: { from: 0, to: view.state.doc.length, insert: text },
-    });
-  }, [text]);
+        return { current, messages };
+      },
+      { messages: [] as Message[] },
+    );
+  }, [messages, collapse]);
 
-  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>
+    <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/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,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,8 @@
 //
 
 export * from './processor';
+
+export * from './useChatProcessor';
 export * from './useLocalTriggerManager';
+export * from './useMessageQueue';
+export * from './useServices';