@dxos/react-ui-thread 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,56 +1,72 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/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"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
+    "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
-    "date-fns": "^3.3.1",
-    "@dxos/react-ui-editor": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "date-fns": "^3.6.0",
+    "@dxos/echo": "0.8.4-staging.60fe92afc8",
+    "@dxos/echo-react": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-mosaic": "0.8.4-staging.60fe92afc8",
+    "@dxos/types": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-editor": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-editor": "0.8.4-staging.60fe92afc8"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-db": "0.8.4-main.fd6878d",
-    "@dxos/echo-schema": "0.8.4-main.fd6878d",
-    "@dxos/live-object": "0.8.4-main.fd6878d",
-    "@dxos/keys": "0.8.4-main.fd6878d",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.16",
+    "@dxos/keys": "0.8.4-staging.60fe92afc8",
+    "@dxos/log": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/random": "0.8.4-staging.60fe92afc8",
+    "@dxos/schema": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "publishConfig": {
     "access": "public"

package/src/Message/Message.stories.tsx

@@ -2,46 +2,57 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
 
-import React, { useState } from 'react';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { PublicKey } from '@dxos/keys';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { translations } from '#translations';
 
-import { type MessageEntity, MessageStoryText } from '../testing';
+import { createMessages, getStoryMetadata } from '../testing';
 import { Thread } from '../Thread';
-import { translations } from '../translations';
+import { Message } from './Message';
 
-import { MessageRoot } from './Message';
-
-const DefaultStory = () => {
-  const [identityKey] = useState(PublicKey.random());
-  const [message] = useState<MessageEntity>({
-    id: 'm1',
-    timestamp: new Date().toISOString(),
-    authorId: identityKey.toHex(),
-    text: 'hello',
-  });
+type StoryProps = { editable: boolean };
 
+// Sample messages are authored by 'did:key:alice'; the local identity matches,
+// so `editable` toggles whether the author's own message shows the edit affordance.
+const DefaultStory = ({ editable }: StoryProps) => {
+  const [message] = useMemo(() => createMessages(1), []);
   return (
-    <div className='mli-auto is-96 overflow-y-auto'>
-      <Thread.Root id='t1'>
-        <MessageRoot {...message} classNames={[hoverableControls, hoverableFocusedWithinControls]}>
-          <MessageStoryText {...message} onDelete={() => console.log('delete')} />
-        </MessageRoot>
-      </Thread.Root>
-    </div>
+    <Thread.Root
+      getMetadata={getStoryMetadata}
+      identityDid='did:key:alice'
+      editable={editable}
+      onMessageDelete={() => {}}
+    >
+      <Message.Tile message={message} />
+    </Thread.Root>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-thread/Message',
-  component: MessageRoot,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
+  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'border w-card-min-width' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Editable: Story = {
+  args: {
+    editable: true,
+  },
 };
 
-export const Default = {};
+export const NonEditable: Story = {
+  args: {
+    editable: false,
+  },
+};

package/src/Message/Message.tsx

@@ -2,63 +2,109 @@
 // Copyright 2023 DXOS.org
 //
 
+import { EditorView } from '@codemirror/view';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 
-// TODO(burdon): Remove dep.
-import { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { type UseTextEditorProps, keymap, listener, useTextEditor } from '@dxos/react-ui-editor';
-import { focusRing, mx } from '@dxos/react-ui-theme';
-import { hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';
+import { Obj, Ref } from '@dxos/echo';
+import {
+  Avatar,
+  IconButton,
+  type ThemedClassName,
+  useOnTransition,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import { type ContentBlock, type Message as MessageType } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, keymap, listener } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
+import { hexToEmoji, hexToHue, isTruthy } from '@dxos/util';
 
+import { command } from '../command';
+import { useThreadContext } from '../context';
 import { translationKey } from '../translations';
 import { type MessageMetadata } from '../types';
 
 const avatarSize = 7;
 
-export type MessageRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
-  MessageMetadata &
-  Partial<{ continues: boolean }>;
+const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pe-2';
+const buttonClassNames = 'p-1! transition-opacity';
 
-export const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
+//
+// Root
+//
+
+export type MessageRootProps = ThemedClassName<
+  ComponentPropsWithRef<'div'> & MessageMetadata & Partial<{ continues: boolean; controls: ReactNode }>
+>;
+
+// TODO(burdon): Show authorName on tooltip.
+const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
-    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },
+    {
+      authorImgSrc,
+      authorId,
+      authorName,
+      authorAvatarProps,
+      continues = true,
+      controls,
+      children,
+      classNames,
+      ...rootProps
+    },
     forwardedRef,
   ) => {
+    // Must wrap the message since Avatar.Label may be used in the content.
+    // Columns mirror Thread.Header (avatar/rail · content · controls) so trailing
+    // controls align with the thread header's controls.
     return (
-      // Must wrap the message since Avatar.Label may be used in the content.
       <Avatar.Root>
         <div
-          role='none'
           data-testid='thread.message'
           {...rootProps}
-          className={mx('grid grid-cols-subgrid col-span-2', classNames)}
+          className={mx('grid grid-cols-[var(--dx-rail-size)_1fr_min-content] w-full', classNames)}
           ref={forwardedRef}
         >
-          <div role='none' className='flex flex-col items-center gap-2 pbs-2'>
+          <div className='flex flex-col items-center gap-2 pt-1'>
             <Avatar.Content
               size={avatarSize}
               hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}
               fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}
               {...(authorImgSrc && { imgSrc: authorImgSrc })}
             />
-            {continues && <div role='none' className='is-px grow bg-separator' />}
-          </div>
-          <div role='none' className='plb-1 min-is-0'>
-            {children}
+            {continues && <div className='w-px grow bg-separator' />}
           </div>
+          <div className='py-1 min-w-0'>{children}</div>
+          {controls && <div className='self-start'>{controls}</div>}
         </div>
       </Avatar.Root>
     );
   },
 );
 
+MessageRoot.displayName = 'Message.Root';
+
+//
+// Heading
+//
+
 export type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &
   Pick<MessageMetadata, 'authorName' | 'timestamp'>;
 
-export const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {
+const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {
   return (
-    <div role='none' {...props} className={mx('flex gap-2 items-start', classNames)}>
+    <div {...props} className={mx('flex gap-2 items-start', classNames)}>
       <p className='grow'>
         <MessageAuthorName authorName={authorName} />
         {timestamp && <MessageTime timestamp={timestamp} />}
@@ -68,33 +114,130 @@ export const MessageHeading = ({ children, classNames, timestamp, authorName, ..
   );
 };
 
+MessageHeading.displayName = 'Message.Heading';
+
 export type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;
 
-export const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {
+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 text-sm text-subdued'>{authorName ?? t('anonymous.label')}</Avatar.Label>
   );
 };
 
+MessageAuthorName.displayName = 'Message.AuthorName';
+
 export type MessageTimeProps = Pick<MessageMetadata, 'timestamp'>;
 
-export const MessageTime = ({ timestamp }: MessageTimeProps) => {
+const MessageTime = ({ timestamp }: MessageTimeProps) => {
   const { dtLocale } = useTranslation(translationKey);
   const dt = timestamp ? new Date(timestamp) : undefined;
   return (
-    <time className='block text-subdued text-xs pbe-0.5' dateTime={dt?.toISOString()}>
+    <time className='block text-subdued text-xs pb-0.5' dateTime={dt?.toISOString()}>
       {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}
     </time>
   );
 };
 
-export type MessageBodyProps = ComponentPropsWithoutRef<'p'>;
+MessageTime.displayName = 'Message.Time';
+
+//
+// Body
+//
+
+export type MessageBodyProps = {
+  /** The message whose content blocks are rendered. */
+  message: MessageType.Message;
+  /** When true, the local user authored this message. */
+  isAuthor?: boolean;
+  /** When true, the text block is editable. */
+  editing?: boolean;
+  /** Persist an edited text block. */
+  onSave?: (text: string) => void;
+};
+
+/**
+ * Renders a message's content blocks: text (via editor), proposal, and
+ * object/reference tiles (delegated to the injected `Object` component).
+ */
+const MessageBody = ({ message, isAuthor, editing, onSave }: MessageBodyProps) => {
+  const { components } = useThreadContext('Message.Body');
+  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 references = message.blocks
+    .filter((block) => block._tag === 'reference')
+    .map((block) => (block as ContentBlock.Reference).reference);
+  const Object = components.Object;
+
+  return (
+    <>
+      {textBlock && <TextBlock block={textBlock} isAuthor={isAuthor} editing={editing} onSave={onSave} />}
+      {proposalBlock && <div className='me-4 italic'>{proposalBlock.text}</div>}
+      {Object &&
+        Ref.Array.targets(references).map((reference, index) => (
+          <Object key={index} subject={reference as Obj.Unknown} />
+        ))}
+    </>
+  );
+};
+
+MessageBody.displayName = 'Message.Body';
+
+const TextBlock = ({
+  block,
+  isAuthor,
+  editing,
+  onSave,
+}: {
+  block: ContentBlock.Text;
+  isAuthor?: boolean;
+  editing?: boolean;
+  onSave?: (text: string) => void;
+}) => {
+  const { themeMode } = useThemeContext();
+  const inMemoryContentRef = useRef(block.text);
+
+  const handleDocumentChange = useCallback((next: string) => {
+    inMemoryContentRef.current = next;
+  }, []);
+
+  const saveDocumentChange = useCallback(() => {
+    onSave?.(inMemoryContentRef.current);
+  }, [onSave]);
+
+  useOnTransition(editing, true, false, saveDocumentChange);
 
-export const MessageBody = ({ children, ...props }: MessageBodyProps) => {
-  return <p {...props}>{children}</p>;
+  const { parentRef, focusAttributes, view } = useTextEditor(
+    () => ({
+      initialValue: block.text,
+      extensions: [
+        createBasicExtensions({ readOnly: !isAuthor || !editing }),
+        createThemeExtensions({ themeMode }),
+        command,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            handleDocumentChange(update.state.doc.toString());
+          }
+        }),
+      ],
+    }),
+    [block.text, editing, isAuthor, themeMode, handleDocumentChange],
+  );
+
+  useEffect(() => {
+    if (editing) {
+      view?.focus();
+    }
+  }, [editing, view]);
+
+  return <div ref={parentRef} className='me-4' {...focusAttributes} />;
 };
 
+//
+// Textbox
+//
+
 export type MessageTextboxProps = {
   disabled?: boolean;
   onSend?: () => void;
@@ -110,65 +253,180 @@ const keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | '
       if (onSend) {
         onSend();
         return true;
-      } else {
-        return false;
       }
+      return false;
     },
   },
   {
-    // TODO(burdon): Other key bindings.
     key: 'Meta+Backspace',
     run: () => {
       if (onClear) {
         onClear();
         return true;
-      } else {
-        return false;
       }
+      return false;
     },
   },
 ];
 
