@dxos/plugin-assistant 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

package/src/components/Chat/Chat.tsx

@@ -4,55 +4,49 @@
 
 import { type Extension, Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
-import { Result, useRxValue } from '@effect-rx/rx-react';
+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 { DXN, Obj, Ref } from '@dxos/echo';
-import { log } from '@dxos/log';
+import { Obj } from '@dxos/echo';
 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 { type AiChatProcessor, useBlueprintHandlers, useReferencesProvider } from '../../hooks';
+import { useReferencesProvider } from '../../hooks';
 import { meta } from '../../meta';
+import { type AiChatProcessor } from '../../processor';
 import { type Assistant } from '../../types';
 import {
   ChatActions,
   type ChatActionsProps,
   ChatOptions,
-  ChatPresets,
   type ChatPresetsProps,
   ChatReferences,
-  type ChatReferencesProps,
   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';
 
-// TODO(burdon): Factor out.
-const Endcap = ({ children }: PropsWithChildren) => {
-  return (
-    <div className='grid w-[var(--rail-action)] h-[var(--rail-action)] items-center justify-center'>{children}</div>
-  );
-};
-
 //
 // Context
 // NOTE: The context should not be exported. It is only used internally.
 // Components outside of this Radix-style group shuld define their own APIs.
 //
 
-// TODO(burdon): Inject via effect layer.
 type ChatContextValue = {
   debug?: boolean;
   event: Event<ChatEvent>;
@@ -62,8 +56,7 @@ type ChatContextValue = {
   processor: AiChatProcessor;
 };
 
-// NOTE: Do not export.
-const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
+export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
 
 //
 // Root
@@ -85,66 +78,55 @@ 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(() => {
     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,
-    });
+    return Array.dedupeWith([...queueMessages, ...pending], (a, b) => a.id === b.id);
   }, [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) {
+    return event.on((ev) => {
+      switch (ev.type) {
         case 'toggle-debug': {
-          setDebug((current) => {
-            const debug = !current;
-            log.info('toggle-debug', { debug });
-            // log.config({ filter: debug ? 'assistant:debug' : 'info' });
-            return debug;
-          });
+          setDebug((current) => !current);
           break;
         }
 
         case 'submit': {
+          const text = ev.text.trim();
+          if (!streaming && text.length) {
+            lastPrompt.current = ev.text;
+            void processor.request({ message: text });
+          }
+          break;
+        }
+
+        case 'retry': {
           if (!streaming) {
-            void processor.request(event.text);
+            void processor.retry();
           }
           break;
         }
 
         case 'cancel': {
-          void processor.cancel();
+          if (streaming) {
+            void processor.cancel();
+            if (lastPrompt.current) {
+              event.emit({ type: 'update-prompt', text: lastPrompt.current });
+            }
+          }
           break;
         }
 
         default: {
-          onEvent?.(event);
+          onEvent?.(ev);
         }
       }
     });
-  }, [event, onEvent, processor, streaming]);
+  }, [event, processor, streaming, onEvent]);
 
   if (!space) {
     return null;
@@ -156,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>
@@ -169,95 +151,67 @@ const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }:
 
 ChatRoot.displayName = 'Chat.Root';
 
-//
-// Thread
-//
-
-type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onEvent'>;
-
-const ChatThread = (props: ChatThreadProps) => {
-  const { debug, event, space, messages } = useChatContext(ChatThread.displayName);
-  const identity = useIdentity();
-
-  const scrollerRef = useRef<ScrollController>(null);
-  useEffect(() => {
-    return event.on((event) => {
-      switch (event.type) {
-        case 'submit':
-        case 'scroll-to-bottom':
-          scrollerRef.current?.scrollToBottom('smooth');
-          break;
-      }
-    });
-  }, [event]);
-
-  if (!identity) {
-    return null;
-  }
-
-  return (
-    <NativeChatThread
-      {...props}
-      ref={scrollerRef}
-      debug={debug}
-      identity={identity}
-      space={space}
-      messages={messages}
-      onEvent={(ev) => event.emit(ev)}
-    />
-  );
-};
-
-ChatThread.displayName = 'Chat.Thread';
-
 //
 // Prompt
 //
 
 type ChatPromptProps = ThemedClassName<
