@dxos/plugin-thread 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,258 @@
+//
+// 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;
+    /**
+     * When true, hide the composer textbox and activity indicator. Used for
+     * channels whose source-of-truth lives elsewhere (e.g. externally-synced
+     * Slack/Discord channels keyed by a foreign id) — sending isn't meaningful
+     * because there is no local-write path back to the source.
+     */
+    readOnly?: boolean;
+  } & 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',
+      readOnly,
+      ...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,
+      readOnly,
+    };
+
+    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>;
+  readOnly?: boolean;
+};
+
+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, readOnly } =
+      state;
+    return (
+      <ThreadComponent.Root {...props} id={id} current={current} ref={ref}>
+        <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+          <ScrollArea.Viewport ref={sentinelRef}>
+            <div className={mx(threadLayout, 'place-self-end')}>
+              {messages.map((message) => (
+                <MessagePanel key={message.id} message={message} members={members} />
+              ))}
+            </div>
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+        {!readOnly && (
+          <>
+            <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,
+    readOnly,
+  } = 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>
+      {!readOnly && (
+        <>
+          <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/CommentsPanel/CommentsPanel.stories.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+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/plugin';
+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, Loading } from '@dxos/react-ui/testing';
+import { AnchoredTo, Message, Thread } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { createCommentThread, createProposalThread } from '../../testing/data';
+import { CommentsPanel } from './CommentsPanel';
+
+random.seed(1);
+
+const DefaultStory = () => {
+  const identity = useIdentity();
+  const [space] = useSpaces();
+  const db = space?.db;
+  const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
+
+  useAsyncEffect(async () => {
+    if (identity && db) {
+      const object = db.add(Obj.make(TestSchema.Expando, {}));
+      const thread1 = db.add(createCommentThread(identity));
+      const thread2 = db.add(createProposalThread(identity));
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
+          [Relation.Source]: thread1,
+          [Relation.Target]: object,
+          anchor: 'test',
+        }),
+      );
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
+          [Relation.Source]: thread2,
+          [Relation.Target]: object,
+          anchor: 'test',
+        }),
+      );
+    }
+  }, [identity, db]);
+
+  if (!identity || !db || !anchors) {
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
+  }
+
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
+  decorators: [
+    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* initializeIdentity(client);
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/CommentsPanel/CommentsPanel.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect } from 'react';
+
+import { Obj, Relation } from '@dxos/echo';
+import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
+import { type AnchoredTo, type Thread } from '@dxos/types';
+
+import { meta } from '#meta';
+
+import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
+
+export type CommentsPanelProps = Omit<CommentsThreadProps, 'anchor' | 'current'> & {
+  anchors: AnchoredTo.AnchoredTo[];
+  currentId?: string;
+  showResolvedThreads?: boolean;
+};
+
+/**
+ * Root container for collection of comment threads.
+ */
+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.
+  const filteredAnchors = showResolvedThreads
+    ? anchors.filter((anchor) => !!Relation.getSource(anchor))
+    : anchors.filter((anchor) => {
+        const thread = Relation.getSource(anchor);
+        // TODO(dmaretskyi): Do Obj.instanceOf check instead.
+        return thread && (thread as any).status !== 'resolved';
+      });
+
+  useEffect(() => {
+    if (currentId) {
+      document.getElementById(currentId)?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }, [currentId]);
+
+  if (filteredAnchors.length === 0) {
+    return (
+      <div className='p-form-padding'>
+        <Message.Root>
+          <Message.Content>
+            <Trans
+              {...{
+                t,
+                i18nKey: 'no-comments.message',
+                components: {
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='dx-icon-inline' />,
+                },
+              }}
+            />
+          </Message.Content>
+        </Message.Root>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {filteredAnchors.map((anchor) => {
+        const thread = Relation.getSource(anchor) as Thread.Thread;
+        const threadId = Obj.getDXN(thread).toString();
+        return <CommentsThread key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+      })}
+    </div>
+  );
+};

package/src/components/CommentsPanel/CommentsThread.tsx

@@ -0,0 +1,171 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Obj, Relation } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
+import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { IconButton, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread as ThreadComponent,
+  type ThreadRootProps,
+} from '@dxos/react-ui-thread';
+import { type AnchoredTo, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
+
+import { useStatus } from '#hooks';
+import { meta } from '#meta';
+
+import { command } from '../../extensions/command';
+import { getMessageMetadata } from '../../util';
+import { MessagePanel, buttonClassNames, buttonGroupClassNames } from '../MessagePanel';
+
+export type CommentsThreadProps = {
+  anchor: AnchoredTo.AnchoredTo;
+  onAttend?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onComment?: (anchor: AnchoredTo.AnchoredTo, message: string) => void;
+  onResolve?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onMessageDelete?: (anchor: AnchoredTo.AnchoredTo, messageId: string) => void;
+  onThreadDelete?: (anchor: AnchoredTo.AnchoredTo) => void;
+  onAcceptProposal?: (anchor: AnchoredTo.AnchoredTo, messageId: string) => void;
+} & Pick<ThreadRootProps, 'current'>;
+
+export const CommentsThread = ({
+  anchor,
+  current,
+  onAttend,
+  onComment,
+  onResolve,
+  onMessageDelete,
+  onThreadDelete,
+  onAcceptProposal,
+}: CommentsThreadProps) => {
+  const { themeMode } = useThemeContext();
+  const { t } = useTranslation(meta.id);
+  const identity = useIdentity()!;
+  const space = getSpace(anchor);
+  const members = useMembers(space?.id);
+  const detached = !anchor.anchor;
+  const thread = Relation.getSource(anchor) as Thread.Thread;
+  const [messages] = useObject(thread, 'messages');
+  const activity = useStatus(space, Obj.getDXN(thread).toString());
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+
+  const textboxMetadata = getMessageMetadata(Obj.getDXN(thread).toString(), identity);
+
+  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
+  const [state, setState] = useState({});
+  const messageRef = useRef('');
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions({ placeholder: t('message.placeholder') }),
+      createThemeExtensions({ themeMode }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
+      command,
+    ],
+    [state],
+  );
+
+  // TODO(thure): Factor out.
+  const scrollToEnd = (behavior: ScrollBehavior) =>
+    setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+  const handleAttend = useCallback(() => onAttend?.(anchor), [onAttend, anchor]);
+  const handleResolve = useCallback(() => onResolve?.(anchor), [onResolve, anchor]);
+  const handleMessageDelete = useCallback((id: string) => onMessageDelete?.(anchor, id), [onMessageDelete, anchor]);
+  const handleThreadDelete = useCallback(() => onThreadDelete?.(anchor), [onThreadDelete, anchor]);
+  const handleAcceptProposal = useCallback((id: string) => onAcceptProposal?.(anchor, id), [onAcceptProposal, anchor]);
+
+  const handleComment = useCallback<NonNullable<MessageTextboxProps['onSend']>>(() => {
+    if (!messageRef.current) {
+      return false;
+    }
+
+    onComment?.(anchor, messageRef.current);
+    messageRef.current = '';
+    scrollToEnd('instant');
+    setState({});
+
+    return true;
+  }, [anchor, identity]);
+
+  return (
+    <ThreadComponent.Root
+      id={Obj.getDXN(thread).toString()}
+      classNames='pt-2 border-b border-subdued-separator last:border-none'
+      current={current}
+      onClickCapture={handleAttend}
+      onFocusCapture={handleAttend}
+    >
+      <div
+        className={mx(
+          'col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]',
+          hoverableControls,
+          hoverableFocusedWithinControls,
+        )}
+      >
+        {detached ? (
+          <Tooltip.Trigger asChild content={t('detached-thread.label')} side='top'>
+            <ThreadComponent.Header detached>{thread.name}</ThreadComponent.Header>
+          </Tooltip.Trigger>
+        ) : (
+          <ThreadComponent.Header>{thread.name}</ThreadComponent.Header>
+        )}
+        <div className={buttonGroupClassNames}>
+          {thread.status === 'staged' && <Tag palette='neutral'>{t('draft.button')}</Tag>}
+          {onResolve && !(thread?.status === 'staged') && (
+            <IconButton
+              data-testid='thread.resolve'
+              variant='ghost'
+              icon={thread?.status === 'resolved' ? 'ph--check--fill' : 'ph--check--regular'}
+              iconOnly
+              label={t('resolve-thread.label')}
+              classNames={[buttonClassNames, thread?.status !== 'resolved' && hoverableControlItem]}
+              onClick={handleResolve}
+            />
+          )}
+          {onThreadDelete && (
+            <IconButton
+              data-testid='thread.delete'
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              label={t('delete-thread.label')}
+              classNames={[buttonClassNames, hoverableControlItem]}
+              onClick={handleThreadDelete}
+            />
+          )}
+        </div>
+      </div>
+
+      {messages?.map((ref) => (
+        <MessagePanel
+          key={ref.dxn.toString()}
+          editable
+          message={ref}
+          members={members}
+          onDelete={handleMessageDelete}
+          onAcceptProposal={handleAcceptProposal}
+        />
+      ))}
+
+      {/*
+        TODO(wittjosiah): Can't autofocus this generally.
+          There can be multiple threads with inputs and they can't all be focused.
+          Also, it steals focus from documents when first rendered.
+          Need to find a way to autofocus in one scenario only: when a new thread is created.
+      */}
+      <MessageTextbox extensions={extensions} onSend={handleComment} {...textboxMetadata} />
+
+      <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+
+      <div className='h-px -mt-px' ref={threadScrollRef} />
+    </ThreadComponent.Root>
+  );
+};

package/src/components/CommentsPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CommentsPanel';
+export * from './CommentsThread';