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

package/src/components/Chat/Chat.tsx

@@ -6,21 +6,20 @@ import { type Extension, Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { useRxValue } from '@effect-rx/rx-react';
 import { createContext } from '@radix-ui/react-context';
-import { Array, Option } from 'effect';
+import * as Array from 'effect/Array';
+import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Event } from '@dxos/async';
 import { Obj } from '@dxos/echo';
-import { log } from '@dxos/log';
 import { useVoiceInput } from '@dxos/plugin-transcription';
 import { type Space, getSpace, useQueue } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Input, type ThemedClassName, useDynamicRef, 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 { isTruthy } from '@dxos/util';
 
 import { useReferencesProvider } from '../../hooks';
 import { meta } from '../../meta';
@@ -34,7 +33,11 @@ import {
   ChatReferences,
   ChatStatusIndicator,
 } from '../ChatPrompt';
-import { ChatThread as NativeChatThread, type ChatThreadProps as NativeChatThreadProps } from '../ChatThread';
+import {
+  type ChatThreadController,
+  ChatThread as NaturalChatThread,
+  type ChatThreadProps as NaturalChatThreadProps,
+} from '../ChatThread';
 
 import { type ChatEvent } from './events';
 
@@ -53,7 +56,6 @@ type ChatContextValue = {
   processor: AiChatProcessor;
 };
 
-// NOTE: Do not export.
 export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
 
 //
@@ -76,7 +78,6 @@ const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }:
   const queue = useQueue<DataType.Message>(chat?.queue.dxn);
   const pending = useRxValue(processor.messages);
   const streaming = useRxValue(processor.streaming);
