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

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,401 @@
+//
+// 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 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 { 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 {
+  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 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');
+
+//
+// Root
+//
+
+type ChatRootProps = ThemedClassName<
+  PropsWithChildren<
+    Pick<ChatContextValue, 'chat' | 'processor'> & {
+      onEvent?: (event: ChatEvent) => void;
+    }
+  >
+>;
+
+const ChatRoot = ({ classNames, children, chat, 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 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 (!streaming) {
+            void processor.request(event.text);
+          }
+          break;
+        }
+
+        case 'cancel': {
+          void processor.cancel();
+          break;
+        }
+
+        default: {
+          onEvent?.(event);
+        }
+      }
+    });
+  }, [event, onEvent, processor, streaming]);
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <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>
+  );
+};
+
+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'> &
+    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 { onUpdateBlueprint } = useBlueprintHandlers({
+    space,
+    context: processor.context,
+    blueprintRegistry: processor.blueprintRegistry,
+  });
+
+  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>
+  );
+};
+
+ChatPrompt.displayName = 'Chat.Prompt';
+
+//
+// Chat
+//
+
+export const Chat = {
+  Root: ChatRoot,
+  Thread: ChatThread,
+  Prompt: ChatPrompt,
+};
+
+export type { ChatRootProps, ChatThreadProps, ChatPromptProps, ChatEvent };

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './events';
+
+export * from './Chat';

package/src/components/ChatContainer.tsx

@@ -2,36 +2,66 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React, { useEffect } from 'react';
 
-import { Capabilities, useCapabilities, useCapability } from '@dxos/app-framework';
-import { type AssociatedArtifact } from '@dxos/artifact';
-import { TranscriptionCapabilities } from '@dxos/plugin-transcription';
+import { Capabilities, useCapability } from '@dxos/app-framework';
+import { getSpace } from '@dxos/client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
+import { type MaybePromise } from '@dxos/util';
 
-import { ThreadContainer } from './Thread';
-import { ASSISTANT_PLUGIN } from '../meta';
-import { type AssistantSettingsProps, type AIChatType } from '../types';
+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: AIChatType;
-  associatedArtifact?: AssociatedArtifact;
+  chat: Assistant.Chat;
+  role?: string;
+  onProcessorReady?: (processor: AiChatProcessor) => MaybePromise<void>;
 };
 
-// TODO(burdon): Attention.
-export const ChatContainer: FC<ChatContainerProps> = ({ role, chat, associatedArtifact }) => {
-  const transcription = useCapabilities(TranscriptionCapabilities.Transcriber).length > 0;
-  const settings = useCapability(Capabilities.SettingsStore).getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
+export const ChatContainer = ({ chat, onProcessorReady }: ChatContainerProps) => {
+  const space = getSpace(chat);
+  const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
+  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;
+  }
 
   return (
-    <StackItem.Content role={role} classNames='container-max-width'>
-      <ThreadContainer
-        chat={chat}
-        settings={settings}
-        transcription={transcription}
-        associatedArtifact={associatedArtifact}
-      />
+    <StackItem.Content classNames='container-max-width'>
+      <Chat.Root chat={chat} processor={processor}>
+        <Chat.Thread />
+        <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

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { 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;
+};
+
+export const ChatDialog = ({ chat }: ChatDialogProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const space = getSpace(chat);
+  const settings = useCapability(Capabilities.SettingsStore).getStore<Assistant.Settings>(meta.id)?.value;
+  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);
+  const [expanded, setExpanded] = useState(false);
+  const handleEvent = useCallback<NonNullable<ChatRootProps['onEvent']>>((event) => {
+    switch (event.type) {
+      case 'submit':
+      case 'thread-open':
+        setOpen(true);
+        setExpanded(true);
+        break;
+      case 'thread-close':
+        setOpen(false);
+        break;
+    }
+  }, []);
+
+  if (!chat || !processor) {
+    return null;
+  }
+
+  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>
+          <Chat.Thread />
+        </NativeChatDialog.Content>
+        <NativeChatDialog.Footer>
+          <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onChangeOnline={setOnline} expandable />
+        </NativeChatDialog.Footer>
+      </NativeChatDialog.Root>
+    </Chat.Root>
+  );
+};
+
+export default ChatDialog;

package/src/components/ChatPrompt/ChatActions.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { meta } from '../../meta';
+import { type ChatEvent } from '../Chat';
+
+export type ChatActionsProps = ThemedClassName<
+  PropsWithChildren<{
+    microphone?: boolean;
+    recording?: boolean;
+    processing?: boolean;
+    onEvent?: (event: ChatEvent) => void;
+  }>
+>;
+
+export const ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }: ChatActionsProps) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <div className={mx('flex items-center mie-1', classNames)}>
+      {children}
+
+      {(processing && (
+        <IconButton
+          disabled={!processing}
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--x--regular'
+          iconOnly
+          label={t('button cancel processing')}
+          onClick={() => onEvent?.({ type: 'cancel' })}
+        />
+      )) || (
+        <IconButton
+          disabled
+          classNames='px-1.5'
+          variant='ghost'
+          size={5}
+          icon='ph--arrow-down--regular'
+          iconOnly
+          label={t('button scroll down')}
+          onClick={() => onEvent?.({ type: 'scroll-to-bottom' })}
+        />
+      )}
+
+      {microphone && (
+        <IconButton
+          disabled={!processing}
+          classNames={mx('px-1.5', recording && 'bg-primary-500')}
+          variant='ghost'
+          size={5}
+          icon='ph--microphone--regular'
+          iconOnly
+          noTooltip
+          label={t('button microphone')}
+          onMouseDown={() => onEvent?.({ type: 'record-start' })}
+          onMouseUp={() => onEvent?.({ type: 'record-stop' })}
+          onTouchStart={() => onEvent?.({ type: 'record-start' })}
+          onTouchEnd={() => onEvent?.({ type: 'record-stop' })}
+        />
+      )}
+    </div>
+  );
+};