@dxos/plugin-thread 0.6.10 → 0.6.11-staging.66fb9aa

package/dist/lib/node/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["types.cjs"],
-  "sourcesContent": ["import {\n  ThreadAction\n} from \"./chunk-WPPLQNMJ.cjs\";\nimport \"./chunk-BWBONZGU.cjs\";\nexport {\n  ThreadAction\n};\n//# sourceMappingURL=types.cjs.map\n"],
+  "sourcesContent": ["import {\n  ThreadAction\n} from \"./chunk-D5GOVXHS.cjs\";\nimport \"./chunk-BWBONZGU.cjs\";\nexport {\n  ThreadAction\n};\n//# sourceMappingURL=types.cjs.map\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAEO;AACP,4BAAO;",
   "names": []
 }

package/dist/types/src/ThreadPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPlugin.d.ts","sourceRoot":"","sources":["../../../src/ThreadPlugin.tsx"],"names":[],"mappings":"AAQA,OAAO,EAML,KAAK,gBAAgB,EAUtB,MAAM,qBAAqB,CAAC;AAsC7B,OAAO,EAAgB,KAAK,oBAAoB,EAA4B,MAAM,SAAS,CAAC;AAY5F,eAAO,MAAM,YAAY,QAAO,gBAAgB,CAAC,oBAAoB,CAiqBpE,CAAC"}
+{"version":3,"file":"ThreadPlugin.d.ts","sourceRoot":"","sources":["../../../src/ThreadPlugin.tsx"],"names":[],"mappings":"AAQA,OAAO,EAML,KAAK,gBAAgB,EAWtB,MAAM,qBAAqB,CAAC;AAqC7B,OAAO,EAAqC,KAAK,oBAAoB,EAA4B,MAAM,SAAS,CAAC;AAkBjH,eAAO,MAAM,YAAY,QAAO,gBAAgB,CAAC,oBAAoB,CAssBpE,CAAC"}

package/dist/types/src/components/Chat.stories.d.ts

@@ -38,7 +38,6 @@ declare const _default: {
                 };
             };
         }[];
-        layout: string;
     };
 };
 export default _default;

package/dist/types/src/components/Chat.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DnD,wBAOE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DnD,wBAOE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/components/Comments.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDnD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CnD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/types.d.ts

@@ -6,9 +6,16 @@ export declare enum ThreadAction {
     CREATE = "dxos.org/plugin/thread/action/create",
     SELECT = "dxos.org/plugin/thread/action/select",
     DELETE = "dxos.org/plugin/thread/action/delete",
+    ON_MESSAGE_ADD = "dxos.org/plugin/thread/action/on-message-add",
     DELETE_MESSAGE = "dxos.org/plugin/thread/action/delete-message",
     TOGGLE_RESOLVED = "dxos.org/plugin/thread/action/toggle-resolved"
 }
