@dxos/plugin-assistant 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/src/components/Chat/Chat.tsx

@@ -2,391 +2,257 @@
 // Copyright 2025 DXOS.org
 //
 
-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 { Array, Option } from 'effect';
+import { useAtomValue } from '@effect-atom/atom-react';
+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 { useVoiceInput } from '@dxos/plugin-transcription';
-import { type Space, getSpace, useQueue } from '@dxos/react-client/echo';
+import { Filter, Obj } from '@dxos/echo';
+import { type Queue, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-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 AiChatProcessor, useBlueprintHandlers, useReferencesProvider } from '../../hooks';
-import { meta } from '../../meta';
-import { type Assistant } from '../../types';
+import { type MarkdownStreamController } from '@dxos/react-ui-markdown';
+import { Menu, MenuRootProps } from '@dxos/react-ui-menu';
+import { Message } from '@dxos/types';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { useChatKeymapExtensions, useChatToolbarActions, useDebug } from '#hooks';
+
 import {
-  ChatActions,
-  type ChatActionsProps,
-  ChatOptions,
-  ChatPresets,
-  type ChatPresetsProps,
-  ChatReferences,
-  type ChatReferencesProps,
-  ChatStatusIndicator,
+  ChatStatus,
+  ChatPrompt as NaturalChatPrompt,
+  type ChatPromptProps as NaturalChatPromptProps,
 } from '../ChatPrompt';
-import { ChatThread as NativeChatThread, type ChatThreadProps as NativeChatThreadProps } from '../ChatThread';
-
+import { ChatThread as NaturalChatThread, type ChatThreadProps as NaturalChatThreadProps } from '../ChatThread';
+import { ChatContextProvider, type ChatContextValue, type ChatRequestTiming, useChatContext } from './context';
 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>;
-  space: Space;
-  chat: Assistant.Chat;
-  messages: DataType.Message[];
-  processor: AiChatProcessor;
-};
-
-// NOTE: Do not export.
-const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
+export { useChatContext };
 
 //
 // Root
 //
 
-type ChatRootProps = ThemedClassName<
-  PropsWithChildren<
-    Pick<ChatContextValue, 'chat' | 'processor'> & {
-      onEvent?: (event: ChatEvent) => void;
-    }
-  >
+type ChatRootProps = PropsWithChildren<
+  Pick<ChatContextValue, 'db' | 'chat' | 'processor'> & {
+    feed?: Queue;
+    onEvent?: (event: ChatEvent) => void;
+  }
 >;
 
-const ChatRoot = ({ classNames, children, chat, processor, onEvent, ...props }: ChatRootProps) => {
+const ChatRoot = ({ children, chat, feed, processor, onEvent, ...props }: ChatRootProps) => {
   const [debug, setDebug] = useState(false);
-  const space = getSpace(chat);
-
-  // Messages.
-  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 streaming = useAtomValue(processor.streaming);
+  const active = useAtomValue(processor.active);
+  const requestTiming = useRequestTiming({ active });
+  const lastPrompt = useRef<string | undefined>(undefined);
+  const db = props.db ?? (chat && Obj.getDatabase(chat));
+
+  const feedMessages = useQuery(feed, Filter.type(Message.Message));
+  const pendingMessages = useAtomValue(processor.messages);
+  const messages = useMemo(
+    () => Array.dedupeWith([...feedMessages, ...pendingMessages], ({ id: a }, { id: b }) => a === b),
+    [feedMessages, pendingMessages],
+  );
+
+  const dump = useDebug({ processor });
+
   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((debug) => {
+            if (debug) {
+              return false;
+            } else {
+              void dump();
+              return true;
+            }
           });
           break;
         }
 
         case 'submit': {
-          if (!streaming) {
-            void processor.request(event.text);
+          const text = ev.text.trim();
+          if (!streaming && text.length) {
+            lastPrompt.current = ev.text;
+            void processor.request({ message: text });
           }
           break;
         }
 
-        case 'cancel': {
-          void processor.cancel();
+        case 'retry': {
+          if (!streaming) {
+            void processor.retry();
+          }
           break;
         }
 
-        default: {
-          onEvent?.(event);
+        case 'cancel': {
+          if (streaming) {
+            void processor.cancel();
+            if (lastPrompt.current) {
+              event.emit({ type: 'update-prompt', text: lastPrompt.current });
+            }
+          }
+          break;
         }
       }
-    });
-  }, [event, onEvent, processor, streaming]);
 
