@dxos/react-ui-thread 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,13 +19,12 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/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,39 +33,40 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "date-fns": "^3.6.0",
-    "@dxos/react-ui-editor": "0.10.0",
-    "@dxos/echo-react": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/react-ui-mosaic": "0.10.0",
-    "@dxos/types": "0.10.0",
-    "@dxos/ui-editor": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "@dxos/echo-react": "0.11.1",
+    "@dxos/react-ui-dnd": "0.11.1",
+    "@dxos/react-ui-editor": "0.11.1",
+    "@dxos/react-ui-mosaic": "0.11.1",
+    "@dxos/types": "0.11.1",
+    "@dxos/ui-editor": "0.11.1",
+    "@dxos/util": "0.11.1",
+    "@dxos/echo": "0.11.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/keys": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/schema": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/random": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/keys": "0.11.1",
+    "@dxos/log": "0.11.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/react-ui": "0.11.1",
+    "@dxos/schema": "0.11.1",
+    "@dxos/storybook-utils": "0.11.1",
+    "@dxos/ui-theme": "0.11.1"
   },
   "peerDependencies": {
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
   },
   "publishConfig": {
     "access": "public"

package/src/Message/Message.stories.tsx

@@ -4,8 +4,11 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
+import { Obj } from '@dxos/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Message as MessageType } from '@dxos/types';
 
 import { translations } from '#translations';
 
@@ -56,3 +59,52 @@ export const NonEditable: Story = {
     editable: false,
   },
 };
