@dxos/plugin-assistant 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

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

@@ -1,283 +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 { EdgeAiServiceClient, Message } from '@dxos/ai';
-import {
-  Capabilities,
-  Events,
-  IntentPlugin,
-  SettingsPlugin,
-  Surface,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { remoteServiceEndpoints } from '@dxos/artifact-testing';
-import { Filter, Obj, Query, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { ChessPlugin } from '@dxos/plugin-chess';
-import { ChessType } from '@dxos/plugin-chess/types';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { InboxPlugin } from '@dxos/plugin-inbox';
-import { MapPlugin } from '@dxos/plugin-map';
-import { MarkdownPlugin } from '@dxos/plugin-markdown';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { TablePlugin } from '@dxos/plugin-table';
-import { useClient } from '@dxos/react-client';
-import { useQueue, useQuery } from '@dxos/react-client/echo';
-import { IconButton, Input, Toolbar } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { Thread, type ThreadProps } from './Thread';
-import { ChatProcessor } from '../../hooks';
-import { createProcessorOptions } from '../../testing';
-import translations from '../../translations';
-
-// TODO(burdon): Configure for local with ollama/LM studio.
-// const endpoints = localServiceEndpoints;
-const endpoints = remoteServiceEndpoints;
-
-type RenderProps = {
-  items?: Obj.Any[];
-  prompts?: string[];
-} & Pick<ThreadProps, 'debug'>;
-
-// TODO(burdon): Use ChatContainer.
-const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) => {
-  const client = useClient();
-  const space = client.spaces.default;
-
-  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  const tools = useCapabilities(Capabilities.Tools);
-
-  const aiClient = useMemo(() => new EdgeAiServiceClient({ endpoint: endpoints.ai }), []);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  // TODO(burdon): Replace with useChatProcessor.
-  // const processor = useChatProcessor(space);
-  const processor = useMemo<ChatProcessor | undefined>(() => {
-    if (!space) {
-      return;
-    }
-
-    return new ChatProcessor(
-      aiClient,
-      tools.flat(),
-      artifactDefinitions,
-      {
-        space,
-        dispatch,
-      },
-      createProcessorOptions(artifactDefinitions.map((definition) => definition.instructions)),
-    );
-  }, [aiClient, tools, space, dispatch, artifactDefinitions]);
-
-  // Queue.
-  const [queueDxn, setQueueDxn] = useState<string>(() => space.queues.create().dxn.toString());
-  const queue = useQueue<Message>(Type.DXN.tryParse(queueDxn));
-
-  useEffect(() => {
-    if (space) {
-      setQueueDxn(space.queues.create().dxn.toString());
-    }
-  }, [space]);
-
-  useEffect(() => {
-    if (queue?.objects.length === 0 && !queue.isLoading && prompts.length > 0) {
-      void queue.append([
-        Obj.make(Message, {
-          role: 'assistant',
-          content: prompts.map(
-            (prompt) =>
-              ({
-                type: 'json',
-                disposition: 'suggest',
-                json: JSON.stringify({ text: prompt }),
-              }) as const,
-          ),
-        }),
-      ]);
-    }
-  }, [queueDxn, prompts, queue?.objects.length, queue?.isLoading]);
-
-  // State.
-  const query = useMemo(
-    () => Query.select(Filter.or(...artifactDefinitions.map((definition) => Filter.type(definition.schema)))),
-    [artifactDefinitions],
-  );
-  const artifactItems = useQuery(space, query);
-  const messages = [...(queue?.objects ?? []), ...(processor?.messages.value ?? [])];
-
-  const handleSubmit = useCallback(
-    (message: string) => {
-      requestAnimationFrame(async () => {
-        if (!processor || !queue) {
-          return;
-        }
-
-        if (processor.streaming.value) {
-          await processor.cancel();
-        }
-
-        await processor.request(message, {
-          history: queue.objects,
-          onComplete: (messages) => {
-            void queue.append(messages);
-          },
-        });
-      });
-
-      return true;
-    },
-    [processor, queue],
-  );
-
-  const handleDelete = useCallback(
-    (id: string) => {
-      invariant(Type.ObjectId.isValid(id), 'Invalid message id');
-      void queue?.delete([id]);
-    },
-    [queue],
-  );
-
-  if (!space) {
-    return <></>;
-  }
-
-  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(space.queues.create().dxn.toString())}
-            />
-            <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}
-          error={processor?.error.value}
-          tools={processor?.tools}
-          onSubmit={processor ? handleSubmit : undefined}
-          onPrompt={processor ? handleSubmit : undefined}
-          onDelete={processor ? handleDelete : undefined}
-          {...props}
-        />
-      </div>
-
-      {/* Artifacts Deck */}
-      <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='article' limit={1} data={{ subject: artifactItems[0] }} fallback={Fallback} />
-          </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='article' limit={1} data={{ subject: item }} fallback={Fallback} />
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-assistant/ThreadContainer',
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
-
-        // Artifacts.
-        ChessPlugin(),
-        InboxPlugin(),
-        MapPlugin(),
-        MarkdownPlugin(),
-        TablePlugin(),
-      ],
-      fireEvents: [Events.SetupArtifactDefinition],
-    }),
-    withTheme,
-    withLayout({ fullscreen: true }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DefaultStory>;
-
-export const Default: Story = {
-  args: {
-    debug: true,
-    prompts: ['What tools do you have access to?', 'Show me a chess puzzle'],
-  },
-};
-
-export const WithInitialItems: Story = {
-  args: {
-    debug: true,
-    items: [
-      Obj.make(ChessType, {
-        fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
-      }),
-    ],
-  },
-};
-
-const Fallback = ({ error }: { error?: Error }) => {
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'break-words rounded-md p-8', errorString.length < 256 && 'text-lg')}
-      >
-        {error ? errorString : 'error'}
-      </p>
-    </div>
-  );
-};

