@dxos/plugin-automation 0.7.5-staging.2ff1350 → 0.7.5-staging.e6154f3

package/src/components/Thread/Thread.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
-
-import { useCapabilities } from '@dxos/app-framework';
-import { type Message } from '@dxos/artifact';
-import { TranscriptionCapabilities } from '@dxos/plugin-transcription';
-import { type Space } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
-import { mx } from '@dxos/react-ui-theme';
-import { keyToFallback } from '@dxos/util';
-
-import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
-import { messageReducer } from './reducer';
-import { PromptBar, type PromptBarProps } from '../Prompt';
-
-export type ThreadProps = ThemedClassName<{
-  space?: Space;
-  messages?: Message[];
-  collapse?: boolean;
-}> &
-  Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'onPrompt' | 'onDelete'>;
-
-/**
- * Chat thread component.
- */
-export const Thread = ({
-  classNames,
-  space,
-  messages,
-  collapse = true,
-  processing,
-  error,
-  debug,
-  onSubmit,
-  onCancel,
-  onPrompt,
-  onDelete,
-}: ThreadProps) => {
-  const hasTrascription = useCapabilities(TranscriptionCapabilities.Transcription).length > 0;
-
-  const scroller = useRef<ScrollController>(null);
-
-  const identity = useIdentity();
-  const fallbackValue = keyToFallback(identity!.identityKey);
-  const userHue = identity!.profile?.data?.hue || fallbackValue.hue;
-
-  const handleSubmit = useCallback<NonNullable<PromptBarProps['onSubmit']>>(
-    (value: string) => {
-      onSubmit?.(value);
-      scroller.current?.scrollToBottom();
-      return true;
-    },
-    [onSubmit],
-  );
-
-  // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
-  const { messages: filteredMessages = [] } = useMemo(() => {
-    if (collapse) {
-      return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(messageReducer, {
-        messages: [],
-      });
-    } else {
-      return { messages: messages ?? [] };
-    }
-  }, [messages, collapse]);
-
-  return (
-    <>
-      <ScrollContainer ref={scroller} fade>
-        <div
-          role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6', classNames)}
-          style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
-        >
-          {filteredMessages.map((message) => (
-            <ThreadMessage
-              key={message.id}
-              classNames='px-4 pbe-4'
-              space={space}
-              message={message}
-              debug={debug}
-              onPrompt={onPrompt}
-              onDelete={onDelete}
-            />
-          ))}
-        </div>
-      </ScrollContainer>
-
-      {onSubmit && (
-        <PromptBar
-          microphone={hasTrascription}
-          processing={processing}
-          error={error}
-          onSubmit={handleSubmit}
-          onCancel={onCancel}
-        />
-      )}
-    </>
-  );
-};

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