+export type ThreadProvides<T> = {
+    thread: {
+        predicate: (obj: any) => obj is T;
+        createSort: (obj: T) => (anchorA: string, anchorB: string) => number;
+    };
+};
 export type ThreadPluginProvides = SurfaceProvides & IntentResolverProvides & GraphBuilderProvides & MetadataRecordsProvides & SettingsProvides & TranslationsProvides & SchemaProvides & MarkdownExtensionProvides;
 export type ThreadSettingsProps = {
     standalone?: boolean;

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAK3D,oBAAY,YAAY;IACtB,MAAM,yCAA4B;IAClC,MAAM,yCAA4B;IAClC,MAAM,yCAA4B;IAClC,cAAc,iDAAoC;IAClD,eAAe,kDAAqC;CACrD;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,cAAc,GACd,yBAAyB,CAAC;AAE5B,MAAM,MAAM,mBAAmB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAK3D,oBAAY,YAAY;IACtB,MAAM,yCAA4B;IAClC,MAAM,yCAA4B;IAClC,MAAM,yCAA4B;IAClC,cAAc,iDAAoC;IAClD,cAAc,iDAAoC;IAClD,eAAe,kDAAqC;CACrD;AAID,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,MAAM,EAAE;QACN,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;KACtE,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,cAAc,GACd,yBAAyB,CAAC;AAE5B,MAAM,MAAM,mBAAmB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.6.10",
+  "version": "0.6.11-staging.66fb9aa",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -51,28 +51,28 @@
     "@preact/signals-core": "^1.6.0",
     "date-fns": "^3.3.1",
     "lodash.get": "^4.4.2",
-    "@dxos/app-framework": "0.6.10",
-    "@dxos/async": "0.6.10",
-    "@dxos/display-name": "0.6.10",
-    "@dxos/echo-schema": "0.6.10",
-    "@dxos/invariant": "0.6.10",
-    "@dxos/local-storage": "0.6.10",
-    "@dxos/log": "0.6.10",
-    "@dxos/plugin-attention": "0.6.10",
-    "@dxos/plugin-client": "0.6.10",
-    "@dxos/plugin-graph": "0.6.10",
-    "@dxos/plugin-markdown": "0.6.10",
-    "@dxos/plugin-settings": "0.6.10",
-    "@dxos/plugin-observability": "0.6.10",
-    "@dxos/plugin-space": "0.6.10",
-    "@dxos/react-client": "0.6.10",
-    "@dxos/react-ui-deck": "0.6.10",
-    "@dxos/react-ui-attention": "0.6.10",
-    "@dxos/react-ui-editor": "0.6.10",
-    "@dxos/react-ui-mosaic": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10",
-    "@dxos/react-ui-thread": "0.6.10",
-    "@dxos/util": "0.6.10"
+    "@dxos/app-framework": "0.6.11-staging.66fb9aa",
+    "@dxos/async": "0.6.11-staging.66fb9aa",
+    "@dxos/display-name": "0.6.11-staging.66fb9aa",
+    "@dxos/invariant": "0.6.11-staging.66fb9aa",
+    "@dxos/echo-schema": "0.6.11-staging.66fb9aa",
+    "@dxos/local-storage": "0.6.11-staging.66fb9aa",
+    "@dxos/log": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-attention": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-client": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-markdown": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-observability": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-settings": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-graph": "0.6.11-staging.66fb9aa",
+    "@dxos/plugin-space": "0.6.11-staging.66fb9aa",
+    "@dxos/react-client": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-deck": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-attention": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-editor": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-theme": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-mosaic": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-thread": "0.6.11-staging.66fb9aa",
+    "@dxos/util": "0.6.11-staging.66fb9aa"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -82,16 +82,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4",
-    "@dxos/random": "0.6.10",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/storybook-utils": "0.6.10"
+    "@dxos/random": "0.6.11-staging.66fb9aa",
+    "@dxos/storybook-utils": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui": "0.6.11-staging.66fb9aa"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10"
+    "@dxos/react-ui": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-theme": "0.6.11-staging.66fb9aa"
   },
   "publishConfig": {
     "access": "public"

package/src/ThreadPlugin.tsx

@@ -22,6 +22,7 @@ import {
   isLayoutParts,
   parseMetadataResolverPlugin,
   type IntentDispatcher,
+  useResolvePlugins,
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
 import { type EchoReactiveObject, getTypename } from '@dxos/echo-schema';
@@ -40,7 +41,6 @@ import {
   Filter,
   createDocAccessor,
   fullyQualifiedId,
-  getRangeFromCursor,
   loadObjectReferences,
 } from '@dxos/react-client/echo';
 import { ScrollArea } from '@dxos/react-ui';
@@ -60,9 +60,10 @@ import {
 } from './components';
 import meta, { THREAD_ITEM, THREAD_PLUGIN } from './meta';
 import translations from './translations';
-import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
+import { ThreadAction, type ThreadProvides, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
 
 type ThreadState = {
+  /** An in-memory staging area for threads that are being drafted. */
   staging: Record<string, ThreadType[]>;
   current?: string | undefined;
   focus?: boolean;
@@ -72,6 +73,11 @@ type SubjectId = string;
 const initialViewState = { showResolvedThreads: false };
 type ViewStore = Record<SubjectId, typeof initialViewState>;
 
+// TODO(Zan): More robust runtime check.
+const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undefined =>
+  'thread' in plugin.provides ? (plugin as Plugin<ThreadProvides<any>>) : undefined;
+
+// TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
 export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
   const settings = new LocalStorageStore<ThreadSettingsProps>(THREAD_PLUGIN);
   const state = create<ThreadState>({ staging: {} });
@@ -197,7 +203,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 const [spaceId, objectId] = docId?.split(':') ?? [];
                 const space = client.spaces.get().find((space) => space.id === spaceId);
                 const doc = space?.db.getObjectById(objectId);
-
                 if (!doc || !docId) {
                   return;
                 }
@@ -223,7 +228,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               },
               actions: ({ node }) => {
                 const dataId = node.id.split('~').at(0);
-
                 if (!node.id.endsWith('~comments') || !dataId) {
                   return;
                 }
@@ -310,15 +314,15 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
             case 'article':
             case 'complementary': {
               const location = navigationPlugin?.provides.location;
+              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);
@@ -329,45 +333,41 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 return <ThreadArticle thread={data.object.threads[0]} />;
               }
 
-              if (data.subject instanceof DocumentType) {
-                const doc = data.subject;
-                const accessor = doc.content ? createDocAccessor(doc.content, ['content']) : undefined;
+              if (data.subject instanceof ThreadType) {
+                return (
+                  <>
+                    <ChatHeading attendableId={data.subject.id} />
+                    <ChatContainer thread={data.subject} />
+                  </>
+                );
+              }
 
-                if (!accessor) {
-                  return null;
+              if (
+                data.subject &&
+                typeof data.subject === 'object' &&
+                '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 getStartPosition = (cursor: string | undefined) => {
-                  const range = cursor ? getRangeFromCursor(accessor, cursor) : undefined;
-                  return range?.start ?? Number.MAX_SAFE_INTEGER;
-                };
-
-                const threads = doc.threads
-                  .concat(state.staging[data.subject.id])
-                  .filter(nonNullable)
-                  .sort((a, b) => getStartPosition(a.anchor) - getStartPosition(b.anchor));
-
                 const detached = data.subject.threads
                   .filter(nonNullable)
                   .filter(({ anchor }) => !anchor)
                   .map((thread) => thread.id);
 
-                const qualifiedSubjectId = fullyQualifiedId(doc);
+                const qualifiedSubjectId = fullyQualifiedId(data.subject);
                 const attention = attentionPlugin?.provides.attention?.attended ?? new Set([qualifiedSubjectId]);
                 const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-                const space = getSpace(doc);
                 const { showResolvedThreads } = getViewState(qualifiedSubjectId);
 
-                const dispatchAnalytic = (name: string, meta: any) => {
-                  void dispatch?.({
-                    action: ObservabilityAction.SEND_EVENT,
-                    data: {
-                      name,
-                      properties: { ...meta, space: space?.id },
-                    },
-                  });
-                };
-
                 return (
                   <div role='none' className='contents group/attention' {...attendableAttrs}>
                     {role === 'complementary' && <CommentsHeading attendableId={qualifiedSubjectId} />}
@@ -396,14 +396,14 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                             dispatch?.({
                               plugin: THREAD_PLUGIN,
                               action: ThreadAction.DELETE,
-                              data: { document: data.subject, thread },
+                              data: { subject: data.subject, thread },
                             })
                           }
                           onMessageDelete={(thread, messageId) =>
                             dispatch?.({
                               plugin: THREAD_PLUGIN,
                               action: ThreadAction.DELETE_MESSAGE,
-                              data: { document: data.subject, thread, messageId },
+                              data: { subject: data.subject, thread, messageId },
                             })
                           }
                           onThreadToggleResolved={(thread) =>
@@ -414,19 +414,9 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                             })
                           }
                           onComment={(thread) => {
-                            // TODO(Zan): This might be a bit too much logic for a component. Move to intents?
-                            const doc = data.subject as DocumentType;
-                            if (state.staging[doc.id]?.find((t) => t === thread)) {
-                              // Move thread from staging to document.
-                              thread.status = 'active';
-                              doc.threads ? doc.threads.push(thread) : (doc.threads = [thread]);
-                              state.staging[doc.id] = state.staging[doc.id]?.filter((t) => t.id !== thread.id);
-                              dispatchAnalytic('threads.thread-created', { threadId: thread.id });
-                            }
-
-                            dispatchAnalytic('threads.message-added', {
-                              threadId: thread.id,
-                              threadLength: thread.messages.length,
+                            void intentPlugin?.provides.intent.dispatch({
+                              action: ThreadAction.ON_MESSAGE_ADD,
+                              data: { thread, subject: data.subject },
                             });
                           }}
                         />
@@ -438,13 +428,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                     </ScrollArea.Root>
                   </div>
                 );
-              } else if (data.subject instanceof ThreadType) {
-                return (
-                  <>
-                    <ChatHeading attendableId={data.subject.id} />
-                    <ChatContainer thread={data.subject} />
-                  </>
-                );
               }
             }
           }
@@ -456,7 +439,49 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case ThreadAction.CREATE: {
-              return { data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }) };
+              if (intent.data && intent.data.cursor !== undefined) {
+                const { cursor, name, subject } = intent.data;
+
+                const subjectId = fullyQualifiedId(subject);
+                const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
+                const stagingArea = state.staging[subjectId];
+                if (stagingArea) {
+                  stagingArea.push(thread);
+                } else {
+                  state.staging[subjectId] = [thread];
+                }
+
+                return {
+                  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 },
+                      },
+                      {
+                        action: LayoutAction.SET_LAYOUT,
+                        data: {
+                          element: 'complementary',
+                          subject: subjectId,
+                          state: true,
+                        },
+                      },
+                    ],
+                  ],
+                };
+              } else {
+                // NOTE: This is the standalone thread creation case.
+                return { data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }) };
+              }
             }
 
             case ThreadAction.SELECT: {
@@ -493,32 +518,33 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
             }
 
             case ThreadAction.DELETE: {
-              const { document: doc, thread } = intent.data ?? {};
-              if (!(doc instanceof DocumentType) || !(thread instanceof ThreadType)) {
+              const { subject, thread } = intent.data ?? {};
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType)) {
                 return;
               }
 
