@dxos/react-ui-chat 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-chat",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Chat components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,14 +18,12 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -34,28 +32,28 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.2",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/search": "^6.7.0",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/async": "0.10.0",
-    "@dxos/debug": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-components": "0.10.0",
-    "@dxos/react-ui-dnd": "0.10.0",
-    "@dxos/react-ui-syntax-highlighter": "0.10.0",
-    "@dxos/react-ui-editor": "0.10.0",
-    "@dxos/ui-editor": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/ui-types": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/echo": "0.10.0"
+    "@dxos/async": "0.11.1",
+    "@dxos/debug": "0.11.1",
+    "@dxos/echo": "0.11.1",
+    "@dxos/invariant": "0.11.1",
+    "@dxos/log": "0.11.1",
+    "@dxos/react-ui": "0.11.1",
+    "@dxos/react-ui-components": "0.11.1",
+    "@dxos/react-ui-editor": "0.11.1",
+    "@dxos/react-ui-syntax-highlighter": "0.11.1",
+    "@dxos/react-ui-dnd": "0.11.1",
+    "@dxos/ui-editor": "0.11.1",
+    "@dxos/ui-theme": "0.11.1",
+    "@dxos/ui-types": "0.11.1",
+    "@dxos/util": "0.11.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
@@ -63,18 +61,18 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/random": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/echo": "0.11.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/react-client": "0.11.1",
+    "@dxos/storybook-utils": "0.11.1"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui": "0.10.0"
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ChatEditor/ChatEditor.stories.tsx

@@ -3,13 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
 
-import { ChatEditor } from './ChatEditor';
+import { ChatEditor, type ChatEditorProps } from './ChatEditor';
+import { type CommandData, commands } from './commands';
 import { type ReferenceData } from './references';
 
 const meta = {
@@ -35,6 +38,14 @@ export const Default: Story = {
   },
 };
 
+export const Markdown: Story = {
+  args: {
+    classNames,
+    markdown: true,
+    placeholder: 'Type **markdown**...',
+  },
+};
+
 // TODO(burdon): Restore and reconcile with suggest/typeahead.
 export const WithSuggestions: Story = {
   args: {
@@ -95,3 +106,74 @@ export const WithReferences: Story = {
     },
   },
 };
+
+const projectCommands: CommandData[] = [
+  { sentinel: '$track', description: 'Record a follow-up task' },
+  { sentinel: '$hydrate', description: 'Checkpoint project state' },
+];
+
+// Reset per play run (module re-imports fresh on a vitest retry, so this doesn't leak across tests).
+let submittedTexts: string[] = [];
+
+// The `commands` extension isn't JSON-serializable, so it's built in `render` rather than passed
+// through `args` (Storybook's controls addon warns on cyclic arg values).
+const WithCommandsRender = (args: ChatEditorProps) => {
+  const extensions = useMemo(() => commands({ getCommands: () => projectCommands }), []);
+  return (
+    <ChatEditor
+      {...args}
+      extensions={extensions}
+      onSubmit={(text) => {
+        submittedTexts.push(text);
+        return true;
+      }}
+    />
+  );
+};
+
+export const WithCommands: Story = {
+  render: WithCommandsRender,
+  args: {
+    classNames,
+    placeholder: 'Type $ for commands...',
+  },
+  play: async ({ canvasElement }) => {
+    submittedTexts = [];
+
+    const content = await waitFor(() => {
+      const element = canvasElement.querySelector<HTMLElement>('.cm-content');
+      if (!element) {
+        throw new Error('Chat editor content not found.');
+      }
+      return element;
+    });
+
+    await userEvent.click(content);
+    await userEvent.type(content, '$t');
+
+    // The sentinel-command popover lists only prefix matches for the typed token. The matched
+    // prefix renders in its own span, so read the option label's full text rather than matching text nodes.
+    const optionLabels = () =>
+      Array.from(canvasElement.querySelectorAll('.cm-completionLabel')).map((node) => node.textContent);
+    await waitFor(() => expect(optionLabels()).toEqual(['$track']));
+
+    // `acceptCompletion` ignores Enter within `interactionDelay` (75ms, default) of the popover
+    // opening — an anti-flicker guard against an Enter that was already in flight before the
+    // options rendered. Real usage always clears this; wait it out so the test presses Enter the
+    // way a person would (after seeing the popover), not mid-guard.
+    await new Promise((resolve) => setTimeout(resolve, 150));
+
+    // Regression: `submit()`'s Enter binding must defer to the open completion popover (both sit at
+    // `Prec.highest`) rather than swallowing Enter and submitting the raw "$t" text.
+    await userEvent.keyboard('{Enter}');
+    await waitFor(() => expect(content.textContent).toEqual('$track'));
+    void expect(submittedTexts).toEqual([]);
+
+    // Enter with no completion open still submits and resets the editor (submit's own contract).
+    // `userEvent.keyboard` (unlike `userEvent.type(content, ...)`) drives `document.activeElement`
+    // directly, so it respects CodeMirror's actual cursor position instead of assuming one.
+    await userEvent.keyboard(`${'{Backspace}'.repeat('$track'.length)}hello{Enter}`);
+    await waitFor(() => expect(submittedTexts).toEqual(['hello']));
+    await waitFor(() => expect(canvasElement.querySelector('.cm-placeholder')).not.toBeNull());
+  },
+};

