@dxos/plugin-assistant 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/src/stories/components/BlueprintContainer.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton } from '@dxos/react-ui';
+
+import { Chat, Toolbar } from '../../components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
+import { useOnline, usePresets } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const ChatContainer = ({ space, onEvent }: ComponentProps) => {
+  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, chat });
+  const processor = useChatProcessor({ chat, preset, services, blueprintRegistry });
+
+  const handleUpdateName = useCallback(() => {
+    if (chat) {
+      void processor?.updateName(chat);
+    }
+  }, [processor, chat]);
+
+  return !chat || !processor ? null : (
+    <>
+      <div className='grid grid-cols-[1fr_auto] items-center'>
+        <Toolbar chat={chat} onReset={() => onEvent?.('reset')} />
+        <div className='flex shrink-0 gap-2 max-w-[20rem] pie-2 items-center'>
+          <div className='truncate text-subdued'>{chat.name ?? 'no name'}</div>
+          <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Update name' onClick={handleUpdateName} />
+        </div>
+      </div>
+
+      <Chat.Root chat={chat} processor={processor}>
+        <Chat.Thread />
+        {/* <ChatProgress chat={chat} /> */}
+        <div className='p-4'>
+          <Chat.Prompt {...chatProps} outline preset={preset?.id} online={online} onOnlineChange={setOnline} />
+        </div>
+      </Chat.Root>
+    </>
+  );
+};

package/src/stories/components/CommentsContainer.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+
+import { useContextBinder } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const CommentsContainer = ({ space }: ComponentProps) => {
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const binder = useContextBinder(chats.at(-1));
+  const object = binder?.objects.value[0].target;
+  const data = useMemo(() => ({ subject: 'comments', companionTo: object }), [object]);
+  if (!object) {
+    return null;
+  }
+
+  return <Surface role='article' data={data} />;
+};

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 { useFlush, useMatcherExtension } from '../../hooks';
+import { type Expression, QueryParser, createFilter } from '../../parser';
+
+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,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Timeline } from '@dxos/react-ui-components';
+
+import { useExecutionGraph } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const LoggingContainer = ({ space }: ComponentProps) => {
+  const [chat] = useQuery(space, Filter.type(Assistant.Chat));
+  const { branches, commits } = useExecutionGraph(chat?.traceQueue, true);
+
+  return <Timeline branches={branches} commits={commits} />;
+};