+
+/**
+ * A message carrying a `change` content-block — the reusable tile for a document suggestion (struck
+ * original → proposed text) with Accept/Reject controls, driven by `onAcceptChange`/`onRejectChange`.
+ */
+const onAcceptChange = fn();
+const onRejectChange = fn();
+
+const ChangeStory = (_args: StoryArgs) => {
+  const message = useMemo(
+    () =>
+      Obj.make(MessageType.Message, {
+        created: new Date().toISOString(),
+        sender: { role: 'user', identityDid: 'did:key:alice', name: 'Alice' },
+        blocks: [{ _tag: 'change', before: 'quick brown fox', after: 'nimble auburn fox' }],
+      }),
+    [],
+  );
+  return (
+    <Thread.Root
+      getMetadata={getStoryMetadata}
+      identityDid='did:key:alice'
+      onAcceptChange={onAcceptChange}
+      onRejectChange={onRejectChange}
+    >
+      <Message.Tile message={message} />
+    </Thread.Root>
+  );
+};
+
+export const WithChange: Story = {
+  args: { editable: false },
+  render: ChangeStory,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    onAcceptChange.mockClear();
+    onRejectChange.mockClear();
+
+    // The change block shows both the struck original and the proposed replacement.
+    await canvas.findByText('quick brown fox');
+    await canvas.findByText('nimble auburn fox');
+
+    // Accept then reject fire the respective callbacks.
+    await userEvent.click(await canvas.findByTestId('thread.message.accept-change'));
+    await waitFor(() => expect(onAcceptChange).toHaveBeenCalledTimes(1));
+    await userEvent.click(await canvas.findByTestId('thread.message.reject-change'));
+    await waitFor(() => expect(onRejectChange).toHaveBeenCalledTimes(1));
+  },
+};

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
+import { format } from 'date-fns/format';
 import React, {
   type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
@@ -105,7 +105,7 @@ export type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'
 const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {
   return (
     <div {...props} className={mx('flex gap-2 items-start', classNames)}>
-      <p className='grow'>
+      <p className='grow flex items-baseline gap-2 min-w-0'>
         <MessageAuthorName authorName={authorName} />
         {timestamp && <MessageTime timestamp={timestamp} />}
       </p>
@@ -121,7 +121,9 @@ export type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;
 const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {
   const { t } = useTranslation(translationKey);
   return (
-    <Avatar.Label classNames='block truncate text-sm text-subdued'>{authorName ?? t('anonymous.label')}</Avatar.Label>
+    <Avatar.Label classNames='block truncate min-w-0 shrink text-sm text-subdued'>
+      {authorName ?? t('anonymous.label')}
+    </Avatar.Label>
   );
 };
 
@@ -133,8 +135,8 @@ const MessageTime = ({ timestamp }: MessageTimeProps) => {
   const { dtLocale } = useTranslation(translationKey);
   const dt = timestamp ? new Date(timestamp) : undefined;
   return (
-    <time className='block text-subdued text-xs pb-0.5' dateTime={dt?.toISOString()}>
-      {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}
+    <time className='shrink-0 text-subdued text-xs' dateTime={dt?.toISOString()}>
+      {dt ? format(dt, 'p', { locale: dtLocale }) : ''}
     </time>
   );
 };
@@ -165,6 +167,7 @@ const MessageBody = ({ message, isAuthor, editing, onSave }: MessageBodyProps) =
   const textBlockIndex = message.blocks.findIndex((block) => block._tag === 'text');
   const textBlock = textBlockIndex !== -1 ? (message.blocks[textBlockIndex] as ContentBlock.Text) : undefined;
   const proposalBlock = message.blocks.find((block) => block._tag === 'proposal') as ContentBlock.Proposal | undefined;
+  const changeBlock = message.blocks.find((block) => block._tag === 'change') as ContentBlock.Change | undefined;
   const references = message.blocks
     .filter((block) => block._tag === 'reference')
     .map((block) => (block as ContentBlock.Reference).reference);
@@ -174,6 +177,13 @@ const MessageBody = ({ message, isAuthor, editing, onSave }: MessageBodyProps) =
     <>
       {textBlock && <TextBlock block={textBlock} isAuthor={isAuthor} editing={editing} onSave={onSave} />}
       {proposalBlock && <div className='me-4 italic'>{proposalBlock.text}</div>}
+      {changeBlock && (
+        <p className='me-4 text-sm break-words'>
+          {changeBlock.before && <span className='line-through opacity-60'>{changeBlock.before}</span>}
+          {changeBlock.before && changeBlock.after && ' '}
+          {changeBlock.after && <span>{changeBlock.after}</span>}
+        </p>
+      )}
       {Object &&
         Ref.Array.targets(references).map((reference, index) => (
           <Object key={index} subject={reference as Obj.Unknown} />
@@ -330,6 +340,8 @@ MessageTextbox.displayName = 'Message.Textbox';
 export type MessageTileProps = {
   message: MessageType.Message;
   classNames?: MessageRootProps['classNames'];
+  /** Whether the avatar-rail continuation line is drawn below the tile; false for the last tile. */
+  continues?: boolean;
 };
 
 /**
@@ -337,18 +349,32 @@ export type MessageTileProps = {
  * context for metadata resolution, injected renderers, and callbacks. This is
  * the unit rendered by `Thread.Messages`.
  */
-const MessageTile = ({ message, classNames }: MessageTileProps) => {
+const MessageTile = ({ message, classNames, continues = true }: MessageTileProps) => {
   const { t } = useTranslation(translationKey);
-  const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = useThreadContext('Message.Tile');
+  const {
+    getMetadata,
+    identityDid,
+    editable,
+    onMessageDelete,
+    onAcceptProposal,
+    onAcceptChange,
+    onRejectChange,
+    onMessageSelect,
+    currentMessageId,
+  } = useThreadContext('Message.Tile');
   const [editing, setEditing] = useState(false);
 
   const metadata = getMetadata(message);
   const isAuthor = !!identityDid && identityDid === metadata.authorId;
   const hasProposal = message.blocks.some((block) => block._tag === 'proposal');
+  const hasChange = message.blocks.some((block) => block._tag === 'change');
 
   const handleEdit = useCallback(() => setEditing((value) => !value), []);
   const handleDelete = useCallback(() => onMessageDelete?.(message.id), [onMessageDelete, message.id]);
   const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [onAcceptProposal, message.id]);
+  const handleAcceptChange = useCallback(() => onAcceptChange?.(message.id), [onAcceptChange, message.id]);
+  const handleRejectChange = useCallback(() => onRejectChange?.(message.id), [onRejectChange, message.id]);
+  const handleSelect = useCallback(() => onMessageSelect?.(message.id), [onMessageSelect, message.id]);
   const handleSave = useCallback(
     (text: string) => {
       Obj.update(message, (message) => {
@@ -363,9 +389,11 @@ const MessageTile = ({ message, classNames }: MessageTileProps) => {
 
   const showEdit = isAuthor && editable;
   const showAccept = hasProposal && !!onAcceptProposal;
+  const showAcceptChange = hasChange && !!onAcceptChange;
+  const showRejectChange = hasChange && !!onRejectChange;
   const showDelete = !!onMessageDelete;
   const controls =
-    showEdit || showAccept || showDelete ? (
+    showEdit || showAccept || showAcceptChange || showRejectChange || showDelete ? (
       <div className={buttonGroupClassNames}>
         {showEdit && (
           <IconButton
@@ -389,6 +417,28 @@ const MessageTile = ({ message, classNames }: MessageTileProps) => {
             onClick={handleAcceptProposal}
           />
         )}
+        {showAcceptChange && (
+          <IconButton
+            data-testid='thread.message.accept-change'
+            variant='ghost'
+            icon='ph--check--regular'
+            iconOnly
+            label={t('accept-change.label')}
+            classNames={[buttonClassNames, hoverableControlItem]}
+            onClick={handleAcceptChange}
+          />
+        )}
+        {showRejectChange && (
+          <IconButton
+            data-testid='thread.message.reject-change'
+            variant='ghost'
+            icon='ph--x--regular'
+            iconOnly
+            label={t('reject-change.label')}
+            classNames={[buttonClassNames, hoverableControlItem]}
+            onClick={handleRejectChange}
+          />
+        )}
         {showDelete && (
           <IconButton
             data-testid='thread.message.delete'
@@ -406,8 +456,19 @@ const MessageTile = ({ message, classNames }: MessageTileProps) => {
   return (
     <MessageRoot
       {...metadata}
+      continues={continues}
       controls={controls}
-      classNames={[hoverableControls, hoverableFocusedWithinControls, classNames]}
+      // Selecting a tile is how the host reveals what it refers to (a suggestion's range in the
+      // document), so the whole tile is the target — the accent marks which one is showing.
+      onClick={onMessageSelect ? handleSelect : undefined}
+      aria-current={currentMessageId === message.id ? 'location' : undefined}
+      classNames={[
+        hoverableControls,
+        hoverableFocusedWithinControls,
+        onMessageSelect && 'cursor-pointer',
+        currentMessageId === message.id && 'bg-current-surface',
+        classNames,
+      ]}
     >
       <MessageHeading authorName={metadata.authorName} timestamp={metadata.timestamp} />
       <MessageBody message={message} isAuthor={isAuthor} editing={editing} onSave={handleSave} />
@@ -417,6 +478,116 @@ const MessageTile = ({ message, classNames }: MessageTileProps) => {
 
 MessageTile.displayName = 'Message.Tile';
 
+//
+// Group
+//
+
+export type MessageGroupProps = {
+  /** Consecutive same-sender messages, in ascending time order, rendered as one tile. */
+  messages: readonly MessageType.Message[];
+  /** Whether the avatar-rail continuation line is drawn below the tile; false for the last tile. */
+  continues?: boolean;
+  classNames?: MessageRootProps['classNames'];
+};
+
+/**
+ * Groups consecutive same-sender messages (see `Thread.Messages`'s grouping
+ * window) into a single tile: one heading (author + first message's
+ * timestamp) followed by one body per message, stacked in order. Per-message
+ * edit/delete controls are not shown per-row in a group — v1 shows them for
+ * the group's first message only, since the heading/controls layout is keyed
+ * to a single message.
+ */
+const MessageGroup = ({ messages, continues = true, classNames }: MessageGroupProps) => {
+  const { t } = useTranslation(translationKey);
+  const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = useThreadContext('Message.Group');
+  const [editing, setEditing] = useState(false);
+
+  const first = messages[0];
+  const metadata = getMetadata(first);
+  const isAuthor = !!identityDid && identityDid === metadata.authorId;
+  const hasProposal = first.blocks.some((block) => block._tag === 'proposal');
+
+  const handleEdit = useCallback(() => setEditing((value) => !value), []);
+  const handleDelete = useCallback(() => onMessageDelete?.(first.id), [onMessageDelete, first.id]);
+  const handleAcceptProposal = useCallback(() => onAcceptProposal?.(first.id), [onAcceptProposal, first.id]);
+  const handleSave = useCallback(
+    (text: string) => {
+      Obj.update(first, (first) => {
+        const block = first.blocks.find((block) => block._tag === 'text');
+        if (block && block._tag === 'text') {
+          block.text = text;
+        }
+      });
+    },
+    [first],
+  );
+
+  const showEdit = isAuthor && editable;
+  const showAccept = hasProposal && !!onAcceptProposal;
+  const showDelete = !!onMessageDelete;
+  const controls =
+    showEdit || showAccept || showDelete ? (
+      <div className={buttonGroupClassNames}>
+        {showEdit && (
+          <IconButton
+            data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
+            variant='ghost'
+            icon={editing ? 'ph--check--regular' : 'ph--pencil-simple--regular'}
+            iconOnly
+            label={t(editing ? 'save-message.label' : 'edit-message.label')}
+            classNames={[buttonClassNames, hoverableControlItem]}
+            onClick={handleEdit}
+          />
+        )}
+        {showAccept && (
+          <IconButton
+            data-testid='thread.message.accept'
+            variant='ghost'
+            icon='ph--check--regular'
+            iconOnly
+            label={t('accept-proposal.label')}
+            classNames={[buttonClassNames, hoverableControlItem]}
+            onClick={handleAcceptProposal}
+          />
+        )}
+        {showDelete && (
+          <IconButton
+            data-testid='thread.message.delete'
+            variant='ghost'
+            icon='ph--x--regular'
+            iconOnly
+            label={t('delete-message.label')}
+            classNames={[buttonClassNames, hoverableControlItem]}
+            onClick={handleDelete}
+          />
+        )}
+      </div>
+    ) : undefined;
+
+  return (
+    <MessageRoot
+      {...metadata}
+      continues={continues}
+      controls={controls}
+      classNames={[hoverableControls, hoverableFocusedWithinControls, classNames]}
+    >
+      <MessageHeading authorName={metadata.authorName} timestamp={metadata.timestamp} />
+      {messages.map((message) => (
+        <MessageBody
+          key={message.id}
+          message={message}
+          isAuthor={isAuthor}
+          editing={editing && message === first}
+          onSave={handleSave}
+        />
+      ))}
+    </MessageRoot>
+  );
+};
+
+MessageGroup.displayName = 'Message.Group';
+
 //
 // Message
 //
@@ -429,4 +600,5 @@ export const Message = {
   Body: MessageBody,
   Textbox: MessageTextbox,
   Tile: MessageTile,
+  Group: MessageGroup,
 };

package/src/Message/index.ts

@@ -6,6 +6,7 @@ export { Message } from './Message';
 export type {
   MessageAuthorNameProps,
   MessageBodyProps,
+  MessageGroupProps,
   MessageHeadingProps,
   MessageRootProps,
   MessageTextboxProps,

package/src/Thread/Thread.stories.tsx

@@ -5,6 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Message as MessageType } from '@dxos/types';
 
@@ -34,10 +35,78 @@ const DefaultStory = () => {
   );
 };
 
+// Reproduces a report that the local identity's own sent messages don't
+// appear: renders one message from each of three sender shapes — the local
+// identity (matches `Thread.Root`'s `identityDid`), a name-only sender with
+// no `identityDid` (e.g. an externally-synced guest, like freeq before
+// `echo-message`), and a different identity — to check whether the render
+// path itself drops any of them.
+const MixedSendersStory = () => {
+  const messages = [
+    MessageType.make({
+      sender: { role: 'user', identityDid: 'did:key:alice', name: 'Alice' },
+      blocks: [{ _tag: 'text', text: 'Message from the local identity (Alice).' }],
+    }),
+    MessageType.make({
+      sender: { name: 'guest' },
+      blocks: [{ _tag: 'text', text: 'Message from a name-only sender (guest), no identityDid.' }],
+    }),
+    MessageType.make({
+      sender: { role: 'user', identityDid: 'did:key:bob', name: 'Bob' },
+      blocks: [{ _tag: 'text', text: 'Message from a different identity (Bob).' }],
+    }),
+  ];
+
+  return (
+    <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable={false}>
+      <Thread.Content classNames='grow min-h-0'>
+        <Thread.Messages messages={messages} />
+      </Thread.Content>
+    </Thread.Root>
+  );
+};
+
+// Exercises message grouping (consecutive same-sender messages within the
+// default 60s window merge into one tile) and both divider kinds: a labeled
+// day divider before each calendar day's first message, and a plain (gap)
+// divider for a same-day silence over the default 3h threshold.
+const GroupedStory = () => {
+  const day1 = new Date('2026-07-01T09:00:00.000Z').getTime();
+  const day2 = new Date('2026-07-02T09:00:00.000Z').getTime();
+  const alice = { role: 'user' as const, identityDid: 'did:key:alice', name: 'Alice' };
+  const bob = { role: 'user' as const, identityDid: 'did:key:bob', name: 'Bob' };
+
+  const at = (time: number, sender: typeof alice | typeof bob, text: string) =>
+    MessageType.make({ created: new Date(time).toISOString(), sender, blocks: [{ _tag: 'text', text }] });
+
+  const messages = [
+    // Same-sender burst within the 60s grouping window: one group, three bodies.
+    at(day1, alice, 'First message in a burst.'),
+    at(day1 + 10_000, alice, 'Second message, 10s later — same group.'),
+    at(day1 + 40_000, alice, 'Third message, 40s after the first — still same group.'),
+    // >60s gap, same sender: starts a new group (no divider — gap is well under 3h).
+    at(day1 + 120_000, alice, 'New group: 2 minutes after the burst.'),
+    // >3h gap, same day: plain (unlabeled) divider, new group.
+    at(day1 + 120_000 + 4 * 60 * 60 * 1000, alice, 'After a 4-hour silence — gap divider above.'),
+    // Different sender: always starts a new group even within the window.
+    at(day1 + 120_000 + 4 * 60 * 60 * 1000 + 5_000, bob, 'Bob replies 5s later — different sender, new group.'),
+    // Next calendar day: labeled day divider, new group (day boundary wins over gap boundary).
+    at(day2, bob, 'A new day.'),
+  ];
+
+  return (
+    <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable={false}>
+      <Thread.Content classNames='grow min-h-0'>
+        <Thread.Messages messages={messages} />
+      </Thread.Content>
+    </Thread.Root>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-thread/Thread',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' }), withMosaic()],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -49,3 +118,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const MixedSenders: Story = {
+  render: MixedSendersStory,
+};
+
+export const Grouped: Story = {
+  render: GroupedStory,
+};