@dxos/plugin-assistant 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/src/stories/Chat.stories.tsx

@@ -4,63 +4,98 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useMemo, useState, type FC } 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 { ContextBinder } from '@dxos/assistant';
-import {
-  DESIGN_BLUEPRINT,
-  TASK_BLUEPRINT,
-  readDocument,
-  remoteServiceEndpoints,
-  writeDocument,
-} from '@dxos/assistant-testing';
-import { Blueprint } from '@dxos/blueprints';
+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 { invariant } from '@dxos/invariant';
 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 { Toolbar, useThemeContext, useTranslation } 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, TemplateEditor, type ChatPromptProps } from '../components';
-import { type AiServicePreset, AiServicePresets } from '../hooks';
-import { useChatProcessor, useChatServices } from '../hooks';
-import { meta as AssistantMeta } from '../meta';
 import { translations } from '../translations';
 import { Assistant } from '../types';
 
-//
-// Story container
-//
+import {
+  BlueprintContainer,
+  ChatContainer,
+  type ComponentProps,
+  GraphContainer,
+  LoggingContainer,
+  SurfaceContainer,
+  TasksContainer,
+} from './components';
+import { addTestData, config, getDecorators, testTypes } from './testing';
+
+const DefaultStory = ({
+  debug = true,
+  components,
+  blueprints = [],
+}: {
+  debug?: boolean;
+  components: (FC<ComponentProps> | FC<ComponentProps>[])[];
+  blueprints?: string[];
+}) => {
+  const client = useClient();
+  const space = useSpace();
+
+  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;
+    }
+
+    // TODO(burdon): Active should be ephemeral state of AiProcessor; write on edit/prompt.
+
+    // 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 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;
+  }
 
-const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
   return (
     <div
-      className={mx('grid grid-cols gap-2 m-2')}
+      className='grid grid-cols gap-2 m-2'
       style={{ gridTemplateColumns: `repeat(${components.length}, minmax(0, 40rem))` }}
     >
       {components.map((Component, index) =>
@@ -71,14 +106,14 @@ const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
             style={{ gridTemplateRows: `repeat(${Component.length}, 1fr)` }}
           >
             {Component.map((Component, index) => (
-              <div key={index} className='flex flex-col overflow-hidden bg-baseSurface border border-separator'>
-                <Component />
+              <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 border border-separator'>
-            <Component />
+          <div key={index} className='flex flex-col overflow-hidden bg-baseSurface rounded border border-separator'>
+            <Component space={space} debug={debug} onEvent={handleEvent} />
           </div>
         ),
       )}
@@ -86,293 +121,197 @@ const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
   );
 };
 
-//
-// Components
-//
-
-const ChatContainer = () => {
-  const { t } = useTranslation(AssistantMeta.id);
-  const space = useSpace();
-
-  const [chat, setChat] = useState<Assistant.Chat>();
-  useEffect(() => {
-    const results = space?.db.query(Filter.type(Assistant.Chat)).runSync();
-    if (results?.length) {
-      setChat(results[0].object);
-    }
-  }, [space]);
-
-  // TODO(burdon): Memo preset for provider.
-  const [online, setOnline] = useState(true);
-  const [preset, setPreset] = useState<AiServicePreset>();
-  const presets = useMemo(
-    () => AiServicePresets.filter((preset) => online === (preset.provider === 'dxos-remote')),
-    [online],
-  );
-  useEffect(() => {
-    setPreset(presets[0]);
-  }, [presets]);
-
-  const services = useChatServices({ space });
-  const blueprintRegistry = useMemo(() => new Blueprint.Registry([DESIGN_BLUEPRINT, TASK_BLUEPRINT]), []);
-  const processor = useChatProcessor({
-    preset,
-    chat,
-    space,
-    services,
-    blueprintRegistry,
-    noPluginArtifacts: true,
-  });
-
-  const handleChangePreset = useCallback<NonNullable<ChatPromptProps['onChangePreset']>>(
-    (id) => {
-      const preset = presets.find((preset) => preset.id === id);
-      if (preset) {
-        setPreset(preset);
-      }
-    },
-    [presets],
-  );
-
-  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]);
-
-  if (!chat || !processor) {
-    return null;
-  }
-
-  return (
-    <Chat.Root chat={chat} processor={processor} onEvent={(event) => log.info('event', { event })}>
-      <Toolbar.Root classNames='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}
-        />
-      </Toolbar.Root>
-      <Chat.Thread />
-      <div className='p-4'>
-        <Chat.Prompt
-          classNames='p-2 border border-subduedSeparator rounded focus-within:outline focus-within:border-transparent outline-primary-500'
-          expandable
-          online={online}
-          presets={presets.map(({ id, model, label }) => ({ id, label: label ?? model }))}
-          preset={preset?.id}
-          onChangeOnline={setOnline}
-          onChangePreset={handleChangePreset}
-        />
-      </div>
-    </Chat.Root>
-  );
-};
-
-const DocumentContainer = () => {
-  const { themeMode } = useThemeContext();
-  const space = useSpace();
-  const [document] = useQuery(space, Filter.type(DocumentType));
-  if (!document?.content.target) {
-    return null;
-  }
-
-  return (
-    <>
-      <Toolbar.Root classNames='border-b border-subduedSeparator'>
-        <h2>{Obj.getLabel(document)}</h2>
-      </Toolbar.Root>
-      <Editor
-        id={document.id}
-        text={document.content.target}
-        classNames='h-full p-2 overflow-hidden'
-        extensions={[
-          // TODO(burdon): Create util.
-          createDataExtensions({ id: document.id, text: createDocAccessor(document.content.target, ['content']) }),
-          createBasicExtensions({ readOnly: false }),
-          createMarkdownExtensions({ themeMode }),
-          createThemeExtensions({ themeMode }),
-          outliner(),
-        ]}
-      />
-    </>
-  );
-};
-
-// TODO(burdon): Show all active blueprints from context?
-const BlueprintContainer = () => {
-  const space = useSpace();
-  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
-  if (!blueprint?.instructions.target) {
-    return null;
-  }
-
-  return (
-    <div className='flex flex-col h-full'>
-      <Toolbar.Root classNames='border-b border-subduedSeparator'>
-        <h2>{Obj.getLabel(blueprint)}</h2>
-      </Toolbar.Root>
-      <TemplateEditor template={blueprint.instructions.target} />
-    </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],
   },
