@dxos/plugin-thread 0.8.1-staging.9eaf14f → 0.8.2-main.10c050d

package/src/components/ChannelContainer.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+import React, { useCallback, useEffect, useMemo, useState, type ChangeEvent } from 'react';
+
+import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { Context } from '@dxos/context';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useTranslation, Input, ElevationProvider } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlGroupButton } from '@dxos/react-ui-form';
+import { ToolbarMenu, MenuProvider, createMenuAction, useMenuActions, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { useSoundEffect } from '@dxos/react-ui-sfx';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { Call } from './Call';
+import ChatContainer from './ChatContainer';
+import { ThreadCapabilities } from '../capabilities';
+import { THREAD_PLUGIN } from '../meta';
+import { type ChannelType } from '../types';
+
+export type ChannelContainerProps = {
+  channel?: ChannelType;
+  roomId?: string;
+  role?: string;
+  fullscreen?: boolean;
+};
+
+/**
+ * Renders a call when active, otherwise renders the channel chat.
+ */
+export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+  const space = getSpace(channel);
+  const callManager = useCapability(ThreadCapabilities.CallManager);
+  const roomId = channel ? fullyQualifiedId(channel) : _roomId;
+  const identity = useIdentity();
+  const isNamed = !!identity?.profile?.displayName;
+  const joinSound = useSoundEffect('JoinCall');
+  const leaveSound = useSoundEffect('LeaveCall');
+
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+  useEffect(() => {
+    const ctx = new Context();
+    callManager.left.on(ctx, (roomId) => {
+      extensions.forEach((extension) => {
+        void extension.onLeave?.(roomId);
+      });
+    });
+
+    callManager.callStateUpdated.on(ctx, (state) => {
+      extensions.forEach((extension) => {
+        void extension.onCallStateUpdated?.(state);
+      });
+    });
+
+    callManager.mediaStateUpdated.on(ctx, (state) => {
+      extensions.forEach((extension) => {
+        void extension.onMediaStateUpdated?.(state);
+      });
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [callManager, extensions]);
+
+  /**
+   * Join the call.
+   */
+  // TODO(wittjosiah): Show preview before joining?
+  const handleJoin = useCallback(async () => {
+    if (!roomId || !channel) {
+      return;
+    }
+
+    if (callManager.joined) {
+      await callManager.leave();
+    }
+
+    try {
+      void joinSound.play();
+      callManager.setRoomId(roomId);
+      await callManager.join();
+      await Promise.all(extensions.map((extension) => extension.onJoin?.({ channel, roomId })));
+    } catch (err) {
+      // TODO(burdon): Error sound.
+      log.catch(err);
+    }
+  }, [extensions, channel, roomId]);
+
+  /**
+   * Leave the call.
+   */
+  const handleLeave = useCallback(async () => {
+    try {
+      void leaveSound.play();
+    } catch (err) {
+      // TODO(burdon): Error sound.
+      log.catch(err);
+    } finally {
+      void callManager.turnAudioOff();
+      void callManager.turnVideoOff();
+      void callManager.turnScreenshareOff();
+      void callManager.leave();
+    }
+  }, [extensions, roomId]);
+
+  const isJoined = callManager.joined && callManager.roomId === roomId;
+
+  return (
+    <StackItem.Content toolbar={!isJoined} classNames={isJoined && 'h-full'}>
+      {isJoined && !isNamed && <DisplayNameMissing />}
+      {isJoined && isNamed && (
+        <Call.Root>
+          <Call.Grid fullscreen={fullscreen} />
+          <Call.Toolbar channel={channel} onLeave={handleLeave} />
+        </Call.Root>
+      )}
+      {!isJoined && channel && channel.defaultThread.target && space && (
+        <>
+          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
+          <ChatContainer space={space} thread={channel.defaultThread.target} />
+        </>
+      )}
+    </StackItem.Content>
+  );
+};
+
+export default ChannelContainer;
+
+const DisplayNameMissing = () => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const client = useClient();
+  const [displayName, setDisplayName] = useState('');
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setDisplayName(event.target.value), []);
+  const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
+
+  return (
+    <ControlGroup classNames='p-4 place-content-center'>
+      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+        <Input.TextInput
+          value={displayName}
+          onChange={handleChange}
+          placeholder={t('display name input placeholder')}
+          classNames='md:min-is-64'
+        />
+      </ControlItemInput>
+      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+        {t('set display name label')}
+      </ControlGroupButton>
+    </ControlGroup>
+  );
+};
+
+const useChannelToolbarActions = (onJoinCall?: () => void) => {
+  const creator = useMemo(
+    () =>
+      Rx.make(() => {
+        const nodes = [];
+        const edges = [];
+
+        const rootGroup = createMenuItemGroup('root', {
+          label: ['channel toolbar title', { ns: THREAD_PLUGIN }],
+        });
+        nodes.push(rootGroup);
+
+        const sortAction = createMenuAction('video-call', () => onJoinCall?.(), {
+          label: ['start video call label', { ns: THREAD_PLUGIN }],
+          icon: 'ph--video-camera--regular',
+          type: 'video-call',
+        });
+        nodes.push(sortAction);
+        edges.push({ source: 'root', target: sortAction.id });
+
+        return { nodes, edges };
+      }),
+    [],
+  );
+
+  return useMenuActions(creator);
+};
+
+type ChannelToolbarProps = {
+  attendableId?: string;
+  role?: string;
+  onJoinCall?: () => void;
+};
+
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
+  const menuProps = useChannelToolbarActions(onJoinCall);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...menuProps} attendableId={attendableId}>
+        <ToolbarMenu />
+      </MenuProvider>
+    </ElevationProvider>
+  );
+};