-export const MessageTextbox = ({
-  id,
-  authorId,
-  authorName,
-  authorImgSrc,
-  authorAvatarProps,
-  disabled,
-  extensions,
-  onSend,
-  onClear,
-  onEditorFocus,
-  ...editorProps
-}: MessageTextboxProps) => {
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
+export type MessageTextboxHandle = { focus: () => void };
+
+const MessageTextbox = forwardRef<MessageTextboxHandle, MessageTextboxProps>(
+  (
+    {
       id,
-      extensions: [
-        keymap.of(keyBindings({ onSend, onClear })),
-        listener({
-          onFocus: (focusing) => {
-            if (focusing) {
-              onEditorFocus?.();
-            }
-          },
-        }),
-        extensions,
-      ].filter(isNotFalsy),
-      ...editorProps,
-    }),
-    [id, extensions],
+      authorId,
+      authorName,
+      authorImgSrc,
+      authorAvatarProps,
+      disabled,
+      extensions,
+      onSend,
+      onClear,
+      onEditorFocus,
+      ...editorProps
+    },
+    forwardedRef,
+  ) => {
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        extensions: [
+          keymap.of(keyBindings({ onSend, onClear })),
+          listener({
+            onFocus: ({ focusing }) => {
+              if (focusing) {
+                onEditorFocus?.();
+              }
+            },
+          }),
+          extensions,
+        ].filter(isTruthy),
+        ...editorProps,
+      }),
+      [id, extensions],
+    );
+
+    useImperativeHandle(forwardedRef, () => ({ focus: () => view?.focus() }), [view]);
+
+    return (
+      <MessageRoot {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>
+        <div
+          ref={parentRef}
+          className={mx('py-0.5 me-1 rounded-xs dx-focus-ring', disabled && 'opacity-50')}
+          {...focusAttributes}
+        />
+      </MessageRoot>
+    );
+  },
+);
+
+MessageTextbox.displayName = 'Message.Textbox';
+
+//
+// Tile
+//
+
+export type MessageTileProps = {
+  message: MessageType.Message;
+  classNames?: MessageRootProps['classNames'];
+};
+
+/**
+ * Full message tile (frame + heading + controls + body). Reads `Thread.Root`
+ * context for metadata resolution, injected renderers, and callbacks. This is
+ * the unit rendered by `Thread.Messages`.
+ */
+const MessageTile = ({ message, classNames }: MessageTileProps) => {
+  const { t } = useTranslation(translationKey);
+  const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = 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 handleEdit = useCallback(() => setEditing((value) => !value), []);
+  const handleDelete = useCallback(() => onMessageDelete?.(message.id), [onMessageDelete, message.id]);
+  const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [onAcceptProposal, message.id]);
+  const handleSave = useCallback(
+    (text: string) => {
+      Obj.update(message, (message) => {
+        const block = message.blocks.find((block) => block._tag === 'text');
+        if (block && block._tag === 'text') {
+          block.text = text;
+        }
+      });
+    },
+    [message],
   );
 
+  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 {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>
-      <div
-        role='none'
-        ref={parentRef}
-        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}
-        {...focusAttributes}
-      />
+    <MessageRoot
+      {...metadata}
+      controls={controls}
+      classNames={[hoverableControls, hoverableFocusedWithinControls, classNames]}
+    >
+      <MessageHeading authorName={metadata.authorName} timestamp={metadata.timestamp} />
+      <MessageBody message={message} isAuthor={isAuthor} editing={editing} onSave={handleSave} />
     </MessageRoot>
   );
 };
+
+MessageTile.displayName = 'Message.Tile';
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Heading: MessageHeading,
+  AuthorName: MessageAuthorName,
+  Time: MessageTime,
+  Body: MessageBody,
+  Textbox: MessageTextbox,
+  Tile: MessageTile,
+};