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

package/src/components/Chat/Chat.tsx

@@ -4,44 +4,40 @@
 
 import { type Extension, Prec } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
+import { useAtomValue } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
-import { dedupeWith } from 'effect/Array';
+import * as Array from 'effect/Array';
+import * as Option from 'effect/Option';
 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 { type Chat as ChatModule } from '@dxos/assistant-toolkit';
 import { Event } from '@dxos/async';
-import { DXN, Obj, Ref } from '@dxos/echo';
-import { log } from '@dxos/log';
+import { type Database, Filter, Obj } from '@dxos/echo';
 import { useVoiceInput } from '@dxos/plugin-transcription';
-import { type Expando, getSpace, useQueue, type Space } from '@dxos/react-client/echo';
+import { type Queue, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, type ThemedClassName } 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 { isNotFalsy } from '@dxos/util';
-
-import { type ChatProcessor, useContextProvider, useBlueprints } from '../../hooks';
-import { meta } from '../../meta';
-import { type Assistant } from '../../types';
+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 { Menu, MenuRootProps } from '@dxos/react-ui-menu';
+import { Message } from '@dxos/types';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { isTruthy, trim } from '@dxos/util';
+
+import { useChatToolbarActions } from '#hooks';
+import { meta } from '#meta';
+
+import { type AiChatProcessor } from '../../processor';
 import {
   ChatActions,
   type ChatActionsProps,
-  type ChatEvent,
-  ChatOptionsMenu,
+  ChatOptions,
+  type ChatPresetsProps,
   ChatReferences,
-  type ChatReferencesProps,
   ChatStatusIndicator,
 } from '../ChatPrompt';
-import { ChatThread as NativeChatThread, type ChatThreadProps as NativeChatThreadProps } from '../ChatThread';
-
-// 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>
-  );
-};
+import { ChatThread as NaturalChatThread, type ChatThreadProps as NaturalChatThreadProps } from '../ChatThread';
+import { type ChatEvent } from './events';
 
 //
 // Context
@@ -49,131 +45,211 @@ const Endcap = ({ children }: PropsWithChildren) => {
 // 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;
-  processor: ChatProcessor;
-  messages: Message[];
-
-  /** @deprecated Remove and replace with context. */
-  artifact?: Expando;
+  db?: Database.Database;
+  chat?: ChatModule.Chat;
+  messages: Message.Message[];
+  processor: AiChatProcessor;
 };
 
-// NOTE: Do not export.
-const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
+export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
 
 //
 // Root
 //
 
-type ChatRootProps = ThemedClassName<
-  PropsWithChildren<
-    Pick<ChatContextValue, 'chat' | 'processor' | 'artifact'> & {
-      onEvent?: (event: ChatEvent) => void;
-    }
-  >
+type ChatRootProps = PropsWithChildren<
+  Pick<ChatContextValue, 'db' | 'chat' | 'processor'> & {
+    queue?: Queue;
+    onEvent?: (event: ChatEvent) => void;
+  }
 >;
 
