@dxos/plugin-assistant 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

package/src/components/ChatThread/ChatThread.tsx

@@ -2,24 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type CSSProperties, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
 import { type Identity } from '@dxos/react-client/halo';
 import { type ThemedClassName, setRef } from '@dxos/react-ui';
-import { MarkdownStream, type MarkdownStreamController, type MarkdownStreamProps } from '@dxos/react-ui-components';
+import { MarkdownStream, type MarkdownStreamController, type MarkdownStreamProps } from '@dxos/react-ui-markdown';
 import { type Message } from '@dxos/types';
-import { mx } from '@dxos/ui-theme';
 import { keyToFallback } from '@dxos/util';
 
+import { type Assistant } from '../../types';
 import { type ChatEvent } from '../Chat';
-import { blockToMarkdown, componentRegistry } from './registry';
+import { componentRegistry, createBlockRenderer } from './registry';
 import { MessageSyncer } from './sync';
 
 const defaultOptions: MarkdownStreamProps['options'] = {
   autoScroll: true,
-  // wire: true,
-  cursor: true,
+  cursor: false,
+  fader: false,
+  typewriter: true,
 };
 
 export type ChatThreadProps = ThemedClassName<
@@ -27,13 +28,27 @@ export type ChatThreadProps = ThemedClassName<
     identity?: Identity;
     messages?: Message.Message[];
     error?: Error;
+    viewType?: Assistant.ChatView;
     onEvent?: (event: ChatEvent) => void;
-  } & Pick<MarkdownStreamProps, 'options' | 'debug'>
+  } & Pick<MarkdownStreamProps, 'options' | 'debug' | 'extensions' | 'footer'>
 >;
 
