@dxos/plugin-assistant 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/ChatThread/registry.tsx

@@ -5,17 +5,18 @@
 import React from 'react';
 
 import { log } from '@dxos/log';
+import { TogglePanel } from '@dxos/react-ui-components';
 import {
   PromptWidget,
+  ReasoningWidget,
   ReferenceWidget,
   SelectWidget,
   SuggestionWidget,
   SummaryWidget,
-  ToggleContainer,
 } from '@dxos/react-ui-components';
-import { type XmlWidgetProps, type XmlWidgetRegistry, getXmlTextChild } from '@dxos/react-ui-editor';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { ContentBlock, type Message } from '@dxos/types';
+import { type XmlWidgetProps, type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
 
 import { ToolBlock } from '../ToolBlock';
 
@@ -23,12 +24,21 @@ import { type BlockRenderer, type MessageThreadContext } from './sync';
 
 const Fallback = ({ _tag, ...props }: XmlWidgetProps<MessageThreadContext>) => {
   return (
-    <ToggleContainer.Root classNames='rounded-sm'>
-      <ToggleContainer.Header classNames='bg-groupSurface'>{_tag}</ToggleContainer.Header>
-      <ToggleContainer.Content classNames='bg-modalSurface'>
-        <Json classNames='!p-2 text-sm' data={props} />
-      </ToggleContainer.Content>
-    </ToggleContainer.Root>
+    <TogglePanel.Root classNames='rounded-xs'>
+      <TogglePanel.Header classNames='bg-group-surface'>{_tag}</TogglePanel.Header>
+      <TogglePanel.Content classNames='bg-modal-surface'>
+        <Json classNames='p-2! text-sm' data={props} />
+      </TogglePanel.Content>
+    </TogglePanel.Root>
+  );
+};
+
+const Summary = ({ text }: { text: string }) => {
+  return (
+    <TogglePanel.Root classNames='rounded-sm'>
+      <TogglePanel.Header classNames='bg-group-surface'>Conversation summarized</TogglePanel.Header>
+      <TogglePanel.Content classNames='bg-modal-surface'>{text}</TogglePanel.Content>
+    </TogglePanel.Root>
   );
 };
 
@@ -40,21 +50,28 @@ export const componentRegistry: XmlWidgetRegistry = {
   // Widgets
   //
 
-  ['prompt' as const]: {
+  prompt: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new PromptWidget(text) : null;
     },
   },
-  ['reference' as const]: {
+  reasoning: {
+    block: true,
+    factory: ({ children }) => {
+      const text = getXmlTextChild(children);
+      return text ? new ReasoningWidget(text) : null;
+    },
+  },
+  reference: {
     block: false,
     factory: ({ children, ref }) => {
       const text = getXmlTextChild(children);
       return text && ref ? new ReferenceWidget(text, ref) : null;
     },
   },
-  ['select' as const]: {
+  select: {
     block: true,
     factory: ({ children }) => {
       const options = children
@@ -63,14 +80,14 @@ export const componentRegistry: XmlWidgetRegistry = {
       return options?.length ? new SelectWidget(options) : null;
     },
   },
-  ['suggestion' as const]: {
+  suggestion: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new SuggestionWidget(text) : null;
     },
   },
-  ['summary' as const]: {
+  stats: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
@@ -82,24 +99,28 @@ export const componentRegistry: XmlWidgetRegistry = {
   // React
   //
 
-  ['toolCall' as const]: {
+  toolCall: {
     block: true,
     Component: ToolBlock,
   },
-  ['toolResult' as const]: {
+  toolResult: {
     block: true,
     Component: Fallback,
   },
-  ['toolkit' as const]: {
+  toolkit: {
     block: true,
     Component: Fallback,
   },
+  summary: {
+    block: true,
+    Component: Summary,
+  },
 
   //
   // Fallback
   //
 
-  ['json' as const]: {
+  json: {
     block: true,
     Component: Fallback,
   },
@@ -158,13 +179,25 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
       return `<toolCall id="${block.toolCallId}" />`;
     }
     case 'toolResult': {
-      context.updateWidget<{ blocks: ContentBlock.Any[] }>(block.toolCallId, ({ blocks = [] }) => ({
+      // TODO(dmaretskyi): the parameter could be undefined, perhaps tool blocks are not arriving in order.
+      context.updateWidget<{ blocks: ContentBlock.Any[] }>(block.toolCallId, ({ blocks = [] } = { blocks: [] }) => ({
         blocks: [...blocks, block],
       }));
       break;
     }
+    case 'stats': {
+      return `<stats>${ContentBlock.createStatsMessage(block)}</stats>`;
+    }
+    case 'reasoning': {
+      const text = block.reasoningText ?? block.redactedText;
+      if (!text) {
+        return;
+      }
+      // TODO(dmaretskyi): The mixed Markdown/XML parser does not support parsing multi-line XML tags.
+      return `<reasoning>${text.replace(/\n/g, ' ').trim()}</reasoning>`;
+    }
     case 'summary': {
-      return `<summary>${ContentBlock.createSummaryMessage(block)}</summary>`;
+      return `<summary>${block.content}</summary>`;
     }
     default: {
       // TODO(burdon): Needs stable ID.

package/src/components/ChatThread/sync.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment jsdom
+
 //
 // Copyright 2025 DXOS.org
 //
@@ -6,6 +8,8 @@ import { EditorView } from '@codemirror/view';
 import { describe, it } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 
+import { Obj } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
 import { type ContentBlock } from '@dxos/types';
 
 import { createMessage } from '../../testing';
@@ -54,7 +58,9 @@ describe('reducers', () => {
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!', ''].join('\n'));
 
-      messages[1].blocks.push({ _tag: 'text', text: 'How can I help?' });
+      Obj.change(messages[1], (obj) => {
+        obj.blocks.push({ _tag: 'text', text: 'How can I help?' });
+      });
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!', 'How can I help?', ''].join('\n'));
     }),
@@ -74,12 +80,16 @@ describe('reducers', () => {
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!'].join('\n'));
 
-      const block = messages[1].blocks[0] as ContentBlock.Text;
-      block.text = 'Hi there! How are you?';
-      block.pending = false;
+      Obj.change(messages[1], (obj) => {
+        const block = obj.blocks[0] as Mutable<ContentBlock.Text>;
+        block.text = 'Hi there! How are you?';
+        block.pending = false;
+      });
       syncer.append(messages);
 
-      messages[1].blocks.push({ _tag: 'text', text: 'How can I help?' });
+      Obj.change(messages[1], (obj) => {
+        obj.blocks.push({ _tag: 'text', text: 'How can I help?' });
+      });
       syncer.append(messages);
       expect(doc.content).toEqual(
         ['<prompt>Hello</prompt>', 'Hi there! How are you?', 'How can I help?', ''].join('\n'),

package/src/components/ChatThread/sync.ts

@@ -5,8 +5,8 @@
 import { type DXN } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { type MarkdownStreamController } from '@dxos/react-ui-components';
-import { type StateDispatch, type XmlWidgetStateManager } from '@dxos/react-ui-editor';
 import { type ContentBlock, type Message } from '@dxos/types';
+import { type StateDispatch, type XmlWidgetStateManager } from '@dxos/ui-editor';
 
 /**
  * Update document.
@@ -73,6 +73,12 @@ export class MessageSyncer {
    * Syncs messages with the editor.
    */
   append(messages: Message.Message[], flush = false): boolean {
+    // TODO(dmaretskyi): MarkdownStream currently does not support streaming XML tags, so we need to remove pending non-text blocks.
+    messages = messages.map((message) => ({
+      ...message,
+      blocks: message.blocks.filter((block) => !block.pending || block._tag === 'text'),
+    }));
+
     // Check if new set of messages.
     if (this._initialMessageId !== messages[0]?.id) {
       this.reset();
@@ -87,7 +93,13 @@ export class MessageSyncer {
 
       const content = buffer.join('');
       this._model.view?.dispatch({
-        changes: [{ from: 0, to: this._model.view?.state.doc.length ?? 0, insert: content }],
+        changes: [
+          {
+            from: 0,
+            to: this._model.view?.state.doc.length ?? 0,
+            insert: content,
+          },
+        ],
         selection: { anchor: content.length },
       });
 
@@ -102,13 +114,13 @@ export class MessageSyncer {
   }
 
   private process(messages: Message.Message[], append: (content: string) => void) {
-    log('sync', {
-      doc: this._model.view?.state.doc.length,
-      messages: messages.map((message) => message.blocks.length),
-      currentMessageIndex: this._currentMessageIndex,
-      currentBlockIndex: this._currentBlockIndex,
-      currentBlockContent: this._currentBlockContent,
-    });
+    // console.log('sync', {
+    //   doc: this._model.view?.state.doc.length,
+    //   messages: messages.map((message) => message.blocks.length),
+    //   currentMessageIndex: this._currentMessageIndex,
+    //   currentBlockIndex: this._currentBlockIndex,
+    //   currentBlockContent: this._currentBlockContent,
+    // });
 
     let i = this._currentMessageIndex;
     for (const message of messages.slice(this._currentMessageIndex)) {
@@ -129,7 +141,7 @@ export class MessageSyncer {
             content = currentBlockContent;
           }
 
-          log('append', { message: i, block: j, content });
+          // console.log('append', { message: i, block: j, content });
           this._currentBlockContent = currentBlockContent;
           append(content);
         }

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -45,7 +45,7 @@ const TEMPLATE = trim`
 const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
   const client = useClient();
   const [blueprint] = useState(() => {
-    const space = client.spaces.default;
+    const space = client.spaces.get()[0];
     return space.db.add(
       Blueprint.make({
         key: 'example.com/blueprint/test',
@@ -56,21 +56,17 @@ const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
   });
 
   return (
-    <TemplateEditor
-      classNames='bg-baseSurface max-is-prose is-full'
-      id={blueprint.id}
-      template={blueprint.instructions}
-    />
+    <TemplateEditor classNames='dx-document bg-base-surface' id={blueprint.id} template={blueprint.instructions} />
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-assistant/TemplateEditor',
+  title: 'plugins/plugin-assistant/components/TemplateEditor',
   component: TemplateEditor as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],
       createIdentity: true,

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -3,65 +3,73 @@
 //
 
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import React from 'react';
 
 import { type Template } from '@dxos/blueprints';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { createDocAccessor } from '@dxos/echo-db';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../../meta';
 
 import { handlebars, xmlDecorator } from './extensions';
 
-export type TemplateEditorProps = ThemedClassName<{
+export type TemplateEditorProps = {
   id: string;
   template: Template.Template;
   lineNumbers?: boolean;
-}>;
+};
 
-export const TemplateEditor = ({ id, classNames, template, lineNumbers = true }: TemplateEditorProps) => {
-  const { t } = useTranslation(meta.id);
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(() => {
-    const text = template.source?.target;
-    if (!text) {
-      return {};
-    }
+export const TemplateEditor = composable<HTMLDivElement, TemplateEditorProps>(
+  ({ classNames, id, template, lineNumbers = true, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+    const { parentRef } = useTextEditor(() => {
+      const text = template.source?.target;
+      if (!text) {
+        return {};
+      }
 
-    return {
-      initialValue: text.content ?? '',
-      extensions: [
-        createDataExtensions({
-          id,
-          text: createDocAccessor(text, ['content']),
-        }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineNumbers,
-          lineWrapping: true,
-          placeholder: t('template placeholder'),
-        }),
-        createThemeExtensions({ themeMode, slots: { content: { className: '!pie-4' } } }),
-        createMarkdownExtensions(),
-        decorateMarkdown(),
-        handlebars(),
-        // xml(),
-        // NOTE: Since we're using markdown only HTML nodes are parsed.
-        xmlDecorator(),
-        syntaxHighlighting(defaultHighlightStyle),
-      ].filter(isNonNullable),
-    };
-  }, [themeMode, template.source?.target, lineNumbers]);
+      return {
+        initialValue: text.content ?? '',
+        extensions: [
+          createDataExtensions({ id, text: createDocAccessor(text, ['content']) }),
+          createBasicExtensions({
+            bracketMatching: false,
+            lineNumbers,
+            lineWrapping: true,
+            placeholder: t('template placeholder'),
+          }),
+          createThemeExtensions({ themeMode }),
+          createMarkdownExtensions(),
+          decorateMarkdown(),
+          handlebars(),
+          // xml(),
+          // NOTE: Since we're using markdown only HTML nodes are parsed.
+          xmlDecorator(),
+          syntaxHighlighting(defaultHighlightStyle),
+        ].filter(isNonNullable),
+      };
+    }, [themeMode, template.source?.target, lineNumbers]);
 
-  return <div ref={parentRef} className={mx('bs-full overflow-hidden', classNames)} />;
-};
+    return (
+      <div
+        {...composableProps(props, {
+          role: 'none',
+          classNames: ['h-full overflow-hidden', classNames],
+        })}
+        ref={composeRefs(parentRef, forwardedRef)}
+      />
+    );
+  },
+);

package/src/components/TemplateEditor/TemplateForm.stories.tsx

@@ -3,9 +3,11 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Blueprint, Template } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -13,22 +15,23 @@ import { trim } from '@dxos/util';
 
 import { translations } from '../../translations';
 
-import { TemplateForm } from './TemplateForm';
+import { type TemplateChangeCallback, TemplateForm } from './TemplateForm';
 
 const TEMPLATE = trim`
   You are a machine that is an expert chess player.
   The move history of the current game is: {{history}}
   If asked to suggest a move explain why it is a good move.
-  
+
   ---
- 
+
   {{input}},
 `;
 
 const DefaultStory = () => {
   const client = useClient();
   const [blueprint] = useState(() => {
-    const space = client.spaces.default;
+    const space = client.spaces.get()[0];
+    invariant(space, 'TemplateForm story requires at least one space');
     return space.db.add(
       Blueprint.make({
         key: 'example.com/blueprint/test',
@@ -38,20 +41,27 @@ const DefaultStory = () => {
     );
   });
 
+  const handleChange: TemplateChangeCallback = useCallback(
+    (mutate) => {
+      Obj.change(blueprint, (obj) => mutate(obj.instructions));
+    },
+    [blueprint],
+  );
+
   return (
-    <div role='none' className='flex is-[40rem] border border-separator overflow-hidden'>
-      <TemplateForm id={blueprint.id} template={blueprint.instructions} />
+    <div role='none' className='flex w-[40rem] border border-separator overflow-hidden'>
+      <TemplateForm id={blueprint.id} template={blueprint.instructions} onChange={handleChange} />
     </div>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-assistant/TemplateForm',
+  title: 'plugins/plugin-assistant/components/TemplateForm',
   component: TemplateForm,
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],
       createIdentity: true,