@dxos/plugin-thread 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/src/ThreadPlugin.tsx

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Chat, type IconProps } from '@phosphor-icons/react';
 import { computed, effect } from '@preact/signals-core';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import {
   type IntentPluginProvides,
@@ -16,51 +15,35 @@ import {
   parseIntentPlugin,
   parseNavigationPlugin,
   resolvePlugin,
-  parseGraphPlugin,
-  SLUG_PATH_SEPARATOR,
-  SLUG_COLLECTION_INDICATOR,
   isLayoutParts,
   parseMetadataResolverPlugin,
-  type IntentDispatcher,
-  useResolvePlugins,
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
 import { type EchoReactiveObject, getTypename } from '@dxos/echo-schema';
 import { create } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
-import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
+import { log } from '@dxos/log';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
-import { DocumentType } from '@dxos/plugin-markdown/types';
+import { type ActionGroup, createExtension, isActionGroup, toSignal } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { SpaceAction } from '@dxos/plugin-space';
 import { ThreadType, MessageType, ChannelType } from '@dxos/plugin-space/types';
 import {
   getSpace,
   getTextInRange,
-  Filter,
   createDocAccessor,
   fullyQualifiedId,
   loadObjectReferences,
 } from '@dxos/react-client/echo';
-import { ScrollArea } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
 import { comments, createExternalCommentSync, listener } from '@dxos/react-ui-editor';
 import { translations as threadTranslations } from '@dxos/react-ui-thread';
 import { nonNullable } from '@dxos/util';
 
-import {
-  ThreadMain,
-  ThreadSettings,
-  CommentsContainer,
-  CommentsHeading,
-  ChatContainer,
-  ChatHeading,
-  ThreadArticle,
-} from './components';
+import { ThreadMain, ThreadSettings, ChatContainer, ChatHeading, ThreadArticle } from './components';
+import { ThreadComplementary } from './components/ThreadComplementary';
 import meta, { THREAD_ITEM, THREAD_PLUGIN } from './meta';
 import translations from './translations';
-import { ThreadAction, type ThreadProvides, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
+import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
 
 type ThreadState = {
   /** An in-memory staging area for threads that are being drafted. */
@@ -73,6 +56,8 @@ type SubjectId = string;
 const initialViewState = { showResolvedThreads: false };
 type ViewStore = Record<SubjectId, typeof initialViewState>;
 
+// TODO(Zan): More robust runtime check.
+
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
 export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
   const settings = new LocalStorageStore<ThreadSettingsProps>(THREAD_PLUGIN);
@@ -86,10 +71,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
     return viewStore[subjectId];
   };
 
-  let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
   let navigationPlugin: Plugin<LocationProvides> | undefined;
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
-  let dispatch: IntentDispatcher | undefined;
 
   const unsubscribeCallbacks = [] as UnsubscribeCallback[];
 
@@ -98,45 +81,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
     ready: async (plugins) => {
       settings.prop({ key: 'standalone', type: LocalStorageStore.bool({ allowUndefined: true }) });
 
-      attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       intentPlugin = resolvePlugin(plugins, parseIntentPlugin)!;
-      dispatch = intentPlugin?.provides.intent.dispatch;
-
-      const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
-      const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      if (!client) {
-        return;
-      }
-
-      // TODO(wittjosiah): This is a hack to make standalone threads work in the c11y sidebar.
-      //  This should have a better solution when deck is introduced.
-      const channelsQuery = client.spaces.query(Filter.schema(ChannelType));
-      const queryUnsubscribe = channelsQuery.subscribe();
-      const unsubscribe = effect(() => {
-        const attention = attentionPlugin?.provides.attention;
-        if (!attention?.attended) {
-          return;
-        }
-
-        const firstAttendedNodeWithComments = Array.from(attention.attended)
-          .map((id) => graphPlugin?.provides.graph.findNode(id))
-          .find((node) => node?.data instanceof DocumentType && (node.data.threads?.length ?? 0) > 0);
-
-        if (firstAttendedNodeWithComments) {
-          void intentPlugin?.provides.intent.dispatch({
-            action: NavigationAction.OPEN,
-            data: {
-              activeParts: {
-                complementary: `${firstAttendedNodeWithComments.id}${SLUG_PATH_SEPARATOR}comments`,
-              },
-            },
-          });
-        }
-      });
-
-      unsubscribeCallbacks.push(queryUnsubscribe);
-      unsubscribeCallbacks.push(unsubscribe);
     },
     unload: async () => {
       unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
@@ -147,8 +93,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         records: {
           [ChannelType.typename]: {
             placeholder: ['channel title placeholder', { ns: THREAD_PLUGIN }],
-            icon: (props: IconProps) => <Chat {...props} />,
-            iconSymbol: 'ph--chat--regular',
+            icon: 'ph--chat--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (channel: ChannelType) => loadObjectReferences(channel, (channel) => channel.threads),
           },
@@ -194,30 +139,38 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   return;
                 }
 
-                // TODO(Zan): Find util (or make one)
-                const docId = id.split('~').at(0);
-                const [spaceId, objectId] = docId?.split(':') ?? [];
+                // TODO(Zan): Find util (or make one).
+                const subjectId = id.split('~').at(0);
+                const [spaceId, objectId] = subjectId?.split(':') ?? [];
                 const space = client.spaces.get().find((space) => space.id === spaceId);
-                const doc = space?.db.getObjectById(objectId);
-
-                if (!doc || !docId) {
+                const object = toSignal(
+                  (onChange) => {
+                    const timeout = setTimeout(async () => {
+                      await space?.db.loadObjectById(objectId);
+                      onChange();
+                    });
+
+                    return () => clearTimeout(timeout);
+                  },
+                  () => space?.db.getObjectById(objectId),
+                );
+                if (!object || !subjectId) {
                   return;
                 }
 
-                const docMeta = metadataResolver(getTypename(doc) ?? '');
-                const label = docMeta.label?.(doc) ||
-                  doc.name ||
-                  docMeta.placeholder || ['unnamed object threads label', { ns: THREAD_PLUGIN }];
-                // const label = docMeta.label?.(doc) || doc.name || docMeta.placeholder;
+                const meta = metadataResolver(getTypename(object) ?? '');
+                const label = meta.label?.(object) ||
+                  object.name ||
+                  meta.placeholder || ['unnamed object threads label', { ns: THREAD_PLUGIN }];
 
-                const viewState = getViewState(docId);
+                const viewState = getViewState(subjectId);
 
                 return {
                   id,
                   type: 'orphan-comments-for-subject',
-                  data: doc,
+                  data: object,
                   properties: {
-                    icon: meta.iconComponent,
+                    icon: meta.icon,
                     label,
                     showResolvedThreads: viewState.showResolvedThreads,
                   },
@@ -225,7 +178,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               },
               actions: ({ node }) => {
                 const dataId = node.id.split('~').at(0);
-
                 if (!node.id.endsWith('~comments') || !dataId) {
                   return;
                 }
@@ -254,6 +206,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                       menuItemType: 'toggle',
                       isChecked: viewState.showResolvedThreads,
                       testId: 'threadPlugin.toggleShowResolved',
+                      icon: viewState.showResolvedThreads ? 'ph--eye-slash--regular' : 'ph--eye--regular',
                     },
                   },
                 ];
@@ -285,8 +238,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                     },
                     properties: {
                       label: ['create channel label', { ns: THREAD_PLUGIN }],
-                      icon: (props: IconProps) => <Chat {...props} />,
-                      iconSymbol: 'ph--chat--regular',
+                      icon: 'ph--chat--regular',
                       testId: 'threadPlugin.createObject',
                     },
                   },
@@ -313,24 +265,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
             case 'complementary': {
               const location = navigationPlugin?.provides.location;
 
-              const providesThreadsConfig = useCallback(
-                (plugin: any): Plugin<ThreadProvides<any>> | undefined =>
-                  // TODO(Zan): More robust runtime check.
-                  'thread' in plugin.provides ? (plugin as Plugin<ThreadProvides<any>>) : undefined,
-                [],
-              );
-
-              const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
-              const threadProvides = threadsIntegrators.map((p) => p.provides.thread);
-
               if (data.object instanceof ChannelType && data.object.threads[0]) {
                 const channel = data.object;
                 // TODO(zan): Maybe we should have utility for positional main object ids.
                 if (isLayoutParts(location?.active) && location.active.main) {
                   const layoutEntries = location.active.main;
-
                   const currentPosition = layoutEntries.findIndex((entry) => channel.id === entry.id);
-
                   if (currentPosition > 0) {
                     const objectToTheLeft = layoutEntries[currentPosition - 1];
                     const context = getSpace(data.object)?.db.getObjectById(objectToTheLeft.id);
@@ -356,85 +296,17 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 'threads' in data.subject &&
                 Array.isArray(data.subject.threads)
               ) {
-                const threads = data.subject.threads
-                  .concat(state.staging[fullyQualifiedId(data.subject)])
-                  .filter(nonNullable);
-
-                const createSort = threadProvides.find((p) => p.predicate(data.subject))?.createSort;
-                if (createSort) {
-                  const sort = createSort(data.subject);
-                  threads.sort((a, b) => sort(a.anchor, b.anchor));
-                }
-
-                const detached = data.subject.threads
-                  .filter(nonNullable)
-                  .filter(({ anchor }) => !anchor)
-                  .map((thread) => thread.id);
-
-                const qualifiedSubjectId = fullyQualifiedId(data.subject);
-                const attention = attentionPlugin?.provides.attention?.attended ?? new Set([qualifiedSubjectId]);
-                const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-                const { showResolvedThreads } = getViewState(qualifiedSubjectId);
+                const { showResolvedThreads } = getViewState(fullyQualifiedId(data.subject));
 
                 return (
-                  <div role='none' className='contents group/attention' {...attendableAttrs}>
-                    {role === 'complementary' && <CommentsHeading attendableId={qualifiedSubjectId} />}
-                    <ScrollArea.Root classNames='row-span-2'>
-                      <ScrollArea.Viewport>
-                        <CommentsContainer
-                          threads={threads}
-                          detached={detached}
-                          currentId={attention.has(qualifiedSubjectId) ? state.current : undefined}
-                          autoFocusCurrentTextbox={state.focus}
-                          showResolvedThreads={showResolvedThreads}
-                          onThreadAttend={(thread) => {
-                            if (state.current !== thread.id) {
-                              state.current = thread.id;
-                              void dispatch?.({
-                                action: LayoutAction.SCROLL_INTO_VIEW,
-                                data: {
-                                  id: fullyQualifiedId(data.subject!),
-                                  thread: fullyQualifiedId(thread),
-                                  cursor: thread.anchor,
-                                },
-                              });
-                            }
-                          }}
-                          onThreadDelete={(thread) =>
-                            dispatch?.({
-                              plugin: THREAD_PLUGIN,
-                              action: ThreadAction.DELETE,
-                              data: { subject: data.subject, thread },
-                            })
-                          }
-                          onMessageDelete={(thread, messageId) =>
-                            dispatch?.({
-                              plugin: THREAD_PLUGIN,
-                              action: ThreadAction.DELETE_MESSAGE,
-                              data: { subject: data.subject, thread, messageId },
-                            })
-                          }
-                          onThreadToggleResolved={(thread) =>
-                            dispatch?.({
-                              plugin: THREAD_PLUGIN,
-                              action: ThreadAction.TOGGLE_RESOLVED,
-                              data: { thread },
-                            })
-                          }
-                          onComment={(thread) => {
-                            void intentPlugin?.provides.intent.dispatch({
-                              action: ThreadAction.ON_MESSAGE_ADD,
-                              data: { thread, subject: data.subject },
-                            });
-                          }}
-                        />
-                        <div role='none' className='bs-10' />
-                        <ScrollArea.Scrollbar>
-                          <ScrollArea.Thumb />
-                        </ScrollArea.Scrollbar>
-                      </ScrollArea.Viewport>
-                    </ScrollArea.Root>
-                  </div>
+                  <ThreadComplementary
+                    role={role}
+                    subject={data.subject}
+                    stagedThreads={state.staging[fullyQualifiedId(data.subject)]}
+                    current={state.current}
+                    focus
+                    showResolvedThreads={showResolvedThreads}
+                  />
                 );
               }
             }
@@ -450,9 +322,19 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               if (intent.data && intent.data.cursor !== undefined) {
                 const { cursor, name, subject } = intent.data;
 
+                // Seed the threads array if it does not exist.
+                if (subject?.threads === undefined) {
+                  try {
+                    // Static schema will throw an error if subject does not support threads array property.
+                    subject.threads = [];
+                  } catch (e) {
+                    log.error('Subject does not support threads array', subject?.typename);
+                    return;
+                  }
+                }
+
                 const subjectId = fullyQualifiedId(subject);
                 const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
-
                 const stagingArea = state.staging[subjectId];
                 if (stagingArea) {
                   stagingArea.push(thread);
@@ -464,17 +346,9 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   data: thread,
                   intents: [
                     [
-                      {
-                        action: NavigationAction.OPEN,
-                        data: {
-                          activeParts: {
-                            complementary: `${subjectId}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`,
-                          },
-                        },
-                      },
                       {
                         action: ThreadAction.SELECT,
-                        data: { current: thread.id, focus: true },
+                        data: { current: fullyQualifiedId(thread), focus: true },
                       },
                       {
                         action: LayoutAction.SET_LAYOUT,
@@ -528,7 +402,10 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
 
             case ThreadAction.DELETE: {
               const { subject, thread } = intent.data ?? {};
-              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType)) {
+              if (
+                !(thread instanceof ThreadType) ||
+                !(subject && typeof subject === 'object' && 'threads' in subject)
+              ) {
                 return;
               }
 
@@ -540,7 +417,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 const index = stagingArea.findIndex((t) => t.id === thread.id);
                 if (index !== -1) {
                   stagingArea.splice(index, 1);
-                  return;
+                  return { data: true };
                 }
               }
 
@@ -550,7 +427,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               }
 
               if (!intent.undo) {
-                const index = subject.threads.findIndex((t) => t?.id === thread.id);
+                const index = subject.threads.findIndex((t: any) => t?.id === thread.id);
                 const cursor = subject.threads[index]?.anchor;
                 if (index !== -1) {
                   subject.threads?.splice(index, 1);
@@ -596,7 +473,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const { thread, subject } = intent.data ?? {};
               if (
                 !(thread instanceof ThreadType) ||
-                !(subject && typeof subject === 'object' && 'threads' in subject)
+                !(subject && typeof subject === 'object' && 'threads' in subject && Array.isArray(subject.threads))
               ) {
                 return;
               }
@@ -636,7 +513,10 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const { subject, thread, messageId } = intent.data ?? {};
               const space = getSpace(subject);
 
-              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType) || !space) {
+              if (
+                !(thread instanceof ThreadType) ||
+                !(subject && typeof subject === 'object' && 'threads' in subject)
+              ) {
                 return;
               }
 
@@ -667,7 +547,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'threads.message.delete',
-                          properties: { threadId: thread.id, spaceId: space.id },
+                          properties: { threadId: thread.id, spaceId: space?.id },
                         },
                       },
                     ],
@@ -691,7 +571,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'threads.message.undo-delete',
-                          properties: { threadId: thread.id, spaceId: space.id },
+                          properties: { threadId: thread.id, spaceId: space?.id },
                         },
                       },
                     ],
@@ -742,7 +622,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               () =>
                 threads.value
                   .filter((thread) => thread?.anchor)
-                  .map((thread) => ({ id: thread.id, cursor: thread.anchor! })),
+                  .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
             ),
             comments({
               id: doc.id,
@@ -763,7 +643,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 // If the thread is in the staging area, remove it.
                 const stagingArea = state.staging[fullyQualifiedId(doc)];
                 if (stagingArea) {
-                  const index = stagingArea.findIndex((thread) => thread.id === id);
+                  const index = stagingArea.findIndex((thread) => fullyQualifiedId(thread) === id);
                   if (index !== -1) {
                     stagingArea.splice(index, 1);
                   }
@@ -776,7 +656,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               },
               onUpdate: ({ id, cursor }) => {
                 const thread =
-                  state.staging[fullyQualifiedId(doc)]?.find((thread) => thread.id === id) ??
+                  state.staging[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
                   doc.threads.find((thread) => thread?.id === id);
 
                 if (thread instanceof ThreadType && thread.anchor) {

package/src/components/Chat.stories.tsx

@@ -15,7 +15,7 @@ import { useIdentity } from '@dxos/react-client/halo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 import { Thread } from '@dxos/react-ui-thread';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ChatContainer } from './ChatContainer';
 import { createChatThread } from './testing';
@@ -69,8 +69,8 @@ export default {
   component: Thread,
   // TODO(wittjosiah): Register schemas.
   render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType]} />,
-  decorators: [withTheme],
-  parameters: { translations, layout: 'fullscreen' },
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations },
 };
 
 export const Default = {};

package/src/components/ChatContainer.tsx

@@ -2,15 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Chat } from '@phosphor-icons/react';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
 import { MessageType } from '@dxos/plugin-space/types';
-import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { PlankHeading } from '@dxos/react-ui-deck';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, threadLayout } from '@dxos/react-ui-thread';
@@ -28,7 +27,7 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   return (
     <div role='none' className='flex items-center'>
       <PlankHeading.Button attendableId={attendableId}>
-        <Chat {...plankHeadingIconProps} />
+        <Icon icon='ph--chat--regular' size={5} />
       </PlankHeading.Button>
       <PlankHeading.Label attendableId={attendableId}>{t('chat heading')}</PlankHeading.Label>
     </div>
@@ -39,7 +38,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   const identity = useIdentity()!;
   const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, thread.id);
