@dxos/plugin-assistant 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/stories/components/ChatContainer.tsx

@@ -1,74 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Filter } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { IconButton, Popover } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { Chat, Toolbar } from '../../components';
-import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
-import { useOnline, usePresets } from '../../hooks';
-import { Assistant } from '../../types';
-
-import { LoggingContainer } from './LoggingContainer';
-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 = chats.at(-1);
-
-  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 : (
-    <StackItem.Content toolbar>
-      <div role='none' className='flex items-center gap-2 pie-2'>
-        <Toolbar classNames='is-min grow' chat={chat} onReset={() => onEvent?.('reset')} />
-        <Popover.Root>
-          <Popover.Trigger asChild>
-            <IconButton icon='ph--sort-ascending--regular' label='Logs' variant='ghost' />
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content>
-              <LoggingContainer space={space} />
-              <Popover.Arrow />
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-        <div className='truncate text-subdued'>{chat.name ?? 'no name'}</div>
-        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Update name' onClick={handleUpdateName} />
-      </div>
-
-      <div role='none' className='relative'>
-        <Chat.Root chat={chat} processor={processor} classNames='absolute inset-0'>
-          <Chat.Thread />
-          {/* <ChatProgress chat={chat} /> */}
-          <div className='flex justify-center p-4'>
-            <Chat.Prompt
-              {...chatProps}
-              outline
-              classNames='max-is-prose'
-              preset={preset?.id}
-              online={online}
-              onOnlineChange={setOnline}
-            />
-          </div>
-        </Chat.Root>
-      </div>
-    </StackItem.Content>
-  );
-};

package/src/stories/components/ChessContainer.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter } from '@dxos/echo';
-import { Chess } from '@dxos/plugin-chess';
-import { useQuery } from '@dxos/react-client/echo';
-
-import type { ComponentProps } from './types';
-
-export const ChessContainer: FC<ComponentProps> = ({ space }) => {
-  const chess = useQuery(space, Filter.type(Chess.Game));
-  return <Surface role='section' limit={1} data={{ subject: chess.at(-1) }} />;
-};

package/src/stories/components/CommentsContainer.tsx

@@ -1,25 +0,0 @@
-//
-// 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/DebugCard.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Obj, type Relation } from '@dxos/echo';
-import { type ObjectId } from '@dxos/keys';
-
-interface DebugCardProps {
-  obj: Obj.Any | Relation.Any;
-}
-
-export const DebugCard = ({ obj }: DebugCardProps) => {
-  return (
-    <div className='border border-separator rounded-lg p-4 bg-surface'>
-      <div className='flex items-center justify-between mb-2'>
-        <h3 className='font-medium text-lg'>{Obj.getLabel(obj)}</h3>
-        <p className='flex gap-2 items-center'>
-          <span className='text-sm font-mono dx-text-hue' data-hue={colors[insecureIdHash(obj.id, colors.length)]}>
-            #{obj.id.slice(-6)}
-          </span>
-          <span className='text-sm text-description bg-neutral-800 px-2 py-1 rounded'>{Obj.getTypename(obj)}</span>
-        </p>
-      </div>
-      <details className='group'>
-        <summary className='cursor-pointer text-sm text-primary hover:text-primaryHover'>View JSON</summary>
-        <pre className='mt-2 text-xs p-3 rounded overflow-x-auto'>{JSON.stringify(obj, null, 2)}</pre>
-      </details>
-    </div>
-  );
-};
-
-const insecureIdHash = (id: ObjectId, modulo: number) => {
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    const num = id.charCodeAt(i);
-    hash = (hash ^ num) | 0;
-  }
-  return Math.abs(hash) % modulo;
-};
-
-const colors = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-];

package/src/stories/components/GraphContainer.tsx