@@ -1,245 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { Capabilities, IntentPlugin, Surface, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Message, type Tool } from '@dxos/artifact';
-import { capabilities, genericTools, localServiceEndpoints, type IsObject } from '@dxos/artifact-testing';
-import { AIServiceClientImpl } from '@dxos/assistant';
-import { createStatic, ObjectId } from '@dxos/echo-schema';
-import { EdgeHttpClient } from '@dxos/edge-client';
-import { invariant } from '@dxos/invariant';
-import { DXN, QueueSubspaceTags, SpaceId } from '@dxos/keys';
-import { ChessPlugin } from '@dxos/plugin-chess';
-import { ChessType } from '@dxos/plugin-chess/types';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { MapPlugin } from '@dxos/plugin-map';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { TablePlugin } from '@dxos/plugin-table';
-import { useSpace } from '@dxos/react-client/echo';
-import { useQueue } from '@dxos/react-edge-client';
-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';
-import { ChatProcessor } from '../../hooks';
-import { createProcessorOptions } from '../../testing';
-import translations from '../../translations';
-
-const endpoints = localServiceEndpoints;
-
-type RenderProps = {
-  items?: IsObject[];
-  prompts?: string[];
-} & Pick<ThreadProps, 'debug'>;
-
-// TODO(burdon): Use ChatContainer.
-const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
-  const space = useSpace();
-  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  const tools = useMemo<Tool[]>(
-    () => [...genericTools, ...artifactDefinitions.flatMap((definition) => definition.tools)],
-    [genericTools, artifactDefinitions],
-  );
-
-  const [aiClient] = useState(() => new AIServiceClientImpl({ endpoint: endpoints.ai }));
-  const [edgeClient] = useState(() => new EdgeHttpClient(endpoints.edge));
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const processor = useMemo<ChatProcessor | undefined>(() => {
-    if (!space) {
-      return;
-    }
-
-    return new ChatProcessor(
-      aiClient,
-      tools,
-      {
-        space,
-        dispatch,
-      },
-      createProcessorOptions(artifactDefinitions.map((definition) => definition.instructions)),
-    );
-  }, [aiClient, tools, space, dispatch, artifactDefinitions]);
-
-  // Queue.
-  const [queueDxn, setQueueDxn] = useState(() => randomQueueDxn());
-  const queue = useQueue<Message>(edgeClient, DXN.tryParse(queueDxn));
-
-  useEffect(() => {
-    if (queue?.items.length === 0 && !queue.isLoading && prompts.length > 0) {
-      queue.append([
-        createStatic(Message, {
-          role: 'assistant',
-          content: prompts.map(
-            (prompt) =>
-              ({
-                type: 'json',
-                disposition: 'suggest',
-                json: JSON.stringify({ text: prompt }),
-              }) as const,
-          ),
-        }),
-      ]);
-    }
-  }, [queueDxn, prompts, queue?.items.length, queue?.isLoading]);
-
-  // State.
-  const artifactItems: any[] = []; // TODO(burdon): Query from space.
-  const messages = [...(queue?.items ?? []), ...(processor?.messages.value ?? [])];
-
-  const handleSubmit = processor
-    ? (message: string) => {
-        requestAnimationFrame(async () => {
-          invariant(processor);
-          if (processor.streaming.value) {
-            await processor.cancel();
-          }
-
-          invariant(queue);
-          await processor.request(message, {
-            history: queue.items,
-            onComplete: (messages) => {
-              queue.append(messages);
-            },
-          });
-        });
-
-        return true;
-      }
-    : undefined;
-
-  const handlePrompt = useCallback(
-    (text: string) => {
-      void handleSubmit?.(text);
-    },
-    [handleSubmit],
-  );
-
-  const handleDelete = useCallback(
-    (id: string) => {
-      invariant(ObjectId.isValid(id), 'Invalid message id');
-      void queue?.delete([id]);
-    },
-    [queue],
-  );
-
-  return (
-    <div className='grid grid-cols-2 w-full h-full divide-x divide-separator overflow-hidden'>
-      {/* Thread */}
-      <div className='flex flex-col gap-4 overflow-hidden'>
-        <Toolbar.Root classNames='p-2'>
-          <Input.Root>
-            <Input.TextInput
-              spellCheck={false}
-              placeholder='Queue DXN'
-              value={queueDxn}
-              onChange={(ev) => setQueueDxn(ev.target.value)}
-            />
-            <IconButton
-              iconOnly
-              label='Copy DXN'
-              icon='ph--copy--regular'
-              onClick={() => navigator.clipboard.writeText(queueDxn)}
-            />
-            <IconButton
-              iconOnly
-              label='Clear history'
-              icon='ph--trash--regular'
-              onClick={() => setQueueDxn(randomQueueDxn())}
-            />
-            <IconButton iconOnly label='Stop' icon='ph--stop--regular' onClick={() => processor?.cancel()} />
-          </Input.Root>
-        </Toolbar.Root>
-
-        {/* TODO(burdon): Replace with ThreadContainer. */}
-        <Thread
-          messages={messages}
-          processing={processor?.streaming.value}
-          onSubmit={processor ? handleSubmit : undefined}
-          onPrompt={processor ? handlePrompt : undefined}
-          onDelete={processor ? handleDelete : undefined}
-          {...props}
-        />
-      </div>
-
-      {/* Artifacts Deck/Mosaic */}
-      <div className='overflow-hidden grid grid-rows-[2fr_1fr] divide-y divide-separator'>
-        {artifactItems.length > 0 && (
-          <div className={mx('flex grow overflow-hidden', artifactItems.length === 1 && 'row-span-2')}>
-            <Surface role='canvas-node' limit={1} data={artifactItems[0]} />
-          </div>
-        )}
-
-        {artifactItems.length > 1 && (
-          <div className='flex shrink-0 overflow-hidden divide-x divide-separator'>
-            <div className='flex flex-1 h-full'>
-              {artifactItems.slice(1, 3).map((item, idx) => (
-                <Surface key={idx} role='canvas-node' limit={1} data={item} />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const randomQueueDxn = () =>
-  new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString();
-
-const meta: Meta<typeof Render> = {
-  title: 'plugins/plugin-automation/ThreadContainer',
-  render: Render,
-  decorators: [
-    withSignals,
-    withPluginManager({
-      plugins: [
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin({ observability: false }),
-        IntentPlugin(),
-        ChessPlugin(),
-        MapPlugin(),
-        TablePlugin(),
-      ],
-      capabilities,
-    }),
-    withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Render>;
-
-export const Default: Story = {
-  args: {
-    debug: true,
-    prompts: ['Ask me a question', 'Show me a chess puzzle'],
-  },
-};
-
-export const WithInitialItems: Story = {
-  args: {
-    debug: true,
-    items: [
-      createStatic(ChessType, {
-        fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
-      }),
-    ],
-  },
-};

package/src/components/Thread/ThreadContainer.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, useCallback } from 'react';
-
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { getSpace } from '@dxos/react-client/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-
-import { Thread } from './Thread';
-import { useChatProcessor, useMessageQueue } from '../../hooks';
-import { type AIChatType } from '../../types';
-
-// TODO(burdon): Since this only wraps Thread, just separate out hook?
-export const ThreadContainer: FC<ThemedClassName<{ chat?: AIChatType; onOpenChange?: (open: boolean) => void }>> = ({
-  classNames,
-  chat,
-  onOpenChange,
-}) => {
-  const space = getSpace(chat);
-  const processor = useChatProcessor(space);
-  const messageQueue = useMessageQueue(chat);
-  const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      // Don't accept input if still processing.
-      if (processor.streaming.value) {
-        log.warn('still processing');
-        return false;
-      }
-
-      onOpenChange?.(true);
-
-      invariant(messageQueue);
-      void processor.request(text, {
-        history: messageQueue.items,
-        onComplete: (messages) => {
-          messageQueue.append(messages);
-        },
-      });
-
-      return true;
-    },
-    [processor, messageQueue, onOpenChange],
-  );
-
-  const handleCancel = useCallback(() => {
-    if (processor.streaming.value) {
-      void processor.cancel();
-    }
-  }, [processor]);
-
-  return (
-    <Thread
-      classNames={classNames}
-      space={space}
-      messages={messages}
-      processing={processor.streaming.value}
-      error={processor.error.value}
-      onSubmit={handleSubmit}
-      onCancel={handleCancel}
-    />
-  );
-};

package/src/components/Thread/ThreadMessage.tsx

@@ -1,187 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren, type FC } from 'react';
-
-import { type MessageContentBlock, type Message } from '@dxos/artifact';
-import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
-import { Button, ButtonGroup, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
-import {
-  MarkdownViewer,
-  ToggleContainer as NativeToggleContainer,
-  type ToggleContainerProps,
-} from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { safeParseJson } from '@dxos/util';
-
-import { ToolBlock, isToolMessage } from './ToolInvocations';
-import { ToolboxContainer } from '../Toolbox';
-
-const userClassNames = 'bg-[--user-fill]';
-const panelClassNames = 'flex flex-col w-full bg-groupSurface rounded-md';
-
-const ToggleContainer = (props: ToggleContainerProps) => {
-  return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
-};
-
-const MessageContainer = ({ children, classNames, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
-  return (
-    <div role='list-item' className={mx('flex w-full', user && 'justify-end', classNames)}>
-      <div className={mx(user ? ['px-2 py-1 rounded-md', userClassNames] : 'w-full')}>{children}</div>
-    </div>
-  );
-};
-
-export type ThreadMessageProps = ThemedClassName<{
-  space?: Space;
-  message: Message;
-  debug?: boolean;
-  onPrompt?: (text: string) => void;
-  onDelete?: (id: string) => void;
-}>;
-
-export const ThreadMessage: FC<ThreadMessageProps> = ({ classNames, space, message, onPrompt }) => {
-  const { role, content = [] } = message;
-
-  // TODO(burdon): Restructure types to make check unnecessary.
-  if (isToolMessage(message)) {
-    return (
-      <MessageContainer classNames={classNames}>
-        <ToolBlock space={space} classNames={panelClassNames} message={message} />
-      </MessageContainer>
-    );
-  }
-
-  return (
-    <div role='none' className='flex flex-col gap-2'>
-      {content.map((block, idx) => (
-        <MessageContainer key={idx} classNames={classNames} user={block.type === 'text' && role === 'user'}>
-          <Block space={space} block={block} onPrompt={onPrompt} />
-        </MessageContainer>
-      ))}
-    </div>
-  );
-};
-
-const Block: FC<{ space?: Space; block: MessageContentBlock; onPrompt?: (text: string) => void }> = ({
-  space,
-  block,
-  onPrompt,
-}) => {
-  const Component = components[block.type] ?? components.default;
-  return <Component space={space} block={block} onPrompt={onPrompt} />;
-};
-
-type BlockComponent = FC<{ space?: Space; block: MessageContentBlock; onPrompt?: (text: string) => void }>;
-
-const components: Record<string, BlockComponent> = {
-  //
-  // Text
-  //
-  ['text' as const]: ({ block }) => {
-    invariant(block.type === 'text');
-    // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
-    const title = block.disposition ? titles[block.disposition] : undefined;
-    if (!title) {
-      return <MarkdownViewer content={block.text} />;
-    }
-
-    // TOOD(burdon): Store last time user opened/closed COT.
-    // Autoclose when streaming ends.
-    // useEffect(() => {
-    //   if (block.disposition === 'cot' && !block.pending) {
-    //     setOpen(false);
-    //   }
-    // }, [block.disposition, block.pending]);
-
-    return (
-      <ToggleContainer
-        // open={open}
-        defaultOpen={block.disposition === 'cot' && block.pending}
-        title={title}
-        icon={
-          block.pending ? (
-            <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
-          ) : undefined
-        }
-      >
-        <MarkdownViewer
-          content={block.text}
-          classNames={['pbe-2', block.disposition === 'cot' && 'text-sm text-subdued']}
-        />
-      </ToggleContainer>
-    );
-  },
-
-  //
-  // JSON
-  //
-  ['json' as const]: ({ space, block, onPrompt }) => {
-    invariant(block.type === 'json');
-
-    switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} />
-          </ToggleContainer>
-        );
-      }
-
-      case 'suggest': {
-        const { text = '' }: { text: string } = safeParseJson(block.json ?? '{}') ?? ({} as any);
-        return <IconButton icon='ph--lightning--regular' label={text} onClick={() => onPrompt?.(text)} />;
-      }
-
-      case 'select': {
-        const { options = [] }: { options: string[] } = safeParseJson(block.json ?? '{}') ?? ({} as any);
-        return (
-          <ButtonGroup>
-            {options.map((option) => (
-              <Button key={option} onClick={() => onPrompt?.(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
-  //
-  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>
-    );
-  },
-};
-
-// TODO(burdon): Translations.
-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',
-  ['tool_list' as const]: 'Tools',
-};

package/src/components/Thread/ToolInvocations.tsx

@@ -1,86 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, useEffect, useRef, useState } from 'react';
-
-import { type Message, type MessageContentBlock } from '@dxos/artifact';
-import { log } from '@dxos/log';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { NumericTabs, StatusRoll, ToggleContainer } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-
-import { type ThreadMessageProps } from './ThreadMessage';
-
-export const isToolMessage = (message: Message) => {
-  return message.content.some((block) => block.type === 'tool_use' || block.type === 'tool_result');
-};
-
-export const ToolBlock: FC<ThemedClassName<ThreadMessageProps>> = ({ classNames, message }) => {
-  const { content = [] } = message;
-
-  let request: (MessageContentBlock & { type: 'tool_use' }) | undefined;
-  const blocks = content.filter((block) => block.type === 'tool_use' || block.type === 'tool_result');
-  const items = blocks.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 <ToolContainer classNames={classNames} items={items} />;
-};
-
-export const ToolContainer: FC<ThemedClassName<{ items: { title: string; block: any }[] }>> = ({
-  classNames,
-  items,
-}) => {
-  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
-      classNames={['flex flex-col', classNames]}
-      title={<StatusRoll lines={lines} autoAdvance />}
-      open={open}
-      onChangeOpen={setOpen}
-    >
-      <div className='grid grid-cols-[32px_1fr]'>
-        <NumericTabs 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

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