+  const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
@@ -48,7 +47,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
   const { themeMode } = useThemeContext();
 
-  const textboxMetadata = getMessageMetadata(thread.id, identity);
+  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
   const messageRef = useRef('');
   const extensions = useMemo(
     () => [
@@ -103,7 +102,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   return (
     <Thread
       current={current}
-      id={thread.id}
+      id={fullyQualifiedId(thread)}
       classNames='bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0'
     >
       <ScrollArea.Root classNames='col-span-2'>

package/src/components/CommentContainer.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { create } from '@dxos/echo-schema';
 import { MessageType } from '@dxos/plugin-space/types';
-import { getSpace, useMembers } from '@dxos/react-client/echo';
+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';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
@@ -103,13 +103,13 @@ export const CommentContainer = ({
   const identity = useIdentity()!;
   const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, thread.id);
+  const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
   const [autoFocus, setAutoFocus] = useState(!!autoFocusTextbox);
   const { themeMode } = useThemeContext();
 
-  const textboxMetadata = getMessageMetadata(thread.id, identity);
+  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
   const rerenderEditor = () => _setCount((count) => count + 1);
@@ -159,10 +159,8 @@ export const CommentContainer = ({
     return true;
   }, [thread, identity]);
 
-  const handleDeleteMessage = (id: string) => onMessageDelete?.(id);
-
   return (
-    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={thread.id}>
+    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={fullyQualifiedId(thread)}>
       <div
         role='none'
         className={mx(
@@ -195,7 +193,12 @@ export const CommentContainer = ({
         </div>
       </div>
       {thread.messages.filter(nonNullable).map((message) => (
-        <MessageContainer key={message.id} message={message} members={members} onDelete={handleDeleteMessage} />
+        <MessageContainer
+          key={message.id}
+          message={message}
+          members={members}
+          onDelete={(id: string) => onMessageDelete?.(id)}
+        />
       ))}
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
       <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>

package/src/components/Comments.stories.tsx

@@ -8,12 +8,10 @@ import React, { useEffect, useState } from 'react';
 
 import { MessageType, ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
-import { type PublicKey } from '@dxos/react-client';
-import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { Filter, fullyQualifiedId, useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ClientRepeater } from '@dxos/react-client/testing';
-import { Tooltip } from '@dxos/react-ui';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread } from './testing';
@@ -21,7 +19,7 @@ import translations from '../translations';
 
 faker.seed(1);
 
-const Story = ({ spaceKey }: { spaceKey: PublicKey }) => {
+const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const threads = useQuery(space, Filter.schema(ThreadType));
@@ -32,7 +30,7 @@ const Story = ({ spaceKey }: { spaceKey: PublicKey }) => {
       const t = setTimeout(async () => {
         space.db.add(createCommentThread(identity));
         const thread = space.db.add(createCommentThread(identity));
-        setDetached([thread.id]);
+        setDetached([fullyQualifiedId(thread)]);
       });
 
       return () => clearTimeout(t);
@@ -43,15 +41,12 @@ const Story = ({ spaceKey }: { spaceKey: PublicKey }) => {
     return null;
   }
 
-  // TODO(wittjosiah): Include Tooltip.Provider in `withTheme` decorator?
   return (
-    <Tooltip.Provider>
-      <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
-        <div className='flex flex-col w-[400px]'>
-          <CommentsContainer threads={threads} detached={detached} onThreadDelete={console.log} />
-        </div>
+    <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
+      <div className='flex flex-col w-[400px]'>
+        <CommentsContainer threads={threads} detached={detached} onThreadDelete={console.log} />
       </div>
-    </Tooltip.Provider>
+    </div>
   );
 };
 
@@ -59,7 +54,7 @@ export default {
   title: 'plugin-thread/Comments',
   // TODO(wittjosiah): Register schemas.
   render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, MessageType]} />,
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
   parameters: { translations },
 };