@dxos/plugin-assistant 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/components/BlueprintContainer.tsx

@@ -2,145 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import JSON5 from 'json5';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React from 'react';
 
-import { ToolRegistry } from '@dxos/ai';
-import { useCapability } from '@dxos/app-framework';
-import {
-  type Blueprint,
-  type BlueprintDefinition,
-  BlueprintMachine,
-  createLocalSearchTool,
-  createExaTool,
-  createGraphWriterTool,
-} from '@dxos/assistant';
-import { getSpace } from '@dxos/client/echo';
-import { DXN, Key } from '@dxos/echo';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
-import { getSelectionSet, useSelectionManager } from '@dxos/react-ui-attention';
-import { StackItem, type StackItemContentProps } from '@dxos/react-ui-stack';
+import { type Blueprint } from '@dxos/blueprints';
+import { StackItem } from '@dxos/react-ui-stack';
 
-import { BlueprintEditor } from './BlueprintEditor';
-import { AssistantCapabilities } from '../capabilities';
-import { meta } from '../meta';
-import { QueueLogger } from '../queue-logger';
+import { TemplateEditor } from './TemplateEditor';
 
-// TODO(burdon): Move to config.
-export const EXA_API_KEY = '9c7e17ff-0c85-4cd5-827a-8b489f139e03';
-
-// TODO(burdon): Validate.
-const parseBlueprint = (text: string): BlueprintDefinition | undefined => {
-  try {
-    const json = JSON5.parse(text);
-    const { steps } = json;
-    return { steps };
-  } catch (error) {
-    // Ignore.
-  }
+export type BlueprintContainerProps = {
+  blueprint: Blueprint.Blueprint;
 };
 
-export const BlueprintContainer = ({
-  role,
-  blueprint,
-}: Pick<StackItemContentProps, 'role'> & { blueprint: Blueprint }) => {
-  const { t } = useTranslation(meta.id);
-  const aiClient = useCapability(AssistantCapabilities.AiClient);
-  const selectionManager = useSelectionManager();
-  const [definition, setDefinition] = useState<BlueprintDefinition>();
-  useEffect(() => {
-    setDefinition({
-      steps: blueprint.steps.map(({ instructions, tools }) => ({ instructions, tools })),
-    });
-  }, [blueprint]);
-
-  const editorRef = useRef<EditorView | undefined>(undefined);
-
-  // TODO(burdon): Factor out.
-  const toolRegistry = useMemo(() => {
-    const space = getSpace(blueprint);
-    if (!space) {
-      return;
-    }
-
-    // TODO(burdon): How should the queue be created?
-    const queue = space.queues.create();
-
-    return new ToolRegistry([
-      createExaTool({ apiKey: EXA_API_KEY }),
-      createLocalSearchTool(space.db, queue),
-      createGraphWriterTool({
-        db: space.db,
-        queue,
-        schema: [], // TODO(burdon): Get schema from client/blueprint?
-        onDone: async (objects) => {
-          await queue.append(objects);
-        },
-      }),
-    ]);
-  }, [blueprint]);
-
-  const formatAndSave = useCallback((): BlueprintDefinition | undefined => {
-    if (!blueprint) {
-      return;
-    }
-
-    const text = editorRef.current?.state.doc.toString();
-    if (!text) {
-      return;
-    }
-
-    const definition = parseBlueprint(text);
-    if (!definition) {
-      return;
-    }
-
-    setDefinition(definition);
-    const formatted = JSON.stringify(definition, null, 2);
-    editorRef.current?.dispatch({
-      changes: { from: 0, to: text.length, insert: formatted },
-    });
-
-    blueprint.steps.length = 0;
-    for (const step of definition.steps) {
-      blueprint.steps.push({
-        id: Key.ObjectId.random(),
-        instructions: step.instructions,
-        tools: step.tools,
-      });
-    }
-
-    return blueprint;
-  }, [blueprint]);
-
-  // TODO(burdon): Save raw blueprint separately from parsed blueprint? (like Script).
-  const handleSave = useCallback(() => formatAndSave(), [formatAndSave]);
-
-  const handleRun = useCallback(async () => {
-    if (!aiClient?.value || !toolRegistry) {
-      return;
-    }
-
-    formatAndSave();
-
-    // Get input from selection.
-    const input = Array.from(getSelectionSet(selectionManager)).map((id) => DXN.fromLocalObjectId(id));
-    if (!input.length) {
-      return;
-    }
-
-    const machine = new BlueprintMachine(toolRegistry, blueprint).setLogger(new QueueLogger(blueprint));
-    await machine.runToCompletion({ aiClient: aiClient.value, input });
-  }, [aiClient.value, blueprint, formatAndSave, selectionManager, toolRegistry]);
-
+export const BlueprintContainer = ({ blueprint }: BlueprintContainerProps) => {
   return (
-    <StackItem.Content role={role} toolbar>
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleSave}>{t('button save')}</Toolbar.Button>
-        <Toolbar.Button onClick={handleRun}>{t('button run')}</Toolbar.Button>
-      </Toolbar.Root>
-      {definition && <BlueprintEditor ref={editorRef} blueprint={definition} />}
+    <StackItem.Content classNames='container-max-width'>
+      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
     </StackItem.Content>
   );
 };

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,389 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Event } from '@dxos/async';
+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, useDynamicRef, useTranslation } from '@dxos/react-ui';
+import { ChatEditor, type ChatEditorController, type ChatEditorProps, references } from '@dxos/react-ui-chat';
+import { mx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+import { isNotFalsy } from '@dxos/util';
+
+import { useReferencesProvider } from '../../hooks';
+import { meta } from '../../meta';
+import { type AiChatProcessor } from '../../processor';
+import { type Assistant } from '../../types';
+import {
+  ChatActions,
+  type ChatActionsProps,
+  ChatOptions,
+  type ChatPresetsProps,
+  ChatReferences,
+  ChatStatusIndicator,
+} from '../ChatPrompt';
+import {
+  type ChatThreadController,
+  ChatThread as NaturalChatThread,
+  type ChatThreadProps as NaturalChatThreadProps,
+} from '../ChatThread';
+
+import { type ChatEvent } from './events';
+
+//
+// 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.
+//
+
+type ChatContextValue = {
+  debug?: boolean;
+  event: Event<ChatEvent>;
+  space: Space;
+  chat: Assistant.Chat;
+  messages: DataType.Message[];
+  processor: AiChatProcessor;
+};
+
+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 lastPrompt = useRef<string | undefined>(undefined);
+
+  const messages = useMemo(() => {
+    const queueMessages = queue?.objects?.filter(Obj.instanceOf(DataType.Message)) ?? [];
+    return Array.dedupeWith([...queueMessages, ...pending], (a, b) => a.id === b.id);
+  }, [queue?.objects, pending]);
+
+  // Events.
+  const event = useMemo(() => new Event<ChatEvent>(), []);
+  useEffect(() => {
+    return event.on((ev) => {
+      switch (ev.type) {
+        case 'toggle-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.retry();
+          }
+          break;
+        }
+
+        case 'cancel': {
+          if (streaming) {
+            void processor.cancel();
+            if (lastPrompt.current) {
+              event.emit({ type: 'update-prompt', text: lastPrompt.current });
+            }
+          }
+          break;
+        }
+
+        default: {
+          onEvent?.(ev);
+        }
+      }
+    });
+  }, [event, processor, streaming, onEvent]);
+
+  if (!space) {
+    return null;
+  }
+
+  return (
+    <ChatContextProvider
+      debug={debug}
+      event={event}
+      chat={chat}
+      space={space}
+      messages={messages}
+      processor={processor}
+      {...props}
+    >
+      <div role='none' className={mx('flex flex-col h-full overflow-hidden', classNames)}>
+        {children}
+      </div>
+    </ChatContextProvider>
+  );
+};
+
+ChatRoot.displayName = 'Chat.Root';
+
+//
+// Prompt
+//
+
+type ChatPromptProps = ThemedClassName<
+  {
+    outline?: boolean;
+  } & Pick<ChatEditorProps, 'placeholder'> &
+    Omit<ChatPresetsProps, 'onChange'> & {
+      expandable?: boolean;
+      online?: boolean;
+      onOnlineChange?: (online: boolean) => void;
+      onPresetChange?: ChatPresetsProps['onChange'];
+    }
+>;
+
+const ChatPrompt = ({
+  classNames,
+  outline,
+  placeholder,
+  expandable,
+  online,
+  presets,
+  preset,
+  onPresetChange,
+  onOnlineChange,
+}: ChatPromptProps) => {
+  const { t } = useTranslation(meta.id);
+  const { space, event, processor } = useChatContext(ChatPrompt.displayName);
+
+  const error = useRxValue(processor.error).pipe(Option.getOrUndefined);
+  const streaming = useRxValue(processor.streaming);
+  const active = useRxValue(processor.active);
+  const activeRef = useDynamicRef(active);
+
+  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':
+          setRecordingState(true);
+          break;
+        case 'record-stop':
+          setRecordingState(false);
+          break;
+      }
+    });
+  }, [event]);
+
+  // TODO(burdon): Configure capability in TranscriptionPlugin.
+  const { recording } = useVoiceInput({
+    active: recordingState,
+    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 (!activeRef.current) {
+        event.emit({ type: 'submit', text });
+        return true;
+      }
+    },
+    [event],
+  );
+
+  const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
+    (ev) => {
+      event.emit(ev);
+    },
+    [event],
+  );
+
+  return (
+    <div
+      className={mx(
+        'is-full flex flex-col 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'>
+        <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>
+
+      <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} />
+        </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>
+  );
+};
+
+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,
+  Prompt: ChatPrompt,
+  Thread: ChatThread,
+};
+
+export type { ChatRootProps, ChatThreadProps, ChatPromptProps, ChatEvent };

package/src/components/Chat/events.ts

@@ -0,0 +1,57 @@
+//
+// 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: 'retry';
+    }
+  | {
+      type: 'cancel';
+    }
+  | {
+      type: 'delete';
+      id: string;
+    }
+  | {
+      type: 'add';
+      object: Obj.Any;
+    }
+  //
+  // UX
+  //
+  | {
+      type: 'update-prompt';
+      text: string;
+    }
+  | {
+      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';