@dxos/plugin-thread 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/src/capabilities/intent-resolver.ts

@@ -11,11 +11,11 @@ import { invariant } from '@dxos/invariant';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { CollectionAction, SpaceAction } from '@dxos/plugin-space/types';
-import { Ref, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
-import { AnchoredTo, DataType } from '@dxos/schema';
+import { Ref, getSpace } from '@dxos/react-client/echo';
+import { AnchoredTo, Message } from '@dxos/types';
 
 import { meta } from '../meta';
-import { ChannelType, ThreadAction, ThreadType } from '../types';
+import { Channel, Thread, ThreadAction } from '../types';
 
 import { ThreadCapabilities } from './capabilities';
 
@@ -27,7 +27,7 @@ export default (context: PluginContext) =>
         Effect.gen(function* () {
           const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
           const { object: collection } = yield* dispatch(
-            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(ChannelType) }),
+            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(Channel.Channel) }),
           );
           rootCollection.objects.push(Ref.make(collection));
 
@@ -41,18 +41,14 @@ export default (context: PluginContext) =>
       intent: ThreadAction.CreateChannel,
       resolve: ({ name }) => ({
         data: {
-          object: Obj.make(ChannelType, {
-            name,
-            defaultThread: Ref.make(Obj.make(ThreadType, { messages: [], status: 'active' })),
-            threads: [],
-          }),
+          object: Channel.make({ name }),
         },
       }),
     }),
     createResolver({
       intent: ThreadAction.CreateChannelThread,
       resolve: ({ channel }) => {
-        const thread = Obj.make(ThreadType, { messages: [], status: 'active' });
+        const thread = Thread.make({ status: 'active' });
         channel.threads.push(Ref.make(thread));
         return {
           data: {
@@ -69,9 +65,9 @@ export default (context: PluginContext) =>
         invariant(space, 'Space not found');
 
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
-        const subjectId = fullyQualifiedId(subject);
-        const thread = Obj.make(ThreadType, { name, messages: [], status: 'staged' });
-        const anchor = Relation.make(AnchoredTo, {
+        const subjectId = Obj.getDXN(subject).toString();
+        const thread = Thread.make({ name });
+        const anchor = Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread,
           [Relation.Target]: subject,
           anchor: _anchor,
@@ -86,40 +82,7 @@ export default (context: PluginContext) =>
 
         return {
           intents: [
-            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
-            createIntent(DeckAction.ChangeCompanion, {
-              primary: subjectId,
-              companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
-            }),
-          ],
-        };
-      },
-    }),
-    createResolver({
-      intent: ThreadAction.AddProposal,
-      resolve: ({ text, anchor, sender, subject }) => {
-        const space = getSpace(subject);
-        invariant(space, 'Space not found');
-
-        const subjectId = fullyQualifiedId(subject);
-        const proposal = Obj.make(DataType.Message, {
-          created: new Date().toISOString(),
-          sender,
-          blocks: [{ _tag: 'proposal', text }],
-        });
-        const thread = Obj.make(ThreadType, { name: 'Proposal', messages: [Ref.make(proposal)], status: 'active' });
-
-        return {
-          intents: [
-            createIntent(SpaceAction.AddObject, { object: thread, target: space, hidden: true }),
-            createIntent(SpaceAction.AddRelation, {
-              space,
-              schema: AnchoredTo,
-              source: thread,
-              target: subject,
-              fields: { anchor },
-            }),
-            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
+            createIntent(ThreadAction.Select, { current: Obj.getDXN(thread).toString() }),
             createIntent(DeckAction.ChangeCompanion, {
               primary: subjectId,
               companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
@@ -164,9 +127,9 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.Delete,
       resolve: async ({ subject, anchor, thread: _thread }, undo) => {
-        const thread = _thread ?? (Relation.getSource(anchor) as ThreadType);
+        const thread = _thread ?? (Relation.getSource(anchor) as Thread.Thread);
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
-        const subjectId = fullyQualifiedId(subject);
+        const subjectId = Obj.getDXN(subject).toString();
         const draft = state.drafts[subjectId];
         if (draft) {
           // Check if we're deleting a draft; if so, remo ve it.
@@ -226,13 +189,13 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.AddMessage,
       resolve: ({ anchor, subject, sender, text }) => {
-        const thread = Relation.getSource(anchor) as ThreadType;
+        const thread = Relation.getSource(anchor) as Thread.Thread;
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
-        const subjectId = fullyQualifiedId(subject);
+        const subjectId = Obj.getDXN(subject).toString();
         const space = getSpace(subject);
         invariant(space, 'Space not found');
 
-        const message = Obj.make(DataType.Message, {
+        const message = Obj.make(Message.Message, {
           created: new Date().toISOString(),
           sender,
           blocks: [{ _tag: 'text', text }],
@@ -252,7 +215,7 @@ export default (context: PluginContext) =>
           intents.push(
             createIntent(SpaceAction.AddRelation, {
               space,
-              schema: AnchoredTo,
+              schema: AnchoredTo.AnchoredTo,
               source: thread,
               target: subject,
               fields: { anchor: draft.anchor },
@@ -288,7 +251,7 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.DeleteMessage,
       resolve: ({ subject, anchor, messageId, message, messageIndex }, undo) => {
-        const thread = Relation.getSource(anchor) as ThreadType;
+        const thread = Relation.getSource(anchor) as Thread.Thread;
         const space = getSpace(subject);
         invariant(space, 'Space not found');
 

package/src/capabilities/markdown.ts

@@ -5,9 +5,9 @@
 import { EditorView } from '@codemirror/view';
 
 import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { type EditorState, commentClickedEffect, commentsState, overlap } from '@dxos/react-ui-editor';
 
 import { threads } from '../extensions';
@@ -22,17 +22,19 @@ export default (context: PluginContext) =>
       return threads(state, doc, dispatch);
     },
     ({ document: doc }) => {
+      if (!doc) return [];
       const { state } = context.getCapability(ThreadCapabilities.MutableState);
 
       return EditorView.updateListener.of((update) => {
         if (update.docChanged || update.selectionSet) {
-          state.toolbar[fullyQualifiedId(doc)] = selectionOverlapsComment(update.state);
+          state.toolbar[Obj.getDXN(doc).toString()] = selectionOverlapsComment(update.state);
         }
       });
     },
     ({ document: doc }) => {
+      if (!doc) return [];
       const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-      const id = fullyQualifiedId(doc);
+      const id = Obj.getDXN(doc).toString();
 
       return EditorView.updateListener.of((update) => {
         update.transactions.forEach((transaction) => {

package/src/capabilities/react-surface.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 import { Obj, type Ref } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
@@ -18,7 +19,7 @@ import {
   ThreadSettings,
 } from '../components';
 import { meta } from '../meta';
-import { ChannelType, type ThreadSettingsProps, ThreadType } from '../types';
+import { Channel, Thread, type ThreadSettingsProps } from '../types';
 
 import { ThreadCapabilities } from './capabilities';
 
@@ -27,14 +28,14 @@ export default () =>
     createSurface({
       id: `${meta.id}/channel`,
       role: 'article',
-      filter: (data): data is { subject: ChannelType } => Obj.instanceOf(ChannelType, data.subject),
+      filter: (data): data is { subject: Channel.Channel } => Obj.instanceOf(Channel.Channel, data.subject),
       component: ({ data: { subject: channel }, role }) => <ChannelContainer channel={channel} role={role} />,
     }),
     createSurface({
       id: `${meta.id}/chat-companion`,
       role: 'article',
-      filter: (data): data is { companionTo: ChannelType; subject: 'chat' } =>
-        Obj.instanceOf(ChannelType, data.companionTo) && data.subject === 'chat',
+      filter: (data): data is { companionTo: Channel.Channel; subject: 'chat' } =>
+        Obj.instanceOf(Channel.Channel, data.companionTo) && data.subject === 'chat',
       component: ({ data: { companionTo: channel } }) => {
         const space = getSpace(channel);
         const thread = channel.defaultThread.target;
@@ -48,7 +49,7 @@ export default () =>
     createSurface({
       id: `${meta.id}/thread`,
       role: 'article',
-      filter: (data): data is { subject: ThreadType } => Obj.instanceOf(ThreadType, data.subject),
+      filter: (data): data is { subject: Thread.Thread } => Obj.instanceOf(Thread.Thread, data.subject),
       component: ({ data: { subject: thread } }) => {
         const space = getSpace(thread);
         if (!space || !thread) {
@@ -61,7 +62,7 @@ export default () =>
     createSurface({
       id: `${meta.id}/comments`,
       role: 'article',
-      filter: (data): data is { companionTo: { threads: Ref.Ref<ThreadType>[] } } =>
+      filter: (data): data is { companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
         data.subject === 'comments' && Obj.isObject(data.companionTo),
       // TODO(wittjosiah): This isn't scrolling properly in a plank.
       component: ({ data }) => <ThreadComplementary subject={data.companionTo} />,

package/src/components/Call/Call.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 import { type ThemedClassName } from '@dxos/react-ui';
 
 import { ThreadCapabilities } from '../../capabilities';

package/src/components/Call/Toolbar.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework';
+import { useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { useActions, useNode } from '@dxos/plugin-graph';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Icon,
   IconButton,
@@ -20,10 +20,10 @@ import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
 
 import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
-import { type ChannelType } from '../../types';
+import { type Channel } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
-  channel?: ChannelType;
+  channel?: Channel.Channel;
   participants?: number;
   autoHideControls?: boolean;
   isInRoom?: boolean;
@@ -45,7 +45,7 @@ export const Toolbar = ({
   const call = useCapability(ThreadCapabilities.CallManager);
 
   // Channel app graph node.
-  const node = useNode(graph, channel && fullyQualifiedId(channel));
+  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
   const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
 
   // Screen sharing.

package/src/components/CallDebugPanel.tsx

@@ -76,7 +76,7 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       maxHeight={false}
       info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
     >
-      <div className='flex flex-col w-full gap-2 text-xs'>
+      <div className='flex flex-col is-full gap-2 text-xs'>
         <div className='flex items-center gap-2'>
           <Input.Root>
             <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
@@ -160,7 +160,7 @@ export type TableProps = {
 
 export const Table = ({ rows }: TableProps) => {
   return (
-    <div className='w-full text-xs font-mono'>
+    <div className='is-full text-xs font-mono'>
       {rows.map(([prefix, label, value, unit], i) => (
         <div key={i} className='grid grid-cols-[3fr_1fr_1fr_1fr]'>
           <div className='p-1'>{prefix}</div>

package/src/components/CallSidebar.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 
 import { ThreadCapabilities } from '../capabilities';
 

package/src/components/ChannelContainer.stories.tsx

@@ -9,20 +9,20 @@ import { contributes } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
-import { withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
+import { Message } from '@dxos/types';
 
 import { createThreadPlugins } from '../testing';
 import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { Channel, Thread } from '../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelContainerProps) => {
   const space = useSpace();
-  const [channel] = useQuery(space, Query.type(ChannelType));
+  const [channel] = useQuery(space, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
@@ -36,13 +36,13 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
+    withLayout({ container: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [ChannelType, ThreadType, DataType.Message])],
+      capabilities: [contributes(ClientCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
     }),
   ],
   parameters: {
-    layout: 'column',
     translations,
   },
 } satisfies Meta<typeof ChannelContainer>;

package/src/components/ChannelContainer.tsx

@@ -2,17 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { useCapabilities, useCapability } from '@dxos/app-framework/react';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ElevationProvider, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ElevationProvider, Input, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
 import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
@@ -20,13 +21,15 @@ import { StackItem } from '@dxos/react-ui-stack';
 
 import { ThreadCapabilities } from '../capabilities';
 import { meta } from '../meta';
-import { type ChannelType } from '../types';
+import { type Channel } from '../types';
 
 import { Call } from './Call';
 import ChatContainer from './ChatContainer';
 
+// TODO(burdon): Create Radix style layout.
+
 export type ChannelContainerProps = {
-  channel?: ChannelType;
+  channel?: Channel.Channel;
   roomId?: string;
   role?: string;
   fullscreen?: boolean;
@@ -38,7 +41,8 @@ export type ChannelContainerProps = {
 export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
+  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
+  const roomId = _roomId ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -124,8 +128,8 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       )}
       {!isJoined && channel && channel.defaultThread.target && space && (
         <>
-          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
-          <ChatContainer space={space} thread={channel.defaultThread.target} />
+          <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
+          <ChatContainer space={space} thread={channel.defaultThread.target} classNames='container-max-width' />
         </>
       )}
     </StackItem.Content>
@@ -161,7 +165,7 @@ const DisplayNameMissing = () => {
 const useChannelToolbarActions = (onJoinCall?: () => void) => {
   const creator = useMemo(
     () =>
-      Rx.make(() => {
+      Atom.make(() => {
         return {
           nodes: [
             createMenuItemGroup('root', {
@@ -182,19 +186,19 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = ThemedClassName<{
+type ChannelToolbarProps = {
   attendableId?: string;
   role?: string;
   onJoinCall?: () => void;
-}>;
+};
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }: ChannelToolbarProps) => {
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
   const menuProps = useChannelToolbarActions(onJoinCall);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
       <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} />
+        <ToolbarMenu textBlockWidth />
       </MenuProvider>
     </ElevationProvider>
   );

package/src/components/Chat.stories.tsx

@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 
 import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Ref } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
@@ -15,12 +14,12 @@ import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
-import { Thread } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { render } from '@dxos/storybook-utils';
+import { Message } from '@dxos/types';
 
 import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { Channel, Thread } from '../types';
 
 import { ChatContainer } from './ChatContainer';
 
@@ -30,17 +29,12 @@ const DefaultStory = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [channel, setChannel] = useState<ChannelType | null>();
+  const [channel, setChannel] = useState<Channel.Channel | null>();
 
   useAsyncEffect(async () => {
     if (identity) {
       const space = await client.spaces.create();
-      const channel = space.db.add(
-        Obj.make(ChannelType, {
-          defaultThread: Ref.make(Obj.make(ThreadType, { messages: [], status: 'active' })),
-          threads: [],
-        }),
-      );
+      const channel = space.db.add(Channel.make());
       setSpace(space);
       setChannel(channel);
     }
@@ -59,7 +53,7 @@ const DefaultStory = () => {
 
 const meta = {
   title: 'plugins/plugin-thread/Chat',
-  component: Thread.Root as any,
+  component: ThreadComponent.Root as any,
   render: render(DefaultStory),
   decorators: [
     withTheme,
@@ -76,7 +70,7 @@ const meta = {
         ),
       ],
     }),
-    withClientProvider({ createSpace: true, types: [ThreadType, ChannelType, DataType.Message] }),
+    withClientProvider({ createSpace: true, types: [Thread.Thread, Channel.Channel, Message.Message] }),
   ],
   parameters: {
     layout: 'fullscreen',

package/src/components/ChatContainer.tsx

@@ -5,25 +5,25 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { type Space, fullyQualifiedId, useMembers } from '@dxos/react-client/echo';
+import { 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 { Icon, ScrollArea, type ThemedClassName, 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,
+  Thread as ThreadComponent,
   type ThreadRootProps,
   threadLayout,
 } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { Message } from '@dxos/types';
 import { isNonNullable } from '@dxos/util';
 
 import { useStatus } from '../hooks';
 import { meta } from '../meta';
-import { type ThreadType } from '../types';
+import { type Thread } from '../types';
 import { getMessageMetadata } from '../util';
 
 import { command } from './command-extension';
@@ -41,16 +41,25 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export type ChatContainerProps = {
-  space: Space;
-  thread: ThreadType;
-  context?: Obj.Any;
-  autoFocusTextbox?: boolean;
-} & Pick<ThreadRootProps, 'current'>;
-
-export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+export type ChatContainerProps = ThemedClassName<
+  {
+    space: Space;
+    thread: Thread.Thread;
+    context?: Obj.Any;
+    autoFocusTextbox?: boolean;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export const ChatContainer = ({
+  classNames,
+  space,
+  thread,
+  context,
+  current,
+  autoFocusTextbox,
+}: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
-  const id = fullyQualifiedId(thread);
+  const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
   const members = useMembers(space?.key);
   const activity = useStatus(space, id);
@@ -67,7 +76,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
     () => [
       createBasicExtensions({ placeholder: t('message placeholder') }),
       createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
       command,
     ],
     [themeMode, _count],
@@ -92,7 +101,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
 
     thread.messages.push(
       Ref.make(
-        Obj.make(DataType.Message, {
+        Obj.make(Message.Message, {
           created: new Date().toISOString(),
           sender: { identityDid: identity.did },
           blocks: [{ _tag: 'text', text: messageRef.current }],
@@ -109,12 +118,13 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
   };
 
   return (
-    <Thread.Root
+    <ThreadComponent.Root
       current={current}
       id={id}
       classNames={[
-        'bs-full is-full max-is-prose mli-auto grid-rows-[1fr_min-content_min-content] overflow-hidden',
+        'bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden',
         'transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0',
+        classNames,
       ]}
     >
       <ScrollArea.Root classNames='col-span-2'>
@@ -136,9 +146,8 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
       </ScrollArea.Root>
 
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
-
-      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
-    </Thread.Root>
+      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
+    </ThreadComponent.Root>
   );
 };
 

package/src/components/Comments.stories.tsx

@@ -14,11 +14,11 @@ import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { AnchoredTo, DataType } from '@dxos/schema';
 import { render } from '@dxos/storybook-utils';
+import { AnchoredTo, Message } from '@dxos/types';
 
 import { translations } from '../translations';
-import { ThreadType } from '../types';
+import { Thread } from '../types';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread, createProposalThread } from './testing';
@@ -28,7 +28,7 @@ faker.seed(1);
 const DefaultStory = () => {
   const identity = useIdentity();
   const space = useSpace();
-  const anchors = useQuery(space, Query.type(AnchoredTo));
+  const anchors = useQuery(space, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {
     if (identity && space) {
@@ -36,14 +36,14 @@ const DefaultStory = () => {
       const thread1 = space.db.add(createCommentThread(identity));
       const thread2 = space.db.add(createProposalThread(identity));
       space.db.add(
-        Relation.make(AnchoredTo, {
+        Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread1,
           [Relation.Target]: object,
           anchor: 'test',
         }),
       );
       space.db.add(
-        Relation.make(AnchoredTo, {
+        Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread2,
           [Relation.Target]: object,
           anchor: 'test',
@@ -71,7 +71,7 @@ const meta = {
       plugins: [
         IntentPlugin(),
         ClientPlugin({
-          types: [DataType.Message, ThreadType, AnchoredTo],
+          types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
           onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },