@dxos/plugin-assistant 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/components/Chat/Chat.tsx

@@ -4,38 +4,41 @@
 
 import { type Extension, Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
+import { Result, useRxValue } from '@effect-rx/rx-react';
 import { createContext } from '@radix-ui/react-context';
-import { dedupeWith } from 'effect/Array';
+import { Array, Option } from 'effect';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Message } from '@dxos/ai';
-import { CollaborationActions, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Event } from '@dxos/async';
 import { DXN, Obj, Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useVoiceInput } from '@dxos/plugin-transcription';
-import { type Expando, getSpace, useQueue, type Space } from '@dxos/react-client/echo';
+import { type Space, getSpace, useQueue } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { ChatEditor, type ChatEditorController, type ChatEditorProps, references } from '@dxos/react-ui-chat';
 import { type ScrollController } from '@dxos/react-ui-components';
 import { mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
 import { isNotFalsy } from '@dxos/util';
 
-import { type ChatProcessor, useContextProvider, useBlueprints } from '../../hooks';
+import { type AiChatProcessor, useBlueprintHandlers, useReferencesProvider } from '../../hooks';
 import { meta } from '../../meta';
 import { type Assistant } from '../../types';
 import {
   ChatActions,
   type ChatActionsProps,
-  type ChatEvent,
-  ChatOptionsMenu,
+  ChatOptions,
+  ChatPresets,
+  type ChatPresetsProps,
   ChatReferences,
   type ChatReferencesProps,
   ChatStatusIndicator,
 } from '../ChatPrompt';
 import { ChatThread as NativeChatThread, type ChatThreadProps as NativeChatThreadProps } from '../ChatThread';
 
+import { type ChatEvent } from './events';
+
 // TODO(burdon): Factor out.
 const Endcap = ({ children }: PropsWithChildren) => {
   return (
@@ -51,14 +54,12 @@ const Endcap = ({ children }: PropsWithChildren) => {
 
 // TODO(burdon): Inject via effect layer.
 type ChatContextValue = {
+  debug?: boolean;
   event: Event<ChatEvent>;
   space: Space;
   chat: Assistant.Chat;
-  processor: ChatProcessor;
-  messages: Message[];
-
-  /** @deprecated Remove and replace with context. */
-  artifact?: Expando;
+  messages: DataType.Message[];
+  processor: AiChatProcessor;
 };
 
 // NOTE: Do not export.
@@ -70,50 +71,64 @@ const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('C
 
 type ChatRootProps = ThemedClassName<
   PropsWithChildren<
-    Pick<ChatContextValue, 'chat' | 'processor' | 'artifact'> & {
+    Pick<ChatContextValue, 'chat' | 'processor'> & {
       onEvent?: (event: ChatEvent) => void;
     }
   >
 >;
 
-const ChatRoot = ({ classNames, children, chat, processor, artifact, onEvent, ...props }: ChatRootProps) => {
+const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }: ChatRootProps) => {
+  const [debug, setDebug] = useState(false);
   const space = getSpace(chat);
 
   // Messages.
-  const queue = useQueue<Message>(chat?.queue.dxn);
-  const messages = useMemo(
-    () =>
-      dedupeWith(
-        [...(queue?.objects?.filter(Obj.instanceOf(Message)) ?? []), ...(processor?.messages.value ?? [])],
-        (a, b) => a.id === b.id,
-      ),
-    [queue?.objects, processor?.messages.value],
-  );
-
-  // TODO(burdon): Replace with tool.
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  useEffect(() => {
-    if (!processor?.streaming.value && queue?.objects && artifact) {
-      const message = queue.objects[queue.objects.length - 1];
-      if (dispatch && space && chat && message) {
-        void dispatch(
-          createIntent(CollaborationActions.InsertContent, {
-            target: artifact,
-            object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...chat.queue.dxn.parts, message.id])),
-            label: 'View proposal',
-          }),
-        );
-      }
-    }
-  }, [queue, processor?.streaming.value]);
+  const queue = useQueue<DataType.Message>(chat?.queue.dxn);
+  const pending = useRxValue(processor.messages);
+  const streaming = useRxValue(processor.streaming);
+
+  const messages = useMemo(() => {
+    const queueMessages = queue?.objects?.filter(Obj.instanceOf(DataType.Message)) ?? [];
+    return Result.match(pending, {
+      onInitial: () => queueMessages,
+      onSuccess: (pending) => Array.dedupeWith([...queueMessages, ...pending.value], (a, b) => a.id === b.id),
+      onFailure: () => queueMessages,
+    });
+  }, [queue?.objects, pending]);
+
+  // TODO(burdon): Replace with tool to select artifact.
+  // const { dispatchPromise: dispatch } = useIntentDispatcher();
+  // useEffect(() => {
+  //   if (!processor?.streaming.value && queue?.objects) {
+  //     const message = queue.objects[queue.objects.length - 1];
+  //     if (dispatch && space && chat && message) {
+  //       void dispatch(
+  //         createIntent(CollaborationActions.InsertContent, {
+  //           target: artifact,
+  //           object: Ref.fromDXN(new DXN(DXN.kind.QUEUE, [...chat.queue.dxn.parts, message.id])),
+  //           label: 'View proposal',
+  //         }),
+  //       );
+  //     }
+  //   }
+  // }, [queue, processor?.streaming.value]);
 
   // Events.
   const event = useMemo(() => new Event<ChatEvent>(), []);
   useEffect(() => {
     return event.on((event) => {
       switch (event.type) {
+        case 'toggle-debug': {
+          setDebug((current) => {
+            const debug = !current;
+            log.info('toggle-debug', { debug });
+            // log.config({ filter: debug ? 'assistant:debug' : 'info' });
+            return debug;
+          });
+          break;
+        }
+
         case 'submit': {
-          if (!processor.streaming.value) {
+          if (!streaming) {
             void processor.request(event.text);
           }
           break;
@@ -123,19 +138,29 @@ const ChatRoot = ({ classNames, children, chat, processor, artifact, onEvent, ..
           void processor.cancel();
           break;
         }
-      }
 
-      onEvent?.(event);
+        default: {
+          onEvent?.(event);
+        }
+      }
     });
-  }, [event, onEvent]);
+  }, [event, onEvent, processor, streaming]);
 
   if (!space) {
     return null;
   }
 
   return (
-    <ChatContextProvider event={event} chat={chat} space={space} processor={processor} messages={messages} {...props}>
-      <div role='none' className={mx('flex flex-col grow', classNames)}>
+    <ChatContextProvider
+      debug={debug}
+      event={event}
+      chat={chat}
+      space={space}
+      processor={processor}
+      messages={messages}
+      {...props}
+    >
+      <div role='none' className={mx('flex flex-col h-full overflow-hidden', classNames)}>
         {children}
       </div>
     </ChatContextProvider>
@@ -148,10 +173,10 @@ ChatRoot.displayName = 'Chat.Root';
 // Thread
 //
 
-type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onPrompt'>;
+type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onEvent'>;
 
 const ChatThread = (props: ChatThreadProps) => {
-  const { event, space, processor, messages } = useChatContext(ChatThread.displayName);
+  const { debug, event, space, messages } = useChatContext(ChatThread.displayName);
   const identity = useIdentity();
 
   const scrollerRef = useRef<ScrollController>(null);
@@ -166,16 +191,6 @@ const ChatThread = (props: ChatThreadProps) => {
     });
   }, [event]);
 
-  const handlePrompt = useCallback<NonNullable<NativeChatThreadProps['onPrompt']>>(
-    (text) => {
-      if (!processor.streaming.value) {
-        event.emit({ type: 'submit', text });
-        return true;
-      }
-    },
-    [processor, event],
-  );
-
   if (!identity) {
     return null;
   }
@@ -184,11 +199,11 @@ const ChatThread = (props: ChatThreadProps) => {
     <NativeChatThread
       {...props}
       ref={scrollerRef}
+      debug={debug}
       identity={identity}
       space={space}
       messages={messages}
-      tools={processor?.tools}
-      onPrompt={handlePrompt}
+      onEvent={(ev) => event.emit(ev)}
     />
   );
 };
@@ -199,11 +214,30 @@ ChatThread.displayName = 'Chat.Thread';
 // Prompt
 //
 
-type ChatPromptProps = ThemedClassName<Pick<ChatEditorProps, 'placeholder'> & { expandable?: boolean }>;
+type ChatPromptProps = ThemedClassName<
+  Pick<ChatEditorProps, 'placeholder'> &
+    Omit<ChatPresetsProps, 'onChange'> & {
+      expandable?: boolean;
+      online?: boolean;
+      onChangeOnline?: (online: boolean) => void;
+      onChangePreset?: ChatPresetsProps['onChange'];
+    }
+>;
 
-const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) => {
+const ChatPrompt = ({
+  classNames,
+  placeholder,
+  expandable,
+  online,
+  presets,
+  preset,
+  onChangePreset,
+  onChangeOnline,
+}: ChatPromptProps) => {
   const { t } = useTranslation(meta.id);
   const { space, event, processor } = useChatContext(ChatPrompt.displayName);
+  const streaming = useRxValue(processor.streaming);
+  const error = useRxValue(processor.error).pipe(Option.getOrUndefined);
 
   const [active, setActive] = useState(false);
   useEffect(() => {
@@ -230,23 +264,23 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
     },
   });
 
-  const [blueprints, handleUpdateBlueprints] = useBlueprints(processor.context);
-
   // TODO(burdon): Reconcile with object tags.
-  const contextProvider = useContextProvider(space);
+  const referencesProvider = useReferencesProvider(space);
   const extensions = useMemo<Extension[]>(() => {
     return [
-      contextProvider &&
-        references({
-          provider: {
-            getReferences: async ({ query }) => contextProvider.query({ query }),
-            resolveReference: async ({ uri }) => contextProvider.resolveMetadata({ uri }),
-          },
-        }),
-      expandable &&
-        Prec.highest(
-          keymap.of([
+      referencesProvider && references({ provider: referencesProvider }),
+      Prec.highest(
+        keymap.of(
+          [
             {
+              key: 'cmd-d',
+              preventDefault: true,
+              run: () => {
+                event.emit({ type: 'toggle-debug' });
+                return true;
+              },
+            },
+            expandable && {
               key: 'cmd-ArrowUp',
               preventDefault: true,
               run: () => {
@@ -254,7 +288,7 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
                 return true;
               },
             },
-            {
+            expandable && {
               key: 'cmd-ArrowDown',
               preventDefault: true,
               run: () => {
@@ -262,19 +296,20 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
                 return true;
               },
             },
-          ]),
+          ].filter(isNotFalsy),
         ),
+      ),
     ].filter(isNotFalsy);
-  }, [event, expandable, contextProvider]);
+  }, [event, expandable, referencesProvider]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
-      if (!processor.streaming.value) {
+      if (!streaming) {
         event.emit({ type: 'submit', text });
         return true;
       }
     },
-    [processor, event],
+    [streaming, event],
   );
 
   const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
@@ -284,20 +319,26 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
     [event],
   );
 
-  // TODO(burdon): Update context.
-  const handleUpdateReferences = useCallback<NonNullable<ChatReferencesProps['onUpdate']>>((ids) => {
-    log.info('update', { ids });
+  const handleUpdateReferences = useCallback<NonNullable<ChatReferencesProps['onUpdate']>>((dxns) => {
+    log.info('update', { dxns });
+    void processor.context.bind({ objects: dxns.map((dxn) => Ref.fromDXN(DXN.parse(dxn))) });
   }, []);
 
+  const { onUpdateBlueprint } = useBlueprintHandlers({
+    space,
+    context: processor.context,
+    blueprintRegistry: processor.blueprintRegistry,
+  });
+
   return (
     <div
       className={mx(
-        'is-full grid grid-cols-[var(--rail-action)_1fr_min-content] grid-rows-[min-content_var(--rail-action)]',
+        'is-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] grid-rows-[min-content_min-content_min-content]',
         classNames,
       )}
     >
       <Endcap>
-        <ChatStatusIndicator error={processor.error.value} processing={processor.streaming.value} />
+        <ChatStatusIndicator preset={preset} error={error} processing={streaming} />
       </Endcap>
 
       <ChatEditor
@@ -310,25 +351,37 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
         onSubmit={handleSubmit}
       />
 
-      <ChatOptionsMenu
-        blueprintRegistry={processor.blueprintRegistry}
-        blueprints={blueprints}
-        onChange={handleUpdateBlueprints}
-      />
-
+      <div />
       <ChatReferences
-        classNames='flex pis-1 items-center'
+        classNames='col-span-2 flex pis-1 items-center'
         space={space}
         context={processor.context}
         onUpdate={handleUpdateReferences}
       />
 
+      <ChatOptions
+        blueprintRegistry={processor.blueprintRegistry}
+        context={processor.context}
+        onUpdateBlueprint={onUpdateBlueprint}
+      />
+
       <ChatActions
+        classNames='col-span-2'
         microphone={true}
         recording={recording}
-        processing={processor.streaming.value}
+        processing={streaming}
         onEvent={handleEvent}
-      />
+      >
+        <>
+          <div className='grow' />
+          {presets && <ChatPresets preset={preset} presets={presets} onChange={onChangePreset} />}
+          {online !== undefined && (
+            <Input.Root>
+              <Input.Switch classNames='mis-2 mie-2' checked={online} onCheckedChange={onChangeOnline} />
+            </Input.Root>
+          )}
+        </>
+      </ChatActions>
     </div>
   );
 };

package/src/components/Chat/events.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Obj } from '@dxos/echo';
+
+/**
+ * The main `ChatRoot` manages the `ChatContextValue` which contains an `event` property that subcomponents
+ * can subscribe to and submit events. Unhandled events are passed to the external `onEvent` callback.
+ */
+export type ChatEvent =
+  | {
+      type: 'toggle-debug';
+    }
+  //
+  // Thread
+  //
+  | {
+      type: 'submit';
+      text: string;
+    }
+  | {
+      type: 'cancel';
+    }
+  | {
+      type: 'delete';
+      id: string;
+    }
+  | {
+      type: 'add';
+      object: Obj.Any;
+    }
+  //
+  // UX
+  //
+  | {
+      type: 'scroll-to-bottom';
+    }
+  | {
+      type: 'thread-open';
+    }
+  | {
+      type: 'thread-close';
+    }
+  | {
+      type: 'record-start';
+    }
+  | {
+      type: 'record-stop';
+    };

package/src/components/Chat/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './events';
+
 export * from './Chat';

package/src/components/ChatContainer.tsx

@@ -2,40 +2,64 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Capabilities, useCapability } from '@dxos/app-framework';
-import { type AssociatedArtifact } from '@dxos/artifact';
 import { getSpace } from '@dxos/client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
+import { type MaybePromise } from '@dxos/util';
 
-import { Chat } from './Chat';
-import { useChatProcessor, useServiceContainer } from '../hooks';
+import {
+  type AiChatProcessor,
+  useBlueprintRegistry,
+  useChatProcessor,
+  useChatServices,
+  useOnline,
+  usePresets,
+} from '../hooks';
 import { meta } from '../meta';
 import { type Assistant } from '../types';
 
+import { Chat } from './Chat';
+
 export type ChatContainerProps = {
-  role: string;
   chat: Assistant.Chat;
-  artifact?: AssociatedArtifact;
+  role?: string;
+  onProcessorReady?: (processor: AiChatProcessor) => MaybePromise<void>;
 };
 
-export const ChatContainer = ({ role, chat, artifact }: ChatContainerProps) => {
+export const ChatContainer = ({ chat, onProcessorReady }: ChatContainerProps) => {
   const space = getSpace(chat);
   const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
-  const serviceContainer = useServiceContainer({ space });
-  const processor = useChatProcessor({ part: 'deck', chat, serviceContainer, settings });
-  if (!processor) {
+  const services = useChatServices({ space });
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+  const blueprintRegistry = useBlueprintRegistry();
+  const processor = useChatProcessor({ space, chat, preset, services, blueprintRegistry, settings });
+
+  useEffect(() => {
+    if (processor && onProcessorReady) {
+      const timeout = setTimeout(() => onProcessorReady(processor));
+      return () => clearTimeout(timeout);
+    }
+  }, [processor, onProcessorReady]);
+
+  if (!chat || !processor) {
     return null;
   }
 
-  // TODO(burdon): Add attention attributes.
   return (
-    <StackItem.Content role={role} classNames='container-max-width'>
-      <Chat.Root chat={chat} processor={processor} artifact={artifact}>
+    <StackItem.Content classNames='container-max-width'>
+      <Chat.Root chat={chat} processor={processor}>
         <Chat.Thread />
-        <div className='pbe-4 pis-2 pie-2'>
-          <Chat.Prompt classNames='border border-subduedSeparator rounded-md' />
+        <div className='p-2'>
+          <Chat.Prompt
+            {...chatProps}
+            classNames='p-2 border border-transparent rounded-md'
+            preset={preset?.id}
+            online={online}
+            onChangeOnline={setOnline}
+          />
         </div>
       </Chat.Root>
     </StackItem.Content>

package/src/components/ChatDialog.tsx

@@ -4,16 +4,17 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { useCapability, Capabilities } from '@dxos/app-framework';
+import { Capabilities, useCapability } from '@dxos/app-framework';
 import { getSpace } from '@dxos/client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NativeChatDialog } from '@dxos/react-ui-chat';
 
-import { Chat, type ChatRootProps } from './Chat';
-import { useChatProcessor, useServiceContainer } from '../hooks';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../hooks';
 import { meta } from '../meta';
 import { type Assistant } from '../types';
 
+import { Chat, type ChatRootProps } from './Chat';
+
 export type ChatDialogProps = {
   chat?: Assistant.Chat;
 };
@@ -23,8 +24,11 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
 
   const space = getSpace(chat);
   const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
-  const serviceContainer = useServiceContainer({ space });
-  const processor = useChatProcessor({ part: 'dialog', chat, serviceContainer, settings });
+  const services = useChatServices({ space });
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+  const blueprintRegistry = useBlueprintRegistry();
+  const processor = useChatProcessor({ space, chat, preset, services, blueprintRegistry, settings });
 
   // TODO(burdon): Refocus when open.
   const [open, setOpen] = useState(true);
@@ -36,7 +40,6 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
         setOpen(true);
         setExpanded(true);
         break;
-
       case 'thread-close':
         setOpen(false);
         break;
@@ -55,7 +58,7 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
           <Chat.Thread />
         </NativeChatDialog.Content>
         <NativeChatDialog.Footer>
-          <Chat.Prompt expandable />
+          <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onChangeOnline={setOnline} expandable />
         </NativeChatDialog.Footer>
       </NativeChatDialog.Root>
     </Chat.Root>

package/src/components/ChatPrompt/ChatActions.tsx

@@ -2,35 +2,29 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
 
-import { IconButton, Select, useTranslation } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type ChatEvent } from './events';
 import { meta } from '../../meta';
+import { type ChatEvent } from '../Chat';
 
-export type ChatActionsProps = {
-  microphone?: boolean;
-  recording?: boolean;
-  processing?: boolean;
-  onEvent?: (event: ChatEvent) => void;
-};
+export type ChatActionsProps = ThemedClassName<
+  PropsWithChildren<{
+    microphone?: boolean;
+    recording?: boolean;
+    processing?: boolean;
+    onEvent?: (event: ChatEvent) => void;
+  }>
+>;
 
-export const ChatActions = ({ microphone, recording, processing, onEvent }: ChatActionsProps) => {
+export const ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }: ChatActionsProps) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div className='flex items-center mie-1'>
-      {/* TODO(burdon): Modes (models and/or presets for blueprints?). */}
-      <Select.Root value={'ollama'} disabled>
-        <Select.TriggerButton classNames='mie-2 text-sm' />
-        <Select.Content>
-          <Select.Option value={'ollama'} classNames='text-sm'>
-            Ollama
-          </Select.Option>
-        </Select.Content>
-      </Select.Root>
+    <div className={mx('flex items-center mie-1', classNames)}>
+      {children}
 
       {(processing && (
         <IconButton
@@ -45,6 +39,7 @@ export const ChatActions = ({ microphone, recording, processing, onEvent }: Chat
         />
       )) || (
         <IconButton
+          disabled
           classNames='px-1.5'
           variant='ghost'
           size={5}