package/src/stories/components/MessageContainer.tsx

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { InboxCapabilities } from '@dxos/plugin-inbox';
+import { Mailbox } from '@dxos/plugin-inbox/types';
+import { fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+
+import { type ComponentProps } from './types';
+
+export const MessageContainer = ({ space }: ComponentProps) => {
+  const [mailbox] = useQuery(space, Filter.type(Mailbox.Mailbox));
+  const state = useCapability(InboxCapabilities.MailboxState);
+  const message = mailbox && state[fullyQualifiedId(mailbox)];
+  const data = useMemo(() => ({ subject: message ?? 'message', companionTo: mailbox }), [message, mailbox]);
+
+  // TODO(wittjosiah): Fix styles to fill the container.
+  return (
+    <div className='flex h-[30rem]'>
+      <Surface role='article' data={data} limit={1} />
+    </div>
+  );
+};

package/src/stories/components/SurfaceContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { useSignalsMemo } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { useContextBinder } from '../../hooks';
+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 binder = useContextBinder(chats.at(-1));
+  const objects = useSignalsMemo(
+    () => binder?.objects.value.map((ref) => ref.target).filter(isNonNullable) ?? [],
+    [binder],
+  );
+
+  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,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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/TokenManagerContainer.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { meta } from '@dxos/plugin-token-manager';
+
+export const TokenManagerContainer = () => {
+  const data = useMemo(() => ({ subject: `${meta.id}/space-settings` }), []);
+
+  return <Surface role='article' data={data} limit={1} />;
+};

package/src/stories/components/index.ts

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

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/testing/data.ts

@@ -0,0 +1,142 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Live, type Space } from '@dxos/client/echo';
+import { Obj, Relation, type Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { DataType } from '@dxos/schema';
+
+// import { faker } from '@dxos/random';
+// import { DataType } from '@dxos/schema';
+// import { type ValueGenerator, createGenerator } from '@dxos/schema/testing';
+// faker.seed(1);
+// const generator = faker as any as ValueGenerator;
+// const objectGenerator = createGenerator(generator, DataType.Organization, { force: true });
+
+export const testTypes: Type.Obj.Any[] = [
+  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' },
+  { id: 'ink_and_switch', name: 'Ink & Switch', website: 'https://inkandswitch.com' },
+  { id: 'effectful', name: 'Effectful', website: 'https://effect.co' },
+  { id: 'blueyard', name: 'Blue Yard', website: 'https://blueyard.com' },
+  { id: 'backed', name: 'Backed', website: 'https://backed.vc' },
+  { id: 'protocol_labs', name: 'Protocol Labs', website: 'https://protocol.ai' },
+  { id: 'newlab', name: 'Newlab', website: 'https://newlab.com' },
+  { id: 'google', name: 'Google', website: 'https://google.com' },
+  { id: 'microsoft', name: 'Microsoft', website: 'https://microsoft.com' },
+  { id: 'openai', name: 'OpenAI', website: 'https://openai.com' },
+  { id: 'anthropic', name: 'Anthropic', website: 'https://anthropic.com' },
+  { id: 'amazon', name: 'Amazon', website: 'https://amazon.com' },
+  { id: 'deshaw', name: 'D. E. Shaw & Co.', website: 'https://deshaw.com' },
+];
+
+const people: (Type.Properties<DataType.Person> & { id: string })[] = [
+  { id: 'rich_burdon', fullName: 'Rich Burdon' },
+  { id: 'josiah_witt', fullName: 'Josiah Witt' },
+  { id: 'dima_dmaretskyi', fullName: 'Dima Maretskyi' },
+  { id: 'chad_fowler', fullName: 'Chad Fowler' },
+  { id: 'ciaran_oleary', fullName: "Ciarán O'Leary" },
+  { id: 'jason_whitmire', fullName: 'Jason Whitmire' },
+  { id: 'alex_brunicki', fullName: 'Alex Brunicki' },
+  { id: 'andre_de_haes', fullName: 'Andre de Haes' },
+  { id: 'scott_cohen', fullName: 'Scott Cohen' },
+  { id: 'juan_benet', fullName: 'Juan Benet' },
+  { id: 'satya_nadella', fullName: 'Satya Nadella' },
+  { id: 'kevin_scott', fullName: 'Kevin Scott' },
+  { id: 'jeff_bezos', fullName: 'Jeff Bezos' },
+];
+
+const testObjects: Record<string, any[]> = {
+  [DataType.Organization.typename]: organizations,
+  [DataType.Person.typename]: people,
+};
+
+const testRelationships: Record<
+  string,
+  ({
+    source: string;
+    target: string;
+  } & Record<string, any>)[]
+> = {
+  [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 },
+    { source: 'josiah_witt', target: 'dxos' },
+    { source: 'dima_dmaretskyi', target: 'dxos' },
+    { source: 'chad_fowler', target: 'blueyard' },
+    { source: 'chad_fowler', target: 'microsoft', active: false },
+    { source: 'ciaran_oleary', target: 'blueyard' },
+    { source: 'jason_whitmire', target: 'blueyard' },
+    { source: 'juan_benet', target: 'protocol_labs' },
+    { source: 'alex_brunicki', target: 'backed' },
+    { source: 'andre_de_haes', target: 'backed' },
+    { source: 'scott_cohen', target: 'newlab' },
+    { source: 'satya_nadella', target: 'microsoft' },
+    { source: 'kevin_scott', target: 'microsoft' },
+    { source: 'kevin_scott', target: 'google', active: false },
+    { source: 'jeff_bezos', target: 'amazon' },
+    { source: 'jeff_bezos', target: 'deshaw', active: false },
+  ],
+
+  // TODO(burdon): Limit graph view to selected relationship types.
+  [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' },
+    { kind: 'investor', source: 'backed', target: 'dxos' },
+    { kind: 'investor', source: 'newlab', target: 'dxos' },
+    { kind: 'investor', source: 'microsoft', target: 'openai' },
+    { kind: 'investor', source: 'google', target: 'anthropic' },
+    { kind: 'investor', source: 'amazon', target: 'anthropic' },
+  ],
+};
+
+export const addTestData = async (space: Space): Promise<void> => {
+  const objectMap = new Map<string, Live<any>>();
+
+  for (const [typename, objects] of Object.entries(testObjects)) {
+    const schema = space.db.graph.schemaRegistry.getSchema(typename);
+    invariant(schema, `Schema not found: ${typename}`);
+    for (const { id, ...data } of objects) {
+      const object = space.db.add(Obj.make(schema, data));
+      objectMap.set(id, object);
+    }
+  }
+
+  for (const [typename, relationships] of Object.entries(testRelationships)) {
+    const schema = space.db.graph.schemaRegistry.getSchema(typename);
+    invariant(schema, `Schema not found: ${typename}`);
+
+    for (const { source, target, ...data } of relationships) {
+      const sourceObject = objectMap.get(source);
+      const targetObject = objectMap.get(target);
+      invariant(sourceObject, `Source object not found: ${source}`);
+      invariant(targetObject, `Target object not found: ${target}`);
+
+      space.db.add(
+        Relation.make(schema, {
+          // TODO(burdon): Test source/target types match.
+          [Relation.Source]: sourceObject,
+          [Relation.Target]: targetObject,
+          ...data,
+        }),
+      );
+    }
+  }
+};

package/src/stories/testing/index.ts

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