-  Pick<ChatEditorProps, 'placeholder'> &
+  {
+    outline?: boolean;
+    settings?: boolean;
+  } & Pick<ChatEditorProps, 'placeholder'> &
     Omit<ChatPresetsProps, 'onChange'> & {
       expandable?: boolean;
       online?: boolean;
-      onChangeOnline?: (online: boolean) => void;
-      onChangePreset?: ChatPresetsProps['onChange'];
+      onOnlineChange?: (online: boolean) => void;
+      onPresetChange?: ChatPresetsProps['onChange'];
     }
 >;
 
 const ChatPrompt = ({
   classNames,
+  outline,
+  settings = true,
   placeholder,
   expandable,
   online,
   presets,
   preset,
-  onChangePreset,
-  onChangeOnline,
+  onPresetChange,
+  onOnlineChange,
 }: 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 streaming = useRxValue(processor.streaming);
+  const active = useRxValue(processor.active);
+  const activeRef = useDynamicRef(active);
 
-  const [active, setActive] = useState(false);
+  const editorRef = useRef<ChatEditorController>(null);
+  const [recordingState, setRecordingState] = useState(false);
   useEffect(() => {
     return event.on((event) => {
       switch (event.type) {
+        case 'update-prompt':
+          if (!editorRef.current?.getText()?.length) {
+            editorRef.current?.setText(event.text);
+            editorRef.current?.focus();
+          }
+          break;
         case 'record-start':
-          setActive(true);
+          setRecordingState(true);
           break;
         case 'record-stop':
-          setActive(false);
+          setRecordingState(false);
           break;
       }
     });
   }, [event]);
 
-  const editorRef = useRef<ChatEditorController>(null);
-
   // TODO(burdon): Configure capability in TranscriptionPlugin.
   const { recording } = useVoiceInput({
-    active,
+    active: recordingState,
     onUpdate: (text) => {
       editorRef.current?.setText(text);
       editorRef.current?.focus();
@@ -296,20 +250,20 @@ const ChatPrompt = ({
                 return true;
               },
             },
-          ].filter(isNotFalsy),
+          ].filter(isTruthy),
         ),
       ),
-    ].filter(isNotFalsy);
+    ].filter(isTruthy);
   }, [event, expandable, referencesProvider]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
-      if (!streaming) {
+      if (!activeRef.current) {
         event.emit({ type: 'submit', text });
         return true;
       }
     },
-    [streaming, event],
+    [event],
   );
 
   const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
@@ -319,83 +273,124 @@ const ChatPrompt = ({
     [event],
   );
 
-  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
+      role='group'
       className={mx(
-        'is-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] grid-rows-[min-content_min-content_min-content]',
+        '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,
       )}
     >
-      <Endcap>
-        <ChatStatusIndicator preset={preset} error={error} processing={streaming} />
-      </Endcap>
-
-      <ChatEditor
-        ref={editorRef}
-        autoFocus
-        lineWrapping
-        classNames='col-span-2 pis-1 pbs-2'
-        placeholder={placeholder ?? t('prompt placeholder')}
-        extensions={extensions}
-        onSubmit={handleSubmit}
-      />
-
-      <div />
-      <ChatReferences
-        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={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 role='none' className='flex gap-2'>
+        <ChatStatusIndicator classNames='p-1' preset={preset} error={error} processing={streaming} />
+
+        <ChatEditor
+          ref={editorRef}
+          autoFocus
+          lineWrapping
+          classNames='col-span-2 pbs-0.5'
+          placeholder={placeholder ?? t('prompt placeholder')}
+          extensions={extensions}
+          onSubmit={handleSubmit}
+        />
+      </div>
+
+      {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>
+      )}
     </div>
   );
 };
 
 ChatPrompt.displayName = 'Chat.Prompt';
 
+//
+// Thread
+//
+
+type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
+
+const ChatThread = (props: ChatThreadProps) => {
+  const { event, messages, processor } = useChatContext(ChatThread.displayName);
+  const identity = useIdentity();
+  const error = useRxValue(processor.error).pipe(Option.getOrUndefined);
+
+  const scrollerRef = useRef<ChatThreadController | null>(null);
+  useEffect(() => {
+    return event.on((event) => {
+      switch (event.type) {
+        case 'submit':
+        case 'scroll-to-bottom':
+          scrollerRef.current?.scrollToBottom();
+          break;
+      }
+    });
+  }, [event]);
+
+  const handleEvent = useCallback<NonNullable<NaturalChatThreadProps['onEvent']>>(
+    (ev) => {
+      event.emit(ev);
+    },
+    [event],
+  );
+
+  if (!identity) {
+    return null;
+  }
+
+  return (
+    <NaturalChatThread
+      {...props}
+      ref={scrollerRef}
+      identity={identity}
+      messages={messages}
+      error={error}
+      onEvent={handleEvent}
+    />
+  );
+};
+
+ChatThread.displayName = 'Chat.Thread';
+
 //
 // Chat
 //
 
 export const Chat = {
   Root: ChatRoot,
-  Thread: ChatThread,
   Prompt: ChatPrompt,
+  Thread: ChatThread,
 };
 
 export type { ChatRootProps, ChatThreadProps, ChatPromptProps, ChatEvent };