-              const stagingArea = state.staging[doc.id];
+              const subjectId = fullyQualifiedId(subject);
+              const stagingArea = state.staging[subjectId];
               if (stagingArea) {
                 // Check if we're deleting a thread that's in the staging area.
                 // If so, remove it from the staging area without ceremony.
-                const index = state.staging[doc.id]?.findIndex((t) => t.id === thread.id);
+                const index = stagingArea.findIndex((t) => t.id === thread.id);
                 if (index !== -1) {
-                  state.staging[doc.id]?.splice(index, 1);
+                  stagingArea.splice(index, 1);
                   return;
                 }
               }
 
               const space = getSpace(thread);
-              if (!space || !doc.threads) {
+              if (!space || !subject.threads) {
                 return;
               }
 
               if (!intent.undo) {
-                const index = doc.threads.findIndex((t) => t?.id === thread.id);
-                const cursor = doc.threads[index]?.anchor;
+                const index = subject.threads.findIndex((t) => t?.id === thread.id);
+                const cursor = subject.threads[index]?.anchor;
                 if (index !== -1) {
-                  doc.threads?.splice(index, 1);
+                  subject.threads?.splice(index, 1);
                 }
 
                 space.db.remove(thread);
@@ -540,7 +566,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               } else if (intent.undo) {
                 // TODO(wittjosiah): SDK should do this automatically.
                 const savedThread = space.db.add(thread);
-                doc.threads.push(savedThread);
+                subject.threads.push(savedThread);
 
                 return {
                   data: true,
@@ -556,11 +582,52 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               }
               break;
             }
+
+            case ThreadAction.ON_MESSAGE_ADD: {
+              const { thread, subject } = intent.data ?? {};
+              if (
+                !(thread instanceof ThreadType) ||
+                !(subject && typeof subject === 'object' && 'threads' in subject)
+              ) {
+                return;
+              }
+
+              const subjectId = fullyQualifiedId(subject);
+              const space = getSpace(subject);
+              const intents = [];
+              const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
+
+              if (state.staging[subjectId]?.find((t) => t === thread)) {
+                // Move thread from staging to document.
+                thread.status = 'active';
+                subject.threads ? subject.threads.push(thread) : (subject.threads = [thread]);
+                state.staging[subjectId] = state.staging[subjectId]?.filter((t) => t.id !== thread.id);
+
+                intents.push({
+                  action: ObservabilityAction.SEND_EVENT,
+                  data: { name: 'threads.thread-created', properties: analyticsProperties },
+                });
+              }
+
+              intents.push({
+                action: ObservabilityAction.SEND_EVENT,
+                data: {
+                  name: 'threads.message-added',
+                  properties: { ...analyticsProperties, threadLength: thread.messages.length },
+                },
+              });
+
+              return {
+                data: thread,
+                intents: [intents],
+              };
+            }
+
             case ThreadAction.DELETE_MESSAGE: {
-              const { document: doc, thread, messageId } = intent.data ?? {};
-              const space = getSpace(doc);
+              const { subject, thread, messageId } = intent.data ?? {};
+              const space = getSpace(subject);
 
-              if (!(doc instanceof DocumentType) || !(thread instanceof ThreadType) || !space) {
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType) || !space) {
                 return;
               }
 
@@ -574,7 +641,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 if (messageIndex === 0 && thread.messages.length === 1) {
                   // If the message is the only message in the thread, delete the thread.
                   return {
-                    intents: [[{ action: ThreadAction.DELETE, data: { document: doc, thread } }]],
+                    intents: [[{ action: ThreadAction.DELETE, data: { subject, thread } }]],
                   };
                 } else {
                   thread.messages.splice(messageIndex, 1);
@@ -638,7 +705,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
 
           // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
           const threads = computed(() =>
-            [...doc.threads.filter(nonNullable), ...(state.staging[doc.id] ?? [])].filter(
+            [...doc.threads.filter(nonNullable), ...(state.staging[fullyQualifiedId(doc)] ?? [])].filter(
               (thread) => !(thread?.status === 'resolved'),
             ),
           );
@@ -673,43 +740,19 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               onCreate: ({ cursor }) => {
                 const [start, end] = cursor.split(':');
                 const name = doc.content && getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
-                const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
 
-                const stagingArea = state.staging[doc.id];
-                if (stagingArea) {
-                  stagingArea.push(thread);
-                } else {
-                  state.staging[doc.id] = [thread];
-                }
-
-                void intentPlugin?.provides.intent.dispatch([
-                  {
-                    action: NavigationAction.OPEN,
-                    data: {
-                      activeParts: {
-                        complementary: `${fullyQualifiedId(doc)}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`,
-                      },
-                    },
-                  },
-                  {
-                    action: ThreadAction.SELECT,
-                    data: { current: thread.id, focus: true },
-                  },
-                  {
-                    action: LayoutAction.SET_LAYOUT,
-                    data: {
-                      element: 'complementary',
-                      subject: doc,
-                      state: true,
-                    },
+                void intentPlugin?.provides.intent.dispatch({
+                  action: ThreadAction.CREATE,
+                  data: {
+                    cursor,
+                    name,
+                    subject: doc,
                   },
-                ]);
-
-                return thread.id;
+                });
               },
               onDelete: ({ id }) => {
                 // If the thread is in the staging area, remove it.
-                const stagingArea = state.staging[doc.id];
+                const stagingArea = state.staging[fullyQualifiedId(doc)];
                 if (stagingArea) {
                   const index = stagingArea.findIndex((thread) => thread.id === id);
                   if (index !== -1) {
@@ -724,7 +767,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               },
               onUpdate: ({ id, cursor }) => {
                 const thread =
-                  state.staging[doc.id]?.find((thread) => thread.id === id) ??
+                  state.staging[fullyQualifiedId(doc)]?.find((thread) => thread.id === 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/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 { 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));
@@ -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 },
 };