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

package/src/Thread/Thread.stories.tsx

@@ -3,94 +3,46 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useState } from 'react';
 
-import { PublicKey } from '@dxos/keys';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-import { createBasicExtensions, createThemeExtensions } from '@dxos/react-ui-editor';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Message as MessageType } from '@dxos/types';
 
-import { MessageRoot, MessageTextbox } from '../Message';
-import { type MessageEntity, MessageStoryText } from '../testing';
-import { translations } from '../translations';
+import { translations } from '#translations';
 
+import { createMessages, getStoryMetadata } from '../testing';
 import { Thread } from './Thread';
 
-faker.seed(1);
+const IDENTITY = { role: 'user' as const, identityDid: 'did:key:alice', name: 'Alice' };
 
 const DefaultStory = () => {
-  const [pending, setPending] = useState(false);
-  const [identityKey1] = useState(PublicKey.random());
-  const [identityKey2] = useState(PublicKey.random());
-  const [messages, setMessages] = useState<MessageEntity<{ id: string; text: string }>[]>(
-    Array.from({ length: 8 }, (_, i) => ({
-      id: `m${i + 1}`,
-      timestamp: new Date().toISOString(),
-      authorId: [identityKey1.toHex(), identityKey2.toHex()][i % 2],
-      text: faker.lorem.paragraph(),
-    })),
-  );
-
-  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
-  const [_count, _setCount] = useState(3);
-  const rerenderEditor = () => _setCount((count) => count + 1);
-  const messageRef = useRef('');
-  const extensions = useMemo(() => [createBasicExtensions(), createThemeExtensions()], []);
+  const [messages, setMessages] = useState(() => createMessages(12));
 
-  // TODO(thure): Why does pressing Enter clear the text content?
-  //  Something to do with the in-memory text model perhaps?
-  const handleSend = () => {
-    setPending(true);
-    setTimeout(() => {
-      setMessages((messages) => [
-        ...messages,
-        {
-          id: `m${_count}`,
-          timestamp: new Date().toISOString(),
-          authorId: identityKey1.toHex(),
-          text: messageRef.current,
-        },
-      ]);
-      messageRef.current = '';
-      setPending(false);
-      rerenderEditor();
-    }, 2_000);
+  const handleSend = (text: string) => {
+    setMessages((prev) => [...prev, MessageType.make({ sender: IDENTITY, blocks: [{ _tag: 'text', text }] })]);
+    return true;
   };
 
   return (
-    <div className='mli-auto is-96 overflow-y-auto'>
-      <Thread.Root id='t1'>
-        {messages.map((message) => (
-          <MessageRoot key={message.id} classNames={[hoverableControls, hoverableFocusedWithinControls]} {...message}>
-            <MessageStoryText {...message} text={message.text} onDelete={() => console.log('delete')} />
-          </MessageRoot>
-        ))}
-
-        <MessageTextbox
-          id={String(_count)}
-          authorId={identityKey1.toHex()}
-          disabled={pending}
-          extensions={extensions}
-          onSend={handleSend}
-        />
-
-        <Thread.Status activity>Processing...</Thread.Status>
-      </Thread.Root>
-    </div>
+    <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable onMessageDelete={() => {}}>
+      <Thread.Content classNames='grow min-h-0'>
+        <Thread.Messages messages={messages} />
+        <Thread.Textbox id='composer' authorId={IDENTITY.identityDid} authorName={IDENTITY.name} onSend={handleSend} />
+        <Thread.Status />
+      </Thread.Content>
+    </Thread.Root>
   );
 };
 
 const meta = {
   title: 'ui/react-ui-thread/Thread',
-  component: Thread.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof Thread.Root>;
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 

package/src/Thread/Thread.tsx

@@ -2,37 +2,119 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ReactNode,
+  forwardRef,
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { Obj } from '@dxos/echo';
+import {
+  type ComposableProps,
+  Icon,
+  IconButton,
+  ScrollArea,
+  type ThemedClassName,
+  composable,
+  composableProps,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { type Message as MessageType } from '@dxos/types';
+import { type Extension, createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
+import { command } from '../command';
+import { ThreadContextProvider, useThreadContext } from '../context';
+import { Message } from '../Message';
 import { translationKey } from '../translations';
-import type { ThreadEntity } from '../types';
+import { type MessageMetadata, type ThreadContextValue } from '../types';
 
-// TODO(burdon): Why is this exported?
-export const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';
+const getMessageId = (message: MessageType.Message) => Obj.getURI(message);
 
 //
 // Root
 //
 
-type ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };
+export type ThreadRootProps = PropsWithChildren<
+  Omit<ThreadContextValue, 'components'> & Partial<Pick<ThreadContextValue, 'components'>>
+>;
 
-const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
-  ({ current, children, classNames, ...props }, forwardedRef) => {
+/**
+ * Headless root of a thread. Provides message-tile context (metadata resolver,
+ * injected renderers, callbacks) and the Mosaic root that `Thread.Messages`
+ * renders its virtual stack within. Renders no DOM of its own — wrap the visible
+ * thread chrome in `Thread.Content`.
+ */
+const ThreadRoot = ({
+  children,
+  getMetadata,
+  components,
+  identityDid,
+  editable,
+  onMessageDelete,
+  onAcceptProposal,
+}: ThreadRootProps) => {
+  // Composer focus handler registered by Thread.Textbox; invoked by Thread.Header's caret.
+  const composerFocus = useRef<(() => void) | undefined>(undefined);
+
+  const registerComposerFocus = useCallback((focus: (() => void) | undefined) => {
+    composerFocus.current = focus;
+  }, []);
+
+  const focusComposer = useCallback(() => composerFocus.current?.(), []);
+
+  return (
+    <ThreadContextProvider
+      getMetadata={getMetadata}
+      components={components ?? {}}
+      identityDid={identityDid}
+      editable={editable}
+      registerComposerFocus={registerComposerFocus}
+      focusComposer={focusComposer}
+      onMessageDelete={onMessageDelete}
+      onAcceptProposal={onAcceptProposal}
+    >
+      <Mosaic.Root>{children}</Mosaic.Root>
+    </ThreadContextProvider>
+  );
+};
+
+ThreadRoot.displayName = 'Thread.Root';
+
+//
+// Content
+//
+
+type ThreadContentExtra = {
+  id?: string;
+  current?: boolean | string;
+} & Pick<ComponentPropsWithRef<'div'>, 'onClickCapture' | 'onFocusCapture'>;
+
+export type ThreadContentProps = ComposableProps<ThreadContentExtra>;
+
+/** Visible thread container (the attention surface that hosts header / messages / composer). */
+const ThreadContent = composable<HTMLDivElement, ThreadContentExtra>(
+  ({ children, current, id, ...props }, forwardedRef) => {
     return (
       <div
-        role='group'
+        {...composableProps(props, {
+          role: 'group',
+          classNames: [
+            'flex flex-col bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]',
+            hoverableFocusedWithinControls,
+          ],
+        })}
         data-testid='thread'
-        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}
-        {...props}
-        className={mx(
-          threadLayout,
-          hoverableFocusedWithinControls,
-          'bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]',
-          classNames,
-        )}
+        id={id}
+        aria-current={current ? 'location' : undefined}
         ref={forwardedRef}
       >
         {children}
@@ -41,43 +123,212 @@ const ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(
   },
 );
 
+ThreadContent.displayName = 'Thread.Content';
+
 //
-// Heading
+// Header
 //
 
-type ThreadHeaderProps = ComponentPropsWithRef<'div'> & { detached?: boolean };
+export type ThreadHeaderProps = Omit<
+  ComposableProps<{
+    /** Snippet text rendered inside a `<p>` (a string, not a DOM element). */
+    title?: string;
+    detached?: boolean;
+    /** Whether this is the current/selected thread; accents the title. */
+    current?: boolean;
+    /** Trailing controls rendered in the right column (aligns with message-tile controls). */
+    controls?: ReactNode;
+    /** Invoked when the caret affordance is activated to select/focus this thread. */
+    onSelect?: () => void;
+  }>,
+  'children'
+>;
+
+/**
+ * Thread header row: caret (rail) · snippet (content) · controls. Owns its own
+ * `[rail · 1fr · controls]` grid so the trailing controls align with message-tile
+ * controls (which use the same template) — no grid is leaked in from the caller.
+ */
+const ThreadHeader = composable<HTMLDivElement, ThreadHeaderProps>(
+  ({ title, detached, current, controls, onSelect, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const { focusComposer } = useThreadContext('Thread.Header');
+    const handleSelect = useCallback(() => {
+      onSelect?.();
+      focusComposer();
+    }, [onSelect, focusComposer]);
 
-const ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(
-  ({ children, detached, ...props }, forwardedRef) => {
     return (
-      <>
-        <div role='none' className='flex items-center justify-center text-description'>
-          <Icon icon='ph--caret-double-right--regular' />
+      <div
+        {...composableProps(props, {
+          classNames: [
+            'grid grid-cols-[var(--dx-rail-size)_1fr_min-content] items-center',
+            hoverableControls,
+            hoverableFocusedWithinControls,
+          ],
+        })}
+        ref={forwardedRef}
+      >
+        <div className='flex items-center justify-center'>
+          <IconButton
+            iconOnly
+            variant='ghost'
+            density='sm'
+            icon='ph--caret-double-right--regular'
+            label={t('select-thread.label')}
+            classNames='text-description'
+            onClick={handleSelect}
+          />
         </div>
-        <div role='none' className='flex items-center overflow-hidden'>
+        <div className='flex items-center overflow-hidden'>
           <p
             role='heading'
             data-testid='thread.heading'
-            {...props}
             className={mx(
-              'mie-2 text-description font-medium truncate italic',
+              'me-2 font-medium truncate italic',
+              current ? 'text-accent-text' : 'text-description',
               detached && 'line-through decoration-1',
             )}
-            ref={forwardedRef}
           >
-            {children}
+            {title}
           </p>
         </div>
-      </>
+        {controls}
+      </div>
     );
   },
 );
 
+ThreadHeader.displayName = 'Thread.Header';
+
+//
+// Messages
+//
+
+const MessageTileAdapter = ({
+  id,
+  data,
+  location,
+  draggable,
+  current,
+  selected,
+}: MosaicTileProps<MessageType.Message>) => (
+  <Mosaic.Tile id={id} data={data} location={location} draggable={draggable} current={current} selected={selected}>
+    <Message.Tile message={data} />
+  </Mosaic.Tile>
+);
+
+export type ThreadMessagesProps = ThemedClassName<{
+  messages: readonly MessageType.Message[];
+  /** Estimated tile height for the virtualizer. */
+  estimateSize?: number;
+  currentId?: string;
+}>;
+
+/** Virtualized stack of message tiles (via Mosaic), within an internal scroll area. */
+const ThreadMessages = ({ messages, estimateSize = 80, currentId, classNames }: ThreadMessagesProps) => {
+  const [viewport, setViewport] = useState<HTMLElement | null>(null);
+  const items = useMemo(() => messages.filter(Boolean), [messages]);
+
+  return (
+    <Mosaic.Container
+      asChild
+      orientation='vertical'
+      autoScroll={viewport}
+      currentId={currentId}
+      eventHandler={{ id: 'thread', canDrop: () => false }}
+    >
+      <ScrollArea.Root classNames={mx('col-span-2', classNames)} orientation='vertical'>
+        <ScrollArea.Viewport ref={setViewport}>
+          <Mosaic.VirtualStack
+            items={items}
+            getId={getMessageId}
+            Tile={MessageTileAdapter}
+            draggable={false}
+            getScrollElement={() => viewport}
+            estimateSize={() => estimateSize}
+          />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </Mosaic.Container>
+  );
+};
+
+ThreadMessages.displayName = 'Thread.Messages';
+
+//
+// Textbox
+//
+
+export type ThreadTextboxProps = MessageMetadata & {
+  placeholder?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  extensions?: Extension;
+  /**
+   * Called with the composer content on send. Return `true` to accept (the
+   * editor is cleared and remounted), `false` to reject.
+   */
+  onSend?: (text: string) => boolean;
+};
+
+/** Message composer pinned at the foot of a thread. */
+const ThreadTextbox = ({ placeholder, autoFocus, disabled, extensions, onSend, ...metadata }: ThreadTextboxProps) => {
+  const { t } = useTranslation(translationKey);
+  const { themeMode } = useThemeContext();
+  const { registerComposerFocus } = useThreadContext('Thread.Textbox');
+  const composerRef = useRef<{ focus: () => void } | null>(null);
+  const messageRef = useRef('');
+  const [count, setCount] = useState(0);
+
+  // Expose the composer's focus to Thread.Root so the header caret can focus it.
+  useEffect(() => {
+    registerComposerFocus(() => composerRef.current?.focus());
+    return () => registerComposerFocus(undefined);
+  }, [registerComposerFocus]);
+
+  const editorExtensions = useMemo(
+    () =>
+      [
+        createBasicExtensions({ placeholder: placeholder ?? t('message.placeholder') }),
+        createThemeExtensions({ themeMode }),
+        listener({ onChange: ({ text }) => (messageRef.current = text) }),
+        command,
+        extensions,
+      ].filter(Boolean) as Extension[],
+    [themeMode, placeholder, t, extensions, count],
+  );
+
+  const handleSend = useCallback(() => {
+    const text = messageRef.current;
+    if (!text?.length || !onSend) {
+      return;
+    }
+    if (onSend(text)) {
+      messageRef.current = '';
+      setCount((value) => value + 1);
+    }
+  }, []);
+
+  return (
+    <Message.Textbox
+      ref={composerRef}
+      {...metadata}
+      autoFocus={autoFocus}
+      disabled={disabled}
+      extensions={editorExtensions}
+      onSend={handleSend}
+    />
+  );
+};
+
+ThreadTextbox.displayName = 'Thread.Textbox';
+
 //
 // Status
 //
 
-type ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+export type ThreadStatusProps = ThemedClassName<PropsWithChildren> & {
   activity?: boolean;
 };
 
@@ -88,29 +339,36 @@ const ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(
       <div
         {...props}
         className={mx(
-          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description',
+          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description',
           classNames,
         )}
         ref={forwardedRef}
       >
         <Icon
           icon='ph--spinner--bold'
-          classNames='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'
+          classNames='w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow'
           data-visible={activity ? 'show' : 'hide'}
         />
-        <span className='truncate min-is-0' aria-live='polite'>
+        <span className='truncate min-w-0' aria-live='polite'>
           {activity ? children : null}
         </span>
-        <span className={mx('text-end', hoverableControlItem)}>{t('enter to send message')}</span>
+        <span className={mx('text-end', hoverableControlItem)}>{t('enter-to-send.message')}</span>
       </div>
     );
   },
 );
 
+ThreadStatus.displayName = 'Thread.Status';
+
+//
+// Thread
+//
+
 export const Thread = {
   Root: ThreadRoot,
+  Content: ThreadContent,
   Header: ThreadHeader,
+  Messages: ThreadMessages,
+  Textbox: ThreadTextbox,
   Status: ThreadStatus,
 };
-
-export type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, ThreadStatusProps };

package/src/Thread/index.ts

@@ -2,4 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Thread';
+export { Thread } from './Thread';
+export type {
+  ThreadRootProps,
+  ThreadContentProps,
+  ThreadHeaderProps,
+  ThreadMessagesProps,
+  ThreadTextboxProps,
+  ThreadStatusProps,
+} from './Thread';

package/src/command.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+import { tags } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+
+/**
+ * Highlights leading slash-commands (e.g. `/resolve`) and `@mention` tags
+ * (e.g. `@Kai`, anywhere) in the message composer.
+ * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+ */
+const parser = StreamLanguage.define<{ count: number }>({
+  startState: () => ({ count: 0 }),
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    // Leading slash-command (first token only).
+    if (state.count === 1 && stream.match(/^\/\w+/)) {
+      return 'tagName';
+    }
+    // @mention (anywhere).
+    if (stream.match(/^@\w+/)) {
+      return 'labelName';
+    }
+    stream.next();
+    return null;
+  },
+});
+
+const styles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx('dx-tag dx-tag--indigo'),
+  },
+  {
+    tag: tags.labelName,
+    class: mx('dx-tag dx-tag--blue'),
+  },
+]);
+
+// Center the inline `.dx-tag` pills on the text line. `.dx-tag` is `inline-block`
+// with vertical padding, so on a CodeMirror line it baseline-aligns and rides
+// high; overriding `vertical-align` recentres it (cf. the `cm-reference-pill`
+// precedent in `@dxos/react-ui-chat`).
+const theme = EditorView.theme({
+  '.dx-tag': {
+    verticalAlign: 'bottom',
+  },
+});
+
+export const command: Extension = [parser, syntaxHighlighting(styles), theme];

package/src/context.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type ThreadContextValue } from './types';
+
+/**
+ * Context provided by `Thread.Root` and consumed by its parts. Extends the
+ * consumer-facing {@link ThreadContextValue} with internal coordination (e.g.
+ * focusing the composer from the header's select affordance).
+ */
+export type ThreadContext = ThreadContextValue & {
+  /** Register the composer's focus handler (set by `Thread.Textbox`). */
+  registerComposerFocus: (focus: (() => void) | undefined) => void;
+  /** Focus the thread composer (used by `Thread.Header`'s select affordance). */
+  focusComposer: () => void;
+};
+
+export const [ThreadContextProvider, useThreadContext] = createContext<ThreadContext>('Thread');

package/src/index.ts

@@ -2,9 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { translations } from './translations';
-
-export * from './Thread';
-export * from './Message';
-export type * from './types';
-export { translations };
+export { Thread } from './Thread';
+export type {
+  ThreadRootProps,
+  ThreadContentProps,
+  ThreadHeaderProps,
+  ThreadMessagesProps,
+  ThreadTextboxProps,
+  ThreadStatusProps,
+} from './Thread';
+export { Message } from './Message';
+export type {
+  MessageRootProps,
+  MessageHeadingProps,
+  MessageAuthorNameProps,
+  MessageTimeProps,
+  MessageBodyProps,
+  MessageTextboxProps,
+  MessageTileProps,
+} from './Message';
+export { command } from './command';
+export { useThreadContext } from './context';
+export type {
+  MessageMetadata,
+  ObjectTileComponent,
+  ThreadComponents,
+  MessageCallbacks,
+  ThreadContextValue,
+} from './types';