package/src/components/ChatEditor/ChatEditor.tsx

@@ -3,21 +3,14 @@
 //
 
 import { type Extension } from '@codemirror/state';
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import { Editor, type EditorController, type UseTextEditorProps } from '@dxos/react-ui-editor';
-import {
-  type BasicExtensionsOptions,
-  type SubmitOptions,
-  createBasicExtensions,
-  createThemeExtensions,
-  submit,
-  xmlFormatting,
-} from '@dxos/ui-editor';
-import { isTruthy } from '@dxos/util';
+import { type BasicExtensionsOptions, type SubmitOptions } from '@dxos/ui-editor';
 
 import { type ReferencesOptions } from './references';
+import { useChatExtensions } from './useChatExtensions';
 
 export interface ChatEditorController extends EditorController {}
 
@@ -25,29 +18,27 @@ export type ChatEditorProps = ThemedClassName<
   {
     extensions?: Extension;
     references?: ReferencesOptions;
+    /** Enable inline markdown formatting (decoration, syntax highlighting, and formatting shortcuts). */
+    markdown?: boolean;
   } & (SubmitOptions &
     Pick<UseTextEditorProps, 'id' | 'autoFocus'> &
     Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>)
 >;
 
-export const useChatExtensions = ({ extensions, lineWrapping = false, placeholder, onSubmit }: ChatEditorProps) => {
-  const { themeMode } = useThemeContext();
-  return useMemo<Extension[]>(
-    () =>
-      [
-        createThemeExtensions({ themeMode }),
-        createBasicExtensions({ bracketMatching: false, lineWrapping, placeholder }),
-        xmlFormatting(),
-        submit({ onSubmit }),
-        extensions,
-      ].filter(isTruthy),
-    [themeMode, extensions, onSubmit],
-  );
-};
-
 export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