package/src/components/Chat.stories.tsx

@@ -9,21 +9,19 @@ import React, { useEffect, useState } from 'react';
 
 import { Capabilities, contributes, createSurface, IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ObjectId } from '@dxos/echo-schema';
-import { DXN, QueueSubspaceTags } from '@dxos/keys';
-import { refFromDXN } from '@dxos/live-object';
-import { ChannelType, ThreadType } from '@dxos/plugin-space/types';
+import { makeRef } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { create, type Space } from '@dxos/react-client/echo';
+import { live, type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Thread } from '@dxos/react-ui-thread';
-import { MessageType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ChatContainer } from './ChatContainer';
 import translations from '../translations';
+import { ChannelType, ThreadType } from '../types';
 
 faker.seed(1);
 
@@ -38,8 +36,9 @@ const Story = () => {
       setTimeout(async () => {
         const space = await client.spaces.create();
         const channel = space.db.add(
-          create(ChannelType, {
-            queue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space.id, ObjectId.random()])),
+          live(ChannelType, {
+            defaultThread: makeRef(live(ThreadType, { messages: [], status: 'active' })),
+            threads: [],
           }),
         );
         setSpace(space);
@@ -48,13 +47,13 @@ const Story = () => {
     }
   }, [identity]);
 
-  if (!identity || !channel || !space) {
+  if (!identity || !channel || !space || !channel.defaultThread.target) {
     return null;
   }
 
   return (
     <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>
-      <ChatContainer space={space} dxn={channel.queue.dxn} />
+      <ChatContainer space={space} thread={channel.defaultThread.target} />
     </main>
   );
 };
@@ -80,8 +79,8 @@ const meta: Meta = {
       ],
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
-    withClientProvider({ createSpace: true, types: [ThreadType, MessageType] }),
+    withLayout({ fullscreen: true }),
+    withClientProvider({ createSpace: true, types: [ThreadType, DataType.Message] }),
   ],
   parameters: { translations },
 };

package/src/components/ChatContainer.tsx

@@ -4,23 +4,29 @@
 
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
-import { createStatic } from '@dxos/echo-schema';
-import { type DXN } from '@dxos/keys';
-import { makeRef } from '@dxos/live-object';
-import { type Space, useMembers, useQueue } from '@dxos/react-client/echo';
+import { live, makeRef } from '@dxos/live-object';
+import { type AnyLiveObject, fullyQualifiedId, type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
-import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, threadLayout } from '@dxos/react-ui-thread';
-import { MessageType } from '@dxos/schema';
+import {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread,
+  ThreadFooter,
+  threadLayout,
+  type ThreadProps,
+} from '@dxos/react-ui-thread';
+import { DataType } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
-import { type ThreadContainerProps } from './types';
 import { useStatus } from '../hooks';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 import { getMessageMetadata } from '../util';
 
 export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
@@ -35,16 +41,17 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export type ChatContainerProps = Omit<ThreadContainerProps, 'thread'> & {
+export type ChatContainerProps = {
   space: Space;
-  dxn: DXN;
-};
+  thread: ThreadType;
+  context?: AnyLiveObject<any>;
+  autoFocusTextbox?: boolean;
+} & Pick<ThreadProps, 'current'>;
 
