@dxos/plugin-assistant 0.8.4-main.3eb6e50203 → 0.8.4-main.422d1c7879

package/src/components/Chat/Chat.tsx

@@ -14,18 +14,19 @@ import { type Chat as ChatModule } from '@dxos/assistant-toolkit';
 import { Event } from '@dxos/async';
 import { type Database, Filter, Obj } from '@dxos/echo';
 import { useVoiceInput } from '@dxos/plugin-transcription';
-import { useQuery } from '@dxos/react-client/echo';
+import { type Queue, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Input, type ThemedClassName, useDynamicRef, useTranslation } from '@dxos/react-ui';
 import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
 import { type MarkdownStreamController } from '@dxos/react-ui-components';
-import { MenuProvider, ToolbarMenu } from '@dxos/react-ui-menu';
+import { Menu, MenuRootProps } from '@dxos/react-ui-menu';
 import { Message } from '@dxos/types';
-import { mx } from '@dxos/ui-theme';
-import { isTruthy } from '@dxos/util';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { isTruthy, trim } from '@dxos/util';
+
+import { useChatToolbarActions } from '#hooks';
+import { meta } from '#meta';
 
-import { useChatToolbarActions } from '../../hooks';
-import { meta } from '../../meta';
 import { type AiChatProcessor } from '../../processor';
 import {
   ChatActions,
@@ -36,7 +37,6 @@ import {
   ChatStatusIndicator,
 } from '../ChatPrompt';
 import { ChatThread as NaturalChatThread, type ChatThreadProps as NaturalChatThreadProps } from '../ChatThread';
-
 import { type ChatEvent } from './events';
 
 //
@@ -62,46 +62,61 @@ export const [ChatContextProvider, useChatContext] = createContext<ChatContextVa
 
 type ChatRootProps = PropsWithChildren<
   Pick<ChatContextValue, 'db' | 'chat' | 'processor'> & {
+    queue?: Queue;
     onEvent?: (event: ChatEvent) => void;
   }
 >;
 
-const ChatRoot = ({ children, chat, processor, onEvent, ...props }: ChatRootProps) => {
+const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatRootProps) => {
   const [debug, setDebug] = useState(false);
   const pending = useAtomValue(processor.messages);
   const streaming = useAtomValue(processor.streaming);
   const lastPrompt = useRef<string | undefined>(undefined);
 
   // Messages.
-  const storedMessages = useQuery(chat?.queue?.target, Filter.type(Message.Message));
+  const storedMessages = useQuery(queue, Filter.type(Message.Message));
   const messages = useMemo(() => {
     return Array.dedupeWith([...storedMessages, ...pending], ({ id: a }, { id: b }) => a === b);
   }, [storedMessages, pending]);
 
+  // Debug.
+  const dump = useCallback(async () => {
+    const objects = processor.context.getObjects();
+    const blueprints = processor.context.getBlueprints();
+    const system = await processor.getSystemPrompt();
+    const tools = await processor.getTools();
+
+    // eslint-disable-next-line no-console
+    // eslint-disable-next-line no-console
+    console.group('Chat', { objects, blueprints });
+    // eslint-disable-next-line no-console
+    console.log(trim`
+      System Prompt:
+      ${system}
+    `);
+    // eslint-disable-next-line no-console
+    console.log(trim`
+      Tools:
+      ${Object.values(tools)
+        .map((tool) => JSON.stringify(tool, null, 2))
+        .join('\n')}
+    `);
+    console.groupEnd();
+  }, [processor]);
+
   // Events.
   const event = useMemo(() => new Event<ChatEvent>(), []);
   useEffect(() => {
     return event.on((ev) => {
       switch (ev.type) {
         case 'toggle-debug': {
-          setDebug((current) => !current);
-          // Dump state to console.
-          queueMicrotask(async () => {
-            const objects = processor.context.getObjects();
-            const blueprints = processor.context.getBlueprints();
-            const tools = await processor.getTools();
-            const system = await processor.getSystemPrompt();
-            // eslint-disable-next-line no-console
-            console.log('Chat processor state:', { objects, blueprints });
-            // eslint-disable-next-line no-console
-            console.log(`
-              ==== System Prompt ====
-              ${system}
-              ==== Tools ====
-              ${Object.values(tools)
-                .map((tool) => JSON.stringify(tool, null, 2))
-                .join('\n')}
-            `);
+          setDebug((debug) => {
+            if (debug) {
+              return false;
+            } else {
+              void dump();
+              return true;
+            }
           });
           break;
         }
@@ -135,7 +150,7 @@ const ChatRoot = ({ children, chat, processor, onEvent, ...props }: ChatRootProp
 
       onEvent?.(ev);
     });
-  }, [event, processor, streaming, onEvent]);
+  }, [event, dump, processor, streaming, onEvent]);
 
   const db = props.db ?? (chat && Obj.getDatabase(chat));
 
@@ -156,21 +171,46 @@ const ChatRoot = ({ children, chat, processor, onEvent, ...props }: ChatRootProp
 
 ChatRoot.displayName = 'Chat.Root';
 
+//
+// Toolbar
+//
+
+const CHAT_TOOLBAR_NAME = 'Chat.Toolbar';
+
+type ChatToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
+  companionTo?: Obj.Unknown;
+};
+
+const ChatToolbar = composable<HTMLDivElement, ChatToolbarProps>(
+  ({ attendableId, companionTo, ...props }, forwardedRef) => {
+    const { chat } = useChatContext(CHAT_TOOLBAR_NAME);
+    const menuActions = useChatToolbarActions({ chat, companionTo });
+
+    return (
+      <Menu.Root {...menuActions} attendableId={attendableId}>
+        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+      </Menu.Root>
+    );
+  },
+);
+
+ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
+
 //
 // Viewport
 //
 
 const CHAT_VIEWPORT_NAME = 'Chat.Viewport';
 
-type ChatViewportProps = ThemedClassName<PropsWithChildren>;
+type ChatViewportProps = {};
 
-const ChatViewport = ({ classNames, children }: ChatViewportProps) => {
+const ChatViewport = composable<HTMLDivElement, ChatViewportProps>(({ children, ...props }, forwardedRef) => {
   return (
-    <div role='none' className={mx('flex flex-col bs-full is-full', classNames)}>
+    <div {...composableProps(props, { classNames: 'dx-expander flex flex-col' })} ref={forwardedRef}>
       {children}
     </div>
   );
-};
+});
 
 ChatViewport.displayName = CHAT_VIEWPORT_NAME;
 
@@ -362,9 +402,9 @@ const ChatPrompt = ({
     <div
       role='group'
       className={mx(
-        'flex flex-col is-full density-fine',
+        'flex flex-col w-full dx-density-fine',
         outline &&
-          'bg-groupSurface border border-subduedSeparator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded',
+          'bg-group-surface border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded-sm',
         classNames,
       )}
     >
@@ -374,8 +414,8 @@ const ChatPrompt = ({
           ref={editorRef}
           autoFocus
           lineWrapping
-          classNames='col-span-2 pbs-0.5'
-          placeholder={placeholder ?? t('prompt placeholder')}
+          classNames='col-span-2 pt-0.5'
+          placeholder={placeholder ?? t('prompt.placeholder')}
           extensions={extensions}
           onSubmit={handleSubmit}
         />
@@ -406,8 +446,8 @@ const ChatPrompt = ({
             {/* TODO(burdon): Move offline switch into dialog. */}
             {online !== undefined && (
               <Input.Root>
-                <Input.Label srOnly>{t('online switch label')}</Input.Label>
-                <Input.Switch classNames='mli-2' checked={online} onCheckedChange={onOnlineChange} />
+                <Input.Label srOnly>{t('online-switch.label')}</Input.Label>
+                <Input.Switch classNames='mx-2' checked={online} onCheckedChange={onOnlineChange} />
               </Input.Root>
             )}
           </ChatActions>
@@ -419,40 +459,16 @@ const ChatPrompt = ({
 
 ChatPrompt.displayName = CHAT_PROMPT_NAME;
 
-//
-// Toolbar
-//
-
-const CHAT_TOOLBAR_NAME = 'Chat.Toolbar';
-
-type ChatToolbarProps = ThemedClassName<{ companionTo?: Obj.Unknown }>;
-
-const ChatToolbar = ({ classNames, companionTo }: ChatToolbarProps) => {
-  const { chat } = useChatContext(CHAT_TOOLBAR_NAME);
-  const menu = useChatToolbarActions({ chat, companionTo });
-
-  return (
-    <MenuProvider
-      {...menu}
-      attendableId={companionTo ? Obj.getDXN(companionTo).toString() : chat ? Obj.getDXN(chat).toString() : ''}
-    >
-      <ToolbarMenu classNames={classNames} textBlockWidth />
-    </MenuProvider>
-  );
-};
-
-ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
-
 //
 // Chat
 //
 
 export const Chat = {
   Root: ChatRoot,
+  Toolbar: ChatToolbar,
   Viewport: ChatViewport,
   Thread: ChatThread,
   Prompt: ChatPrompt,
-  Toolbar: ChatToolbar,
 };
 
-export type { ChatRootProps, ChatViewportProps, ChatThreadProps, ChatPromptProps, ChatToolbarProps, ChatEvent };
+export type { ChatRootProps, ChatToolbarProps, ChatViewportProps, ChatThreadProps, ChatPromptProps, ChatEvent };

package/src/components/ChatProgress/ChatProgress.tsx

@@ -4,16 +4,19 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type Chat } from '@dxos/assistant-toolkit';
 import { addEventListener } from '@dxos/async';
+import { type Queue } from '@dxos/echo-db';
 import { ProgressBar, type ProgressBarProps, TextCrawl, useExecutionGraph } from '@dxos/react-ui-components';
 
 export type ChatProgressProps = {
-  chat: Chat.Chat;
+  traceQueue?: Queue;
 };
 
-export const ChatProgress = ({ chat }: ChatProgressProps) => {
-  const { commits } = useExecutionGraph(chat.traceQueue?.target, true);
+/**
+ * Displays execution progress from the space's invocation trace queue.
+ */
+export const ChatProgress = ({ traceQueue }: ChatProgressProps) => {
+  const { commits } = useExecutionGraph(traceQueue, true);
   const nodes = useMemo(() => commits.map((commit) => ({ id: commit.id, message: commit.message })), [commits]);
   const lines = useMemo(() => commits.map((commit) => commit.message), [commits]);
 
@@ -45,9 +48,9 @@ export const ChatProgress = ({ chat }: ChatProgressProps) => {
   }, [nodes.length]);
 
   return (
-    <div role='none' tabIndex={0} ref={ref} className='flex flex-col outline-none'>
+    <div role='none' tabIndex={0} ref={ref} className='flex flex-col outline-hidden'>
       <ProgressBar nodes={nodes} index={index} onSelect={handleSelect} />
-      <TextCrawl classNames='pis-4 text-sm text-description' lines={lines} autoAdvance />
+      <TextCrawl classNames='ps-4 text-sm text-description' lines={lines} autoAdvance />
     </div>
   );
 };

package/src/components/ChatPrompt/ChatActions.tsx

@@ -7,7 +7,8 @@ import React, { type PropsWithChildren } from 'react';
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+
 import { type ChatEvent } from '../Chat';
 
 export type ChatActionsProps = ThemedClassName<
@@ -15,15 +16,24 @@ export type ChatActionsProps = ThemedClassName<
     microphone?: boolean;
     recording?: boolean;
     processing?: boolean;
+    debug?: boolean;
     onEvent?: (event: ChatEvent) => void;
   }>
 >;
 
-export const ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }: ChatActionsProps) => {
+export const ChatActions = ({
+  classNames,
+  children,
+  microphone,
+  recording,
+  processing,
+  debug,
+  onEvent,
+}: ChatActionsProps) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div className={mx('flex items-center mie-1', classNames)}>
+    <div className={mx('flex items-center me-1', classNames)}>
       {children}
 
       <IconButton
@@ -31,7 +41,7 @@ export const ChatActions = ({ classNames, children, microphone, recording, proce
         variant='ghost'
         icon='ph--x--regular'
         iconOnly
-        label={t('cancel processing button')}
+        label={t('cancel-processing.button')}
         onClick={() => onEvent?.({ type: 'cancel' })}
       />
 
@@ -43,7 +53,7 @@ export const ChatActions = ({ classNames, children, microphone, recording, proce
           icon='ph--microphone--regular'
           iconOnly
           noTooltip
-          label={t('microphone button')}
+          label={t('microphone.button')}
           onMouseDown={() => onEvent?.({ type: 'record-start' })}
           onMouseUp={() => onEvent?.({ type: 'record-stop' })}
           onTouchStart={() => onEvent?.({ type: 'record-start' })}
@@ -51,13 +61,15 @@ export const ChatActions = ({ classNames, children, microphone, recording, proce
         />
       )}
 
-      <IconButton
-        variant='ghost'
-        icon='ph--wrench--regular'
-        iconOnly
-        label={t('debug button')}
-        onClick={() => onEvent?.({ type: 'toggle-debug' })}
-      />
+      {debug && (
+        <IconButton
+          variant='ghost'
+          icon='ph--wrench--regular'
+          iconOnly
+          label={t('debug.button')}
+          onClick={() => onEvent?.({ type: 'toggle-debug' })}
+        />
+      )}
     </div>
   );
 };

package/src/components/ChatPrompt/ChatOptions.stories.tsx

@@ -0,0 +1,122 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { capabilities } from '@dxos/assistant-toolkit/testing';
+import { Feed, Filter } from '@dxos/echo';
+import { ChessPlugin } from '@dxos/plugin-chess';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { MapPlugin } from '@dxos/plugin-map';
+import { TablePlugin } from '@dxos/plugin-table';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withTheme } from '@dxos/react-ui/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { useBlueprintRegistry, useContextBinder } from '#hooks';
+
+import { translations } from '../../translations';
+import { ChatOptions, ObjectsPanel, type ChatOptionsProps } from './ChatOptions';
+
+const presets = [
+  { id: 'edge-claude-sonnet', label: 'Edge · Claude Sonnet' },
+  { id: 'edge-gpt-4o', label: 'Edge · GPT-4o' },
+  { id: 'ollama-llama3', label: 'Ollama · Llama 3' },
+];
+
+type DefaultStoryProps = Pick<ChatOptionsProps, 'presets'>;
+
+const DefaultStory = ({ presets }: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+  const blueprintRegistry = useBlueprintRegistry();
+  const binder = useContextBinder(space, feed);
+  const [preset, setPreset] = useState(presets?.[0]?.id);
+  if (!space || !binder) {
+    return <Loading />;
+  }
+  return (
+    <ChatOptions
+      db={space.db}
+      context={binder}
+      blueprintRegistry={blueprintRegistry}
+      presets={presets}
+      preset={preset}
+      onPresetChange={setPreset}
+    />
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/ChatOptions',
+  component: ChatOptions as any,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              // Populate space with sample objects.
+              for (let idx = 0; idx < 8; idx++) {
+                space.db.add(Organization.make({ name: `Org ${idx + 1}` }));
+                space.db.add(Person.make({ fullName: `Person ${idx + 1}` }));
+              }
+
+              // Create the chat feed used by the context binder.
+              space.db.add(Feed.make());
+              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+            }),
+        }),
+        ChessPlugin(),
+        MapPlugin(),
+        TablePlugin(),
+      ],
+      capabilities,
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    presets,
+  },
+};
+
+export const ObjectsPanelStory: Story = {
+  render: () => {
+    const [space] = useSpaces();
+    const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+    const binder = useContextBinder(space, feed);
+    if (!space || !binder) {
+      return <Loading />;
+    }
+
+    return (
+      <div className='flex flex-col w-[300px] h-[300px] border border-separator'>
+        <ObjectsPanel db={space.db} context={binder} />
+      </div>
+    );
+  },
+};