@dxos/plugin-assistant 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/stories/Chat.stories.tsx

@@ -4,266 +4,314 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useMemo, type FunctionComponent } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type FC, useCallback } from 'react';
 
-import { Capabilities, contributes, Events, IntentPlugin, type Plugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import {
-  DESIGN_SPEC_BLUEPRINT,
-  TASK_LIST_BLUEPRINT,
-  remoteServiceEndpoints,
-  readDocument,
-  writeDocument,
-} from '@dxos/artifact-testing';
-import { Blueprint, BlueprintRegistry, ContextBinder } from '@dxos/assistant';
+import { EXA_API_KEY } from '@dxos/ai/testing';
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { RESEARCH_BLUEPRINT, ResearchDataTypes, ResearchGraph } from '@dxos/assistant-testing';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { ChessPlugin } from '@dxos/plugin-chess';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { Board, BoardPlugin } from '@dxos/plugin-board';
+import { Chess, ChessPlugin } from '@dxos/plugin-chess';
 import { InboxPlugin } from '@dxos/plugin-inbox';
-import { MapPlugin } from '@dxos/plugin-map';
+import { Map, MapPlugin } from '@dxos/plugin-map';
 import { MarkdownPlugin } from '@dxos/plugin-markdown';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { Markdown } from '@dxos/plugin-markdown';
 import { TablePlugin } from '@dxos/plugin-table';
-import { TranscriptionPlugin } from '@dxos/plugin-transcription';
-import { Config } from '@dxos/react-client';
-import { createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
-import { useThemeContext } from '@dxos/react-ui';
-import {
-  Editor,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  outliner,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { useClient } from '@dxos/react-client';
+import { useSpace } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
+import { trim } from '@dxos/util';
 
-import { AssistantPlugin } from '../AssistantPlugin';
-import { Chat } from '../components';
-import { useChatProcessor, useServiceContainer } from '../hooks';
 import { translations } from '../translations';
 import { Assistant } from '../types';
 
-//
-// Story container
-//
-
-const DefaultStory = ({ components }: { components: FunctionComponent[] }) => {
-  return (
-    <div
-      className={mx('grid grid-cols border-x border-separator divide-x divide-separator')}
-      style={{ gridTemplateColumns: `repeat(${components.length}, minmax(0, 40rem))` }}
-    >
-      {components.map((Component, index) => (
-        <Component key={index} />
-      ))}
-    </div>
-  );
-};
-
-//
-// Components
-//
+import {
+  BlueprintContainer,
+  ChatContainer,
+  type ComponentProps,
+  GraphContainer,
+  LoggingContainer,
+  SurfaceContainer,
+  TasksContainer,
+} from './components';
+import { addTestData, config, getDecorators, testTypes } from './testing';
 
-const ChatContainer = () => {
+const DefaultStory = ({
+  debug = true,
+  components,
+  blueprints = [],
+}: {
+  debug?: boolean;
+  components: (FC<ComponentProps> | FC<ComponentProps>[])[];
+  blueprints?: string[];
+}) => {
+  const client = useClient();
   const space = useSpace();
-  const [chat] = useQuery(space, Filter.type(Assistant.Chat));
 
-  // TODO(burdon): Figure out how to use effect to inject serviceContainer, blueprintRegistry into the processor.
-  const serviceContainer = useServiceContainer({ space });
-  const blueprintRegistry = useMemo(() => new BlueprintRegistry([DESIGN_SPEC_BLUEPRINT, TASK_LIST_BLUEPRINT]), []);
-  const processor = useChatProcessor({ chat, space, serviceContainer, blueprintRegistry, noPluginArtifacts: true });
+  const blueprintsDefinitions = useCapabilities(Capabilities.BlueprintDefinition);
+  useAsyncEffect(async () => {
+    if (!space) {
+      return;
+    }
+    const { objects: chats = [] } = await space.db.query(Filter.type(Assistant.Chat)).run();
+    const chat = chats[0];
+    if (!chat) {
+      return;
+    }
 
-  if (!chat || !processor) {
-    return null;
-  }
+    // TODO(burdon): Active should be ephemeral state of AiProcessor; write on edit/prompt.
 
-  return (
-    <Chat.Root chat={chat} processor={processor} onEvent={(event) => log.info('event', { event })}>
-      <Chat.Thread />
-      <div className='p-2'>
-        <Chat.Prompt
-          expandable
-          classNames='p-2 border border-subduedSeparator rounded focus-within:outline focus-within:border-transparent outline-primary-500'
-        />
-      </div>
-    </Chat.Root>
-  );
-};
+    // TODO(burdon): RACE CONDITION; must handle concurrently adding multiple blueprints instances with same key.
+    // Add blueprints to context.
+    // const binder = new AiContextBinder(await chat.queue.load());
+    // for (const key of blueprints) {
+    //   const blueprint = blueprintsDefinitions.find((blueprint) => blueprint.key === key);
+    //   if (blueprint) {
+    //     const obj = space.db.add(Obj.clone(blueprint));
+    //     await binder.bind({ blueprints: [Ref.make(obj)] });
+    //   }
+    // }
+  }, [space, blueprints, blueprintsDefinitions]);
 
-const DocumentContainer = () => {
-  const { themeMode } = useThemeContext();
-  const space = useSpace();
-  const [document] = useQuery(space, Filter.type(DocumentType));
-  if (!document?.content.target) {
+  const handleEvent = useCallback<NonNullable<ComponentProps['onEvent']>>((event) => {
+    log.info('event', { event });
+    switch (event) {
+      case 'reset': {
+        void client?.reset().then(() => {
+          document.location.reload();
+        });
+        break;
+      }
+    }
+  }, []);
+
+  if (!space) {
     return null;
   }
 
   return (
-    <Editor
-      id={document.id}
-      text={document.content.target}
-      classNames='p-2'
-      extensions={[
-        // TODO(burdon): Create util.
-        createDataExtensions({ id: document.id, text: createDocAccessor(document.content.target, ['content']) }),
-        createBasicExtensions({ readOnly: false }),
-        createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode }),
-        outliner(),
-      ]}
-    />
+    <div
+      className='grid grid-cols gap-2 m-2'
+      style={{ gridTemplateColumns: `repeat(${components.length}, minmax(0, 40rem))` }}
+    >
+      {components.map((Component, index) =>
+        Array.isArray(Component) ? (
+          <div
+            key={index}
+            className='grid grid-rows gap-2 overflow-hidden'
+            style={{ gridTemplateRows: `repeat(${Component.length}, 1fr)` }}
+          >
+            {Component.map((Component, index) => (
+              <div key={index} className='flex flex-col overflow-hidden bg-baseSurface rounded border border-separator'>
+                <Component space={space} debug={debug} onEvent={handleEvent} />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div key={index} className='flex flex-col overflow-hidden bg-baseSurface rounded border border-separator'>
+            <Component space={space} debug={debug} onEvent={handleEvent} />
+          </div>
+        ),
+      )}
+    </div>
   );
 };
 
-//
-// Configuration
-//
-
-const meta = {
+const storybook = {
   title: 'plugins/plugin-assistant/Chat',
   render: render(DefaultStory),
-  decorators: [],
   parameters: {
     translations,
     controls: { disable: true },
   },
 } satisfies Meta<typeof DefaultStory>;
 
-export default meta;
+export default storybook;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof storybook>;
 
 //
-// Decorators
+// Stories
 //
 
-const remoteConfig = new Config({
-  runtime: {
-    services: {
-      ai: {
-        // TODO(burdon): 'url'?
-        server: remoteServiceEndpoints.ai,
-      },
-      edge: {
-        url: remoteServiceEndpoints.edge,
-      },
+export const Default = {
+  decorators: getDecorators({
+    config: config.remote,
+  }),
+  args: {
+    components: [ChatContainer],
+  },
+} satisfies Story;
+
+export const WithDocument = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin()],
+    config: config.remote,
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(
+        Markdown.makeDocument({
+          name: 'Document',
+          content: trim`
+            # Hello, world!
+            This is a test.
+          `,
+        }),
+      );
+      await binder.bind({ objects: [Ref.make(object)] });
     },
+  }),
+  args: {
+    components: [ChatContainer, SurfaceContainer],
   },
-});
+} satisfies Story;
 
-const getDecorators = ({
-  config,
-  plugins = [],
-  blueprints = [],
-}: {
-  config: Config;
-  plugins?: Plugin[];
-  blueprints?: Blueprint[];
-}) => [
-  withPluginManager({
-    fireEvents: [Events.SetupArtifactDefinition],
-    plugins: [
-      ClientPlugin({
-        config,
-        types: [Assistant.Chat, DocumentType, Blueprint],
-        onClientInitialized: async (_, client) => {
-          await client.halo.createIdentity();
-          await client.spaces.waitUntilReady();
-          const space = client.spaces.default;
-          // ISSUE(burdon): Should not require this.
-          //  ERROR: invariant violation: Database was not initialized with root object.
-          await space.waitUntilReady();
+export const WithBlueprints = {
+  decorators: getDecorators({
+    plugins: [InboxPlugin(), MarkdownPlugin(), TablePlugin()],
+    config: config.remote,
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(Markdown.makeDocument({ name: 'Tasks' }));
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [TasksContainer, BlueprintContainer]],
+  },
+} satisfies Story;
 
-          // TODO(burdon): Remove need for this boilerplate. Namespace for types?
-          const chat = space.db.add(
-            Obj.make(Assistant.Chat, {
-              queue: Ref.fromDXN(space.queues.create().dxn),
-            }),
-          );
+export const WithChess = {
+  decorators: getDecorators({
+    plugins: [ChessPlugin()],
+    config: config.remote,
+    types: [Chess.Game],
+    onInit: async ({ space, binder }) => {
+      // TODO(burdon): Add player DID (for user and assistant).
+      const object = space.db.add(
+        Chess.makeGame({
+          name: 'Challenge',
+          pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
+        }),
+      );
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+    blueprints: ['dxos.org/blueprint/assistant', 'dxos.org/blueprint/chess'],
+  },
+} satisfies Story;
 
-          // TODO(burdon): Add to conversation context.
-          space.db.add(
-            Obj.make(DocumentType, {
-              name: 'Tasks',
-              content: Ref.make(Obj.make(DataType.Text, { content: '' })),
-            }),
-          );
+export const WithMap = {
+  decorators: getDecorators({
+    plugins: [MapPlugin()],
+    config: config.remote,
+    types: [Map.Map],
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(Map.makeMap());
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+  },
+} satisfies Story;
 
-          // Clone blueprints and bind to conversation.
-          const binder = new ContextBinder(await chat.queue.load());
-          for (const blueprint of blueprints) {
-            const obj = space.db.add(Obj.make(Blueprint, { ...blueprint }));
-            await binder.bind({ blueprints: [Ref.make(obj)] });
-          }
-        },
-      }),
-      IntentPlugin(),
-      SettingsPlugin(),
-      SpacePlugin(),
+export const WithTrip = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin(), MapPlugin()],
+    config: config.remote,
+    types: [Map.Map],
+    onInit: async ({ space, binder }) => {
+      // TODO(burdon): Table.
+      {
+        const object = space.db.add(Map.makeMap({ name: 'Trip' }));
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+      {
+        const object = space.db.add(
+          Markdown.makeDocument({
+            name: 'Itinerary',
+            content: trim`
+              # Itinerary
 
-      TranscriptionPlugin(),
+              ## Day 1
+              - Visit the Sagrada Familia
+              - Visit the Park Güell
+              - Visit the Casa Batlló
 
-      // TODO(burdon): Install capabilities independently?
-      // TODO(burdon): How to mock?
-      AssistantPlugin(),
+              ## Day 2
+              - Visit the Eiffel Tower
+              - Visit the Louvre
+              - Visit the Musée d'Orsay
+            `,
+          }),
+        );
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+      {
+        const object = space.db.add(
+          Markdown.makeDocument({
+            name: 'Barcelona',
+            content: trim`
+              # Barcelona
 
-      ...plugins,
-    ],
-    capabilities: [contributes(Capabilities.Tools, [readDocument, writeDocument])],
-  }),
-  withTheme,
-  withLayout({
-    fullscreen: true,
-    classNames: 'bg-deckSurface justify-center',
+              Barcelona is the capital and most populous city of Catalonia, an autonomous community in northeastern Spain. 
+              It is located on the Mediterranean coast, on the banks of the Llobregat River, in the comarca of the Baix Llobregat. 
+              The city is known for its rich history, vibrant culture, and stunning architecture, including the Sagrada Familia, Park Güell, and Casa Batlló.
+            `,
+          }),
+        );
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+    },
   }),
-];
-
-//
-// Stories
-//
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+  },
+} satisfies Story;
 
-export const Default = {
+export const WithBoard = {
   decorators: getDecorators({
-    config: remoteConfig,
+    plugins: [BoardPlugin()],
+    config: config.remote,
+    types: [Board.Board],
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(Board.makeBoard());
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
   }),
   args: {
-    components: [ChatContainer],
+    debug: true,
+    components: [ChatContainer, SurfaceContainer],
   },
 } satisfies Story;
 
-export const WithDocument = {
+export const WithResearch = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [MarkdownPlugin()],
+    plugins: [MarkdownPlugin(), TablePlugin()],
+    config: config.persistent,
+    types: [...ResearchDataTypes, ResearchGraph, DataType.AccessToken],
+    accessTokens: [Obj.make(DataType.AccessToken, { source: 'exa.ai', token: EXA_API_KEY })],
   }),
   args: {
-    components: [ChatContainer, DocumentContainer],
+    components: [ChatContainer, [GraphContainer, BlueprintContainer, LoggingContainer]],
+    blueprints: [RESEARCH_BLUEPRINT.key],
   },
 } satisfies Story;
 
-export const WithBlueprints = {
+export const WithSearch = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-    blueprints: [TASK_LIST_BLUEPRINT],
+    config: config.remote,
+    types: testTypes,
+    onInit: async ({ space }) => {
+      await addTestData(space);
+    },
   }),
   args: {
-    components: [ChatContainer, DocumentContainer],
+    components: [ChatContainer, [GraphContainer]],
   },
 } satisfies Story;
-
-// export const WithArtifacts = {
-//   decorators: getDecorators({
-//     config: remoteConfig,
-//     plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-//   }),
-//   args: {
-//     components: [ChatContainer],
-//   },
-// } satisfies Story;

package/src/stories/components/BlueprintContainer.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { Blueprint } from '@dxos/blueprints';
+import { Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Toolbar } from '@dxos/react-ui';
+
+import { TemplateEditor } from '../../components';
+
+import { type ComponentProps } from './types';
+
+export const BlueprintContainer = ({ space }: ComponentProps) => {
+  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
+  if (!blueprint?.instructions) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col h-full'>
+      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+        <h2>{Obj.getLabel(blueprint)}</h2>
+        <div className='flex-1' />
+        <Toolbar.IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' />
+      </Toolbar.Root>
+      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
+    </div>
+  );
+};

package/src/stories/components/ChatContainer.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { useQuery } from '@dxos/react-client/echo';
+import { Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { Chat } from '../../components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
+import { useOnline, usePresets } from '../../hooks';
+import { meta } from '../../meta';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const ChatContainer = ({ space, onEvent }: ComponentProps) => {
+  const { t } = useTranslation(meta.id);
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const [chat, setChat] = useState<Assistant.Chat>();
+  useEffect(() => {
+    setChat((currentChat) => currentChat ?? chats[0]);
+  }, [chat, chats]);
+
+  const blueprintRegistry = useBlueprintRegistry();
+  const services = useChatServices({ space });
+  const processor = useChatProcessor({ space, chat, preset, services, blueprintRegistry });
+
+  const handleNewChat = useCallback(() => {
+    invariant(space);
+    const chat = space.db.add(
+      Obj.make(Assistant.Chat, {
+        queue: Ref.fromDXN(space.queues.create().dxn),
+      }),
+    );
+    setChat(chat);
+  }, [space]);
+
+  const handleBranchChat = useCallback(() => {}, [space]);
+
+  return (
+    <>
+      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+        <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('button new thread')} onClick={handleNewChat} />
+        <Toolbar.IconButton
+          disabled
+          icon='ph--git-branch--regular'
+          iconOnly
+          label={t('button branch thread')}
+          onClick={handleBranchChat}
+        />
+        <div className='flex-1' />
+        <Toolbar.IconButton icon='ph--trash--regular' iconOnly label='Reset' onClick={() => onEvent?.('reset')} />
+      </Toolbar.Root>
+      {!chat || !processor ? null : (
+        <Chat.Root chat={chat} processor={processor} onEvent={(event) => log.info('event', { event })}>
+          <Chat.Thread />
+          <div className='p-4'>
+            <Chat.Prompt
+              {...chatProps}
+              classNames='p-2 border border-transparent rounded focus-within:outline focus-within:border-transparent outline-primary-500'
+              preset={preset?.id}
+              online={online}
+              onChangeOnline={setOnline}
+            />
+          </div>
+        </Chat.Root>
+      )}
+    </>
+  );
+};