@dxos/plugin-assistant 0.8.3 → 0.8.4-main.1f223c7

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

@@ -1,201 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { Message } from '@dxos/ai';
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
-
-import { Thread, type ThreadProps } from './Thread';
-import translations from '../../translations';
-
-faker.seed(1);
-
-const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
-  const [processing, setProcessing] = useState(false);
-  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
-  useEffect(() => {
-    setMessages(_messages ?? []);
-  }, [_messages]);
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      const request: Message = Obj.make(Message, { role: 'user', content: [{ type: 'text', text }] });
-      const response: Message = Obj.make(Message, {
-        role: 'assistant',
-        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
-      });
-      setMessages([...messages, request, response]);
-      setProcessing(true);
-      setTimeout(() => {
-        response.content[0].pending = false;
-        setMessages([
-          ...messages,
-          request,
-          response,
-          Obj.make(Message, {
-            role: 'assistant',
-            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
-          }),
-        ]);
-        setProcessing(false);
-      }, 3_000);
-    },
-    [messages],
-  );
-
-  return (
-    <div className='flex w-[30rem] bg-white dark:bg-black'>
-      <Thread
-        {...props}
-        messages={messages}
-        processing={processing}
-        onSubmit={handleSubmit}
-        onCancel={() => setProcessing(false)}
-      />
-    </div>
-  );
-};
-
-const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-assistant/Thread',
-  render: DefaultStory,
-  component: Thread,
-  decorators: [
-    withSignals,
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withTheme,
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ThreadProps>;
-
-const TEST_MESSAGES: Message[] = [
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.sentence(5),
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        disposition: 'cot',
-        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
-          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
-          .join('\n'),
-      },
-      {
-        type: 'text',
-        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
-          .map(() => faker.lorem.paragraphs())
-          .join('\n\n'),
-      },
-      {
-        type: 'tool_use',
-        id: '1234',
-        name: 'search',
-        input: {},
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '1234',
-        content: 'This is a tool result.',
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'tool_use',
-        id: '4567',
-        name: 'create',
-        input: {},
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '4567',
-        content: 'This is a tool result.',
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.paragraphs(1),
-      },
-    ],
-  }),
-];
-
-export const Default: Story = {
-  args: {
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Input: Story = {
-  args: {
-    processing: true,
-  },
-};
-
-export const Collapse: Story = {
-  args: {
-    collapse: true,
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Incremental: Story = {
-  render: () => {
-    const [messages, setMessages] = useState<Message[]>([]);
-    useEffect(() => {
-      let i = 0;
-      const interval = setInterval(() => {
-        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
-        if (i >= TEST_MESSAGES.length) {
-          clearInterval(interval);
-        }
-      }, 2_000);
-
-      return () => clearInterval(interval);
-    }, []);
-
-    return <DefaultStory messages={messages} collapse />;
-  },
-};

package/src/components/Thread/Thread.tsx

@@ -1,118 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
-
-import { type Message } from '@dxos/ai';
-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';
-import type { ReferenceData, ReferencesProvider } from '../Prompt/references';
-
-export interface ContextProvider {
-  query({ query }: { query: string }): Promise<ReferenceData[]>;
-
-  resolveMetadata({ uri }: { uri: string }): Promise<ReferenceData | null>;
-}
-
-export type ThreadProps = ThemedClassName<{
-  space?: Space;
-  messages?: Message[];
-  collapse?: boolean;
-  transcription?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  contextProvider?: ContextProvider;
-}> &
-  Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
-
-/**
- * Chat thread component.
- */
-export const Thread = ({
-  classNames,
-  space,
-  messages,
-  collapse = true,
-  transcription,
-  processing,
-  error,
-  onSubmit,
-  onCancel,
-  onOpenChange,
-  contextProvider,
-  ...props
-}: ThreadProps) => {
-  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]);
-
-  const references = useMemo<ReferencesProvider | undefined>(() => {
-    if (!contextProvider) {
-      return undefined;
-    }
-
-    return {
-      getReferences: async ({ query }: { query: string }) => contextProvider.query({ query }),
-      resolveReference: async ({ uri }: { uri: string }) => contextProvider.resolveMetadata({ uri }),
-    };
-  }, [contextProvider]);
-
-  return (
-    <div role='none' className={mx('flex flex-col grow overflow-hidden', classNames)}>
-      <ScrollContainer ref={scroller} fade>
-        <div
-          role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6')}
-          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} {...props} />
-          ))}
-        </div>
-      </ScrollContainer>
-
-      {onSubmit && (
-        <PromptBar
-          microphone={transcription}
-          processing={processing}
-          error={error}
-          onSubmit={handleSubmit}
-          onCancel={onCancel}
-          onOpenChange={onOpenChange}
-          references={references}
-        />
-      )}
-    </div>
-  );
-};

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}
-    />
-  );
-};