@dxos/plugin-assistant 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

package/src/stories/Chat.stories.tsx

@@ -1,317 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type FC, useCallback } from 'react';
-
-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 { Board, BoardPlugin } from '@dxos/plugin-board';
-import { Chess, ChessPlugin } from '@dxos/plugin-chess';
-import { InboxPlugin } from '@dxos/plugin-inbox';
-import { Map, MapPlugin } from '@dxos/plugin-map';
-import { MarkdownPlugin } from '@dxos/plugin-markdown';
-import { Markdown } from '@dxos/plugin-markdown';
-import { TablePlugin } from '@dxos/plugin-table';
-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 } from '@dxos/storybook-utils';
-import { trim } from '@dxos/util';
-
-import { translations } from '../translations';
-import { Assistant } from '../types';
-
-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;
-  }
-
-  return (
-    <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>
-  );
-};
-
-const storybook = {
-  title: 'plugins/plugin-assistant/Chat',
-  render: render(DefaultStory),
-  parameters: {
-    translations,
-    controls: { disable: true },
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default storybook;
-
-type Story = StoryObj<typeof storybook>;
-
-//
-// Stories
-//
-
-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;
-
-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;
-
-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;
-
-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 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
-
-              ## 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, SurfaceContainer],
-  },
-} satisfies Story;
-
-export const WithBoard = {
-  decorators: getDecorators({
-    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: {
-    debug: true,
-    components: [ChatContainer, SurfaceContainer],
-  },
-} satisfies Story;
-
-export const WithResearch = {
-  decorators: getDecorators({
-    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, [GraphContainer, BlueprintContainer, LoggingContainer]],
-    blueprints: [RESEARCH_BLUEPRINT.key],
-  },
-} 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

@@ -1,34 +0,0 @@
-//
-// 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

@@ -1,80 +0,0 @@
-//
-// 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>
-      )}
-    </>
-  );
-};

package/src/stories/components/GraphContainer.tsx