@@ -1,119 +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 { useMatcherExtension } from '@dxos/react-ui-components';
-import { type Expression, QueryParser, createFilter } from '@dxos/react-ui-components';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-
-import { useFlush } 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/InvocationsContainer.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { InvocationTraceContainer } from '@dxos/devtools';
-
-import type { ComponentProps } from './types';
-
-export const InvocationsContainer = ({ space }: ComponentProps) => {
-  return (
-    <div className='flex bs-full min-bs-[20rem] items-center justify-center'>
-      <InvocationTraceContainer space={space} />
-    </div>
-  );
-};

package/src/stories/components/LoggingContainer.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Filter } from '@dxos/echo';
-import { Obj } from '@dxos/echo';
-import { InvocationTraceStartEvent } from '@dxos/functions';
-import { type Queue, useQuery, useQueue } 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, traceQueue }: ComponentProps & { traceQueue?: Queue }) => {
-  const [chat] = useQuery(space, Filter.type(Assistant.Chat));
-  const invocations =
-    useQueue(space.properties?.invocationTraceQueue?.dxn)?.objects.filter(Obj.instanceOf(InvocationTraceStartEvent)) ??
-    [];
-  const { branches, commits } = useExecutionGraph(
-    traceQueue ?? invocations?.at(-1)?.invocationTraceQueue?.target ?? chat?.traceQueue?.target,
-    true,
-  );
-
-  return (
-    <div className='flex flex-col h-full'>
-      <Timeline branches={branches} commits={commits} />
-    </div>
-  );
-};

package/src/stories/components/MessageContainer.tsx

@@ -1,22 +0,0 @@
-//
-// 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]);
-
-  return <Surface role='section' data={data} limit={1} />;
-};

package/src/stories/components/PromptContainer.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Predicate } from 'effect';
-import React from 'react';
-
-import { Prompt } from '@dxos/blueprints';
-import { Filter } from '@dxos/echo';
-import { type Space, createDocAccessor, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-export const PromptContainer = ({ space }: { space: Space }) => {
-  const [prompt] = useQuery(space, Filter.type(Prompt.Prompt));
-  if (!prompt) {
-    return null;
-  }
-  return (
-    <div style={{ minHeight: '300px' }}>
-      <PromptEditor prompt={prompt} />
-    </div>
-  );
-};
-
-const PromptEditor = ({ prompt, classNames }: ThemedClassName<{ prompt: Prompt.Prompt }>) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(() => {
-    return {
-      initialValue: prompt.instructions ?? '',
-      extensions: [
-        createDataExtensions({ id: prompt.id, text: createDocAccessor(prompt, ['instructions']) }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineNumbers: true,
-          lineWrapping: true,
-        }),
-        createThemeExtensions({ themeMode }),
-        createMarkdownExtensions(),
-      ].filter(Predicate.isTruthy),
-    };
-  }, [themeMode, prompt]);
-
-  return <div ref={parentRef} className={mx('bs-full overflow-hidden', classNames)} />;
-};

