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

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

package/src/stories/components/GraphContainer.tsx

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

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

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

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

@@ -0,0 +1,12 @@
+//
+// 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';

package/src/stories/components/types.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Space } from '@dxos/client/echo';
+
+export type ComponentProps = {
+  space: Space;
+  debug?: boolean;
+  onEvent?: (event: string) => void;
+};

package/src/stories/hooks/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useFlush';
+export * from './useMatcherExtension';

package/src/stories/hooks/useFlush.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useRef, useState } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+
+export const useFlush = (space?: Space) => {
+  const [state, setState] = useState<'idle' | 'flushing' | 'flushed'>('idle');
+  const resetTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const handleFlush = useCallback(() => {
+    if (!space) {
+      return;
+    }
+
+    queueMicrotask(async () => {
+      if (resetTimer.current) {
+        clearTimeout(resetTimer.current);
+      }
+
+      setState('flushing');
+      await space.db.flush();
+      setState('flushed');
+
+      resetTimer.current = setTimeout(() => {
+        setState('idle');
+        resetTimer.current = null;
+      }, 1_000);
+    });
+  }, [space]);
+
+  return { state, handleFlush };
+};

package/src/stories/hooks/useMatcherExtension.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+// TODO(burdon): Move def to @dxos/echo.
+import { useMemo } from 'react';
+
+import { type Space } from '@dxos/client/echo';
+import { Type } from '@dxos/echo';
+import { type TypeaheadContext, matchCompletion, staticCompletion, typeahead } from '@dxos/react-ui-editor';
+
+export const useMatcherExtension = (space: Space) => {
+  return useMemo(() => {
+    const handleComplete = ({ line }: TypeaheadContext) => {
+      const words = line.split(/\s+/).filter(Boolean);
+      if (words.length > 0) {
+        const word = words.at(-1)!;
+
+        // Match type.
+        const match = word.match(/^type:(.+)/);
+        if (match) {
+          const part = match[1];
+          for (const schema of space?.db.graph.schemaRegistry.schemas ?? []) {
+            const typename = Type.getTypename(schema);
+            if (typename) {
+              const completion = matchCompletion(typename, part);
+              if (completion) {
+                return completion;
+              }
+            }
+          }
+        }
+
+        // Match static.
+        return staticCompletion(['type:', 'AND', 'OR', 'NOT'])({ line });
+      }
+    };
+
+    return [
+      typeahead({
+        onComplete: handleComplete,
+      }),
+    ];
+  }, [space]);
+};

package/src/stories/{test-data.ts → testing/data.ts}

@@ -3,10 +3,12 @@
 //
 
 import { type Live, type Space } from '@dxos/client/echo';