-
   const lastPrompt = useRef<string | undefined>(undefined);
 
   const messages = useMemo(() => {
@@ -90,18 +91,15 @@ const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }:
     return event.on((ev) => {
       switch (ev.type) {
         case 'toggle-debug': {
-          setDebug((current) => {
-            const debug = !current;
-            log.info('toggle-debug', { debug });
-            return debug;
-          });
+          setDebug((current) => !current);
           break;
         }
 
         case 'submit': {
-          if (!streaming) {
+          const text = ev.text.trim();
+          if (!streaming && text.length) {
             lastPrompt.current = ev.text;
-            void processor.request({ message: ev.text });
+            void processor.request({ message: text });
           }
           break;
         }
@@ -140,11 +138,11 @@ const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }:
       event={event}
       chat={chat}
       space={space}
-      processor={processor}
       messages={messages}
+      processor={processor}
       {...props}
     >
-      <div role='none' className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+      <div role='none' className={mx('flex flex-col bs-full is-full', classNames)}>
         {children}
       </div>
     </ChatContextProvider>
@@ -160,6 +158,7 @@ ChatRoot.displayName = 'Chat.Root';
 type ChatPromptProps = ThemedClassName<
   {
     outline?: boolean;
+    settings?: boolean;
   } & Pick<ChatEditorProps, 'placeholder'> &
     Omit<ChatPresetsProps, 'onChange'> & {
       expandable?: boolean;
@@ -172,6 +171,7 @@ type ChatPromptProps = ThemedClassName<
 const ChatPrompt = ({
   classNames,
   outline,
+  settings = true,
   placeholder,
   expandable,
   online,
@@ -185,11 +185,11 @@ const ChatPrompt = ({
 
   const error = useRxValue(processor.error).pipe(Option.getOrUndefined);
   const streaming = useRxValue(processor.streaming);
-  const streamingRef = useRef(streaming);
+  const active = useRxValue(processor.active);
+  const activeRef = useDynamicRef(active);
 
   const editorRef = useRef<ChatEditorController>(null);
-
-  const [active, setActive] = useState(false);
+  const [recordingState, setRecordingState] = useState(false);
   useEffect(() => {
     return event.on((event) => {
       switch (event.type) {
@@ -200,10 +200,10 @@ const ChatPrompt = ({
           }
           break;
         case 'record-start':
-          setActive(true);
+          setRecordingState(true);
           break;
         case 'record-stop':
-          setActive(false);
+          setRecordingState(false);
           break;
       }
     });
@@ -211,7 +211,7 @@ const ChatPrompt = ({
 
   // TODO(burdon): Configure capability in TranscriptionPlugin.
   const { recording } = useVoiceInput({
-    active,
+    active: recordingState,
     onUpdate: (text) => {
       editorRef.current?.setText(text);
       editorRef.current?.focus();
@@ -250,15 +250,15 @@ const ChatPrompt = ({
                 return true;
               },
             },
-          ].filter(isNotFalsy),
+          ].filter(isTruthy),
         ),
       ),
-    ].filter(isNotFalsy);
+    ].filter(isTruthy);
   }, [event, expandable, referencesProvider]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
-      if (!streamingRef.current) {
+      if (!activeRef.current) {
         event.emit({ type: 'submit', text });
         return true;
       }
@@ -275,15 +275,16 @@ const ChatPrompt = ({
 
   return (
     <div
+      role='group'
       className={mx(
-        'is-full flex flex-col density-fine',
+        'flex flex-col is-full density-fine',
         outline && [
           'p-2 bg-groupSurface border border-subduedSeparator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded',
         ],
         classNames,
       )}
     >
-      <div className='flex gap-2'>
+      <div role='none' className='flex gap-2'>
         <ChatStatusIndicator classNames='p-1' preset={preset} error={error} processing={streaming} />
 
         <ChatEditor
@@ -297,34 +298,37 @@ const ChatPrompt = ({
         />
       </div>
 
-      <div className='flex pbs-2 items-center'>
-        <ChatOptions
-          space={space}
-          blueprintRegistry={processor.blueprintRegistry}
-          context={processor.context}
-          preset={preset}
-          presets={presets}
-          onPresetChange={onPresetChange}
-        />
-
-        <div role='none' className='pli-cardSpacingChrome grow'>
-          <ChatReferences space={space} context={processor.context} />
+      {settings && (
+        <div role='none' className='flex pbs-2 items-center'>
+          <ChatOptions
+            space={space}
+            blueprintRegistry={processor.blueprintRegistry}
+            context={processor.context}
+            preset={preset}
+            presets={presets}
+            onPresetChange={onPresetChange}
+          />
+
+          <div role='none' className='pli-cardSpacingChrome grow'>
+            <ChatReferences space={space} context={processor.context} />
+          </div>
+
+          <ChatActions
+            classNames='col-span-2'
+            microphone={true}
+            recording={recording}
+            processing={streaming}
+            onEvent={handleEvent}
+          >
+            {online !== undefined && (
+              <Input.Root>
+                <Input.Label srOnly>{t('online switch label')}</Input.Label>
+                <Input.Switch classNames='mis-2 mie-2' checked={online} onCheckedChange={onOnlineChange} />
+              </Input.Root>
+            )}
+          </ChatActions>
         </div>
-
-        <ChatActions
-          classNames='col-span-2'
-          microphone={true}
-          recording={recording}
-          processing={streaming}
-          onEvent={handleEvent}
-        >
-          {online !== undefined && (
-            <Input.Root>
-              <Input.Switch classNames='mis-2 mie-2' checked={online} onCheckedChange={onOnlineChange} />
-            </Input.Root>
-          )}
-        </ChatActions>
-      </div>
+      )}
     </div>
   );
 };
@@ -335,46 +339,44 @@ ChatPrompt.displayName = 'Chat.Prompt';
 // Thread
 //
 
-type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onEvent'>;
+type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
 
 const ChatThread = (props: ChatThreadProps) => {
-  const { debug, event, space, messages, processor } = useChatContext(ChatThread.displayName);
+  const { event, messages, processor } = useChatContext(ChatThread.displayName);
   const identity = useIdentity();
-
   const error = useRxValue(processor.error).pipe(Option.getOrUndefined);
 
-  const toolProvider = useCallback<NonNullable<ChatThreadProps['toolProvider']>>(
-    () => processor.conversation.toolkit?.tools ?? [],
-    [processor],
-  );
-
-  const scrollerRef = useRef<ScrollController>(null);
+  const scrollerRef = useRef<ChatThreadController | null>(null);
   useEffect(() => {
     return event.on((event) => {
       switch (event.type) {
         case 'submit':
         case 'scroll-to-bottom':
-          scrollerRef.current?.scrollToBottom('smooth');
+          scrollerRef.current?.scrollToBottom();
           break;
       }
     });
   }, [event]);
 
+  const handleEvent = useCallback<NonNullable<NaturalChatThreadProps['onEvent']>>(
+    (ev) => {
+      event.emit(ev);
+    },
+    [event],
+  );
+
   if (!identity) {
     return null;
   }
 
   return (
-    <NativeChatThread
+    <NaturalChatThread
       {...props}
       ref={scrollerRef}
-      debug={debug}
       identity={identity}
-      space={space}
       messages={messages}
       error={error}
-      toolProvider={toolProvider}
-      onEvent={(ev) => event.emit(ev)}
+      onEvent={handleEvent}
     />
   );
 };

package/src/components/ChatCompanion.tsx

@@ -2,7 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Array, Effect, Option, pipe } from 'effect';
+import * as Array from 'effect/Array';
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 import React, { useMemo } from 'react';
 
 import { Capabilities, createIntent, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
@@ -15,7 +18,7 @@ import { useQuery } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 
 import { ChatContainer } from '../components';
-import { useContextBinder } from '../hooks';
+import { useBlueprintRegistry, useContextBinder } from '../hooks';
 import { Assistant, AssistantAction } from '../types';
 
 export type ChatCompanionProps = {
@@ -27,6 +30,7 @@ export const ChatCompanion = ({ role, data }: ChatCompanionProps) => {
   const companionTo = data.companionTo;
   const space = getSpace(companionTo);
   const chat = data.subject === 'assistant-chat' ? undefined : data.subject;
+  const blueprintRegistry = useBlueprintRegistry();
   const binder = useContextBinder(chat);
   const { dispatch } = useIntentDispatcher();
 
@@ -66,7 +70,7 @@ export const ChatCompanion = ({ role, data }: ChatCompanionProps) => {
   const metadata = useCapabilities(Capabilities.Metadata);
   const blueprintKeys = useMemo(
     () =>
-      pipe(
+      Function.pipe(
         metadata,
         Array.findFirst(
           (capability): capability is { id: string; metadata: { blueprints?: string[] } } =>
@@ -77,14 +81,35 @@ export const ChatCompanion = ({ role, data }: ChatCompanionProps) => {
       ),
     [metadata, companionTo],
   );
-  const allBlueprints = useQuery(space, Filter.type(Blueprint.Blueprint));
+  const existingBlueprints = useQuery(space, Filter.type(Blueprint.Blueprint));
   const pluginBlueprints = useMemo(
-    () => allBlueprints.filter((blueprint) => blueprintKeys.includes(blueprint.key)),
-    [allBlueprints, blueprintKeys],
+    () => existingBlueprints.filter((blueprint) => blueprintKeys.includes(blueprint.key)),
+    [existingBlueprints, blueprintKeys],
   );
 
-  // TODO(wittjosiah): Occasionally this fails to bind but seems to be an upstream issue.
-  //   It seems like the queue object signal emits as an empty array after previously emitting a non-empty array.
+  // Initialize related blueprints that are not already in the space.
+  useAsyncEffect(async () => {
+    if (!space) {
+      return;
+    }
+
+    // NOTE: This must be run instead of using the useQuery result to avoid duplicates.
+    const { objects: existingBlueprints } = await space.db.query(Filter.type(Blueprint.Blueprint)).run();
+    for (const key of blueprintKeys) {
+      const existingBlueprint = existingBlueprints.find((blueprint) => blueprint.key === key);
+      if (existingBlueprint) {
+        continue;
+      }
+
+      const blueprint = blueprintRegistry.getByKey(key);
+      if (!blueprint) {
+        continue;
+      }
+
+      space.db.add(Obj.clone(blueprint));
+    }
+  }, [space, blueprintRegistry, blueprintKeys]);
+
   useAsyncEffect(async () => {
     if (!binder) {
       return;

package/src/components/ChatContainer.tsx

@@ -14,7 +14,7 @@ import { meta } from '../meta';
 import { type Assistant } from '../types';
 
 import { Chat } from './Chat';
-import { Toolbar } from './Toolbar';
+import { ChatToolbar } from './ChatToolbar';
 
 export type ChatContainerProps = {
   chat: Assistant.Chat;
@@ -36,9 +36,9 @@ export const ChatContainer = ({ chat, companionTo }: ChatContainerProps) => {
   }
 
   return (
-    <StackItem.Content toolbar={!!companionTo} classNames='container-max-width'>
-      {!!companionTo && <Toolbar chat={chat} companionTo={companionTo} />}
-      <Chat.Root chat={chat} processor={processor}>
+    <StackItem.Content toolbar>
+      <ChatToolbar chat={chat} companionTo={companionTo} />
+      <Chat.Root classNames='container-max-width' chat={chat} processor={processor}>
         <Chat.Thread />
         <div className='p-2'>
           <Chat.Prompt {...chatProps} outline preset={preset?.id} online={online} onOnlineChange={setOnline} />

package/src/components/ChatDialog.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useState } from 'react';
 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 { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 
 import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../hooks';
 import { meta } from '../meta';
@@ -52,15 +52,15 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
 
   return (
     <Chat.Root chat={chat} processor={processor} onEvent={handleEvent}>
-      <NativeChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
-        <NativeChatDialog.Header title={t('assistant dialog title')} />
-        <NativeChatDialog.Content>
+      <NaturalChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
+        <NaturalChatDialog.Header title={t('assistant dialog title')} />
+        <NaturalChatDialog.Content>
           <Chat.Thread />
-        </NativeChatDialog.Content>
-        <NativeChatDialog.Footer classNames='p-1.5'>
+        </NaturalChatDialog.Content>
+        <NaturalChatDialog.Footer classNames='p-1.5'>
           <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onOnlineChange={setOnline} expandable />
-        </NativeChatDialog.Footer>
-      </NativeChatDialog.Root>
+        </NaturalChatDialog.Footer>
+      </NaturalChatDialog.Root>
     </Chat.Root>
   );
 };

package/src/components/ChatProgress/ChatProgress.tsx

@@ -5,9 +5,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { Flex, ProgressBar, type ProgressBarProps, TextCrawl } from '@dxos/react-ui-components';
+import { Flex, ProgressBar, type ProgressBarProps, TextCrawl, useExecutionGraph } from '@dxos/react-ui-components';
 
-import { useExecutionGraph } from '../../hooks';
 import { type Assistant } from '../../types';
 
 // TODO(burdon): Reset after each session.
@@ -28,7 +27,7 @@ export type ChatProgressProps = {
 };
 
 export const ChatProgress = ({ chat }: ChatProgressProps) => {
-  const { commits } = useExecutionGraph(chat.traceQueue, true);
+  const { commits } = useExecutionGraph(chat.traceQueue?.target, true);
   const nodes = useMemo(() => commits.map((commit) => ({ id: commit.id, message: commit.message })), [commits]);
   const lines = useMemo(() => commits.map((commit) => commit.message), [commits]);
 

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -9,13 +9,13 @@ import { type Blueprint } from '@dxos/blueprints';
 import { Filter, Obj, Type } from '@dxos/echo';
 import { type Space, useQuery } from '@dxos/react-client/echo';
 import { Icon, IconButton, Popover, Select, useTranslation } from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
+import { Listbox, SearchList } from '@dxos/react-ui-searchlist';
 import { Tabs } from '@dxos/react-ui-tabs';
 
 import { useActiveBlueprints, useBlueprintHandlers, useBlueprints, useContextObjects, useItemTypes } from '../../hooks';
 import { meta } from '../../meta';
 
-const panelClassNames = 'is-[calc(100dvw-.5rem)] sm:is-max md:is-[25rem] max-is-[--text-content]';
+const panelClassNames = 'is-[calc(100dvw-.5rem)] sm:is-max md:is-72 max-is-[--text-content]';
 
 export type ChatOptionsProps = {
   space: Space;
@@ -65,12 +65,12 @@ export const ChatOptions = ({
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content side='top' classNames={panelClassNames}>
-            <Tabs.Root orientation='horizontal' defaultValue='blueprints' defaultActivePart='list'>
+            <Tabs.Root orientation='horizontal' defaultValue='blueprints' defaultActivePart='list' tabIndex={-1}>
               <Tabs.Viewport classNames='max-bs-[--radix-popover-content-available-height] grid grid-rows-[1fr_min-content] [&_[cmdk-root]]:contents [&_[role="tabpanel"]]:grid [&_[role="tabpanel"]]:grid-rows-[1fr_min-content] [&_[role="listbox"]]:min-bs-0 [&_[role="listbox"]]:overflow-y-auto [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:pli-cardSpacingChrome [&_[role="tabpanel"][data-state="active"]]:order-first [&_[role="tabpanel"][data-state="inactive"]]:hidden'>
-                <Tabs.Tabpanel value='blueprints'>
+                <Tabs.Tabpanel value='blueprints' tabIndex={-1} classNames='dx-focus-ring-inset'>
                   <BlueprintsPanel blueprintRegistry={blueprintRegistry} space={space} context={context} />
                 </Tabs.Tabpanel>
-                <Tabs.Tabpanel value='model'>
+                <Tabs.Tabpanel value='model' tabIndex={-1} classNames='dx-focus-ring-inset !pli-0'>
                   <ModelsPanel presets={presets} preset={preset} onPresetChange={onPresetChange} />
                 </Tabs.Tabpanel>
                 <Tabs.Tablist classNames='sm:overflow-x-hidden justify-center p-[--dx-cardSpacingChrome] border-bs border-subduedSeparator order-last'>
@@ -98,7 +98,7 @@ const BlueprintsPanel = ({
 }: Pick<ChatOptionsProps, 'blueprintRegistry' | 'space' | 'context'>) => {
   const { t } = useTranslation(meta.id);
 
-  const blueprints = useBlueprints({ blueprintRegistry });
+  const blueprints = useBlueprints({ blueprintRegistry, space });
   const activeBlueprints = useActiveBlueprints({ context });
   const { onUpdateBlueprint } = useBlueprintHandlers({ space, context, blueprintRegistry });
 
@@ -120,7 +120,7 @@ const BlueprintsPanel = ({
           );
         })}
       </SearchList.Content>
-      <SearchList.Input placeholder={t('search placeholder')} classNames='mbe-cardSpacingChrome' />
+      <SearchList.Input placeholder={t('search placeholder')} classNames='mbe-cardSpacingChrome' autoFocus />
     </SearchList.Root>
   );
 };
@@ -131,24 +131,16 @@ const ModelsPanel = ({
   onPresetChange,
 }: Pick<ChatOptionsProps, 'presets' | 'preset' | 'onPresetChange'>) => {
   return (
-    <ul role='listbox' className='plb-cardSpacingChrome'>
+    <Listbox.Root value={preset} onValueChange={onPresetChange} autoFocus>
       {presets?.map(({ id, label }) => {
-        const isActive = preset === id;
         return (
-          <li
-            role='option'
-            key={id}
-            aria-selected={isActive}
-            tabIndex={0}
-            className='overflow-hidden dx-focus-ring flex gap-2 p-1 pis-2 pie-2 items-center rounded-sm select-none cursor-pointer hover:bg-hoverOverlay'
-            onClick={() => onPresetChange?.(id)}
-          >
-            <div className='grow truncate'>{label}</div>
-            <Icon icon='ph--check--regular' classNames={[!isActive && 'invisible']} />
-          </li>
+          <Listbox.Option key={id} value={id}>
+            <Listbox.OptionLabel>{label}</Listbox.OptionLabel>
+            <Listbox.OptionIndicator />
+          </Listbox.Option>
         );
       })}
-    </ul>
+    </Listbox.Root>
   );
 };
 
@@ -184,8 +176,8 @@ const ObjectsPanel = ({ space, context }: Pick<ChatOptionsProps, 'space' | 'cont
   const { objects: contextObjects, onUpdateObject } = useContextObjects({ space, context });
 
   return (
-    <SearchList.Root classNames='pis-2 pie-2'>
-      <SearchList.Content classNames='plb-cardSpacingChrome [&:has([cmdk-list-sizer]:empty)]:plb-0'>
+    <SearchList.Root>
+      <SearchList.Content classNames='p-cardSpacingChrome [&:has([cmdk-list-sizer]:empty)]:plb-0'>
         {objects.length ? (
           objects.map((object) => {
             const label = Obj.getLabel(object) ?? Obj.getTypename(object) ?? object.id;
@@ -207,7 +199,7 @@ const ObjectsPanel = ({ space, context }: Pick<ChatOptionsProps, 'space' | 'cont
         )}
       </SearchList.Content>
 
-      <div role='none' className='grid grid-cols-[min-content_1fr] gap-2 mbe-cardSpacingChrome'>
+      <div role='none' className='grid grid-cols-[min-content_1fr] gap-2 pli-cardSpacingChrome mbe-cardSpacingChrome'>
         <Select.Root value={typename === ANY ? undefined : typename} onValueChange={setTypename}>
           <Select.TriggerButton density='fine' placeholder={t('type filter placeholder')} />
           <Select.Portal>
@@ -226,7 +218,7 @@ const ObjectsPanel = ({ space, context }: Pick<ChatOptionsProps, 'space' | 'cont
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-        <SearchList.Input placeholder={t('search placeholder')} classNames='mbe-0' />
+        <SearchList.Input placeholder={t('search placeholder')} classNames='mbe-0' autoFocus />
       </div>
     </SearchList.Root>
   );