@dxos/react-ui-thread 0.10.0 → 0.11.1

package/src/Thread/Thread.tsx

@@ -2,6 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+import { format } from 'date-fns/format';
+import { type Locale } from 'date-fns/locale';
+import { startOfDay } from 'date-fns/startOfDay';
 import React, {
   type ComponentPropsWithRef,
   type PropsWithChildren,
@@ -9,6 +12,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -26,6 +30,7 @@ import {
   useThemeContext,
   useTranslation,
 } from '@dxos/react-ui';
+import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 import { type Message as MessageType } from '@dxos/types';
 import { type Extension, createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
@@ -49,9 +54,9 @@ export type ThreadRootProps = PropsWithChildren<
 
 /**
  * Headless root of a thread. Provides message-tile context (metadata resolver,
- * injected renderers, callbacks) and the Mosaic root that `Thread.Messages`
- * renders its virtual stack within. Renders no DOM of its own — wrap the visible
- * thread chrome in `Thread.Content`.
+ * injected renderers, callbacks). Requires an ambient `Dnd.Root` ancestor,
+ * within which `Thread.Messages` renders its virtual stack. Renders no DOM of
+ * its own — wrap the visible thread chrome in `Thread.Content`.
  */
 const ThreadRoot = ({
   children,
@@ -61,6 +66,10 @@ const ThreadRoot = ({
   editable,
   onMessageDelete,
   onAcceptProposal,
+  onAcceptChange,
+  onRejectChange,
+  onMessageSelect,
+  currentMessageId,
 }: ThreadRootProps) => {
   // Composer focus handler registered by Thread.Textbox; invoked by Thread.Header's caret.
   const composerFocus = useRef<(() => void) | undefined>(undefined);
@@ -81,8 +90,12 @@ const ThreadRoot = ({
       focusComposer={focusComposer}
       onMessageDelete={onMessageDelete}
       onAcceptProposal={onAcceptProposal}
+      onAcceptChange={onAcceptChange}
+      onRejectChange={onRejectChange}
+      onMessageSelect={onMessageSelect}
+      currentMessageId={currentMessageId}
     >
-      <Mosaic.Root>{children}</Mosaic.Root>
+      {children}
     </ThreadContextProvider>
   );
 };
@@ -205,30 +218,171 @@ ThreadHeader.displayName = 'Thread.Header';
 // Messages
 //
 
-const MessageTileAdapter = ({
-  id,
-  data,
-  location,
-  draggable,
-  current,
-  selected,
-}: MosaicTileProps<MessageType.Message>) => (
+/** A run of consecutive same-sender messages (within the grouping window) rendered as one tile. */
+type MessageGroupItem = { kind: 'group'; id: string; messages: MessageType.Message[]; last?: boolean };
+
+/**
+ * A divider row between groups: day-labeled (calendar-day boundary) or plain
+ * (a same-day gap exceeding `gapDividerMs`). Day boundaries take priority
+ * when both coincide on the same message — see `groupMessages`.
+ */
+type DividerItem = { kind: 'divider'; id: string; label?: string };
+
+type ThreadItem = MessageGroupItem | DividerItem;
+
+const getThreadItemId = (item: ThreadItem) => item.id;
+
+/** Stable per-sender key: prefers the DID, then the (deprecated) identity key, then name/email, else 'anon'. */
+const senderKey = (message: MessageType.Message): string =>
+  message.sender.identityDid ?? message.sender.identityKey ?? message.sender.name ?? message.sender.email ?? 'anon';
+
+/** Message send time in epoch ms; malformed/missing `created` sorts as if sent at the epoch. */
+const messageTime = (message: MessageType.Message): number => {
+  const time = Date.parse(message.created);
+  return Number.isFinite(time) ? time : 0;
+};
+
+/**
+ * Preprocesses ascending, time-ordered `messages` into a flat list of divider
+ * and group items for `Thread.Messages`'s virtual stack:
+ * - A day divider (labeled with the calendar date) precedes the first message
+ *   of each calendar day.
+ * - A plain divider (no label) marks a same-day gap exceeding `gapDividerMs`.
+ * - When both would fall on the same message, only the day divider is emitted.
+ * - Consecutive messages from the same sender within `groupWindowMs` of the
+ *   previous message in the group are merged into one `MessageGroupItem`; a
+ *   divider always starts a new group.
+ */
+const groupMessages = (
+  messages: readonly MessageType.Message[],
+  {
+    groupWindowMs,
+    dayDivider,
+    gapDividerMs,
+    dtLocale,
+  }: { groupWindowMs: number; dayDivider: boolean; gapDividerMs: number; dtLocale?: Locale },
+): ThreadItem[] => {
+  const items: ThreadItem[] = [];
+  let currentGroup: MessageGroupItem | undefined;
+  // Tracks the last message appended to `currentGroup`, since `Array.prototype.at(-1)`
+  // on `currentGroup.messages` would need a non-null assertion despite `currentGroup`
+  // always being non-empty by construction.
+  let lastGroupMessage: MessageType.Message | undefined;
+  let prevTime: number | undefined;
+  let prevDay: number | undefined;
+
+  for (const message of messages) {
+    const time = messageTime(message);
+    const day = startOfDay(time).getTime();
+
+    const dayBoundary = dayDivider && (prevDay === undefined || day !== prevDay);
+    const gapBoundary = !dayBoundary && prevTime !== undefined && time - prevTime > gapDividerMs;
+
+    if (dayBoundary) {
+      items.push({
+        kind: 'divider',
+        id: `divider:day:${day}`,
+        label: format(day, 'EEEE, MMMM d', { locale: dtLocale }),
+      });
+      currentGroup = undefined;
+    } else if (gapBoundary) {
+      items.push({ kind: 'divider', id: `divider:gap:${time}` });
+      currentGroup = undefined;
+    }
+
+    const sameSenderAsGroup = currentGroup && lastGroupMessage && senderKey(lastGroupMessage) === senderKey(message);
+    const withinGroupWindow = currentGroup && lastGroupMessage && time - messageTime(lastGroupMessage) <= groupWindowMs;
+
+    if (currentGroup && sameSenderAsGroup && withinGroupWindow) {
+      currentGroup.messages.push(message);
+    } else {
+      currentGroup = { kind: 'group', id: getMessageId(message), messages: [message] };
+      items.push(currentGroup);
+    }
+    lastGroupMessage = message;
+
+    prevTime = time;
+    prevDay = day;
+  }
+
+  // The trailing group is the last message tile; suppress its avatar-rail continuation line.
+  if (currentGroup) {
+    currentGroup.last = true;
+  }
+
+  return items;
+};
+
+//
+// Divider
+//
+
+const ThreadDivider = ({ label }: { label?: string }) =>
+  label ? (
+    <div className='flex items-center gap-2 px-2 py-2 text-xs text-description'>
+      <div className='h-px grow bg-separator' />
+      <span className='shrink-0'>{label}</span>
+      <div className='h-px grow bg-separator' />
+    </div>
+  ) : (
+    <div className='px-2 py-2'>
+      <div className='h-px bg-separator' />
+    </div>
+  );
+
+ThreadDivider.displayName = 'Thread.Divider';
+
+const ThreadItemAdapter = ({ id, data, location, draggable, current, selected }: MosaicTileProps<ThreadItem>) => (
   <Mosaic.Tile id={id} data={data} location={location} draggable={draggable} current={current} selected={selected}>
-    <Message.Tile message={data} />
+    {data.kind === 'divider' ? (
+      <ThreadDivider label={data.label} />
+    ) : (
+      <Message.Group messages={data.messages} continues={!data.last} />
+    )}
   </Mosaic.Tile>
 );
 
 export type ThreadMessagesProps = ThemedClassName<{
   messages: readonly MessageType.Message[];
+  /** Stable id of the owning thread; scopes the Mosaic container so multiple threads don't collide. */
+  id?: string;
   /** Estimated tile height for the virtualizer. */
   estimateSize?: number;
   currentId?: string;
+  /** Consecutive same-sender messages within this window (ms) are merged into one tile. */
+  groupWindowMs?: number;
+  /** Whether to insert a labeled divider before the first message of each calendar day. */
+  dayDivider?: boolean;
+  /** A same-day gap exceeding this (ms) inserts an unlabeled divider between groups. */
+  gapDividerMs?: number;
 }>;
 
+const DEFAULT_GROUP_WINDOW_MS = 60_000;
+const DEFAULT_GAP_DIVIDER_MS = 3 * 60 * 60 * 1000;
+
 /** Virtualized stack of message tiles (via Mosaic), within an internal scroll area. */
-const ThreadMessages = ({ messages, estimateSize = 80, currentId, classNames }: ThreadMessagesProps) => {
+const ThreadMessages = ({
+  messages,
+  id,
+  estimateSize = 80,
+  currentId,
+  groupWindowMs = DEFAULT_GROUP_WINDOW_MS,
+  dayDivider = true,
+  gapDividerMs = DEFAULT_GAP_DIVIDER_MS,
+  classNames,
+}: ThreadMessagesProps) => {
+  const { dtLocale } = useTranslation(translationKey);
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
-  const items = useMemo(() => messages.filter(Boolean), [messages]);
+  const items = useMemo(
+    () => groupMessages(messages.filter(Boolean), { groupWindowMs, dayDivider, gapDividerMs, dtLocale }),
+    [messages, groupWindowMs, dayDivider, gapDividerMs, dtLocale],
+  );
+  // Per-instance id keeps concurrent threads (incl. the same thread mounted twice) distinct in the DnD registry.
+  const instanceId = useId();
+  const eventHandler = useMemo<DndContainerHandler>(
+    () => ({ id: `thread:${id ?? 'anon'}:${instanceId}`, canDrop: () => false }),
+    [id, instanceId],
+  );
 
   return (
     <Mosaic.Container
@@ -236,14 +390,14 @@ const ThreadMessages = ({ messages, estimateSize = 80, currentId, classNames }:
       orientation='vertical'
       autoScroll={viewport}
       currentId={currentId}
-      eventHandler={{ id: 'thread', canDrop: () => false }}
+      eventHandler={eventHandler}
     >
-      <ScrollArea.Root classNames={mx('col-span-2', classNames)} orientation='vertical'>
+      <ScrollArea.Root classNames={mx('col-span-2 flex-1 min-h-0', classNames)} orientation='vertical'>
         <ScrollArea.Viewport ref={setViewport}>
           <Mosaic.VirtualStack
+            Tile={ThreadItemAdapter}
             items={items}
-            getId={getMessageId}
-            Tile={MessageTileAdapter}
+            getId={getThreadItemId}
             draggable={false}
             getScrollElement={() => viewport}
             estimateSize={() => estimateSize}

package/src/index.ts

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

package/src/translations.ts

@@ -25,6 +25,8 @@ export const translations = [
         'save-message.label': 'Save',
         'delete-message.label': 'Delete',
         'accept-proposal.label': 'Accept proposal',
+        'accept-change.label': 'Accept change',
+        'reject-change.label': 'Reject change',
       },
     },
   },

package/src/types.ts

@@ -14,7 +14,7 @@ import { type FallbackValue } from '@dxos/util';
  * free of `@dxos/react-client`.
  */
 export type MessageMetadata = {
-  id: string;
+  id?: string;
   timestamp?: string;
   authorId?: string;
   authorName?: string;
@@ -39,10 +39,18 @@ export type MessageCallbacks = {
   onMessageDelete?: (messageId: string) => void;
   /** Accept an assistant proposal block on a message (omit to hide the affordance). */
   onAcceptProposal?: (messageId: string) => void;
+  /** Accept a suggested-change block on a message (omit to hide the affordance). */
+  onAcceptChange?: (messageId: string) => void;
+  /** Reject a suggested-change block on a message (omit to hide the affordance). */
+  onRejectChange?: (messageId: string) => void;
+  /** Select a message — the host reveals what it refers to (omit to leave tiles inert). */
+  onMessageSelect?: (messageId: string) => void;
 };
 
 /** Shared context provided by `Thread.Root` to its message tiles. */
 export type ThreadContextValue = {
+  /** The selected message, accented in the list. */
+  currentMessageId?: string;
   /** Resolve presentational metadata for a message. */
   getMetadata: (message: Message.Message) => MessageMetadata;
   /** Injected renderers (e.g. object/reference tiles). */

package/dist/lib/browser/chunk-QFRRLZVL.mjs

@@ -1,31 +0,0 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui-thread";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "plugin.name": "Threads",
-        "thread-title.placeholder": "New thread",
-        "thread-title.label": "Title",
-        "delete-thread.label": "Delete",
-        "select-thread.label": "Select comment",
-        "create-thread.label": "Create thread",
-        "message.placeholder": "Enter message...",
-        "comment.placeholder": "Enter comment...",
-        "settings-standalone.label": "Enable standalone thread creation",
-        "anonymous.label": "Anonymous",
-        "enter-to-send.message": "Enter to add \u23CE",
-        "edit-message.label": "Edit",
-        "save-message.label": "Save",
-        "delete-message.label": "Delete",
-        "accept-proposal.label": "Accept proposal"
-      }
-    }
-  }
-];
-
-export {
-  translationKey,
-  translations
-};
-//# sourceMappingURL=chunk-QFRRLZVL.mjs.map

package/dist/lib/browser/chunk-QFRRLZVL.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-thread';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin.name': 'Threads',\n        'thread-title.placeholder': 'New thread',\n        'thread-title.label': 'Title',\n        'delete-thread.label': 'Delete',\n        'select-thread.label': 'Select comment',\n        'create-thread.label': 'Create thread',\n        'message.placeholder': 'Enter message...',\n        'comment.placeholder': 'Enter comment...',\n        'settings-standalone.label': 'Enable standalone thread creation',\n        'anonymous.label': 'Anonymous',\n        'enter-to-send.message': 'Enter to add ⏎',\n        'edit-message.label': 'Edit',\n        'save-message.label': 'Save',\n        'delete-message.label': 'Delete',\n        'accept-proposal.label': 'Accept proposal',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,eAAe;QACf,4BAA4B;QAC5B,sBAAsB;QACtB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,mBAAmB;QACnB,yBAAyB;QACzB,sBAAsB;QACtB,sBAAsB;QACtB,wBAAwB;QACxB,yBAAyB;MAC3B;IACF;EACF;;",
-  "names": ["translationKey", "translations"]
-}