@dxos/plugin-thread 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/src/components/Call/Call.tsx

@@ -3,16 +3,16 @@
 //
 
 import { useAtomValue } from '@effect-atom/atom-react';
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { useDebugMode } from '../../hooks';
-import { ThreadCapabilities } from '../../types';
+import { useDebugMode } from '#hooks';
+import { ThreadCapabilities } from '#types';
+
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
-
 import { Toolbar, type ToolbarProps } from './Toolbar';
 
 //
@@ -21,8 +21,8 @@ import { Toolbar, type ToolbarProps } from './Toolbar';
 
 type CallRootProps = PropsWithChildren<ThemedClassName>;
 
-const CallRoot: FC<CallRootProps> = ({ children }) => {
-  return <div className='relative flex flex-col grow overflow-hidden'>{children}</div>;
+const CallRoot = ({ children }: CallRootProps) => {
+  return <div className='relative dx-container flex flex-col'>{children}</div>;
 };
 
 CallRoot.displayName = 'CallRoot';
@@ -33,7 +33,7 @@ CallRoot.displayName = 'CallRoot';
 
 type CallAudioProps = {};
 
-const CallAudio: FC<CallAudioProps> = () => {
+const CallAudio = (_props: CallAudioProps) => {
   const call = useCapability(ThreadCapabilities.CallManager);
   const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
 
@@ -50,7 +50,7 @@ type CallGridProps = {
   fullscreen?: boolean;
 };
 
-const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
+const CallGrid = ({ fullscreen }: CallGridProps) => {
   const debug = useDebugMode();
   const call = useCapability(ThreadCapabilities.CallManager);
   const self = useAtomValue(call.selfAtom);
@@ -71,7 +71,7 @@ CallGrid.displayName = 'CallGrid';
 
 type CallToolbarProps = Pick<ToolbarProps, 'channel' | 'onLeave'>;
 
-const CallToolbar: FC<CallToolbarProps> = (props) => {
+const CallToolbar = (props: CallToolbarProps) => {
   return (
     <div className='absolute bottom-0 left-0 right-0 flex justify-center'>
       <Toolbar isInRoom {...props} />

package/src/components/Call/Toolbar.tsx

@@ -5,7 +5,8 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
@@ -18,11 +19,11 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
+import { type Channel } from '@dxos/types';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { ThreadCapabilities } from '../../types';
-import { type Channel } from '../../types';
+import { meta } from '#meta';
+import { ThreadCapabilities } from '#types';
 
 export type ToolbarProps = ThemedClassName<{
   channel?: Channel.Channel;
@@ -62,21 +63,20 @@ export const Toolbar = ({
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
         <ToggleButton
           active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
-              label: t('mic off'),
+              label: t('mic-off.button'),
               onClick: () => call.turnAudioOff(),
-              classNames: 'bg-callActive',
+              classNames: 'bg-call-active',
             },
             off: {
               icon: 'ph--microphone-slash--duotone',
-              label: t('mic on'),
+              label: t('mic-on.button'),
               onClick: () => call.turnAudioOn(),
-              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
@@ -85,20 +85,20 @@ export const Toolbar = ({
           state={{
             on: {
               icon: 'ph--video-camera--regular',
-              label: t('camera off'),
+              label: t('camera-off.button'),
               onClick: () => call.turnVideoOff(),
             },
             off: {
               icon: 'ph--video-camera-slash--duotone',
-              label: t('camera on'),
+              label: t('camera-on.button'),
               onClick: () => call.turnVideoOn(),
             },
           }}
         />
 
         {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued'>
-            <Icon icon='ph--users--regular' size={4} />
+          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
+            <Icon icon='ph--users--regular' />
             <div>{participants}</div>
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
@@ -111,12 +111,12 @@ export const Toolbar = ({
               state={{
                 on: {
                   icon: 'ph--monitor--regular',
-                  label: t('screenshare off'),
+                  label: t('screenshare-off.button'),
                   onClick: () => call.turnScreenshareOff(),
                 },
                 off: {
                   icon: 'ph--monitor-arrow-up--duotone',
-                  label: t('screenshare on'),
+                  label: t('screenshare-on.button'),
                   onClick: () => call.turnScreenshareOn(),
                 },
               }}
@@ -141,13 +141,12 @@ export const Toolbar = ({
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
-                  label: t('lower hand'),
+                  label: t('lower-hand.button'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
-                  label: t('raise hand'),
+                  label: t('raise-hand.button'),
                   onClick: () => call.setRaisedHand(true),
                 },
               }}
@@ -155,9 +154,19 @@ export const Toolbar = ({
           </>
         )}
         {joined ? (
-          <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
+          <IconButton
+            variant='destructive'
+            icon='ph--phone-x--regular'
+            label={t('leave-call.button')}
+            onClick={onLeave}
+          />
         ) : (
-          <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
+          <IconButton
+            variant='primary'
+            icon='ph--phone-incoming--regular'
+            label={t('join-call.button')}
+            onClick={onJoin}
+          />
         )}
       </NaturalToolbar.Root>
     </div>
@@ -182,7 +191,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,218 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type RefObject, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { type SpaceMember } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type MessageMetadata,
+  MessageTextbox,
+  Thread as ThreadComponent,
+  type ThreadRootProps,
+  threadLayout,
+} from '@dxos/react-ui-thread';
+import { type Message } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener, type Extension } from '@dxos/ui-editor';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta } from '#meta';
+
+import { command } from '../../extensions';
+import { getMessageMetadata } from '../../util';
+import { MessagePanel } from '../MessagePanel';
+
+export type ChatProps = ThemedClassName<
+  {
+    /** Stable id used for the underlying thread root and message metadata. */
+    id: string;
+    /** Identity used to attribute outgoing messages in the textbox metadata. */
+    identity?: Identity;
+    /** Space members for rendering sender names/avatars on incoming messages. */
+    members: SpaceMember[];
+    /** Messages to render in order. */
+    messages: readonly Message.Message[];
+    /** Activity indicator (e.g. processing) shown beneath the textbox. */
+    activity?: boolean;
+    /**
+     * Called with the user's textbox content when they press send.
+     * Returning `true` signals the message was accepted; the textbox is then cleared.
+     */
+    onSend: (text: string) => boolean;
+    autoFocusTextbox?: boolean;
+    /**
+     * Where the composer sits relative to the messages.
+     * - `'top'` (default) — composer follows the messages at intrinsic height,
+     *   suitable for inline comment threads.
+     * - `'bottom'` — composer pinned to the bottom of the panel, messages
+     *   scrolling above it. Suitable for full-panel multi-party chat.
+     */
+    orientation?: ChatOrientation;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export type ChatOrientation = 'top' | 'bottom';
+
+/**
+ * Pure chat UI: scrollable message list + composer textbox + activity indicator.
+ * Owns its own UI state (textbox content, scroll position, editor extensions) but
+ * does not load data or invoke operations — the caller passes messages and an
+ * `onSend` callback. Used by both `ThreadContainer` (AutoMerge `Thread`) and
+ * `ChannelContainer`'s feed-backed channel chat.
+ */
+export const Chat = composable<HTMLDivElement, ChatProps>(
+  (
+    { id, identity, members, messages, activity, onSend, autoFocusTextbox, current, orientation = 'top', ...props },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+    const sentinelRef = useRef<HTMLDivElement | null>(null);
+    const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+
+    // Force the editor to remount after a successful send so its content resets.
+    const [_count, _setCount] = useState(0);
+
+    const textboxMetadata = getMessageMetadata(id, identity);
+    const messageRef = useRef('');
+    const extensions = useMemo(
+      () => [
+        createBasicExtensions({ placeholder: t('message.placeholder') }),
+        createThemeExtensions({ themeMode }),
+        listener({ onChange: ({ text }) => (messageRef.current = text) }),
+        command,
+      ],
+      [themeMode, _count],
+    );
+
+    const scrollToEnd = (behavior: ScrollBehavior) =>
+      setTimeout(() => sentinelRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+    useLayoutEffect(() => {
+      scrollToEnd('instant');
+    }, []);
+    // NOTE: Auto-scroll on new messages is intentionally not implemented here. Smooth-scroll
+    // animations were causing ResizeObserver feedback loops with CodeMirror/ScrollArea. The
+    // proper fix is "scroll only if user is already at the bottom" — deferred to a follow-up.
+
+    const handleSend = () => {
+      const text = messageRef.current;
+      if (!text?.length) {
+        return false;
+      }
+
+      const accepted = onSend(text);
+      if (!accepted) {
+        return false;
+      }
+
+      messageRef.current = '';
+      setAutoFocus(true);
+      scrollToEnd('smooth');
+      _setCount((count) => count + 1);
+      return true;
+    };
+
+    const filteredMessages = messages.filter(isNonNullable);
+    const renderState: ChatRenderState = {
+      messages: filteredMessages,
+      members,
+      activity,
+      extensions,
+      autoFocus,
+      handleSend,
+      textboxMetadata,
+      scrollRef,
+      sentinelRef,
+    };
+
+    return orientation === 'bottom' ? (
+      <ChannelLayout
+        {...composableProps(props, { classNames: 'flex flex-col bs-full min-h-0' })}
+        id={id}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    ) : (
+      <ThreadLayout
+        {...composableProps(props, { classNames: 'dx-container grid-rows-[1fr_min-content_min-content]' })}
+        id={id}
+        current={current}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    );
+  },
+);
+
+//
+// Internal layout helpers — share state via the ChatRenderState bag.
+//
+
+type ChatRenderState = {
+  messages: Message.Message[];
+  members: SpaceMember[];
+  activity?: boolean;
+  extensions: Extension[];
+  autoFocus?: boolean;
+  handleSend: () => boolean;
+  textboxMetadata: MessageMetadata;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  sentinelRef: RefObject<HTMLDivElement | null>;
+};
+
+type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+  id: string;
+  state: ChatRenderState;
+};
+
+/** Thread layout — composer follows messages at intrinsic height. */
+const ThreadLayout = React.forwardRef<HTMLDivElement, LayoutProps & Pick<ThreadRootProps, 'current'>>(
+  ({ id, current, state, ...props }, ref) => {
+    const { t } = useTranslation(meta.id);
+    const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, sentinelRef } = state;
+    return (
+      <ThreadComponent.Root {...props} id={id} current={current} ref={ref}>
+        <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+          <ScrollArea.Viewport ref={sentinelRef}>
+            <div role='none' className={mx(threadLayout, 'place-self-end')}>
+              {messages.map((message) => (
+                <MessagePanel key={message.id} message={message} members={members} />
+              ))}
+            </div>
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+        <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+        <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+      </ThreadComponent.Root>
+    );
+  },
+);
+
+/** Channel layout — composer pinned to the bottom, messages scroll above it. */
+const ChannelLayout = React.forwardRef<HTMLDivElement, LayoutProps>(({ id, state, ...props }, ref) => {
+  const { t } = useTranslation(meta.id);
+  const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, scrollRef, sentinelRef } =
+    state;
+  return (
+    <div {...props} id={id} ref={ref}>
+      <div ref={scrollRef} className='flex-1 min-h-0 overflow-y-auto'>
+        {messages.map((message) => (
+          <div key={message.id} className='grid grid-cols-[var(--dx-rail-size)_1fr] w-full'>
+            <MessagePanel message={message} members={members} />
+          </div>
+        ))}
+        <div ref={sentinelRef} />
+      </div>
+      <div className='shrink-0 grid grid-cols-[var(--dx-rail-size)_1fr]'>
+        <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+      </div>
+      <div className='shrink-0 px-2 pb-1 text-xs text-description'>{activity ? t('activity.message') : null}</div>
+    </div>
+  );
+});

package/src/components/Chat/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Chat';

package/src/components/{Comments.stories.tsx → CommentsPanel/CommentsPanel.stories.tsx}

@@ -6,29 +6,30 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Query, Relation } from '@dxos/echo';
 import { TestSchema } from '@dxos/echo/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
-import { faker } from '@dxos/random';
-import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { AnchoredTo, Message, Thread } from '@dxos/types';
 
-import { translations } from '../translations';
+import { translations } from '#translations';
 
-import { CommentsContainer } from './CommentsContainer';
-import { createCommentThread, createProposalThread } from './testing';
+import { createCommentThread, createProposalThread } from '../../testing/data';
+import { CommentsPanel } from './CommentsPanel';
 
-faker.seed(1);
+random.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const db = useDatabase();
+  const [space] = useSpaces();
+  const db = space?.db;
   const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {
@@ -54,28 +55,29 @@ const DefaultStory = () => {
   }, [identity, db]);
 
   if (!identity || !db || !anchors) {
-    return null;
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
   }
 
-  return <CommentsContainer anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Comments',
-  render: render(DefaultStory),
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ layout: 'column', scroll: true }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
         OperationPlugin(),
+        RuntimePlugin(),
         ClientPlugin({
           types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
       ],

package/src/components/{CommentsContainer.tsx → CommentsPanel/CommentsPanel.tsx}

@@ -5,14 +5,14 @@
 import React, { useEffect } from 'react';
 
 import { Obj, Relation } from '@dxos/echo';
-import { Callout, Icon, Trans, useTranslation } from '@dxos/react-ui';
+import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo, type Thread } from '@dxos/types';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
-import { CommentsThreadContainer, type CommentsThreadContainerProps } from './CommentsThreadContainer';
+import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
 
-export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor' | 'current'> & {
+export type CommentsPanelProps = Omit<CommentsThreadProps, 'anchor' | 'current'> & {
   anchors: AnchoredTo.AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
@@ -21,7 +21,7 @@ export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor'
 /**
  * Root container for collection of comment threads.
  */
-export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsContainerProps) => {
+export const CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsPanelProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
@@ -29,7 +29,8 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
     ? anchors.filter((anchor) => !!Relation.getSource(anchor))
     : anchors.filter((anchor) => {
         const thread = Relation.getSource(anchor);
-        return thread && thread.status !== 'resolved';
+        // TODO(dmaretskyi): Do Obj.instanceOf check instead.
+        return thread && (thread as any).status !== 'resolved';
       });
 
   useEffect(() => {
@@ -40,20 +41,20 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
 
   if (filteredAnchors.length === 0) {
     return (
-      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
-        <Callout.Root>
-          <Callout.Title>
+      <div role='none' className='p-form-padding'>
+        <Message.Root>
+          <Message.Title>
             <Trans
               {...{
                 t,
-                i18nKey: 'no comments message',
+                i18nKey: 'no-comments.message',
                 components: {
-                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='inline-block' />,
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='w-block' />,
                 },
               }}
             />
-          </Callout.Title>
-        </Callout.Root>
+          </Message.Title>
+        </Message.Root>
       </div>
     );
   }
@@ -63,7 +64,7 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
       {filteredAnchors.map((anchor) => {
         const thread = Relation.getSource(anchor) as Thread.Thread;
         const threadId = Obj.getDXN(thread).toString();
-        return <CommentsThreadContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+        return <CommentsThread key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
       })}
     </div>
   );