-  if (!space) {
-    return null;
-  }
+      onEvent?.(ev);
+    });
+  }, [event, dump, processor, streaming, onEvent]);
 
   return (
     <ChatContextProvider
       debug={debug}
       event={event}
+      db={db}
       chat={chat}
-      space={space}
-      processor={processor}
       messages={messages}
+      processor={processor}
+      requestTiming={requestTiming}
       {...props}
     >
-      <div role='none' className={mx('flex flex-col h-full overflow-hidden', classNames)}>
-        {children}
-      </div>
+      {children}
     </ChatContextProvider>
   );
 };
 
 ChatRoot.displayName = 'Chat.Root';
 
+const useRequestTiming = ({ active }: { active: boolean }) => {
+  const [requestTiming, setRequestTiming] = useState<ChatRequestTiming | null>(null);
+  useEffect(() => {
+    if (active) {
+      setRequestTiming({ startedAt: Date.now(), endedAt: null });
+    } else {
+      setRequestTiming((prev) => (prev && prev.endedAt == null ? { ...prev, endedAt: Date.now() } : prev));
+    }
+  }, [active]);
+
+  return requestTiming;
+};
+
+//
+// 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;
+
+//
+// Content
+//
+
+const CHAT_CONTENT_NAME = 'Chat.Content';
+
+type ChatContentProps = {};
+
+const ChatContent = composable<HTMLDivElement, ChatContentProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...composableProps(props, { classNames: 'dx-expander flex flex-col' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+ChatContent.displayName = CHAT_CONTENT_NAME;
+
 //
 // Thread
 //
 
-type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onEvent'>;
+const CHAT_THREAD_NAME = 'Chat.Thread';
+
+type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
 
-const ChatThread = (props: ChatThreadProps) => {
-  const { debug, event, space, messages } = useChatContext(ChatThread.displayName);
+const ChatThread = ({ viewType, debug: debugProp, ...props }: ChatThreadProps) => {
+  const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
+  const debugView = viewType === 'debug';
   const identity = useIdentity();
+  const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
+  const extensions = useChatKeymapExtensions({ event });
 
-  const scrollerRef = useRef<ScrollController>(null);
+  const controllerRef = useRef<MarkdownStreamController | null>(null);
   useEffect(() => {
     return event.on((event) => {
       switch (event.type) {
         case 'submit':
         case 'scroll-to-bottom':
-          scrollerRef.current?.scrollToBottom('smooth');
+          controllerRef.current?.scrollToBottom();
+          break;
+        case 'nav-previous':
+          controllerRef.current?.navigatePrevious();
+          break;
+        case 'nav-next':
+          controllerRef.current?.navigateNext();
           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}
-      onEvent={(ev) => event.emit(ev)}
+      error={error}
+      debug={debugProp ?? (debug || debugView)}
+      viewType={viewType}
+      extensions={extensions}
+      onEvent={handleEvent}
+      ref={controllerRef}
     />
   );
 };
 
-ChatThread.displayName = 'Chat.Thread';
+ChatThread.displayName = CHAT_THREAD_NAME;
 
 //
 // Prompt
 //
 
-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,
-  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(() => {
-    return event.on((event) => {
-      switch (event.type) {
-        case 'record-start':
-          setActive(true);
-          break;
-        case 'record-stop':
-          setActive(false);
-          break;
-      }
-    });
-  }, [event]);
-
-  const editorRef = useRef<ChatEditorController>(null);
-
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const { recording } = useVoiceInput({
-    active,
-    onUpdate: (text) => {
-      editorRef.current?.setText(text);
-      editorRef.current?.focus();
-    },
-  });
-
-  // TODO(burdon): Reconcile with object tags.
-  const referencesProvider = useReferencesProvider(space);
-  const extensions = useMemo<Extension[]>(() => {
-    return [
-      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: () => {
-                event.emit({ type: 'thread-open' });
-                return true;
-              },
-            },
-            expandable && {
-              key: 'cmd-ArrowDown',
-              preventDefault: true,
-              run: () => {
-                event.emit({ type: 'thread-close' });
-                return true;
-              },
-            },
-          ].filter(isNotFalsy),
-        ),
-      ),
-    ].filter(isNotFalsy);
-  }, [event, expandable, referencesProvider]);
-
-  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
-    (text) => {
-      if (!streaming) {
-        event.emit({ type: 'submit', text });
-        return true;
-      }
-    },
-    [streaming, event],
-  );
-
-  const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
-    (ev) => {
-      event.emit(ev);
-    },
-    [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 CHAT_PROMPT_NAME = 'Chat.Prompt';
 
-  const { onUpdateBlueprint } = useBlueprintHandlers({
-    space,
-    context: processor.context,
-    blueprintRegistry: processor.blueprintRegistry,
-  });
+type ChatPromptProps = Omit<NaturalChatPromptProps, 'chat' | 'db' | 'processor' | 'event'>;
 
-  return (
-    <div
-      className={mx(
-        'is-full grid grid-cols-[var(--rail-action)_1fr_var(--rail-action)] grid-rows-[min-content_min-content_min-content]',
-        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>
-  );
+const ChatPrompt = (props: ChatPromptProps) => {
+  const { chat, db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+  return <NaturalChatPrompt {...props} chat={chat} db={db} processor={processor} event={event} />;
 };
 
-ChatPrompt.displayName = 'Chat.Prompt';
+ChatPrompt.displayName = CHAT_PROMPT_NAME;
 
 //
 // Chat
@@ -394,8 +260,11 @@ ChatPrompt.displayName = 'Chat.Prompt';
 
 export const Chat = {
   Root: ChatRoot,
-  Thread: ChatThread,
+  Toolbar: ChatToolbar,
+  Content: ChatContent,
   Prompt: ChatPrompt,
+  Status: ChatStatus,
+  Thread: ChatThread,
 };
 
-export type { ChatRootProps, ChatThreadProps, ChatPromptProps, ChatEvent };
+export type { ChatRootProps, ChatToolbarProps, ChatContentProps, ChatPromptProps, ChatThreadProps, ChatEvent };

package/src/components/Chat/context.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type Chat as ChatModule } from '@dxos/assistant-toolkit';
+import { type Event } from '@dxos/async';
+import { type Database } from '@dxos/echo';
+import { type Message } from '@dxos/types';
+
+import { type AiChatProcessor } from '../../processor';
+import { type ChatEvent } from './events';
+
+/**
+ * Wall-clock timestamps for the most-recent (or in-flight) request, lifted out of
+ * `ChatStreamStatus` so the elapsed value survives across re-mounts triggered when wire's
+ * drip queue toggles `wireDrainingEffect` (which removes/restores the footer block widget).
+ * `endedAt` is `null` while the request is still active.
+ */
+export type ChatRequestTiming = {
+  startedAt: number;
+  endedAt: number | null;
+};
+
+export type ChatContextValue = {
+  debug?: boolean;
+  event: Event<ChatEvent>;
+  db?: Database.Database;
+  chat?: ChatModule.Chat;
+  messages: Message.Message[];
+  processor: AiChatProcessor;
+  requestTiming: ChatRequestTiming | null;
+};
+
+// Internal: not re-exported from `Chat/index.ts`. Accessed by sibling components in this
+// package (e.g. `ChatStreamStatus`) without dragging in `Chat.tsx`'s heavy transitive
+// imports (transcription, etc.).
+export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');

package/src/components/Chat/events.ts

@@ -19,6 +19,9 @@ export type ChatEvent =
       type: 'submit';
       text: string;
     }
+  | {
+      type: 'retry';
+    }
   | {
       type: 'cancel';
     }
@@ -28,14 +31,24 @@ export type ChatEvent =
     }
   | {
       type: 'add';
-      object: Obj.Any;
+      object: Obj.Unknown;
     }
   //
   // UX
   //
+  | {
+      type: 'update-prompt';
+      text: string;
+    }
   | {
       type: 'scroll-to-bottom';
     }
+  | {
+      type: 'nav-previous';
+    }
+  | {
+      type: 'nav-next';
+    }
   | {
       type: 'thread-open';
     }