-const ChatRoot = ({ classNames, children, chat, processor, artifact, onEvent, ...props }: ChatRootProps) => {
-  const space = getSpace(chat);
+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 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 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((event) => {
-      switch (event.type) {
+    return event.on((ev) => {
+      switch (ev.type) {
+        case 'toggle-debug': {
+          setDebug((debug) => {
+            if (debug) {
+              return false;
+            } else {
+              void dump();
+              return true;
+            }
+          });
+          break;
+        }
+
         case 'submit': {
-          if (!processor.streaming.value) {
-            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 'retry': {
+          if (!streaming) {
+            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;
         }
       }
 
-      onEvent?.(event);
+      onEvent?.(ev);
     });
-  }, [event, onEvent]);
+  }, [event, dump, processor, streaming, onEvent]);
 
-  if (!space) {
-    return null;
-  }
+  const db = props.db ?? (chat && Obj.getDatabase(chat));
 
   return (
-    <ChatContextProvider event={event} chat={chat} space={space} processor={processor} messages={messages} {...props}>
-      <div role='none' className={mx('flex flex-col grow', classNames)}>
-        {children}
-      </div>
+    <ChatContextProvider
+      debug={debug}
+      event={event}
+      db={db}
+      chat={chat}
+      messages={messages}
+      processor={processor}
+      {...props}
+    >
+      {children}
     </ChatContextProvider>
   );
 };
 
 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 = {};
+
+const ChatViewport = composable<HTMLDivElement, ChatViewportProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...composableProps(props, { classNames: 'dx-expander flex flex-col' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+ChatViewport.displayName = CHAT_VIEWPORT_NAME;
+
 //
 // Thread
 //
 
-type ChatThreadProps = Omit<NativeChatThreadProps, 'identity' | 'space' | 'messages' | 'tools' | 'onPrompt'>;
+const CHAT_THREAD_NAME = 'Chat.Thread';
+
+type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
 
 const ChatThread = (props: ChatThreadProps) => {
-  const { event, space, processor, messages } = useChatContext(ChatThread.displayName);
+  const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
   const identity = useIdentity();
+  const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
 
-  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 handlePrompt = useCallback<NonNullable<NativeChatThreadProps['onPrompt']>>(
-    (text) => {
-      if (!processor.streaming.value) {
-        event.emit({ type: 'submit', text });
-        return true;
-      }
+  const handleEvent = useCallback<NonNullable<NaturalChatThreadProps['onEvent']>>(
+    (ev) => {
+      event.emit(ev);
     },
-    [processor, event],
+    [event],
   );
 
   if (!identity) {
@@ -181,100 +257,138 @@ const ChatThread = (props: ChatThreadProps) => {
   }
 
   return (
-    <NativeChatThread
+    <NaturalChatThread
       {...props}
-      ref={scrollerRef}
       identity={identity}
-      space={space}
       messages={messages}
-      tools={processor?.tools}
-      onPrompt={handlePrompt}
+      error={error}
+      debug={debug}
+      onEvent={handleEvent}
+      ref={controllerRef}
     />
   );
 };
 
-ChatThread.displayName = 'Chat.Thread';
+ChatThread.displayName = CHAT_THREAD_NAME;
 
 //
 // Prompt
 //
 
-type ChatPromptProps = ThemedClassName<Pick<ChatEditorProps, 'placeholder'> & { expandable?: boolean }>;
+const CHAT_PROMPT_NAME = 'Chat.Prompt';
+
+type ChatPromptProps = ThemedClassName<
+  {
+    outline?: boolean;
+    settings?: boolean;
+  } & Pick<ChatEditorProps, 'placeholder'> &
+    Omit<ChatPresetsProps, 'onChange'> & {
+      expandable?: boolean;
+      online?: boolean;
+      onOnlineChange?: (online: boolean) => void;
+      onPresetChange?: ChatPresetsProps['onChange'];
+    }
+>;
 
-const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) => {
+const ChatPrompt = ({
+  classNames,
+  outline,
+  settings = true,
+  placeholder,
+  expandable,
+  online,
+  presets,
+  preset,
+  onPresetChange,
+  onOnlineChange,
+}: ChatPromptProps) => {
   const { t } = useTranslation(meta.id);
-  const { space, event, processor } = useChatContext(ChatPrompt.displayName);
+  const { db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+
+  const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
+  const streaming = useAtomValue(processor.streaming);
+  const active = useAtomValue(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();
     },
   });
 
-  const [blueprints, handleUpdateBlueprints] = useBlueprints(processor.context);
-
-  // TODO(burdon): Reconcile with object tags.
-  const contextProvider = useContextProvider(space);
   const extensions = useMemo<Extension[]>(() => {
     return [
-      contextProvider &&
-        references({
-          provider: {
-            getReferences: async ({ query }) => contextProvider.query({ query }),
-            resolveReference: async ({ uri }) => contextProvider.resolveMetadata({ uri }),
+      Prec.highest(
+        keymap.of([
+          {
+            key: 'Mod-d',
+            preventDefault: true,
+            run: () => {
+              event.emit({ type: 'toggle-debug' });
+              return true;
+            },
           },
-        }),
-      expandable &&
-        Prec.highest(
-          keymap.of([
-            {
-              key: 'cmd-ArrowUp',
-              preventDefault: true,
-              run: () => {
-                event.emit({ type: 'thread-open' });
-                return true;
-              },
+          {
+            key: 'Mod-ArrowUp',
+            preventDefault: true,
+            run: () => {
+              event.emit({ type: 'nav-previous' });
+              return true;
             },
-            {
-              key: 'cmd-ArrowDown',
-              preventDefault: true,
-              run: () => {
-                event.emit({ type: 'thread-close' });
-                return true;
-              },
+            shift: () => {
+              event.emit({ type: 'thread-open' });
+              return true;
             },
-          ]),
-        ),
-    ].filter(isNotFalsy);
-  }, [event, expandable, contextProvider]);
+          },
+          {
+            key: 'Mod-ArrowDown',
+            preventDefault: true,
+            run: () => {
+              event.emit({ type: 'nav-next' });
+              return true;
+            },
+            shift: () => {
+              event.emit({ type: 'thread-close' });
+              return true;
+            },
+          },
+        ]),
+      ),
+    ].filter(isTruthy);
+  }, [event, expandable]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
-      if (!processor.streaming.value) {
+      if (!activeRef.current) {
         event.emit({ type: 'submit', text });
         return true;
       }
     },
-    [processor, event],
+    [event],
   );
 
   const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
@@ -284,56 +398,66 @@ const ChatPrompt = ({ classNames, placeholder, expandable }: ChatPromptProps) =>
     [event],
   );
 
-  // TODO(burdon): Update context.
-  const handleUpdateReferences = useCallback<NonNullable<ChatReferencesProps['onUpdate']>>((ids) => {
-    log.info('update', { ids });
-  }, []);
-
   return (
     <div
+      role='group'
       className={mx(
-        'is-full grid grid-cols-[var(--rail-action)_1fr_min-content] grid-rows-[min-content_var(--rail-action)]',
+        'flex flex-col w-full dx-density-fine',
+        outline &&
+          'bg-group-surface border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded-sm',
         classNames,
       )}
     >
-      <Endcap>
-        <ChatStatusIndicator error={processor.error.value} processing={processor.streaming.value} />
-      </Endcap>
-
-      <ChatEditor
-        ref={editorRef}
-        autoFocus
-        lineWrapping
-        classNames='col-span-2 pis-1 pbs-2'
-        placeholder={placeholder ?? t('prompt placeholder')}
-        extensions={extensions}
-        onSubmit={handleSubmit}
-      />
-
-      <ChatOptionsMenu
-        blueprintRegistry={processor.blueprintRegistry}
-        blueprints={blueprints}
-        onChange={handleUpdateBlueprints}
-      />
-
-      <ChatReferences
-        classNames='flex pis-1 items-center'
-        space={space}
-        context={processor.context}
-        onUpdate={handleUpdateReferences}
-      />
-
-      <ChatActions
-        microphone={true}
-        recording={recording}
-        processing={processor.streaming.value}
-        onEvent={handleEvent}
-      />
+      <div role='none' className='flex p-2 gap-2'>
+        <ChatStatusIndicator classNames='p-1' preset={preset} error={error} processing={streaming} />
+        <ChatEditor
+          ref={editorRef}
+          autoFocus
+          lineWrapping
+          classNames='col-span-2 pt-0.5'
+          placeholder={placeholder ?? t('prompt.placeholder')}
+          extensions={extensions}
+          onSubmit={handleSubmit}
+        />
+      </div>
+
+      {db && settings && (
+        <div role='none' className='flex items-center overflow-hidden'>
+          <ChatOptions
+            db={db}
+            blueprintRegistry={processor.blueprintRegistry}
+            context={processor.context}
+            preset={preset}
+            presets={presets}
+            onPresetChange={onPresetChange}
+          />
+
+          <div role='none' className='flex grow overflow-x-auto scrollbar-none'>
+            <ChatReferences db={db} context={processor.context} />
+          </div>
+
+          <ChatActions
+            classNames='col-span-2'
+            microphone={true}
+            recording={recording}
+            processing={streaming}
+            onEvent={handleEvent}
+          >
+            {/* TODO(burdon): Move offline switch into dialog. */}
+            {online !== undefined && (
+              <Input.Root>
+                <Input.Label srOnly>{t('online-switch.label')}</Input.Label>
+                <Input.Switch classNames='mx-2' checked={online} onCheckedChange={onOnlineChange} />
+              </Input.Root>
+            )}
+          </ChatActions>
+        </div>
+      )}
     </div>
   );
 };
 
-ChatPrompt.displayName = 'Chat.Prompt';
+ChatPrompt.displayName = CHAT_PROMPT_NAME;
 
 //
 // Chat
@@ -341,8 +465,10 @@ ChatPrompt.displayName = 'Chat.Prompt';
 
 export const Chat = {
   Root: ChatRoot,
+  Toolbar: ChatToolbar,
+  Viewport: ChatViewport,
   Thread: ChatThread,
   Prompt: ChatPrompt,
 };
 
-export type { ChatRootProps, ChatThreadProps, ChatPromptProps, ChatEvent };
+export type { ChatRootProps, ChatToolbarProps, ChatViewportProps, ChatThreadProps, ChatPromptProps, ChatEvent };