-export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }: ChatContainerProps) => {
-  const id = dxn.toString();
+export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+  const id = fullyQualifiedId(thread);
   const identity = useIdentity()!;
   const members = useMembers(space?.key);
-  const queue = useQueue<MessageType>(dxn, { pollInterval: 1_000 });
   const activity = useStatus(space, id);
   const { t } = useTranslation(THREAD_PLUGIN);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
@@ -79,18 +86,20 @@ export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }
 
   // TODO(burdon): Change to model.
   const handleCreate: MessageTextboxProps['onSend'] = () => {
-    if (!messageRef.current?.length || !queue) {
+    if (!messageRef.current?.length) {
       return false;
     }
 
-    queue.append([
-      createStatic(MessageType, {
-        sender: { identityDid: identity.did },
-        created: new Date().toISOString(),
-        blocks: [{ type: 'text', text: messageRef.current }],
-        properties: context ? { context: makeRef(context) } : undefined,
-      }),
-    ]);
+    thread.messages.push(
+      makeRef(
+        live(DataType.Message, {
+          sender: { identityDid: identity.did },
+          created: new Date().toISOString(),
+          blocks: [{ type: 'text', text: messageRef.current }],
+          properties: context ? { context: makeRef(context) } : undefined,
+        }),
+      ),
+    );
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -108,9 +117,12 @@ export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }
       <ScrollArea.Root classNames='col-span-2'>
         <ScrollArea.Viewport classNames='overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]'>
           <div role='none' className={mx(threadLayout, 'place-self-end')}>
-            {(queue?.items ?? []).map((message) => (
-              <MessageContainer key={message.id} message={message} members={members} />
-            ))}
+            {thread.messages
+              .map((message) => message.target)
+              .filter(isNonNullable)
+              .map((message) => (
+                <MessageContainer key={message.id} message={message} members={members} />
+              ))}
           </div>
           {/* 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/CommentContainer.tsx

@@ -5,6 +5,7 @@
 import { CheckCircle, X } from '@phosphor-icons/react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
+import { RelationSourceId } from '@dxos/echo-schema';
 import { RefArray } from '@dxos/live-object';
 import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -17,14 +18,22 @@ import {
   hoverableFocusedWithinControls,
   mx,
 } from '@dxos/react-ui-theme';
-import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, ThreadHeading } from '@dxos/react-ui-thread';
+import {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread,
+  ThreadFooter,
+  ThreadHeading,
+  type ThreadProps,
+} from '@dxos/react-ui-thread';
+import { type AnchoredTo } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
-import { type ThreadContainerProps } from './types';
 import { useStatus } from '../hooks';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 import { getMessageMetadata } from '../util';
 
 const sizeClass = getSize(4);
@@ -42,25 +51,17 @@ const ToggleResolvedButton = ({
   const { t } = useTranslation(THREAD_PLUGIN);
   const label = t(isResolved ? 'mark as unresolved label' : 'mark as resolved label');
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='ghost'
-          data-testid='thread.toggle-resolved'
-          onClick={onResolve}
-          classNames={[commentControlClassNames, !isResolved && hoverableControlItem]}
-        >
-          <span className='sr-only'>{label}</span>
-          {isResolved ? <CheckCircle className={sizeClass} weight='fill' /> : <CheckCircle className={sizeClass} />}
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content>
-          {label}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={label}>
+      <Button
+        variant='ghost'
+        data-testid='thread.toggle-resolved'
+        onClick={onResolve}
+        classNames={[commentControlClassNames, !isResolved && hoverableControlItem]}
+      >
+        <span className='sr-only'>{label}</span>
+        {isResolved ? <CheckCircle className={sizeClass} weight='fill' /> : <CheckCircle className={sizeClass} />}
+      </Button>
+    </Tooltip.Trigger>
   );
 };
 
@@ -68,41 +69,43 @@ const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
   const { t } = useTranslation(THREAD_PLUGIN);
   const label = t('delete thread label');
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='ghost'
-          data-testid='thread.delete'
-          onClick={onDelete}
-          classNames={[commentControlClassNames, hoverableControlItem]}
-        >
-          <span className='sr-only'>{label}</span>
-          <X className={sizeClass} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content classNames='z-30'>
-          {label}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <Tooltip.Trigger asChild content={label}>
+      <Button
+        variant='ghost'
+        data-testid='thread.delete'
+        onClick={onDelete}
+        classNames={[commentControlClassNames, hoverableControlItem]}
+      >
+        <span className='sr-only'>{label}</span>
+        <X className={sizeClass} />
+      </Button>
+    </Tooltip.Trigger>
   );
 };
 
+export type CommentContainerProps = {
+  anchor: AnchoredTo;
+  onAttend?: (anchor: AnchoredTo) => void;
+  onComment?: (anchor: AnchoredTo, message: string) => void;
+  onResolve?: (anchor: AnchoredTo) => void;
+  onMessageDelete?: (anchor: AnchoredTo, messageId: string) => void;
+  onThreadDelete?: (anchor: AnchoredTo) => void;
+} & Pick<ThreadProps, 'current'>;
+
 export const CommentContainer = ({
-  thread,
-  detached,
+  anchor,
   current,
   onAttend,
   onComment,
   onResolve,
   onMessageDelete,
   onThreadDelete,
-}: ThreadContainerProps) => {
+}: CommentContainerProps) => {
   const identity = useIdentity()!;
-  const space = getSpace(thread);
+  const space = getSpace(anchor);
   const members = useMembers(space?.key);
+  const detached = !anchor.anchor;
+  const thread = anchor[RelationSourceId] as ThreadType;
   const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
@@ -127,23 +130,23 @@ export const CommentContainer = ({
   const scrollToEnd = (behavior: ScrollBehavior) =>
     setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
 
-  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 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 handleComment: MessageTextboxProps['onSend'] = useCallback(() => {
     if (!messageRef.current) {
       return false;
     }
 
-    onComment?.(thread, messageRef.current);
+    onComment?.(anchor, messageRef.current);
     messageRef.current = '';
     scrollToEnd('instant');
     rerenderEditor();
 
     return true;
-  }, [thread, identity]);
+  }, [anchor, identity]);
 
   return (
     <Thread onClickCapture={handleAttend} onFocusCapture={handleAttend} current={current} id={fullyQualifiedId(thread)}>
@@ -156,17 +159,9 @@ export const CommentContainer = ({
         )}
       >
         {detached ? (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <ThreadHeading detached>{thread.name}</ThreadHeading>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content classNames='z-30' side='top'>
-                {t('detached thread label')}
-                <Tooltip.Arrow />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
+          <Tooltip.Trigger asChild content={t('detached thread label')} side='top'>
+            <ThreadHeading detached>{thread.name}</ThreadHeading>
+          </Tooltip.Trigger>
         ) : (
           <ThreadHeading>{thread.name}</ThreadHeading>
         )}

package/src/components/Comments.stories.tsx

@@ -5,67 +5,71 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ThreadType } from '@dxos/plugin-space/types';
+import { Expando, Query, RelationSourceId, RelationTargetId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { Filter, fullyQualifiedId, useQuery, useSpace } from '@dxos/react-client/echo';
+import { live, useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { MessageType } from '@dxos/schema';
+import { AnchoredTo, DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread } from './testing';
 import translations from '../translations';
+import { ThreadType } from '../types';
 
 faker.seed(1);
 
 const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
-  const threads = useQuery(space, Filter.schema(ThreadType));
-  const [detached, setDetached] = useState<string[]>([]);
+  const anchors = useQuery(space, Query.type(AnchoredTo));
 
   useEffect(() => {
     if (identity && space) {
       const t = setTimeout(async () => {
-        space.db.add(createCommentThread(identity));
-        const thread = space.db.add(createCommentThread(identity));
-        setDetached([fullyQualifiedId(thread)]);
+        const object = space.db.add(live(Expando, {}));
+        const thread1 = space.db.add(createCommentThread(identity));
+        const thread2 = space.db.add(createCommentThread(identity));
+        space.db.add(live(AnchoredTo, { [RelationSourceId]: thread1, [RelationTargetId]: object }));
+        space.db.add(live(AnchoredTo, { [RelationSourceId]: thread2, [RelationTargetId]: object }));
       });
 
       return () => clearTimeout(t);
     }
   }, [identity, space]);
 
-  if (!identity || !space || !threads) {
+  if (!identity || !space || !anchors) {
     return null;
   }
 
   return (
     <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
       <div className='flex flex-col w-[30rem]'>
-        <CommentsContainer threads={threads} detached={detached} onThreadDelete={console.log} />
+        <CommentsContainer anchors={anchors} onThreadDelete={console.log} />
       </div>
     </div>
   );
 };
 
-export const Default = {};
-
 const meta: Meta = {
   title: 'plugins/plugin-thread/Comments',
   // TODO(wittjosiah): Use decorator.
-  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, MessageType]} />,
+  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, DataType.Message]} />,
   decorators: [
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
-    withPluginManager({ plugins: [IntentPlugin()] }),
+    withLayout({ fullscreen: true }),
+    withPluginManager({
+      plugins: [IntentPlugin()],
+    }),
   ],
   parameters: { translations },
 };
 
 export default meta;
+
+export const Default = {};