-});
-
-const getDecorators = ({
-  config,
-  plugins = [],
-  blueprints = [],
-  context = false,
-}: {
-  config: Config;
-  plugins?: Plugin[];
-  blueprints?: Blueprint.Blueprint[];
-  context?: boolean;
-}) => [
-  withPluginManager({
-    fireEvents: [Events.SetupArtifactDefinition],
-    plugins: [
-      ClientPlugin({
-        config,
-        types: [Assistant.Chat, DocumentType, Blueprint.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();
-
-          // 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),
-            }),
-          );
-          const binder = new ContextBinder(await chat.queue.load());
-
-          const doc = space.db.add(
-            Obj.make(DocumentType, {
-              name: 'Tasks',
-              content: Ref.make(Obj.make(DataType.Text, { content: '' })),
-            }),
-          );
-          if (context) {
-            await binder.bind({ objects: [Ref.make(doc)] });
-          }
-
-          for (const blueprint of blueprints) {
-            // Clone blueprints and bind to conversation.
-            // TODO(dmaretskyi): This should be done by Obj.clone.
-            const { id: _id, ...data } = blueprint;
-            const obj = space.db.add(Obj.make(Blueprint.Blueprint, data));
-            await binder.bind({ blueprints: [Ref.make(obj)] });
-          }
-        },
-      }),
-      IntentPlugin(),
-      SettingsPlugin(),
-      SpacePlugin(),
+} satisfies Story;
 
-      TranscriptionPlugin(),
-      AssistantPlugin(),
+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;
 
-      ...plugins,
-    ],
-    capabilities: [contributes(Capabilities.Functions, [readDocument, writeDocument])],
+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)] });
+    },
   }),
-  withTheme,
-  withLayout({
-    fullscreen: true,
-    classNames: 'bg-deckSurface justify-center',
+  args: {
+    components: [ChatContainer, [TasksContainer, BlueprintContainer]],
+  },
+} satisfies Story;
+
+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;
 
-//
-// Stories
-//
+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;
 
-export const Default = {
+export const WithTrip = {
   decorators: getDecorators({
-    config: remoteConfig,
+    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
+
+              ## Day 1
+              - Visit the Sagrada Familia
+              - Visit the Park Güell
+              - Visit the Casa Batlló
+
+              ## 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
+
+              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)] });
+      }
+    },
   }),
   args: {
-    components: [ChatContainer],
+    components: [ChatContainer, SurfaceContainer],
   },
 } satisfies Story;
 
-export const WithDocument = {
+export const WithBoard = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [MarkdownPlugin()],
+    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, DocumentContainer],
+    debug: true,
+    components: [ChatContainer, SurfaceContainer],
   },
 } satisfies Story;
 
-export const WithBlueprints = {
+export const WithResearch = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-    blueprints: [TASK_BLUEPRINT],
-    context: true,
+    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, BlueprintContainer]],
+    components: [ChatContainer, [/*GraphContainer, BlueprintContainer,*/ LoggingContainer]],
+    blueprints: [RESEARCH_BLUEPRINT.key],
   },
 } satisfies Story;
 
-// export const WithArtifacts = {
-//   decorators: getDecorators({
-//     config: remoteConfig,
-//     plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-//   }),
-//   args: {
-//     components: [ChatContainer],
-//   },
-// } satisfies Story;
+export const WithSearch = {
+  decorators: getDecorators({
+    config: config.remote,
+    types: testTypes,
+    onInit: async ({ space }) => {
+      await addTestData(space);
+    },
+  }),
+  args: {
+    components: [ChatContainer, [GraphContainer]],
+  },
+} 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>
+  );
+};