package/src/components/Thread/ThreadContainer.tsx

@@ -1,105 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, type FC, useEffect } from 'react';
-
-import { CollaborationActions, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type AssociatedArtifact } from '@dxos/artifact';
-import { DXN, Ref } from '@dxos/echo';
-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, type ThreadProps } from './Thread';
-import { useChatProcessor, useContextProvider, useMessageQueue } from '../../hooks';
-import { type AIChatType, type AssistantSettingsProps } from '../../types';
-
-export type ThreadContainerProps = {
-  chat?: AIChatType;
-  settings?: AssistantSettingsProps;
-  part?: 'deck' | 'dialog';
-  associatedArtifact?: AssociatedArtifact;
-} & Pick<ThreadProps, 'debug' | 'transcription' | 'onOpenChange' | 'onAddToGraph'>;
-
-// TODO(burdon): Since this only wraps Thread, just separate out hook?
-export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
-  classNames,
-  chat,
-  settings,
-  part,
-  associatedArtifact,
-  onOpenChange,
-  ...props
-}) => {
-  const space = getSpace(chat);
-  const contextProvider = useContextProvider(space);
-  const processor = useChatProcessor({ chat, space, settings, part, associatedArtifact });
-  const messageQueue = useMessageQueue(chat);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  // TODO(thure): This will be referentially new on every render, is it causing overreactivity?
-  const messages = [...(messageQueue?.objects ?? []), ...processor.messages.value];
-
-  // Post last message to document.
-  useEffect(() => {
-    if (!processor.streaming.value && messageQueue?.objects) {
-      const message = messageQueue.objects[messageQueue.objects.length - 1];
-      if (space && chat && message && dispatch && associatedArtifact) {
-        void dispatch(
-          createIntent(CollaborationActions.InsertContent, {
-            target: associatedArtifact,
-            object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...chat.queue.dxn.parts, message.id])),
-            label: 'View proposal',
-          }),
-        );
-      }
-    }
-  }, [messageQueue, associatedArtifact, processor.streaming.value]);
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      // Don't accept input if still processing.
-      if (processor.streaming.value) {
-        log.warn('ignoring submit; still processing.');
-        return false;
-      }
-
-      onOpenChange?.(true);
-
-      invariant(messageQueue);
-      void processor.request(text, {
-        history: messageQueue.objects,
-        onComplete: (messages) => {
-          void 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}
-      tools={processor.tools}
-      contextProvider={contextProvider}
-      onSubmit={handleSubmit}
-      onCancel={handleCancel}
-      onPrompt={handleSubmit}
-      onOpenChange={onOpenChange}
-      {...props}
-    />
-  );
-};