@@ -1,118 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Match } from 'effect';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { ResearchGraph } from '@dxos/assistant-testing';
-import { Filter, Query } from '@dxos/echo';
-import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
-import { useQuery } from '@dxos/react-client/echo';
-import { IconButton, Toolbar } from '@dxos/react-ui';
-import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type Expression, QueryParser, createFilter } from '../../parser';
-import { useFlush, useMatcherExtension } from '../hooks';
-
-import { type ComponentProps } from './types';
-
-export const GraphContainer = ({ space }: ComponentProps) => {
-  const [ast, setAst] = useState<Expression | undefined>();
-  const [filter, setFilter] = useState<Filter.Any>();
-  const [open, setOpen] = useState(false);
-
-  const [researchGraph] = useQuery(space, Query.type(ResearchGraph));
-  const queue = researchGraph?.queue.target;
-
-  const model = useGraphModel(space, undefined, undefined, queue);
-  useEffect(() => {
-    model?.setFilter(filter ?? Filter.everything());
-  }, [model, filter]);
-
-  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
-    (text) => {
-      try {
-        const parser = new QueryParser(text);
-        const ast = parser.parse();
-        setAst(ast);
-        const filter = createFilter(ast);
-        setFilter(filter);
-        setOpen(true);
-      } catch {
-        // TODO(mykola): Make hybrid search.
-        const filter = Filter.text(text, { type: 'vector' });
-        setFilter(filter);
-      }
-    },
-    [space],
-  );
-
-  return (
-    <div className={mx('relative grid h-full', open && 'grid-rows-[min-content_1fr]')}>
-      <SearchBar space={space} onSubmit={handleSubmit} />
-      <D3ForceGraph model={model} />
-
-      {/* TODO(burdon): Create component with context state for story. */}
-      {(open && (
-        <div className='absolute left-2 right-2 bottom-2 h-[8rem] flex overflow-hidden bg-baseSurface border border-subduedSeparator'>
-          <SyntaxHighlighter language='json' classNames='text-sm'>
-            {JSON.stringify({ ast, filter }, null, 2)}
-          </SyntaxHighlighter>
-          <div className='absolute bottom-1 right-1'>
-            <IconButton variant='ghost' icon='ph--x--regular' iconOnly label='Close' onClick={() => setOpen(false)} />
-          </div>
-        </div>
-      )) || (
-        <div className='absolute bottom-3 right-3'>
-          <IconButton
-            variant='ghost'
-            icon='ph--arrow-line-up--regular'
-            iconOnly
-            label='Open'
-            onClick={() => setOpen(true)}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const SearchBar = ({ space, onSubmit }: ComponentProps & Pick<ChatEditorProps, 'onSubmit'>) => {
-  const { state: flushState, handleFlush } = useFlush(space);
-  const extensions = useMatcherExtension(space);
-  const editorRef = useRef<ChatEditorController>(null);
-
-  return (
-    <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
-      <ChatEditor
-        ref={editorRef}
-        autoFocus
-        placeholder='Search'
-        extensions={extensions}
-        fireIfEmpty
-        onSubmit={onSubmit}
-      />
-      <Toolbar.IconButton
-        icon='ph--magnifying-glass--regular'
-        iconOnly
-        label='Search'
-        onClick={() => onSubmit?.(editorRef.current?.getText() ?? '')}
-      />
-      <Toolbar.IconButton
-        disabled={flushState === 'flushing'}
-        icon={Match.value(flushState).pipe(
-          Match.when('idle', () => 'ph--floppy-disk--regular'),
-          Match.when('flushing', () => 'ph--spinner--regular'),
-          Match.when('flushed', () => 'ph--check--regular'),
-          Match.exhaustive,
-        )}
-        iconOnly
-        label='flush'
-        onClick={handleFlush}
-      />
-    </Toolbar.Root>
-  );
-};

package/src/stories/components/LoggingContainer.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { Toolbar } from '@dxos/react-ui';
-
-import { Timeline } from '../../components';
-
-import { type ComponentProps } from './types';
-
-export const LoggingContainer = (_: ComponentProps) => {
-  return (
-    <div className='flex flex-col h-full'>
-      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>Timeline</Toolbar.Root>
-      <Timeline branches={[]} commits={[]} />
-    </div>
-  );
-};

package/src/stories/components/SurfaceContainer.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { AiContextBinder } from '@dxos/assistant';
-import { Filter, Obj, Ref, type Type } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { useQuery } from '@dxos/react-client/echo';
-import { useAsyncState } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { Assistant } from '../../types';
-
-import { type ComponentProps } from './types';
-
-/**
- * Shows the surface relating to the first bound object to the curent chat.
- */
-export const SurfaceContainer = ({ space, debug }: ComponentProps) => {
-  const chats = useQuery(space, Filter.type(Assistant.Chat));
-  const [objects] = useAsyncState<Type.Expando[]>(async () => {
-    if (!chats.length) {
-      return [];
-    }
-
-    // Get the latest chat (is this deterministic?)
-    const chat = chats[chats.length - 1];
-    const binder = new AiContextBinder(chat.queue.target!);
-    const refs = binder.objects.value;
-    const objects = await Ref.Array.loadAll(refs);
-    // TODO(burdon): Auto log meta for ECHO objects?
-    log('loaded', { objects: objects.map((obj) => ({ typename: Obj.getTypename(obj), id: obj.id })) });
-    return objects;
-  }, [chats]);
-
-  // TODO(burdon): Specify role hint to hide toolbar.
-  return (
-    <div className='flex flex-col bs-full overflow-y-auto divide-y divide-separator'>
-      {objects?.map((object) => (
-        <div key={object.id} className='group contents'>
-          {debug && (
-            <div
-              className={mx(
-                'flex gap-2 items-center text-xs justify-center',
-                'text-subdued group-first:border-none border-t border-subduedSeparator',
-              )}
-            >
-              <span>{Obj.getTypename(object)}</span>
-              <span>{object.id}</span>
-            </div>
-          )}
-          <Surface role='section' limit={1} data={{ subject: object }} />
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/stories/components/TasksContainer.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React from 'react';
-
-import { Filter, Obj } from '@dxos/echo';
-import { Markdown } from '@dxos/plugin-markdown/types';
-import { createDocAccessor, useQuery } from '@dxos/react-client/echo';
-import { Toolbar, useThemeContext } from '@dxos/react-ui';
-import {
-  Editor,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  outliner,
-} from '@dxos/react-ui-editor';
-
-import { type ComponentProps } from './types';
-
-export const TasksContainer = ({ space }: ComponentProps) => {
-  const { themeMode } = useThemeContext();
-  const [document] = useQuery(space, Filter.type(Markdown.Document));
-  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(),
-        ]}
-      />
-    </>
-  );
-};

package/src/stories/components/index.ts

@@ -1,12 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './types';
-
-export * from './BlueprintContainer';
-export * from './ChatContainer';
-export * from './GraphContainer';
-export * from './LoggingContainer';
-export * from './SurfaceContainer';
-export * from './TasksContainer';