@dxos/plugin-thread 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/src/components/CommentContainer.tsx

@@ -5,8 +5,7 @@
 import { CheckCircle, X } from '@phosphor-icons/react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { create } from '@dxos/live-object';
-import { MessageType } from '@dxos/plugin-space/types';
+import { RefArray } from '@dxos/live-object';
 import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Button, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
@@ -56,7 +55,7 @@ const ToggleResolvedButton = ({
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content classNames={'z-[21]'}>
+        <Tooltip.Content>
           {label}
           <Tooltip.Arrow />
         </Tooltip.Content>
@@ -82,7 +81,7 @@ const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content classNames='z-[21]'>
+        <Tooltip.Content classNames='z-30'>
           {label}
           <Tooltip.Arrow />
         </Tooltip.Content>
@@ -94,13 +93,12 @@ const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
 export const CommentContainer = ({
   thread,
   detached,
-  context,
   current,
   onAttend,
-  onThreadDelete,
-  onMessageDelete,
-  onResolve,
   onComment,
+  onResolve,
+  onMessageDelete,
+  onThreadDelete,
 }: ThreadContainerProps) => {
   const identity = useIdentity()!;
   const space = getSpace(thread);
@@ -129,31 +127,26 @@ export const CommentContainer = ({
   const scrollToEnd = (behavior: ScrollBehavior) =>
     setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
 
-  const handleCreate: MessageTextboxProps['onSend'] = useCallback(() => {
+  const handleAttend = useCallback(() => onAttend?.(thread), [onAttend, thread]);
+  const handleResolve = useCallback(() => onResolve?.(thread), [onResolve, thread]);
+  const handleMessageDelete = useCallback((id: string) => onMessageDelete?.(thread, id), [onMessageDelete, thread]);
+  const handleThreadDelete = useCallback(() => onThreadDelete?.(thread), [onThreadDelete, thread]);
+
+  const handleComment: MessageTextboxProps['onSend'] = useCallback(() => {
     if (!messageRef.current) {
       return false;
     }
 
-    thread.messages.push(
-      create(MessageType, {
-        sender: { identityKey: identity.identityKey.toHex() },
-        timestamp: new Date().toISOString(),
-        text: messageRef.current,
-        context,
-      }),
-    );
-    onComment?.(thread);
-
+    onComment?.(thread, messageRef.current);
     messageRef.current = '';
     scrollToEnd('instant');
     rerenderEditor();
 
-    // TODO(burdon): Scroll to bottom.
     return true;
   }, [thread, identity]);
 
   return (
-    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={fullyQualifiedId(thread)}>
+    <Thread onClickCapture={handleAttend} onFocusCapture={handleAttend} current={current} id={fullyQualifiedId(thread)}>
       <div
         role='none'
         className={mx(
@@ -168,7 +161,7 @@ export const CommentContainer = ({
               <ThreadHeading detached>{thread.name}</ThreadHeading>
             </Tooltip.Trigger>
             <Tooltip.Portal>
-              <Tooltip.Content classNames='z-[21]' side='top'>
+              <Tooltip.Content classNames='z-30' side='top'>
                 {t('detached thread label')}
                 <Tooltip.Arrow />
               </Tooltip.Content>
@@ -180,18 +173,14 @@ export const CommentContainer = ({
         <div className='flex flex-row items-center pli-1'>
           {thread.status === 'staged' && <Tag palette='neutral'>{t('draft button')}</Tag>}
           {onResolve && !(thread?.status === 'staged') && (
-            <ToggleResolvedButton isResolved={thread?.status === 'resolved'} onResolve={onResolve} />
+            <ToggleResolvedButton isResolved={thread?.status === 'resolved'} onResolve={handleResolve} />
           )}
-          {onThreadDelete && <DeleteThreadButton onDelete={onThreadDelete} />}
+          {onThreadDelete && <DeleteThreadButton onDelete={handleThreadDelete} />}
         </div>
       </div>
-      {thread.messages.filter(nonNullable).map((message) => (
-        <MessageContainer
-          key={message.id}
-          message={message}
-          members={members}
-          onDelete={(id: string) => onMessageDelete?.(id)}
-        />
+      {/** TODO(dmaretskyi): How's `thread.messages` undefined? */}
+      {RefArray.allResolvedTargets(thread.messages?.filter(nonNullable) ?? []).map((message) => (
+        <MessageContainer key={message.id} message={message} members={members} onDelete={handleMessageDelete} />
       ))}
       {/*
         TODO(wittjosiah): Can't autofocus this generally.
@@ -199,7 +188,7 @@ export const CommentContainer = ({
           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={handleCreate} {...textboxMetadata} />
+      <MessageTextbox extensions={extensions} onSend={handleComment} {...textboxMetadata} />
       <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
       {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
       <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />

package/src/components/CommentsContainer.tsx

@@ -14,10 +14,7 @@ import { CommentContainer } from './CommentContainer';
 import { type ThreadContainerProps } from './types';
 import { THREAD_PLUGIN } from '../meta';
 
-export type ThreadsContainerProps = Omit<
-  ThreadContainerProps,
-  'thread' | 'detached' | 'onAttend' | 'onThreadDelete' | 'onMessageDelete' | 'current' | 'autoFocus'
-> & {
+export type ThreadsContainerProps = Omit<ThreadContainerProps, 'thread' | 'detached' | 'current' | 'autoFocus'> & {
   threads: ThreadType[];
   /**
    * Threads that are no longer anchored to a position in the object.
@@ -25,11 +22,6 @@ export type ThreadsContainerProps = Omit<
   detached?: string[];
   currentId?: string;
   showResolvedThreads?: boolean;
-  onThreadAttend?: (thread: ThreadType) => void;
-  onThreadDelete?: (thread: ThreadType) => void;
-  onMessageDelete?: (thread: ThreadType, messageId: string) => void;
-  onThreadToggleResolved?: (thread: ThreadType) => void;
-  onComment?: (thread: ThreadType) => void;
 };
 
 /**
@@ -40,10 +32,6 @@ export const CommentsContainer = ({
   detached = [],
   currentId,
   showResolvedThreads,
-  onThreadAttend,
-  onThreadDelete,
-  onMessageDelete,
-  onThreadToggleResolved,
   ...props
 }: ThreadsContainerProps) => {
   const { t } = useTranslation(THREAD_PLUGIN);
@@ -66,10 +54,6 @@ export const CommentsContainer = ({
               thread={thread}
               current={currentId === threadId}
               detached={detached.includes(threadId)}
-              {...(onThreadAttend && { onAttend: () => onThreadAttend(thread) })}
-              {...(onThreadDelete && { onThreadDelete: () => onThreadDelete(thread) })}
-              {...(onMessageDelete && { onMessageDelete: (messageId: string) => onMessageDelete(thread, messageId) })}
-              {...(onThreadToggleResolved && { onResolve: () => onThreadToggleResolved(thread) })}
               {...props}
             />
           );

package/src/components/MessageContainer.tsx

@@ -7,6 +7,7 @@ import { Check, PencilSimple, X } from '@phosphor-icons/react';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
+import { RefArray } from '@dxos/live-object';
 import { type MessageType } from '@dxos/plugin-space/types';
 import { PublicKey } from '@dxos/react-client';
 import { type ReactiveEchoObject, type Expando, type SpaceMember } from '@dxos/react-client/echo';
@@ -22,7 +23,6 @@ import {
   mx,
 } from '@dxos/react-ui-theme';
 import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
-import { nonNullable } from '@dxos/util';
 
 import { command } from './command-extension';
 import { useOnEditAnalytics } from '../hooks';
@@ -70,7 +70,7 @@ export const MessageContainer = ({
                 </Button>
               </Tooltip.Trigger>
               <Tooltip.Portal>
-                <Tooltip.Content classNames='z-[21]'>
+                <Tooltip.Content>
                   {editLabel}
                   <Tooltip.Arrow />
                 </Tooltip.Content>
@@ -91,7 +91,7 @@ export const MessageContainer = ({
                 </Button>
               </Tooltip.Trigger>
               <Tooltip.Portal>
-                <Tooltip.Content classNames='z-[21]'>
+                <Tooltip.Content>
                   {deleteLabel}
                   <Tooltip.Arrow />
                 </Tooltip.Content>
@@ -101,7 +101,9 @@ export const MessageContainer = ({
         </ButtonGroup>
       </MessageHeading>
       <TextboxBlock message={message} isAuthor={userIsAuthor} editing={editing} />
-      {message.parts?.filter(nonNullable).map((part, index) => <MessagePart key={index} part={part} />)}
+      {RefArray.allResolvedTargets(message.parts ?? []).map((part, index) => (
+        <MessagePart key={index} part={part} />
+      ))}
     </MessageRoot>
   );
 };
@@ -180,7 +182,7 @@ const MessageBlockObjectTile: MosaicTileComponent<ReactiveEchoObject<any>> = for
         <Surface
           role='card'
           limit={1}
-          data={{ content: item }}
+          data={{ subject: item }}
           draggableProps={draggableProps}
           fallback={title}
           {...props}

package/src/components/ThreadComplementary.tsx

@@ -2,47 +2,40 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, type Plugin, useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
-import { type ThreadType } from '@dxos/plugin-space';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { createIntent, LayoutAction, useCapability, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
+import { ThreadCapabilities } from '@dxos/plugin-space';
+import { MessageType, type ThreadType } from '@dxos/plugin-space/types';
+import { create, fullyQualifiedId, makeRef, RefArray } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
 import { useAttended } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
+import { ThreadCapabilities as LocalThreadCapabilities } from '../capabilities';
 import { CommentsContainer } from '../components';
-import { THREAD_PLUGIN } from '../meta';
-import { ThreadAction, type ThreadProvides } from '../types';
-
-const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undefined =>
-  'thread' in plugin.provides ? (plugin as Plugin<ThreadProvides<any>>) : undefined;
-
-export const ThreadComplementary = ({
-  role,
-  subject,
-  drafts,
-  current,
-  showResolvedThreads,
-}: {
-  role: string;
-  subject: any;
-  drafts: ThreadType[] | undefined;
-  current?: string;
-  showResolvedThreads?: boolean;
-}) => {
-  const dispatch = useIntentDispatcher();
-
-  const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
-  const threadProvides = useMemo(() => threadsIntegrators.map((p) => p.provides.thread), [threadsIntegrators]);
+import { ThreadAction } from '../types';
+
+export const ThreadComplementary = ({ subject }: { subject: any }) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const identity = useIdentity();
+
+  const { state, getViewState } = useCapability(LocalThreadCapabilities.MutableState);
+  const { showResolvedThreads } = getViewState(fullyQualifiedId(subject));
+  const drafts = state.drafts[fullyQualifiedId(subject)];
+
+  const threadsIntegrators = useCapabilities(ThreadCapabilities.Thread);
   const createSort = useMemo(
-    () => threadProvides.find((p) => p.predicate(subject))?.createSort,
-    [threadProvides, subject],
+    () => threadsIntegrators.find((p) => p.predicate(subject))?.createSort,
+    [threadsIntegrators, subject],
   );
   const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
 
+  const threadObjects = RefArray.allResolvedTargets(subject.threads ?? []);
+
   const threads = useMemo(() => {
-    return subject.threads.concat(drafts ?? []).filter(nonNullable) as ThreadType[];
-  }, [JSON.stringify(subject.threads), JSON.stringify(drafts)]);
+    return threadObjects.concat(drafts ?? []).filter(nonNullable) as ThreadType[];
+  }, [JSON.stringify(threadObjects), JSON.stringify(drafts)]);
 
   const detachedIds = useMemo(() => {
     return threads.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId(thread));
@@ -58,48 +51,78 @@ export const ThreadComplementary = ({
   const attended = useAttended();
   const qualifiedSubjectId = fullyQualifiedId(subject);
 
+  const handleAttend = useCallback(
+    (thread: ThreadType) => {
+      const threadId = fullyQualifiedId(thread);
+      if (state.current !== threadId) {
+        state.current = threadId;
+
+        // TODO(wittjosiah): Should this be a thread-specific intent?
+        //  The layout doesn't know about threads and this working depends on other plugins conditionally handling it.
+        //  This may be overloading this intent or highjacking its intended purpose.
+        void dispatch(
+          createIntent(LayoutAction.ScrollIntoView, {
+            part: 'current',
+            subject: fullyQualifiedId(subject),
+            options: {
+              cursor: thread.anchor,
+              ref: threadId,
+            },
+          }),
+        );
+      }
+    },
+    [state.current, dispatch, subject],
+  );
+
+  const handleComment = useCallback(
+    async (thread: ThreadType, message: string) => {
+      thread.messages.push(
+        makeRef(
+          create(MessageType, {
+            sender: { identityKey: identity?.identityKey.toHex() },
+            timestamp: new Date().toISOString(),
+            text: message,
+            // TODO(wittjosiah): Context based on attention.
+            // context: context ? makeRef(context) : undefined,
+          }),
+        ),
+      );
+
+      await dispatch(createIntent(ThreadAction.OnMessageAdd, { thread, subject }));
+
+      state.current = fullyQualifiedId(thread);
+    },
+    [dispatch, identity, subject],
+  );
+
+  const handleResolve = useCallback(
+    (thread: ThreadType) => dispatch(createIntent(ThreadAction.ToggleResolved, { thread })),
+    [dispatch],
+  );
+
+  const handleThreadDelete = useCallback(
+    (thread: ThreadType) => dispatch(createIntent(ThreadAction.Delete, { thread, subject })),
+    [dispatch, subject],
+  );
+
+  const handleMessageDelete = useCallback(
+    (thread: ThreadType, messageId: string) =>
+      dispatch(createIntent(ThreadAction.DeleteMessage, { thread, subject, messageId })),
+    [dispatch, subject],
+  );
+
   return (
     <CommentsContainer
       threads={threads}
       detached={detachedIds}
-      currentId={attended.includes(qualifiedSubjectId) ? current : undefined}
+      currentId={attended.includes(qualifiedSubjectId) ? state.current : undefined}
       showResolvedThreads={showResolvedThreads}
-      onThreadAttend={(thread) => {
-        const threadId = fullyQualifiedId(thread);
-        if (current !== threadId) {
-          current = threadId;
-
-          // TODO(wittjosiah): Should this be a thread-specific intent?
-          //  The layout doesn't know about threads and this working depends on other plugins conditionally handling it.
-          //  This may be overloading this intent or highjacking its intended purpose.
-          void dispatch?.([
-            {
-              action: LayoutAction.SCROLL_INTO_VIEW,
-              data: {
-                id: fullyQualifiedId(subject),
-                thread: threadId,
-                cursor: thread.anchor,
-              },
-            },
-          ]);
-        }
-      }}
-      onThreadDelete={(thread) => {
-        return dispatch({ plugin: THREAD_PLUGIN, action: ThreadAction.DELETE, data: { subject, thread } });
-      }}
-      onMessageDelete={(thread, messageId) =>
-        dispatch({
-          plugin: THREAD_PLUGIN,
-          action: ThreadAction.DELETE_MESSAGE,
-          data: { subject, thread, messageId },
-        })
-      }
-      onThreadToggleResolved={(thread) =>
-        dispatch({ plugin: THREAD_PLUGIN, action: ThreadAction.TOGGLE_RESOLVED, data: { thread } })
-      }
-      onComment={(thread) => {
-        void dispatch({ action: ThreadAction.ON_MESSAGE_ADD, data: { thread, subject } });
-      }}
+      onAttend={handleAttend}
+      onComment={handleComment}
+      onResolve={handleResolve}
+      onMessageDelete={handleMessageDelete}
+      onThreadDelete={handleThreadDelete}
     />
   );
 };

package/src/components/ThreadContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ComponentProps } from 'react';
+
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { ChatContainer } from './ChatContainer';
+
+const ThreadContainer = ({
+  role,
+  ...props
+}: Pick<ComponentProps<typeof ChatContainer>, 'thread' | 'context'> & { role: string }) => {
+  return (
+    <StackItem.Content toolbar={false}>
+      <ChatContainer {...props} />
+    </StackItem.Content>
+  );
+};
+
+export default ThreadContainer;

package/src/components/ThreadSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
+import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { THREAD_PLUGIN } from '../meta';
 import type { ThreadSettingsProps } from '../types';
@@ -14,10 +14,10 @@ export const ThreadSettings = ({ settings }: { settings: ThreadSettingsProps })
   const { t } = useTranslation(THREAD_PLUGIN);
 
   return (
-    <>
+    <DeprecatedFormContainer>
       <DeprecatedFormInput label={t('settings standalone label')}>
         <Input.Switch checked={settings.standalone} onCheckedChange={(checked) => (settings.standalone = !!checked)} />
       </DeprecatedFormInput>
-    </>
+    </DeprecatedFormContainer>
   );
 };

package/src/components/command-extension.ts

@@ -6,7 +6,7 @@ import { StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/
 import { type Extension } from '@codemirror/state';
 
 import { tags } from '@dxos/react-ui-editor';
-import { mx, tagRoot } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/react-ui-theme';
 
 /**
  * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
@@ -27,10 +27,7 @@ const parser = StreamLanguage.define<{ count: number }>({
 });
 
 const styles = HighlightStyle.define([
-  {
-    tag: tags.tagName,
-    class: mx(tagRoot({ palette: 'cyan' }), 'text-baseText font-medium'),
-  },
+  { tag: tags.tagName, class: mx('dx-tag dx-tag--indigo text-baseText font-medium') },
 ]);
 
 export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/components/index.ts

@@ -4,8 +4,7 @@
 
 import { lazy } from 'react';
 
-export const ThreadMain = lazy(() => import('./ThreadMain'));
-export const ThreadArticle = lazy(() => import('./ThreadArticle'));
+export const ThreadContainer = lazy(() => import('./ThreadContainer'));
 
 // TODO(wittjosiah): Suspense boundary for sidebar?
 export * from './CommentContainer';

package/src/components/testing.ts

@@ -4,7 +4,7 @@
 
 import { Expando } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
-import { create } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import { MessageType, ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Identity } from '@dxos/react-client/halo';
@@ -12,20 +12,22 @@ import { type Identity } from '@dxos/react-client/halo';
 export const createChatThread = (identity: Identity) => {
   return create(ThreadType, {
     messages: Array.from({ length: 8 }).map(() =>
-      create(MessageType, {
-        sender: {
-          identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
-        },
-        timestamp: faker.date.recent().toISOString(),
-        text: faker.lorem.sentences(3),
-        parts: faker.helpers.multiple(
-          () =>
-            faker.datatype.boolean({ probability: 0.8 })
-              ? undefined
-              : create(Expando, { name: faker.lorem.sentence() }),
-          { count: { min: 1, max: 3 } },
-        ),
-      }),
+      makeRef(
+        create(MessageType, {
+          sender: {
+            identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
+          },
+          timestamp: faker.date.recent().toISOString(),
+          text: faker.lorem.sentences(3),
+          parts: faker.helpers.multiple(
+            () =>
+              faker.datatype.boolean({ probability: 0.8 })
+                ? undefined
+                : (makeRef(create(Expando, { name: faker.lorem.sentence() })) as any), // TODO(dmaretskyi): Fix types in schema.
+            { count: { min: 1, max: 3 } },
+          ),
+        }),
+      ),
     ),
   });
 };
@@ -34,13 +36,15 @@ export const createCommentThread = (identity: Identity) => {
   return create(ThreadType, {
     messages: faker.helpers.multiple(
       () =>
-        create(MessageType, {
-          sender: {
-            identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
-          },
-          timestamp: new Date().toISOString(),
-          text: faker.lorem.sentences(3),
-        }),
+        makeRef(
+          create(MessageType, {
+            sender: {
+              identityKey: faker.datatype.boolean() ? identity.identityKey.toHex() : PublicKey.random().toHex(),
+            },
+            timestamp: new Date().toISOString(),
+            text: faker.lorem.sentences(3),
+          }),
+        ),
       { count: { min: 2, max: 3 } },
     ),
   });

package/src/components/types.ts

@@ -24,9 +24,9 @@ export type ThreadContainerProps = {
   autoFocusTextbox?: boolean;
   onTextboxFocus?: () => void;
   detached?: boolean;
-  onAttend?: () => void;
-  onResolve?: () => void;
-  onThreadDelete?: () => void;
-  onMessageDelete?: (messageId: string) => void;
-  onComment?: (thread: ThreadType) => void;
+  onAttend?: (thread: ThreadType) => void;
+  onComment?: (thread: ThreadType, message: string) => void;
+  onResolve?: (thread: ThreadType) => void;
+  onMessageDelete?: (thread: ThreadType, messageId: string) => void;
+  onThreadDelete?: (thread: ThreadType) => void;
 } & Pick<ThreadProps, 'current'>;