-// TODO(burdon): Memo thread position.
 export const ChatThread = forwardRef<MarkdownStreamController | null, ChatThreadProps>(
-  ({ classNames, identity, messages = [], error, options = defaultOptions, debug = false, onEvent }, forwardedRef) => {
+  (
+    {
+      classNames,
+      identity,
+      messages = [],
+      error,
+      options = defaultOptions,
+      footer,
+      debug = false,
+      extensions,
+      viewType,
+      onEvent,
+    },
+    forwardedRef,
+  ) => {
     const [controller, setController] = useState<MarkdownStreamController | null>(null);
     const handleMarkdownStreamRef = useCallback(
       (instance: MarkdownStreamController | null) => {
@@ -48,16 +63,29 @@ export const ChatThread = forwardRef<MarkdownStreamController | null, ChatThread
       [identity],
     );
 
-    // Show error.
+    // Jump to the bottom instantly when the thread first mounts (e.g. opening the companion);
+    // smooth-scroll only on subsequent error changes.
+    const initializedRef = useRef(false);
     useEffect(() => {
-      controller?.scrollToBottom();
+      if (!controller) {
+        // MarkdownStream is keyed by viewType; switching views replaces the controller. Reset so
+        // the first scroll for the new controller is instant rather than animated.
+        initializedRef.current = false;
+        return;
+      }
+      controller.scrollToBottom(initializedRef.current ? 'smooth' : 'instant');
+      initializedRef.current = true;
     }, [controller, error]);
 
     // Update document.
-    const syncer = useMemo(() => controller && new MessageSyncer(controller, blockToMarkdown), [controller]);
+    const renderer = useMemo(() => createBlockRenderer(viewType), [viewType]);
+    const syncer = useMemo(() => controller && new MessageSyncer(controller, renderer), [controller, renderer]);
     useEffect(() => {
-      const reset = syncer?.append(messages, true);
-      if (reset) {
+      if (!syncer) {
+        return;
+      }
+
+      if (syncer.update(messages)) {
         controller?.scrollToBottom('instant');
       }
     }, [controller, syncer, messages]);
@@ -76,19 +104,15 @@ export const ChatThread = forwardRef<MarkdownStreamController | null, ChatThread
     );
 
     return (
-      <div
-        role='none'
-        className={mx('flex h-full w-full justify-center overflow-hidden', classNames)}
-        style={
-          {
-            '--user-fill': `var(--color-${userHue}-fill)`,
-          } as CSSProperties
-        }
-      >
+      <div data-hue={userHue} className='contents'>
         <MarkdownStream
+          key={viewType}
+          classNames={classNames}
           registry={componentRegistry}
           options={options}
           debug={debug}
+          extensions={extensions}
+          footer={footer}
           onEvent={handleEvent}
           ref={handleMarkdownStreamRef}
         />

package/src/components/ChatThread/DEBUG.md

@@ -0,0 +1,41 @@
+# Dataflow from AI to Codemirror
+
+AiSession (packages/core/assistant/src/conversation/session.ts)
+│
+│ emits ephemeral Trace events containing
+│ PartialBlock { messageId, role, block: ContentBlock.Any }
+│ via AgentService.Session.subscribeEphemeral(): Stream<Trace.Message>
+▼
+AiChatProcessor (packages/plugins/plugin-assistant/src/processor/processor.ts)
+│
+│ Stream.runForEach → if Trace.isOfType(PartialBlock) →
+│ #handleEphemeralMessage(event.data)
+│ → upserts Message.Message into #streaming atom
+│ → finalizes into #messages atom on complete block
+▼
+Chat.tsx (packages/plugins/plugin-assistant/src/components/Chat/Chat.tsx)
+│
+│ reads processor.messages + processor.streaming atoms,
+│ passes flat Message[] down to ChatThread
+▼
+ChatThread.tsx (packages/plugins/plugin-assistant/src/components/ChatThread/ChatThread.tsx)
+│
+│ MessageSyncer (sync.ts) compares current messages
+│ to last rendered set:
+│ - new finalized chunk → controller.append(delta)
+│ - changed earlier message → controller.setContent(full)
+│ blockToMarkdown serializes ContentBlocks → markdown,
+│ embedding tool calls as XML widget tags
+│ (e.g. <tool-call name="...">...</tool-call>)
+▼
+MarkdownStreamController.append / setContent
+▼
+MarkdownStream (packages/ui/react-ui-markdown/src/MarkdownStream/MarkdownStream.tsx)
+│
+│ CodeMirror editor with:
+│ - extendedMarkdown (parseMixed → xmlLanguage on HTMLBlock/Paragraph)
+│ - xmlTags (registry → React/native widget portals)
+│ - wire extension (buffers appended text, drips at typewriter rate,
+│ treats XML atomic ranges as indivisible units)
+▼
+Rendered DOM (markdown + portaled widgets for tool calls / reasoning / etc.)

package/src/components/ChatThread/Link.tsx

@@ -6,20 +6,20 @@ import React, { useMemo } from 'react';
 
 import { type Space } from '@dxos/client/echo';
 import { Entity } from '@dxos/echo';
-import { type DXN } from '@dxos/keys';
+import { type URI } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 
 export type ObjectLinkProps = {
   space: Space;
-  dxn: DXN;
+  dxn: URI.URI;
 };
 
 export const ObjectLink = ({ space, dxn }: ObjectLinkProps) => {
-  const ref = useMemo(() => space.db.makeRef(dxn), [space, dxn.toString()]);
+  const ref = useMemo(() => space.db.makeRef(dxn), [space, dxn]);
 
-  const title = (ref.target && Entity.getLabel(ref.target)) ?? ref.target?.id ?? ref.dxn.toString();
+  const title = (ref.target && Entity.getLabel(ref.target)) ?? ref.target?.id ?? ref.uri;
   return (
-    <DxAnchor rootclassname='dx-tag--anchor' dxn={dxn.toString()}>
+    <DxAnchor rootclassname='dx-tag--anchor' dxn={dxn}>
       {title}
     </DxAnchor>
   );

package/src/components/ChatThread/MarkdownStream.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState, type CSSProperties } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import '@dxos/lit-ui';
 import { PublicKey } from '@dxos/keys';
@@ -15,13 +15,15 @@ import {
   type MarkdownStreamController,
   type MarkdownStreamProps,
   textStream,
-} from '@dxos/react-ui-components';
+} from '@dxos/react-ui-markdown';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ContentBlock } from '@dxos/types';
 import { keyToFallback } from '@dxos/util';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { componentRegistry } from './registry';
+import REASONING from './testing/reasoning.md?raw';
 import THINKING from './testing/thinking.md?raw';
 import THREAD_1 from './testing/thread-1.md?raw';
 import THREAD_WIDGETS from './testing/thread-widgets.md?raw';
@@ -144,7 +146,7 @@ const DefaultStory = ({
   }, [controller]);
 
   return (
-    <Panel.Root style={{ '--user-fill': `var(--color-${userHue}-fill)` } as CSSProperties}>
+    <Panel.Root data-hue={userHue}>
       <Panel.Toolbar asChild>
         <Toolbar.Root>
           <Toolbar.IconButton
@@ -206,7 +208,7 @@ export const Streaming: Story = {
     content: THREAD_1,
     options: {
       autoScroll: true,
-      wire: true,
+      typewriter: true,
       cursor: true,
     },
   },
@@ -241,3 +243,39 @@ export const Thinking: Story = {
     },
   },
 };
+
+/**
+ * Splits a fixture at the first `</prompt>` so the prompt can be pre-loaded as initialContent
+ * (matching production: user prompts are submitted whole and never streamed) while the assistant
+ * body is streamed. Keeps the streaming-tail XML scan focused on the tags it is meant for
+ * (`<reasoning>`, `<status>`) instead of accumulating widgets for an unclosed `<prompt>`.
+ */
+const splitPromptAndBody = (markdown: string): { prompt: string; body: string } => {
+  const closing = '</prompt>';
+  const idx = markdown.indexOf(closing);
+  if (idx === -1) {
+    return { prompt: '', body: markdown };
+  }
+  return { prompt: markdown.slice(0, idx + closing.length), body: markdown.slice(idx + closing.length) };
+};
+
+const REASONING_PARTS = splitPromptAndBody(REASONING);
+
+/**
+ * Streams a reasoning block whose body contains a numbered list — exercises the streaming-tail XML
+ * scan as `<reasoning>` opens, accumulates list-marker lines like `"1. "`, and finally closes. Use
+ * this to visually verify that the reasoning widget renders cleanly without duplicate opening tags
+ * (regression from the per-line bullet stripper that used to collapse `"1. "` to empty mid-stream).
+ */
+export const Reasoning: Story = {
+  args: {
+    registry: componentRegistry,
+    initialContent: REASONING_PARTS.prompt,
+    content: REASONING_PARTS.body,
+    options: {
+      autoScroll: true,
+      typewriter: true,
+      cursor: true,
+    },
+  },
+};

package/src/components/ChatThread/registry.tsx

@@ -8,11 +8,11 @@ import { log } from '@dxos/log';
 import { ContentBlock, type Message } from '@dxos/types';
 import { type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
 
+import { type Assistant } from '../../types';
 import { type BlockRenderer, type MessageThreadContext } from './sync';
 import { applyToolBlockToWidgetState } from './tool-widget-state';
 import {
   FallbackWidget,
-  PromptWidget,
   ReasoningWidget,
   ReferenceWidget,
   SelectWidget,
@@ -25,17 +25,36 @@ import {
 
 /**
  * Custom XML tags registry.
+ *
+ * NOTE: `<prompt>` has no widget — it is rendered via mark + line decorations
+ * (`xmlBlockDecoration`) in MarkdownStream so the prompt text remains part of the document
+ * and can be highlighted by `xmlFormatting`. It is still listed here so the markdown block
+ * parser (`xmlBlockParsers`) knows to keep `<prompt>...</prompt>` as a single HTMLBlock
+ * — otherwise an unregistered prompt opens a Paragraph that lazy-continues into the
+ * following lines and breaks parsing of subsequent multi-line tags (e.g. a `<reasoning>`
+ * block whose content contains an ordered list).
  */
 export const componentRegistry: XmlWidgetRegistry = {
   //
-  // DOM Widgets
+  // Block-only (no widget — see note above).
   //
 
   prompt: {
     block: true,
-    factory: ({ children }) => {
+  },
+
+  //
+  // DOM Widgets
+  //
+
+  synthetic: {
+    block: true,
+    factory: ({ children, range }) => {
       const text = getXmlTextChild(children);
-      return text ? new PromptWidget(text) : null;
+      // TODO(dmaretskyi): Synthetic blocks are "user"-turn messages generated by the system, i.e. and event from a trigger, an email-encoded to JSON, etc.
+      //                   They are meant to start agent, to process the event without looking like user-authored prompt.
+      //                   Create a new widget type for them.
+      return text ? new ReasoningWidget(text, range.from) : null;
     },
   },
   reasoning: {
@@ -79,9 +98,9 @@ export const componentRegistry: XmlWidgetRegistry = {
   status: {
     block: true,
     streaming: true,
-    factory: ({ children, range }) => {
+    factory: ({ children }) => {
       const text = getXmlTextChild(children);
-      return text ? new StatusWidget(text, range.from) : null;
+      return text ? new StatusWidget(text) : null;
     },
   },
 
@@ -96,7 +115,7 @@ export const componentRegistry: XmlWidgetRegistry = {
   toolCall: {
     block: true,
     Component: (props) => (
-      <div role='none' className='py-2'>
+      <div className='py-2'>
         <ToolWidget {...props} />
       </div>
     ),
@@ -123,17 +142,51 @@ export const componentRegistry: XmlWidgetRegistry = {
 /**
  * Convert block to markdown.
  */
-export const blockToMarkdown: BlockRenderer = (
-  context: MessageThreadContext,
+export const blockToMarkdown: BlockRenderer = createBlockRenderer('normal');
+
+/**
+ * Create a {@link BlockRenderer} that filters blocks based on the chat view type.
+ *
+ * - `summary`: only user prompts.
+ * - `normal`: user prompts + assistant text + tool calls + summary/select/suggestion/reference + status. Hides reasoning.
+ * - `thinking`: same as normal plus reasoning.
+ * - `debug`: renders every block (raw fallbacks visible).
+ */
+export function createBlockRenderer(viewType: Assistant.ChatView | undefined): BlockRenderer {
+  return (context, message, block) => {
+    if (!isBlockVisible(viewType, message, block)) {
+      return;
+    }
+    let str = blockToMarkdownImpl(context, message, block);
+    if (str && !block.pending) {
+      // Use a blank line as the block separator so each rendered block parses as its own
+      // markdown block. A single newline lets CommonMark absorb a following `<prompt>` (an
+      // HTML type-7 tag, which can't interrupt an open paragraph) into the previous
+      // paragraph, rendering the prompt bubble inline next to the prior assistant text.
+      return (str += '\n');
+    }
+    return str;
+  };
+}
+
+const isBlockVisible = (
+  viewType: Assistant.ChatView | undefined,
   message: Message.Message,
   block: ContentBlock.Any,
-) => {
-  let str = blockToMarkdownImpl(context, message, block);
-  if (str && !block.pending) {
-    return (str += '\n');
+): boolean => {
+  switch (viewType) {
+    case 'debug':
+      return true;
+    case 'normal':
+      return block._tag !== 'reasoning';
+    case 'summary':
+      // Show only conversational text (user prompts + assistant replies); hide reasoning,
+      // tool calls, status, stats, and synthetic system messages.
+      return block._tag === 'text' && (block as ContentBlock.Text).disposition !== 'synthetic';
+    case 'thinking':
+    default:
+      return true;
   }
-
-  return str;
 };
 
 const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Message, block: ContentBlock.Any) => {
@@ -141,7 +194,11 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
   switch (block._tag) {
     case 'text': {
       if (message.sender.role === 'user') {
-        return `<prompt>${block.text}</prompt>`;
+        if (block.disposition === 'synthetic') {
+          return renderXMLBlock('synthetic', { content: block.text, pending: block.pending });
+        } else {
+          return `\n<prompt>${block.text}</prompt>`;
+        }
       } else {
         const text = block.text.trim();
         if (text.length > 0) {
@@ -155,7 +212,7 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
       if (block.pending) {
         return;
       }
-      const dxn = block.reference.dxn;
+      const dxn = block.reference.uri;
       return `<reference ref="${dxn.toString()}">${context.getObjectLabel(dxn)}</reference>`;
     }
 
@@ -217,18 +274,13 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
 const escapeXmlTextContent = (raw: string): string =>
   raw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-/**
- * Strip actual list-marker prefixes without removing meaningful leading content.
- */
-const stripBulletLikeLinePrefixes = (raw: string): string =>
-  raw
-    .split(/\r?\n/)
-    .map((line) => line.replace(/^\s*(?:[-*+•]|\d+[.)]\s)/, ''))
-    .join('\n');
-
 const renderXMLBlock = (tag: string, opts: { content?: string; pending?: boolean; attributes?: string }) => {
-  // Replace paragraph breaks so that markdown parser does not split the content into multiple paragraphs.
-  const content = escapeXmlTextContent(stripBulletLikeLinePrefixes((opts.content ?? '').replace(/\n\n/g, ' ').trim()));
+  // Replace paragraph breaks so that the markdown parser does not split the content into multiple paragraphs.
+  // NOTE: do not strip leading list-marker prefixes (`-`, `*`, `1. `, ...) per line — the streaming
+  // tag's range is replaced atomically by the XML widget so the inner markdown is never user-visible,
+  // and stripping can collapse a line to empty mid-stream (e.g. when only `1. ` has arrived), breaking
+  // the prefix-extension contract that `MessageSyncer` relies on for incremental appends.
+  const content = escapeXmlTextContent((opts.content ?? '').replace(/\n\n/g, ' ').trim());
 
   if (opts.pending) {
     return `<${tag}${opts.attributes ? ` ${opts.attributes}` : ''}>${content}`;