package/src/components/Thread/ThreadMessage.tsx

@@ -1,234 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC, type PropsWithChildren } from 'react';
-
-import { type MessageContentBlock, type Message, type Tool } from '@dxos/ai';
-import { Surface } from '@dxos/app-framework';
-import { type Obj } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
-import { Button, 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 panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-md';
-const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
-
-const ToggleContainer = (props: ToggleContainerProps) => {
-  return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
-};
-
-const MessageContainer = ({ children, classNames, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
-  if (!children) {
-    return null;
-  }
-
-  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;
-  tools?: Tool[];
-  onPrompt?: (text: string) => void;
-  onDelete?: (id: string) => void;
-  onAddToGraph?: (object: Obj.Any) => void;
-}>;
-
-export const ThreadMessage: FC<ThreadMessageProps> = ({
-  classNames,
-  space,
-  message,
-  tools,
-  onPrompt,
-  onAddToGraph,
-}) => {
-  const { role, content = [] } = message;
-
-  // TODO(burdon): Restructure types to make check unnecessary.
-  if (isToolMessage(message)) {
-    return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
-        <ToolBlock space={space} classNames={panelClassNames} message={message} tools={tools} />
-      </MessageContainer>
-    );
-  }
-
-  return content.map((block, idx) => {
-    // TODO(burdon): Filter empty messages.
-    if (block.type === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
-      return null;
-    }
-
-    const Component = components[block.type] ?? components.default;
-
-    return (
-      <MessageContainer
-        key={idx}
-        classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
-        user={block.type === 'text' && role === 'user'}
-      >
-        <Component space={space} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
-      </MessageContainer>
-    );
-  });
-};
-
-type BlockComponent = FC<{
-  space?: Space;
-  block: MessageContentBlock;
-  onPrompt?: (text: string) => void;
-  onAddToGraph?: (object: Obj.Any) => 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 classNames='[&>p]:animate-[fadeIn_0.5s]' 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={systemDispositions.includes(block.disposition ?? '') && 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', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
-        />
-      </ToggleContainer>
-    );
-  },
-
-  //
-  // JSON
-  //
-  ['json' as const]: ({ space, block, onPrompt, onAddToGraph }) => {
-    invariant(block.type === 'json');
-
-    switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} classNames='pbe-2' />
-          </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 (
-          <div className='flex flex-wrap gap-1'>
-            {options.map((option, idx) => (
-              <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-2xl text-sm'}
-                key={option}
-                onClick={() => onPrompt?.(option)}
-              >
-                {option}
-              </Button>
-            ))}
-          </div>
-        );
-      }
-
-      case 'graph': {
-        return (
-          <div className='flex flex-wrap gap-1'>
-            <Surface
-              role='card'
-              data={{ subject: JSON.parse(block.json ?? '{}') }}
-              limit={1}
-              fallback={<div className='font-mono text-xs text-pre'>{block.json}</div>}
-            />
-            {onAddToGraph && (
-              <IconButton
-                icon='ph--plus--regular'
-                label='Add to graph'
-                onClick={() => onAddToGraph?.(JSON.parse(block.json ?? '{}'))}
-              />
-            )}
-          </div>
-        );
-      }
-
-      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',
-  ['artifact-update' as const]: 'Artifact(s) changed',
-};
-
-const systemDispositions: string[] = ['cot', 'artifact-update'];