@dxos/react-ui-thread 0.5.9-main.44fe51d → 0.5.9-main.4ed8273

package/dist/lib/browser/index.mjs

@@ -68,12 +68,13 @@ var ThreadFooter = /* @__PURE__ */ forwardRef(({ activity, classNames, children,
 });
 
 // packages/ui/react-ui-thread/src/Message/Message.tsx
+import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import React2, { forwardRef as forwardRef2, useMemo } from "react";
-import { Avatar, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Avatar, Button, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { keymap, listener, TextEditor } from "@dxos/react-ui-editor";
-import { focusRing, mx as mx2 } from "@dxos/react-ui-theme";
-import { hexToEmoji, hexToHue, isNotFalsy } from "@dxos/util";
+import { focusRing, hoverableControlItem as hoverableControlItem2, hoverableControls, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx2 } from "@dxos/react-ui-theme";
+import { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from "@dxos/util";
 var avatarSize = 7;
 var MessageMeta = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps }, forwardedRef) => {
   return /* @__PURE__ */ React2.createElement(Avatar.Root, {
@@ -100,20 +101,41 @@ var MessageMeta = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorN
     className: "plb-1 min-is-0"
   }, children)));
 });
-var Message = ({ timestamp, children, ...messageMeta }) => {
+var DefaultMessageBlock = ({ block, onBlockDelete }) => {
+  const contentWidth = onBlockDelete ? "col-span-2" : "col-span-3";
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2("grid grid-cols-subgrid col-span-3", hoverableControls, hoverableFocusedWithinControls2)
+  }, block.data ? /* @__PURE__ */ React2.createElement("pre", {
+    className: mx2("font-mono max-is-full overflow-x-auto", contentWidth)
+  }, /* @__PURE__ */ React2.createElement("code", null, JSON.stringify(safeParseJson(block.data), void 0, 2))) : /* @__PURE__ */ React2.createElement("p", {
+    className: contentWidth
+  }, block.text ?? ""), onBlockDelete && /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: [
+      "p-1.5 min-bs-0 mie-1 items-start transition-opacity",
+      hoverableControlItem2
+    ],
+    onClick: () => onBlockDelete()
+  }, /* @__PURE__ */ React2.createElement(X, null)));
+};
+var Message = (props) => {
+  const { id, authorName, onDelete, blocks, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;
   const { t, dtLocale } = useTranslation2(translationKey);
-  const dt = timestamp ? new Date(timestamp) : void 0;
+  const firstBlock = blocks[0];
+  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : void 0;
   return /* @__PURE__ */ React2.createElement(MessageMeta, {
-    ...messageMeta,
+    ...metaProps,
+    id,
     continues: true
   }, /* @__PURE__ */ React2.createElement("p", {
     className: "grid grid-cols-[1fr_max-content] gap-2 pie-2"
   }, /* @__PURE__ */ React2.createElement(Avatar.Label, {
     classNames: [
       "truncate text-sm font-medium",
-      !messageMeta.authorName && "fg-description"
+      !authorName && "fg-description"
     ]
-  }, messageMeta.authorName ?? t("anonymous label")), /* @__PURE__ */ React2.createElement("time", {
+  }, authorName ?? t("anonymous label")), /* @__PURE__ */ React2.createElement("time", {
     className: "fg-description text-xs pbs-0.5",
     dateTime: dt?.toISOString()
   }, dt ? formatDistanceToNow(dt, {
@@ -122,7 +144,12 @@ var Message = ({ timestamp, children, ...messageMeta }) => {
   }) : "")), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "grid gap-y-1 grid-cols-[min-content_1fr_min-content]"
-  }, children));
+  }, blocks.map((block, i) => /* @__PURE__ */ React2.createElement(MessageBlockComponent, {
+    key: i,
+    block,
+    authorId: metaProps.authorId,
+    onBlockDelete: onDelete && (() => onDelete(id, i))
+  }))));
 };
 var keyBindings = ({ onSend, onClear }) => [
   {

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\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        '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      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx(\n          'col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description pb-2',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, forwardRef, useMemo, type PropsWithChildren } from 'react';\n\n// TODO(burdon): Remove dep.\nimport { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type TextEditorProps, keymap, listener, TextEditor } from '@dxos/react-ui-editor';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\nimport { hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    return (\n      <Avatar.Root size={avatarSize} hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={mx('flex flex-col items-center gap-2 plb-2')}>\n            <Avatar.Frame>\n              <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className='plb-1 min-is-0'>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageProps = PropsWithChildren<MessageMetadata>;\n\nexport const Message = ({ timestamp, children, ...messageMeta }: MessageProps) => {\n  const { t, dtLocale } = useTranslation(translationKey);\n  const dt = timestamp ? new Date(timestamp) : undefined;\n\n  return (\n    <MessageMeta {...messageMeta} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !messageMeta.authorName && 'fg-description']}>\n          {messageMeta.authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {children}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  disabled?: boolean;\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n} & MessageMetadata &\n  TextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n  {\n    key: 'Enter',\n    run: () => {\n      if (onSend) {\n        onSend();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n  {\n    // TODO(burdon): Other key bindings.\n    key: 'Meta+Backspace',\n    run: () => {\n      if (onClear) {\n        onClear();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n];\n\nexport const MessageTextbox = ({\n  id,\n  onSend,\n  onClear,\n  onEditorFocus,\n  authorId,\n  authorName,\n  authorImgSrc,\n  authorAvatarProps,\n  disabled,\n  extensions: _extensions,\n  ...editorProps\n}: MessageTextboxProps) => {\n  const extensions = useMemo<TextEditorProps['extensions']>(() => {\n    return [\n      keymap.of(keyBindings({ onSend, onClear })),\n      listener({\n        onFocus: (focusing) => {\n          if (focusing) {\n            onEditorFocus?.();\n          }\n        },\n      }),\n      _extensions,\n    ].filter(isNotFalsy);\n    // TODO(wittjosiah): Should probably include callbacks in the dependency array.\n  }, [_extensions]);\n\n  return (\n    <MessageMeta {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n      <TextEditor\n        {...editorProps}\n        extensions={extensions}\n        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n      />\n    </MessageMeta>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["translationKey", "ArrowBendLeftDown", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "formatDistanceToNow", "React", "forwardRef", "useMemo", "Avatar", "useTranslation", "keymap", "listener", "TextEditor", "focusRing", "mx", "hexToEmoji", "hexToHue", "isNotFalsy", "avatarSize", "MessageMeta", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "size", "hue", "hexToHue", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "text", "emoji", "hexToEmoji", "Image", "href", "Message", "timestamp", "messageMeta", "t", "dtLocale", "useTranslation", "translationKey", "dt", "Date", "undefined", "p", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "keyBindings", "onSend", "onClear", "key", "run", "MessageTextbox", "id", "onEditorFocus", "disabled", "extensions", "_extensions", "editorProps", "useMemo", "keymap", "of", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "TextEditor", "focusRing"]
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\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        '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      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx(\n          'col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description pb-2',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { X } from '@phosphor-icons/react';\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';\n\n// TODO(burdon): Remove dep.\nimport { Avatar, Button, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type TextEditorProps, keymap, listener, TextEditor } from '@dxos/react-ui-editor';\nimport {\n  focusRing,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\nimport { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    return (\n      <Avatar.Root size={avatarSize} hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={mx('flex flex-col items-center gap-2 plb-2')}>\n            <Avatar.Frame>\n              <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className='plb-1 min-is-0'>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageBlockProps<BlockValue> = {\n  block: MessageEntityBlock<BlockValue>;\n  authorId?: string;\n  onBlockDelete?: () => void;\n};\n\nconst DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {\n  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';\n  return (\n    <div\n      role='none'\n      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}\n    >\n      {block.data ? (\n        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>\n          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>\n        </pre>\n      ) : (\n        <p className={contentWidth}>{block.text ?? ''}</p>\n      )}\n      {onBlockDelete && (\n        <Button\n          variant='ghost'\n          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}\n          onClick={() => onBlockDelete()}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type MessageProps<BlockValue> = MessageEntity<BlockValue> & {\n  onDelete?: (messageId: string, blockIndex: number) => void;\n  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;\n};\n\nexport const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {\n  const { id, authorName, onDelete, blocks, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n  const { t, dtLocale } = useTranslation(translationKey);\n  const firstBlock = blocks[0];\n  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;\n\n  return (\n    <MessageMeta {...metaProps} id={id} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>\n          {authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {blocks.map((block, i) => (\n          <MessageBlockComponent\n            key={i}\n            block={block}\n            authorId={metaProps.authorId}\n            onBlockDelete={onDelete && (() => onDelete(id, i))}\n          />\n        ))}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  disabled?: boolean;\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n} & MessageMetadata &\n  TextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n  {\n    key: 'Enter',\n    run: () => {\n      if (onSend) {\n        onSend();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n  {\n    // TODO(burdon): Other key bindings.\n    key: 'Meta+Backspace',\n    run: () => {\n      if (onClear) {\n        onClear();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n];\n\nexport const MessageTextbox = ({\n  id,\n  onSend,\n  onClear,\n  onEditorFocus,\n  authorId,\n  authorName,\n  authorImgSrc,\n  authorAvatarProps,\n  disabled,\n  extensions: _extensions,\n  ...editorProps\n}: MessageTextboxProps) => {\n  const extensions = useMemo<TextEditorProps['extensions']>(() => {\n    return [\n      keymap.of(keyBindings({ onSend, onClear })),\n      listener({\n        onFocus: (focusing) => {\n          if (focusing) {\n            onEditorFocus?.();\n          }\n        },\n      }),\n      _extensions,\n    ].filter(isNotFalsy);\n    // TODO(wittjosiah): Should probably include callbacks in the dependency array.\n  }, [_extensions]);\n\n  return (\n    <MessageMeta {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n      <TextEditor\n        {...editorProps}\n        extensions={extensions}\n        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n      />\n    </MessageMeta>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["translationKey", "ArrowBendLeftDown", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "useMemo", "Avatar", "Button", "useTranslation", "keymap", "listener", "TextEditor", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "hexToEmoji", "hexToHue", "isNotFalsy", "avatarSize", "MessageMeta", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "size", "hue", "hexToHue", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "text", "emoji", "hexToEmoji", "Image", "href", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "id", "onDelete", "blocks", "MessageBlockComponent", "metaProps", "t", "dtLocale", "useTranslation", "translationKey", "firstBlock", "dt", "timestamp", "Date", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "map", "i", "key", "keyBindings", "onSend", "onClear", "run", "MessageTextbox", "onEditorFocus", "disabled", "extensions", "_extensions", "editorProps", "useMemo", "keymap", "of", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "TextEditor", "focusRing"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2337,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9488,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":15102,"imports":[{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":903,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":913,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":13913},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2492},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":3877},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":7328}}}
+{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2337,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9488,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":500,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":20403,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":506,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":1143,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":913,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16946},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2492},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":5333},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8784}}}