package/src/stories/components/ResearchInputStack.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Filter } from '@dxos/echo';
-import { useQuery, useQueue } from '@dxos/react-client/echo';
-
-import { ResearchInputQueue } from '../testing';
-
-import { DebugCard } from './DebugCard';
-import type { ComponentProps } from './types';
-
-export const ResearchInputStack = ({ space }: ComponentProps) => {
-  const [researchInput] = useQuery(space, Filter.type(ResearchInputQueue));
-  const queue = useQueue(researchInput?.queue.dxn);
-
-  return (
-    <div className='p-4 overflow-y-auto h-full'>
-      <ul className='space-y-4 '>
-        {queue?.objects.map((object) => (
-          <li key={object.id}>
-            <DebugCard obj={object} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/components/ResearchOutputStack.tsx

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { ResearchGraph } from '@dxos/assistant-testing';
-import { Filter } from '@dxos/echo';
-import { useQuery, useQueue } from '@dxos/react-client/echo';
-
-import type { ComponentProps } from './types';
-
-export const ResearchOutputStack = ({ space }: ComponentProps) => {
-  const [researchGraph] = useQuery(space, Filter.type(ResearchGraph));
-  const queue = useQueue(researchGraph?.queue.dxn);
-
-  return (
-    <div className='p-4 overflow-y-auto h-full'>
-      <ul className='space-y-4 '>
-        {queue?.objects.map((object) => (
-          <li key={object.id}>
-            <Surface role='card' data={{ subject: object }} limit={1} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/components/TasksContainer.tsx

@@ -1,49 +0,0 @@
-//
-// 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(),
-          createThemeExtensions({ themeMode }),
-          outliner(),
-        ]}
-      />
-    </>
-  );
-};

package/src/stories/components/TokenManagerContainer.tsx

@@ -1,14 +0,0 @@
-//
-// 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/TriggersContainer.tsx

@@ -1,75 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Effect } from 'effect';
-import React from 'react';
-
-import { Filter } from '@dxos/echo';
-import { FunctionTrigger, TriggerDispatcher } from '@dxos/functions';
-import { AutomationPanel } from '@dxos/plugin-automation';
-import { type Space, useQuery } from '@dxos/react-client/echo';
-import { Input, Toolbar, useAsyncState } from '@dxos/react-ui';
-import { useTranslation } from '@dxos/react-ui';
-
-import { useComputeRuntimeCallback } from '../../hooks';
-import { meta } from '../../meta';
-
-import type { ComponentProps } from './types';
-
-export const TriggersContainer = ({ space }: ComponentProps) => {
-  const { t } = useTranslation(meta.id);
-  const { triggers, isRunning, start, stop } = useTriggerRuntimeControls(space);
-  return (
-    <div className='flex flex-col p-2'>
-      <Toolbar.Root>
-        <Input.Root>
-          <div>{isRunning ? t('trigger dispatcher running') : t('trigger dispatcher stopped')}</div>
-          <Input.Switch classNames='mis-2 mie-2' checked={isRunning} onCheckedChange={isRunning ? stop : start} />
-        </Input.Root>
-      </Toolbar.Root>
-
-      <AutomationPanel classNames='p-2' space={space} />
-    </div>
-  );
-};
-
-interface TriggerRuntimeControls {
-  triggers: FunctionTrigger[];
-  isRunning: boolean;
-  start: () => void;
-  stop: () => void;
-}
-
-export const useTriggerRuntimeControls = (space: Space): TriggerRuntimeControls => {
-  const triggers = useQuery(space, Filter.type(FunctionTrigger));
-
-  const [isRunningState, setIsRunningState] = useAsyncState(
-    useComputeRuntimeCallback(space, () => TriggerDispatcher.pipe(Effect.map((t) => t.running))),
-  );
-
-  const start = useComputeRuntimeCallback(
-    space,
-    Effect.fnUntraced(function* () {
-      const dispatcher = yield* TriggerDispatcher;
-      yield* dispatcher.start();
-      setIsRunningState(true);
-    }),
-  );
-
-  const stop = useComputeRuntimeCallback(
-    space,
-    Effect.fnUntraced(function* () {
-      const dispatcher = yield* TriggerDispatcher;
-      yield* dispatcher.stop();
-      setIsRunningState(false);
-    }),
-  );
-
-  return {
-    triggers,
-    isRunning: isRunningState ?? false,
-    start: () => void start(),
-    stop: () => void stop(),
-  };
-};

package/src/stories/components/index.ts

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './types';
-
-export * from './BlueprintContainer';
-export * from './ChatContainer';
-export * from './CommentsContainer';
-export * from './GraphContainer';
-export * from './InvocationsContainer';
-export * from './LoggingContainer';
-export * from './MessageContainer';
-export * from './ResearchInputStack';
-export * from './ResearchOutputStack';
-export * from './PromptContainer';
-export * from './TasksContainer';
-export * from './TokenManagerContainer';
-export * from './TriggersContainer';
-export * from './ChessContainer';

package/src/stories/components/types.ts

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