-import { Obj, Type, Relation } from '@dxos/echo';
+import { Obj, Relation, type Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { DataType } from '@dxos/schema';
 
+export const testTypes = [DataType.Organization, DataType.Person, DataType.Employer, DataType.HasConnection];
+
 const organizations: (Type.Properties<DataType.Organization> & { id: string })[] = [
   { id: 'dxos', name: 'DXOS', website: 'https://dxos.org' },
   { id: 'socket_supply', name: 'Socket Supply', website: 'https://socketsupply.com' },
@@ -41,8 +43,8 @@ const people: (Type.Properties<DataType.Person> & { id: string })[] = [
 ];
 
 const testObjects: Record<string, any[]> = {
-  [Type.getTypename(DataType.Organization)!]: organizations,
-  [Type.getTypename(DataType.Person)!]: people,
+  [DataType.Organization.typename]: organizations,
+  [DataType.Person.typename]: people,
 };
 
 const testRelationships: Record<
@@ -52,8 +54,8 @@ const testRelationships: Record<
     target: string;
   } & Record<string, any>)[]
 > = {
-  [Type.getTypename(DataType.Employer)!]: [
-    // @eslint-disable-next-line
+  [DataType.Employer.typename]: [
+    // prettier-ignore
     { source: 'rich_burdon', target: 'dxos' },
     { source: 'rich_burdon', target: 'google', active: false }, // TODO(burdon): Should not contribute to force.
     { source: 'rich_burdon', target: 'deshaw', active: false },
@@ -75,13 +77,13 @@ const testRelationships: Record<
   ],
 
   // TODO(burdon): Limit graph view to selected relationship types.
-  [Type.getTypename(DataType.HasConnection)!]: [
-    //
+  [DataType.HasConnection.typename]: [
+    // prettier-ignore
     { kind: 'partner', source: 'dxos', target: 'ink_and_switch' },
     { kind: 'partner', source: 'dxos', target: 'effectful' },
     { kind: 'partner', source: 'dxos', target: 'socket_supply' },
 
-    //
+    // prettier-ignore
     { kind: 'investor', source: 'blueyard', target: 'dxos' },
     { kind: 'investor', source: 'blueyard', target: 'protocol_labs' },
     { kind: 'investor', source: 'protocol_labs', target: 'dxos' },

package/src/stories/testing/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './data';
+export * from './testing';

package/src/stories/testing/testing.tsx

@@ -0,0 +1,162 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  Capabilities,
+  Events,
+  IntentPlugin,
+  type Plugin,
+  SettingsPlugin,
+  contributes,
+  defineModule,
+  definePlugin,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AiContextBinder } from '@dxos/assistant';
+import {
+  DESIGN_BLUEPRINT,
+  PLANNING_BLUEPRINT,
+  RESEARCH_BLUEPRINT,
+  readDocument,
+  readTasks,
+  remoteServiceEndpoints,
+  research,
+  updateDocument,
+  updateTasks,
+} from '@dxos/assistant-testing';
+import { Blueprint } from '@dxos/blueprints';
+import { type Space } from '@dxos/client/echo';
+import { Obj, Ref } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { type ClientPluginOptions } from '@dxos/plugin-client/types';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { Config } from '@dxos/react-client';
+import { type DataType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { AssistantPlugin } from '../../AssistantPlugin';
+import { Assistant } from '../../types';
+
+// TODO(burdon): Factor out.
+export const config = {
+  remote: new Config({
+    runtime: {
+      services: {
+        ai: {
+          // TODO(burdon): Normalize props ('url'?)
+          server: remoteServiceEndpoints.ai,
+        },
+        edge: {
+          url: remoteServiceEndpoints.edge,
+        },
+      },
+    },
+  }),
+  persistent: new Config({
+    runtime: {
+      client: {
+        storage: {
+          persistent: true,
+        },
+      },
+      services: {
+        ai: {
+          server: remoteServiceEndpoints.ai,
+        },
+        edge: {
+          url: remoteServiceEndpoints.edge,
+        },
+      },
+    },
+  }),
+};
+
+type DecoratorsProps = Omit<ClientPluginOptions, 'onClientInitialized' | 'onSpacesReady'> & {
+  plugins?: Plugin[];
+  accessTokens?: DataType.AccessToken[];
+  onInit?: (props: { space: Space; chat: Assistant.Chat; binder: AiContextBinder }) => Promise<void>;
+};
+
+/**
+ * Create storybook decorators.
+ */
+export const getDecorators = ({ types = [], plugins = [], accessTokens = [], onInit, ...props }: DecoratorsProps) => [
+  withPluginManager({
+    plugins: [
+      // System plugins.
+      AttentionPlugin(),
+      GraphPlugin(),
+      IntentPlugin(),
+      SettingsPlugin(),
+      SpacePlugin(),
+      ClientPlugin({
+        types: [Markdown.Document, Assistant.Chat, Blueprint.Blueprint, ...types],
+        onClientInitialized: async ({ client }) => {
+          log.info('onClientInitialized', { identity: client.halo.identity.get()?.did });
+          // Abort if already initialized.
+          if (client.halo.identity.get()) {
+            return;
+          }
+
+          await client.halo.createIdentity();
+          await client.spaces.waitUntilReady();
+
+          const space = client.spaces.default;
+          // TODO(burdon): Should not require this.
+          //  ERROR: invariant violation: Database was not initialized with root object.
+          // TODO(burdon): onSpacesReady is never called.
+          await space.waitUntilReady();
+
+          // Add tokens.
+          for (const accessToken of accessTokens) {
+            space.db.add(Obj.clone(accessToken));
+          }
+
+          // Create chat and queue.
+          const chat = space.db.add(
+            Obj.make(Assistant.Chat, {
+              queue: Ref.fromDXN(space.queues.create().dxn),
+            }),
+          );
+
+          await space.db.flush({ indexes: true });
+          await onInit?.({ space, chat, binder: new AiContextBinder(await chat.queue.load()) });
+          await space.db.flush({ indexes: true });
+        },
+        ...props,
+      }),
+
+      // User plugins.
+      AssistantPlugin(),
+
+      // Custom.
+      definePlugin({ id: 'example.com/plugin/testing', name: 'Testing' }, [
+        defineModule({
+          id: 'example.com/plugin/testing/module/testing',
+          activatesOn: Events.SetupArtifactDefinition,
+          activate: () => [
+            contributes(Capabilities.BlueprintDefinition, DESIGN_BLUEPRINT),
+            contributes(Capabilities.BlueprintDefinition, PLANNING_BLUEPRINT),
+            contributes(Capabilities.BlueprintDefinition, RESEARCH_BLUEPRINT),
+            contributes(Capabilities.Functions, [readDocument, updateDocument]),
+            contributes(Capabilities.Functions, [readTasks, updateTasks]),
+            contributes(Capabilities.Functions, [research]),
+          ],
+        }),
+      ]),
+
+      // Test-specific.
+      ...plugins,
+    ],
+  }),
+  withLayout({
+    fullscreen: true,
+    classNames: 'justify-center bg-deckSurface',
+  }),
+  withTheme,
+];

package/src/testing/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './test-blueprint';
+export * from './test-sequence';
 export * from './test-functions';
 export * from './test-services';