package/src/components/Chat/events.ts

@@ -19,6 +19,9 @@ export type ChatEvent =
       type: 'submit';
       text: string;
     }
+  | {
+      type: 'retry';
+    }
   | {
       type: 'cancel';
     }
@@ -33,6 +36,10 @@ export type ChatEvent =
   //
   // UX
   //
+  | {
+      type: 'update-prompt';
+      text: string;
+    }
   | {
       type: 'scroll-to-bottom';
     }

package/src/components/ChatCompanion.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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';
+import { Blueprint } from '@dxos/blueprints';
+import { getSpace } from '@dxos/client/echo';
+import { Filter, Obj, Query, Ref } from '@dxos/echo';
+import { DatabaseService } from '@dxos/functions';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { useQuery } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+
+import { ChatContainer } from '../components';
+import { useBlueprintRegistry, useContextBinder } from '../hooks';
+import { Assistant, AssistantAction } from '../types';
+
+export type ChatCompanionProps = {
+  role?: string;
+  data: { companionTo: Obj.Any; subject: Assistant.Chat | 'assistant-chat' };
+};
+
+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();
+
+  // Initialize companion chat if it doesn't exist.
+  useAsyncEffect(async () => {
+    if (chat || !space) {
+      return;
+    }
+
+    // TODO(burdon): Garbage collection of queues?
+    // TODO(wittjosiah): Figure out how to prevent companion chats from showing up in the navtree.
+    await Effect.gen(function* () {
+      const { objects } = yield* DatabaseService.runQuery(
+        Query.select(Filter.ids(companionTo.id)).targetOf(Assistant.CompanionTo).source(),
+      );
+
+      // TODO(wittjosiah): This should be the default sort order.
+      let nextChat = objects.toSorted((a, b) => a.id.localeCompare(b.id)).at(-1);
+      if (!nextChat) {
+        const { object } = yield* dispatch(createIntent(AssistantAction.CreateChat, { space }));
+        nextChat = object;
+        yield* dispatch(createIntent(SpaceAction.AddObject, { object: nextChat, target: space, hidden: true }));
+        yield* dispatch(
+          createIntent(SpaceAction.AddRelation, {
+            space,
+            schema: Assistant.CompanionTo,
+            source: nextChat,
+            target: data.companionTo,
+          }),
+        );
+      }
+
+      yield* dispatch(createIntent(AssistantAction.SetCurrentChat, { companionTo, chat: nextChat }));
+    }).pipe(Effect.provide(DatabaseService.layer(space.db)), Effect.runPromise);
+  }, [space, chat, companionTo]);
+
+  const metadata = useCapabilities(Capabilities.Metadata);
+  const blueprintKeys = useMemo(
+    () =>
+      Function.pipe(
+        metadata,
+        Array.findFirst(
+          (capability): capability is { id: string; metadata: { blueprints?: string[] } } =>
+            capability.id === Obj.getTypename(companionTo),
+        ),
+        Option.flatMap((c) => Option.fromNullable(c.metadata.blueprints)),
+        Option.getOrElse(() => [] as string[]),
+      ),
+    [metadata, companionTo],
+  );
+  const existingBlueprints = useQuery(space, Filter.type(Blueprint.Blueprint));
+  const pluginBlueprints = useMemo(
+    () => existingBlueprints.filter((blueprint) => blueprintKeys.includes(blueprint.key)),
+    [existingBlueprints, blueprintKeys],
+  );
+
+  // 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;
+    }
+
+    if (pluginBlueprints.length > 0) {
+      await binder.bind({ blueprints: pluginBlueprints.map((blueprint) => Ref.make(blueprint)) });
+    }
+
+    if (Obj.instanceOf(Blueprint.Blueprint, companionTo)) {
+      await binder.bind({ blueprints: [Ref.make(companionTo)] });
+    } else {
+      await binder.bind({ objects: [Ref.make(companionTo)] });
+    }
+  }, [binder, companionTo, pluginBlueprints]);
+
+  if (!chat) {
+    return null;
+  }
+
+  return <ChatContainer role={role} chat={chat} companionTo={companionTo} />;
+};
+
+export default ChatCompanion;