-  ({ classNames, autoFocus, extensions: extensionsProp, lineWrapping = false, placeholder, onSubmit }, forwardRef) => {
-    const extensions = useChatExtensions({ extensions: extensionsProp, lineWrapping, placeholder, onSubmit });
+  (
+    {
+      classNames,
+      autoFocus,
+      extensions: extensionsProp,
+      markdown = false,
+      lineWrapping = false,
+      placeholder,
+      onSubmit,
+    },
+    forwardRef,
+  ) => {
+    const extensions = useChatExtensions({ extensions: extensionsProp, markdown, lineWrapping, placeholder, onSubmit });
 
     // TODO(burdon): Popover.
     return (

package/src/components/ChatEditor/commands.test.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { matchCommands } from './commands';
+
+describe('commands completion', () => {
+  test('prefix-matches sentinels', ({ expect }) => {
+    const all = [{ sentinel: '$track' }, { sentinel: '$resume' }];
+    expect(matchCommands(all, '$t').map((c) => c.sentinel)).toEqual(['$track']);
+    expect(matchCommands(all, '$')).toHaveLength(2);
+    expect(matchCommands(all, 'tr')).toHaveLength(0);
+  });
+});

package/src/components/ChatEditor/commands.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import {
+  type CompletionContext,
+  type CompletionResult,
+  acceptCompletion,
+  autocompletion,
+  completionStatus,
+} from '@codemirror/autocomplete';
+import { type Extension, Prec } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+
+export type CommandData = { sentinel: string; description?: string };
+
+/** Pure prefix matcher, exported for tests. */
+export const matchCommands = (all: CommandData[], token: string): CommandData[] =>
+  token.startsWith('$') ? all.filter(({ sentinel }) => sentinel.startsWith(token)) : [];
+
+export type CommandsOptions = { getCommands: () => CommandData[] };
+
+/**
+ * Sentinel-command completion: typing `$` offers the commands defined by the bound context's instructions.
+ */
+export const commands = ({ getCommands }: CommandsOptions): Extension => [
+  autocompletion({
+    override: [
+      (context: CompletionContext): CompletionResult | null => {
+        const word = context.matchBefore(/\$[\w-]*/);
+        if (!word || (word.from === word.to && !context.explicit)) {
+          return null;
+        }
+        const options = matchCommands(getCommands(), context.state.sliceDoc(word.from, word.to));
+        if (options.length === 0) {
+          return null;
+        }
+        return {
+          from: word.from,
+          options: options.map(({ sentinel, description }) => ({ label: sentinel, detail: description })),
+        };
+      },
+    ],
+  }),
+  // The host editor's `submit()` extension also binds Enter at `Prec.highest`; ties between equal
+  // precedences break by extension order, so the caller must place this extension ahead of `submit()`.
+  // `completionStatus`/`acceptCompletion` are imported from the same module as `autocompletion()` above
+  // (not re-derived in a different package) so this always reads the completion state `autocompletion()`
+  // actually wrote — a cross-package import of the same-named API can resolve to a distinct bundled
+  // copy of `@codemirror/autocomplete` under some bundler configurations, silently reading `null`.
+  Prec.highest(
+    keymap.of([
+      {
+        key: 'Enter',
+        run: (view) => (completionStatus(view.state) === 'active' ? acceptCompletion(view) : false),
+      },
+    ]),
+  ),
+];

package/src/components/ChatEditor/index.ts

@@ -2,6 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './commands';
 export * from './references';
 
+export * from './useChatExtensions';
+
 export * from './ChatEditor';

package/src/components/ChatEditor/useChatExtensions.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { useMemo } from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  formattingKeymap,
+  submit,
+  xmlFormatting,
+} from '@dxos/ui-editor';
+import { isTruthy } from '@dxos/util';
+
+import { type ChatEditorProps } from './ChatEditor';
+
+// Kept out of `ChatEditor.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on
+// every edit.
+
+export const useChatExtensions = ({
+  extensions,
+  markdown = false,
+  lineWrapping = false,
+  placeholder,
+  onSubmit,
+}: ChatEditorProps) => {
+  const { themeMode } = useThemeContext();
+  return useMemo<Extension[]>(
+    () =>
+      [
+        createThemeExtensions({ themeMode, syntaxHighlighting: markdown }),
+        createBasicExtensions({ bracketMatching: false, lineWrapping, placeholder }),
+        xmlFormatting(),
+        markdown && [createMarkdownExtensions(), decorateMarkdown(), formattingKeymap()],
+        // Caller extensions (e.g. `commands()`'s completion-aware Enter binding) must precede
+        // `submit()`: both bind Enter at `Prec.highest`, and CodeMirror breaks precedence ties by
+        // extension order, so listing `submit()` first would always win and swallow the keystroke.
+        extensions,
+        submit({ onSubmit }),
+      ]
+        .flat()
+        .filter(isTruthy),
+    [themeMode, markdown, lineWrapping, placeholder, extensions, onSubmit],
+  );
+};

package/src/components/ChatStatus/ChatStatus.stories.tsx

@@ -9,7 +9,8 @@ import { Button, Toolbar } from '@dxos/react-ui';
 import { Matrix } from '@dxos/react-ui-components';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ChatStatus, type ChatStatusController, useChatStatusContext } from './ChatStatus';
+import { ChatStatus, type ChatStatusController } from './ChatStatus';
+import { useChatStatusContext } from './ChatStatusContext';
 
 const meta = {
   title: 'ui/react-ui-chat/ChatStatus',

package/src/components/ChatStatus/ChatStatus.tsx

@@ -2,31 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, type Ref, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
+import { ChatStatusProvider, useChatStatusContext } from './ChatStatusContext';
 import { formatElapsed } from './format';
 
 const TICK_MS = 1_000;
 
-//
-// Context
-//
-
-type ChatStatusContextValue = {
-  /** Whole seconds elapsed since ChatStatus.Root mounted. Only advances while `running` is true. */
-  elapsed: number;
-  /** Whether the ChatStatus.Root tick is currently active. Toggled via the ChatStatusController. */
-  running: boolean;
-};
-
-const [ChatStatusProvider, useChatStatusContext] = createContext<ChatStatusContextValue>('ChatStatus');
-
-export { useChatStatusContext };
-
 //
 // Controller
 //

package/src/components/ChatStatus/ChatStatusContext.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+// Kept out of `ChatStatus.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and its hook exported beside them force a full page reload on every edit.
+
+//
+// Context
+//
+
+export type ChatStatusContextValue = {
+  /** Whole seconds elapsed since ChatStatus.Root mounted. Only advances while `running` is true. */
+  elapsed: number;
+  /** Whether the ChatStatus.Root tick is currently active. Toggled via the ChatStatusController. */
+  running: boolean;
+};
+
+export const [ChatStatusProvider, useChatStatusContext] = createContext<ChatStatusContextValue>('ChatStatus');

package/src/components/ChatStatus/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export { useChatStatusContext } from './ChatStatusContext';
+
 export * from './ChatStatus';
 export * from './format';

package/src/components/ChatStatusIndicator/ChatStatusIndicator.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { type ThemedClassName, Tooltip, useTimeout } from '@dxos/react-ui';
+// Leaf import (not the package barrel): the barrel re-exports QueryEditor/QueryForm, which pull the
+// heavy @dxos/ai + @dxos/echo-query stack (tiktoken wasm, etc.) — inappropriate for lean consumers
+// like the browser extension. Importing the Spinner leaf keeps that graph out.
+import { Spinner, type SpinnerProps } from '@dxos/react-ui-components/Spinner';
+import { mx } from '@dxos/ui-theme';
+
+const period = 3_000;
+
+export type ChatStatusIndicatorProps = ThemedClassName<
+  {
+    preset?: string;
+    processing?: boolean;
+    error?: Error;
+  } & Pick<SpinnerProps, 'size' | 'onClick'>
+>;
+
+export const ChatStatusIndicator = ({ classNames, preset, processing, error, ...props }: ChatStatusIndicatorProps) => {
+  const [init, setInit] = useState(false);
+  useEffect(() => setInit(false), [preset]);
+  useTimeout(
+    async () => {
+      setInit(true);
+    },
+    period / 2,
+    [preset],
+  );
+
+  return (
+    <div className={mx('relative flex', classNames)}>
+      <Spinner duration={period} state={!init ? 'flash' : error ? 'error' : processing ? 'spin' : 'pulse'} {...props} />
+      {error && (
+        <Tooltip.Trigger asChild content={error.message}>
+          <div className='absolute inset-0' />
+        </Tooltip.Trigger>
+      )}
+    </div>
+  );
+};

package/src/components/ChatStatusIndicator/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ChatStatusIndicator';

package/src/components/index.ts

@@ -5,3 +5,4 @@
 export * from './ChatDialog';
 export * from './ChatEditor';
 export * from './ChatStatus';
+export * from './ChatStatusIndicator';