package/dist/types/src/Message/Message.d.ts

@@ -1,13 +1,21 @@
-import React, { type ComponentPropsWithRef, type PropsWithChildren } from 'react';
+import React, { type ComponentPropsWithRef, type FC } from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type TextEditorProps } from '@dxos/react-ui-editor';
-import { type MessageMetadata } from '../types';
+import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
 export type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> & MessageMetadata & Partial<{
     continues: boolean;
 }>;
 export declare const MessageMeta: React.ForwardRefExoticComponent<Pick<MessageMetaProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | "continues" | keyof MessageMetadata> & React.RefAttributes<HTMLDivElement>>;
-export type MessageProps = PropsWithChildren<MessageMetadata>;
-export declare const Message: ({ timestamp, children, ...messageMeta }: MessageProps) => JSX.Element;
+export type MessageBlockProps<BlockValue> = {
+    block: MessageEntityBlock<BlockValue>;
+    authorId?: string;
+    onBlockDelete?: () => void;
+};
+export type MessageProps<BlockValue> = MessageEntity<BlockValue> & {
+    onDelete?: (messageId: string, blockIndex: number) => void;
+    MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;
+};
+export declare const Message: <BlockValue>(props: MessageProps<BlockValue>) => JSX.Element;
 export type MessageTextboxProps = {
     disabled?: boolean;
     onSend?: () => void;

package/dist/types/src/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGvG,OAAO,EAAU,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,KAAK,eAAe,EAAgC,MAAM,uBAAuB,CAAC;AAK3F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAC1E,eAAe,GACf,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAElC,eAAO,MAAM,WAAW,qnJA4BvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,eAAe,CAAC,CAAC;AAE9D,eAAO,MAAM,OAAO,4CAA6C,YAAY,gBAmB5E,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,eAAe,GACjB,eAAe,CAAC;AA4BlB,eAAO,MAAM,cAAc,qJAYxB,mBAAmB,gBAyBrB,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAkB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAE,KAAK,eAAe,EAAgC,MAAM,uBAAuB,CAAC;AAW3F,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAI7F,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAC1E,eAAe,GACf,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAElC,eAAO,MAAM,WAAW,qnJA4BvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,UAAU,IAAI;IAC1C,KAAK,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA6BF,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,aAAa,CAAC,UAAU,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,qBAAqB,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,OAAO,sBAAwB,aAAa,UAAU,CAAC,gBA4BnE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,eAAe,GACjB,eAAe,CAAC;AA4BlB,eAAO,MAAM,cAAc,qJAYxB,mBAAmB,gBAyBrB,CAAC"}

package/dist/types/src/Message/Message.stories.d.ts

@@ -2,7 +2,7 @@
 import '@dxosTheme';
 declare const _default: {
     title: string;
-    component: ({ timestamp, children, ...messageMeta }: import("./Message").MessageProps) => JSX.Element;
+    component: <BlockValue>(props: import("./Message").MessageProps<BlockValue>) => JSX.Element;
     render: () => JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {

package/dist/types/src/Message/Message.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA6BpB,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAgCpB,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/Thread/Comments.stories.d.ts

@@ -1,13 +1,16 @@
 import '@dxosTheme';
 import React from 'react';
+import { TextV0Type } from '@braneframe/types';
 import { type Range } from '@dxos/react-ui-editor';
-import { type MessageEntity } from '../testing';
+import { type MessageEntity } from '../types';
 type StoryCommentThread = {
     id: string;
     cursor?: string;
     range?: Range;
     yPos?: number;
-    messages: MessageEntity[];
+    messages: MessageEntity<{
+        content?: TextV0Type;
+    }>[];
 };
 type StoryProps = {
     text?: string;

package/dist/types/src/Thread/Comments.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAS7E,OAAO,EAML,KAAK,KAAK,EAMX,MAAM,uBAAuB,CAAC;AAK/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAqEhD,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B,CAAC;AA+IF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;;;;;;mBA2He,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}
+{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAO5D,OAAO,EAML,KAAK,KAAK,EAMX,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAoE9C,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;QAAE,OAAO,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC,EAAE,CAAC;CACrD,CAAC;AA6IF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;;;;;;mBA+He,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}

package/dist/types/src/Thread/Thread.stories.d.ts

@@ -2,7 +2,7 @@ import '@dxosTheme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<import("./Thread").ThreadProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "current" | "classNames" | keyof import("..").ThreadEntity> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<Pick<import("./Thread").ThreadProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "current" | "classNames" | keyof import("../types").ThreadEntity> & React.RefAttributes<HTMLDivElement>>;
     render: () => JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {

package/dist/types/src/Thread/Thread.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAAoC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA2EzD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAAoC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAwFzD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/types.d.ts

@@ -1,12 +1,17 @@
 import { type FallbackValue } from '@dxos/util';
 export type MessageMetadata = {
     id: string;
-    timestamp?: string;
     authorId?: string;
     authorName?: string;
     authorImgSrc?: string;
     authorAvatarProps?: FallbackValue;
 };
+export type MessageEntityBlock<BlockValue> = BlockValue & {
+    timestamp?: string;
+};
+export type MessageEntity<BlockValue> = MessageMetadata & {
+    blocks: MessageEntityBlock<BlockValue>[];
+};
 export type ThreadEntity = {
     topicId?: string;
     topicTitle?: string;

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,UAAU,IAAI,UAAU,GAAG;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,UAAU,IAAI,eAAe,GAAG;IACxD,MAAM,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.5.9-main.44fe51d",
+  "version": "0.5.9-main.4ed8273",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,11 +18,11 @@
   "dependencies": {
     "@radix-ui/react-primitive": "^1.0.2",
     "date-fns": "^3.3.1",
-    "@dxos/react-ui-editor": "0.5.9-main.44fe51d",
-    "@dxos/react-ui": "0.5.9-main.44fe51d",
-    "@dxos/react-ui-mosaic": "0.5.9-main.44fe51d",
-    "@dxos/util": "0.5.9-main.44fe51d",
-    "@dxos/react-ui-theme": "0.5.9-main.44fe51d"
+    "@dxos/react-ui": "0.5.9-main.4ed8273",
+    "@dxos/react-ui-mosaic": "0.5.9-main.4ed8273",
+    "@dxos/react-ui-editor": "0.5.9-main.4ed8273",
+    "@dxos/util": "0.5.9-main.4ed8273",
+    "@dxos/react-ui-theme": "0.5.9-main.4ed8273"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -31,13 +31,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^5.2.9",
-    "@braneframe/types": "0.5.9-main.44fe51d",
-    "@dxos/echo-db": "0.5.9-main.44fe51d",
-    "@dxos/echo-schema": "0.5.9-main.44fe51d",
-    "@dxos/keys": "0.5.9-main.44fe51d",
-    "@dxos/log": "0.5.9-main.44fe51d",
-    "@dxos/random": "0.5.9-main.44fe51d",
-    "@dxos/storybook-utils": "0.5.9-main.44fe51d"
+    "@dxos/echo-db": "0.5.9-main.4ed8273",
+    "@braneframe/types": "0.5.9-main.4ed8273",
+    "@dxos/keys": "0.5.9-main.4ed8273",
+    "@dxos/echo-schema": "0.5.9-main.4ed8273",
+    "@dxos/log": "0.5.9-main.4ed8273",
+    "@dxos/random": "0.5.9-main.4ed8273",
+    "@dxos/storybook-utils": "0.5.9-main.4ed8273"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",

package/src/Message/Message.stories.tsx

@@ -10,23 +10,26 @@ import { PublicKey } from '@dxos/keys';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Message } from './Message';
-import { DefaultMessageText, type MessageEntity } from '../testing';
 import translations from '../translations';
+import { type MessageEntity } from '../types';
 
 const Story = () => {
   const [identityKey] = useState(PublicKey.random());
-  const [message] = useState<MessageEntity>({
+  const [message] = useState<MessageEntity<{ id: string; text: string }>>({
     id: 'm1',
-    timestamp: new Date().toISOString(),
     authorId: identityKey.toHex(),
-    text: 'hello',
+    blocks: [
+      {
+        id: 'b1',
+        timestamp: new Date().toISOString(),
+        text: 'hello',
+      },
+    ],
   });
 
   return (
     <div className='grid grid-cols-[var(--rail-size)_1fr]'>
-      <Message {...message}>
-        <DefaultMessageText text={message.text} onDelete={() => console.log('delete')} />
-      </Message>
+      <Message {...message} />
     </div>
   );
 };

package/src/Message/Message.tsx

@@ -2,17 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+import { X } from '@phosphor-icons/react';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { type ComponentPropsWithRef, forwardRef, useMemo, type PropsWithChildren } from 'react';
+import React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';
 
 // TODO(burdon): Remove dep.
-import { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Avatar, Button, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { type TextEditorProps, keymap, listener, TextEditor } from '@dxos/react-ui-editor';
-import { focusRing, mx } from '@dxos/react-ui-theme';
-import { hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';
+import {
+  focusRing,
+  hoverableControlItem,
+  hoverableControls,
+  hoverableFocusedWithinControls,
+  mx,
+} from '@dxos/react-ui-theme';
+import { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';
 
 import { translationKey } from '../translations';
-import { type MessageMetadata } from '../types';
+import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
 
 const avatarSize = 7;
 
@@ -50,24 +57,69 @@ export const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(
   },
 );
 
-export type MessageProps = PropsWithChildren<MessageMetadata>;
+export type MessageBlockProps<BlockValue> = {
+  block: MessageEntityBlock<BlockValue>;
+  authorId?: string;
+  onBlockDelete?: () => void;
+};
+
+const DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {
+  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';
+  return (
+    <div
+      role='none'
+      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}
+    >
+      {block.data ? (
+        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>
+          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>
+        </pre>
+      ) : (
+        <p className={contentWidth}>{block.text ?? ''}</p>
+      )}
+      {onBlockDelete && (
+        <Button
+          variant='ghost'
+          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}
+          onClick={() => onBlockDelete()}
+        >
+          <X />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export type MessageProps<BlockValue> = MessageEntity<BlockValue> & {
+  onDelete?: (messageId: string, blockIndex: number) => void;
+  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;
+};
 
-export const Message = ({ timestamp, children, ...messageMeta }: MessageProps) => {
+export const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {
+  const { id, authorName, onDelete, blocks, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;
   const { t, dtLocale } = useTranslation(translationKey);
-  const dt = timestamp ? new Date(timestamp) : undefined;
+  const firstBlock = blocks[0];
+  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;
 
   return (
-    <MessageMeta {...messageMeta} continues>
+    <MessageMeta {...metaProps} id={id} continues>
       <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>
-        <Avatar.Label classNames={['truncate text-sm font-medium', !messageMeta.authorName && 'fg-description']}>
-          {messageMeta.authorName ?? t('anonymous label')}
+        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>
+          {authorName ?? t('anonymous label')}
         </Avatar.Label>
         <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>
           {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}
         </time>
       </p>
       <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>
-        {children}
+        {blocks.map((block, i) => (
+          <MessageBlockComponent
+            key={i}
+            block={block}
+            authorId={metaProps.authorId}
+            onBlockDelete={onDelete && (() => onDelete(id, i))}
+          />
+        ))}
       </div>
     </MessageMeta>
   );

package/src/Thread/Comments.stories.tsx

@@ -7,7 +7,7 @@ import '@dxosTheme';
 import { Check, Trash } from '@phosphor-icons/react';
 import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
 
-import { MessageType, TextType } from '@braneframe/types';
+import { MessageType, TextV0Type } from '@braneframe/types';
 import { createDocAccessor, createEchoObject } from '@dxos/echo-db';
 import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
@@ -30,9 +30,9 @@ import {
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Thread, ThreadFooter, ThreadHeading } from './Thread';
-import { Message, MessageTextbox } from '../Message';
-import { type MessageEntity } from '../testing';
+import { Message, type MessageBlockProps, MessageTextbox } from '../Message';
 import translations from '../translations';
+import { type MessageEntity } from '../types';
 
 faker.seed(101);
 
@@ -44,7 +44,7 @@ const authorId = PublicKey.random().toHex();
 
 const Editor: FC<{
   id?: string;
-  item: TextType;
+  item: TextV0Type;
   comments: Comment[];
   selected?: string;
   onCreateComment: CommentsOptions['onCreate'];
@@ -105,22 +105,18 @@ type StoryCommentThread = {
   cursor?: string;
   range?: Range;
   yPos?: number;
-  messages: MessageEntity[];
+  messages: MessageEntity<{ content?: TextV0Type }>[];
 };
 
-type MessageTextProps = {
-  message: MessageEntity;
-};
-
-const StoryMessageText = ({ message }: MessageTextProps) => {
+const StoryMessageBlock = (props: MessageBlockProps<{ content?: TextV0Type }>) => {
   const { themeMode } = useThemeContext();
-  const doc = message.text;
-  const accessor = createDocAccessor(message, ['text']);
+  const doc = props.block.content?.content;
+  const accessor = createDocAccessor(props.block.content!, ['content']);
   const { parentRef } = useTextEditor(
     () => ({
       doc,
       extensions: [
-        // prettier-ignore
+        //
         createBasicExtensions(),
         createThemeExtensions({ themeMode }),
         automerge(accessor),
@@ -167,9 +163,13 @@ const StoryThread: FC<{
   const handleCreateMessage = () => {
     if (messageRef.current?.length) {
       const message = create(MessageType, {
-        timestamp: new Date().toISOString(),
-        sender: { identityKey: authorId },
-        text: messageRef.current,
+        from: { identityKey: authorId },
+        blocks: [
+          {
+            timestamp: new Date().toISOString(),
+            content: create(TextV0Type, { content: messageRef.current }),
+          },
+        ],
       });
       thread.messages.push(message);
 
@@ -193,9 +193,7 @@ const StoryThread: FC<{
       </ThreadHeading>
 
       {thread.messages.map((message) => (
-        <Message key={message.id} {...message}>
-          <StoryMessageText message={message} />
-        </Message>
+        <Message<{ content?: TextV0Type }> key={message.id} {...message} MessageBlockComponent={StoryMessageBlock} />
       ))}
 
       <div ref={containerRef} className='contents'>
@@ -255,7 +253,7 @@ type StoryProps = {
 };
 
 const Story = ({ text, autoCreate }: StoryProps) => {
-  const [item] = useState(createEchoObject(create(TextType, { content: text ?? '' })));
+  const [item] = useState(createEchoObject(create(TextV0Type, { content: text ?? '' })));
   const [threads, setThreads] = useState<StoryCommentThread[]>([]);
   const [selected, setSelected] = useState<string>();
 
@@ -277,9 +275,13 @@ const Story = ({ text, autoCreate }: StoryProps) => {
           ? faker.helpers.multiple(
               () => ({
                 id: PublicKey.random().toHex(),
-                timestamp: new Date().toISOString(),
                 authorId: PublicKey.random().toHex(),
-                text: faker.lorem.sentence(),
+                blocks: [
+                  {
+                    timestamp: new Date().toISOString(),
+                    content: create(TextV0Type, { content: faker.lorem.sentence() }),
+                  },
+                ],
               }),
               { count: { min: 1, max: 3 } },
             )

package/src/Thread/Thread.stories.tsx

@@ -11,8 +11,8 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Thread, ThreadFooter } from './Thread';
 import { Message, MessageTextbox } from '../Message';
-import { DefaultMessageText, type MessageEntity } from '../testing';
 import translations from '../translations';
+import { type MessageEntity } from '../types';
 
 const Story = () => {
   const [pending, setPending] = useState(false);
@@ -21,15 +21,25 @@ const Story = () => {
   const [messages, setMesssages] = useState<MessageEntity<{ id: string; text: string }>[]>([
     {
       id: 'm1',
-      timestamp: new Date().toISOString(),
       authorId: identityKey1.toHex(),
-      text: 'hello',
+      blocks: [
+        {
+          id: 'b1',
+          timestamp: new Date().toISOString(),
+          text: 'hello',
+        },
+      ],
     },
     {
       id: 'm2',
-      timestamp: new Date().toISOString(),
       authorId: identityKey2.toHex(),
-      text: 'hi there',
+      blocks: [
+        {
+          id: 'b2',
+          timestamp: new Date().toISOString(),
+          text: 'hi there',
+        },
+      ],
     },
   ]);
 
@@ -48,9 +58,14 @@ const Story = () => {
         ...messages,
         {
           id: `m${_count}`,
-          timestamp: new Date().toISOString(),
           authorId: identityKey1.toHex(),
-          text: messageRef.current,
+          blocks: [
+            {
+              id: `b${_count}`,
+              timestamp: new Date().toISOString(),
+              text: messageRef.current,
+            },
+          ],
         },
       ]);
       messageRef.current = '';
@@ -62,9 +77,7 @@ const Story = () => {
   return (
     <Thread id='t1'>
       {messages.map((message) => (
-        <Message key={message.id} {...message}>
-          <DefaultMessageText text={message.text} onDelete={() => console.log('delete')} />
-        </Message>
+        <Message key={message.id} {...message} />
       ))}
       <MessageTextbox
         id={String(_count)}

package/src/types.ts

@@ -6,13 +6,20 @@ import { type FallbackValue } from '@dxos/util';
 
 export type MessageMetadata = {
   id: string; // TODO(burdon): Remove/rename?
-  timestamp?: string;
   authorId?: string;
   authorName?: string;
   authorImgSrc?: string;
   authorAvatarProps?: FallbackValue;
 };
 
+export type MessageEntityBlock<BlockValue> = BlockValue & {
+  timestamp?: string;
+};
+
+export type MessageEntity<BlockValue> = MessageMetadata & {
+  blocks: MessageEntityBlock<BlockValue>[];
+};
+
 export type ThreadEntity = {
   topicId?: string;
   topicTitle?: string;

package/dist/types/src/testing.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { type MessageMetadata } from './types';
-export type MessageEntity<PartValue = any> = MessageMetadata & {
-    text: string;
-    parts?: PartValue[];
-};
-export type MessageTextProps = {
-    text: string;
-    onDelete?: () => void;
-};
-export declare const DefaultMessageText: ({ text, onDelete }: MessageTextProps) => JSX.Element;
-export type MessagePartProps<PartValue> = {
-    part: PartValue;
-};
-export declare const DefaultMessageBlock: <PartValue>({ part }: MessagePartProps<PartValue>) => JSX.Element;
-//# sourceMappingURL=testing.d.ts.map

package/dist/types/src/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,aAAa,CAAC,SAAS,GAAG,GAAG,IAAI,eAAe,GAAG;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,uBAAwB,gBAAgB,gBAmBtE,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,SAAS,IAAI;IACxC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAA0B,iBAAiB,SAAS,CAAC,gBAWpF,CAAC"}

package/src/testing.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { X } from '@phosphor-icons/react';
-import React from 'react';
-
-import { Button } from '@dxos/react-ui';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
-
-import { type MessageMetadata } from './types';
-
-export type MessageEntity<PartValue = any> = MessageMetadata & {
-  text: string;
-  parts?: PartValue[];
-};
-
-export type MessageTextProps = {
-  text: string;
-  onDelete?: () => void;
-};
-
-export const DefaultMessageText = ({ text, onDelete }: MessageTextProps) => {
-  const contentWidth = onDelete ? 'col-span-2' : 'col-span-3';
-  return (
-    <div
-      role='none'
-      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}
-    >
-      <p className={contentWidth}>{text}</p>
-      {onDelete && (
-        <Button
-          variant='ghost'
-          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}
-          onClick={() => onDelete()}
-        >
-          <X />
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export type MessagePartProps<PartValue> = {
-  part: PartValue;
-};
-
-export const DefaultMessageBlock = <PartValue,>({ part }: MessagePartProps<PartValue>) => {
-  return (
-    <div
-      role='none'
-      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}
-    >
-      <pre className='font-mono max-is-full overflow-x-auto col-span-3'>
-        <code>{JSON.stringify(part, undefined, 2)}</code>
-      </pre>
-    </div>
-  );
-};