@dxos/plugin-thread 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

package/src/capabilities/intent-resolver.ts

@@ -2,19 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import {
-  Capabilities,
-  contributes,
-  createIntent,
-  createResolver,
-  LayoutAction,
-  type PluginsContext,
-} from '@dxos/app-framework';
-import { Ref } from '@dxos/echo-schema';
+import { Capabilities, contributes, createIntent, createResolver, type PluginsContext } from '@dxos/app-framework';
+import { ObjectId, Ref } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { DXN, QueueSubspaceTags } from '@dxos/keys';
+import { refFromDXN } from '@dxos/live-object';
 import { log } from '@dxos/log';
+import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { ChannelType, ThreadType } from '@dxos/plugin-space/types';
 import { create, fullyQualifiedId, getSpace, makeRef } from '@dxos/react-client/echo';
+import { MessageType } from '@dxos/schema';
 
 import { ThreadCapabilities } from './capabilities';
 import { THREAD_PLUGIN } from '../meta';
@@ -22,57 +20,58 @@ import { ThreadAction } from '../types';
 
 export default (context: PluginsContext) =>
   contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: ThreadAction.CreateChannel,
+      resolve: ({ spaceId, name }) => ({
+        data: {
+          object: create(ChannelType, {
+            name,
+            queue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, spaceId, ObjectId.random()])),
+          }),
+        },
+      }),
+    }),
     createResolver({
       intent: ThreadAction.Create,
       resolve: ({ name, cursor, subject }) => {
-        if (cursor && subject) {
-          // 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 (err) {
-              log.error('Subject does not support threads array', { typename: subject?.typename });
-              return;
-            }
-          }
-
-          const { state } = context.requestCapability(ThreadCapabilities.MutableState);
-          const subjectId = fullyQualifiedId(subject);
-          const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
-          const draft = state.drafts[subjectId];
-          if (draft) {
-            draft.push(thread);
-          } else {
-            state.drafts[subjectId] = [thread];
+        // 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 (err) {
+            log.error('Subject does not support threads array', { typename: subject?.typename });
+            return;
           }
+        }
 
-          return {
-            data: { object: thread },
-            intents: [
-              createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
-              createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: 'comments' }),
-            ],
-          };
+        const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+        const subjectId = fullyQualifiedId(subject);
+        const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
+        const draft = state.drafts[subjectId];
+        if (draft) {
+          draft.push(thread);
         } else {
-          // TODO(wittjosiah): Create separate intent for channel creation.
-          return {
-            data: { object: create(ChannelType, { threads: [makeRef(create(ThreadType, { messages: [] }))] }) },
-          };
+          state.drafts[subjectId] = [thread];
         }
+
+        return {
+          data: { object: thread },
+          intents: [
+            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
+            createIntent(DeckAction.ChangeCompanion, {
+              primary: subjectId,
+              companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
+            }),
+          ],
+        };
       },
     }),
     createResolver({
       intent: ThreadAction.Select,
-      resolve: ({ current, skipOpen }) => {
+      resolve: ({ current }) => {
         const { state } = context.requestCapability(ThreadCapabilities.MutableState);
         state.current = current;
-
-        return {
-          intents: !skipOpen
-            ? [createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: 'comments' })]
-            : undefined,
-        };
       },
     }),
     createResolver({
@@ -85,13 +84,17 @@ export default (context: PluginsContext) =>
         }
 
         const space = getSpace(thread);
-        const spaceId = space?.id;
+        invariant(space, 'Space not found');
+        const spaceId = space.id;
 
         return {
           intents: [
             createIntent(ObservabilityAction.SendEvent, {
               name: 'threads.toggle-resolved',
-              properties: { threadId: thread.id, spaceId },
+              properties: {
+                spaceId,
+                threadId: thread.id,
+              },
             }),
           ],
         };
@@ -134,7 +137,10 @@ export default (context: PluginsContext) =>
             intents: [
               createIntent(ObservabilityAction.SendEvent, {
                 name: 'threads.delete',
-                properties: { threadId: thread.id, spaceId: space.id },
+                properties: {
+                  spaceId: space.id,
+                  threadId: thread.id,
+                },
               }),
             ],
           };
@@ -147,7 +153,10 @@ export default (context: PluginsContext) =>
             intents: [
               createIntent(ObservabilityAction.SendEvent, {
                 name: 'threads.undo-delete',
-                properties: { threadId: thread.id, spaceId: space.id },
+                properties: {
+                  spaceId: space.id,
+                  threadId: thread.id,
+                },
               }),
             ],
           };
@@ -155,13 +164,22 @@ export default (context: PluginsContext) =>
       },
     }),
     createResolver({
-      intent: ThreadAction.OnMessageAdd,
-      resolve: ({ thread, subject }) => {
+      intent: ThreadAction.AddMessage,
+      resolve: ({ thread, subject, sender, text }) => {
         const { state } = context.requestCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
         const space = getSpace(subject);
+        invariant(space, 'Space not found');
         const intents = [];
-        const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
+
+        const message = create(MessageType, {
+          sender,
+          created: new Date().toISOString(),
+          blocks: [{ type: 'text', text }],
+          // TODO(wittjosiah): Context based on attention.
+          // context: context ? makeRef(context) : undefined,
+        });
+        thread.messages.push(makeRef(message));
 
         if (state.drafts[subjectId]?.find((t) => t === thread)) {
           // Move draft to document.
@@ -170,16 +188,25 @@ export default (context: PluginsContext) =>
           state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
           intents.push(
             createIntent(ObservabilityAction.SendEvent, {
-              name: 'threads.thread-created',
-              properties: analyticsProperties,
+              name: 'threads.create',
+              properties: {
+                spaceId: space.id,
+                threadId: thread.id,
+              },
             }),
           );
         }
 
         intents.push(
           createIntent(ObservabilityAction.SendEvent, {
-            name: 'threads.message-added',
-            properties: { ...analyticsProperties, threadLength: thread.messages.length },
+            name: 'threads.message.add',
+            properties: {
+              spaceId: space.id,
+              threadId: thread.id,
+              threadLength: thread.messages.length,
+              messageId: message.id,
+              messageLength: text.length,
+            },
           }),
         );
 
@@ -190,6 +217,7 @@ export default (context: PluginsContext) =>
       intent: ThreadAction.DeleteMessage,
       resolve: ({ subject, thread, messageId, message, messageIndex }, undo) => {
         const space = getSpace(subject);
+        invariant(space, 'Space not found');
 
         if (!undo) {
           const messageIndex = thread.messages.findIndex(Ref.hasObjectId(messageId));
@@ -215,12 +243,16 @@ export default (context: PluginsContext) =>
             intents: [
               createIntent(ObservabilityAction.SendEvent, {
                 name: 'threads.message.delete',
-                properties: { threadId: thread.id, spaceId: space?.id },
+                properties: {
+                  spaceId: space.id,
+                  threadId: thread.id,
+                  messageId: message.id,
+                },
               }),
             ],
           };
         } else {
-          if (!messageIndex || !message) {
+          if (messageIndex === undefined || !message) {
             return;
           }
 
@@ -229,7 +261,11 @@ export default (context: PluginsContext) =>
             intents: [
               createIntent(ObservabilityAction.SendEvent, {
                 name: 'threads.message.undo-delete',
-                properties: { threadId: thread.id, spaceId: space?.id },
+                properties: {
+                  spaceId: space.id,
+                  threadId: thread.id,
+                  messageId: message.id,
+                },
               }),
             ],
           };

package/src/capabilities/react-surface.tsx

@@ -6,11 +6,12 @@ import React from 'react';
 
 import { Capabilities, contributes, createSurface, useLayout } from '@dxos/app-framework';
 import { type Ref } from '@dxos/echo-schema';
+import { DXN } from '@dxos/keys';
 import { SettingsStore } from '@dxos/local-storage';
 import { ChannelType, type ThreadType } from '@dxos/plugin-space/types';
-import { getSpace } from '@dxos/react-client/echo';
+import { getSpace, isSpace, type Space } from '@dxos/react-client/echo';
 
-import { ThreadContainer, ThreadComplementary, ThreadSettings } from '../components';
+import { ChatContainer, ThreadComplementary, ThreadSettings } from '../components';
 import { THREAD_PLUGIN } from '../meta';
 import { type ThreadSettingsProps } from '../types';
 
@@ -19,40 +20,41 @@ export default () =>
     createSurface({
       id: `${THREAD_PLUGIN}/channel`,
       role: 'article',
-      filter: (data): data is { subject: ChannelType } =>
-        data.subject instanceof ChannelType && !!data.subject.threads[0],
-      component: ({ data, role }) => {
+      filter: (data): data is { subject: ChannelType } => data.subject instanceof ChannelType,
+      component: ({ data: { subject: channel }, role }) => {
         const layout = useLayout();
-        const channel = data.subject;
-        void channel.threads[0].load();
-        const thread = channel.threads[0].target;
-        if (!thread) {
-          return null;
-        }
-
         const currentPosition = layout.active.findIndex((id) => id === channel.id);
-        if (currentPosition > 0) {
-          const objectToTheLeft = layout.active[currentPosition - 1];
-          const context = getSpace(channel)?.db.getObjectById(objectToTheLeft);
-          return <ThreadContainer role={role} thread={thread} context={context} />;
+        const objectToTheLeft = layout.active[currentPosition - 1];
+        const context = currentPosition > 0 ? getSpace(channel)?.db.getObjectById(objectToTheLeft) : undefined;
+        const space = getSpace(channel);
+        if (!space) {
+          return null;
         }
 
-        return <ThreadContainer role={role} thread={thread} />;
+        return <ChatContainer space={space} dxn={channel.queue.dxn} context={context} />;
       },
     }),
     createSurface({
-      id: `${THREAD_PLUGIN}/thread`,
-      role: 'complementary--comments',
-      filter: (data): data is { subject: { threads: Ref<ThreadType>[] } } =>
-        !!data.subject &&
-        typeof data.subject === 'object' &&
-        'threads' in data.subject &&
-        Array.isArray(data.subject.threads) &&
-        !(data.subject instanceof ChannelType),
-      component: ({ data }) => <ThreadComplementary subject={data.subject} />,
+      id: `${THREAD_PLUGIN}/comments`,
+      role: 'article',
+      filter: (data): data is { companionTo: { threads: Ref<ThreadType>[] } } =>
+        data.subject === 'comments' &&
+        !!data.companionTo &&
+        typeof data.companionTo === 'object' &&
+        'threads' in data.companionTo &&
+        Array.isArray(data.companionTo.threads),
+      // TODO(wittjosiah): This isn't scrolling properly in a plank.
+      component: ({ data }) => <ThreadComplementary subject={data.companionTo} />,
+    }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/tabpanel`,
+      role: 'tabpanel',
+      filter: (data): data is { subject: DXN; space: Space } =>
+        data.subject instanceof DXN && data.type === 'chat' && isSpace(data.space),
+      component: ({ data: { subject: dxn, space } }) => <ChatContainer dxn={dxn} space={space} />,
     }),
     createSurface({
-      id: `${THREAD_PLUGIN}/settings`,
+      id: `${THREAD_PLUGIN}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<ThreadSettingsProps> } =>
         data.subject instanceof SettingsStore && data.subject.prefix === THREAD_PLUGIN,

package/src/capabilities/state.ts

@@ -11,7 +11,7 @@ import { type ThreadState, type ViewStore } from '../types';
 const initialViewState = { showResolvedThreads: false };
 
 export default () => {
-  const state = create<ThreadState>({ drafts: {} });
+  const state = create<ThreadState>({ activities: {}, drafts: {} });
   const viewStore = create<ViewStore>({});
 
   const getViewState = (subjectId: string) => {

package/src/components/Chat.stories.tsx

@@ -7,19 +7,22 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface, IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { MessageType, ThreadType } from '@dxos/plugin-space/types';
+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 { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
+import { create, 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 { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ChatContainer } from './ChatContainer';
-import { createChatThread } from './testing';
 import translations from '../translations';
 
 faker.seed(1);
@@ -28,25 +31,31 @@ const Story = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [thread, setThread] = useState<ThreadType | null>();
+  const [channel, setChannel] = useState<ChannelType | null>();
 
   useEffect(() => {
     if (identity) {
       setTimeout(async () => {
         const space = await client.spaces.create();
-        const thread = space.db.add(createChatThread(identity));
+        const channel = space.db.add(
+          create(ChannelType, {
+            queue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, space.id, ObjectId.random()])),
+          }),
+        );
         setSpace(space);
-        setThread(thread);
+        setChannel(channel);
       });
     }
   }, [identity]);
 
-  if (!identity || !thread) {
+  if (!identity || !channel || !space) {
     return null;
   }
 
   return (
-    <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>{space && <ChatContainer thread={thread} />}</main>
+    <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>
+      <ChatContainer space={space} dxn={channel.queue.dxn} />
+    </main>
   );
 };
 
@@ -58,6 +67,7 @@ const meta: Meta = {
   render: () => <Story />,
   decorators: [
     withPluginManager({
+      plugins: [IntentPlugin()],
       capabilities: [
         contributes(
           Capabilities.ReactSurface,

package/src/components/ChatContainer.tsx

@@ -4,16 +4,17 @@
 
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
-import { Ref } from '@dxos/echo-schema';
-import { create, makeRef, RefArray } from '@dxos/live-object';
-import { MessageType } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
+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 { 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 { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
@@ -34,11 +35,17 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: ThreadContainerProps) => {
+export type ChatContainerProps = Omit<ThreadContainerProps, 'thread'> & {
+  space: Space;
+  dxn: DXN;
+};
+
+export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }: ChatContainerProps) => {
+  const id = dxn.toString();
   const identity = useIdentity()!;
-  const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, fullyQualifiedId(thread));
+  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.
   const [_count, _setCount] = useState(0);
@@ -47,7 +54,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
   const { themeMode } = useThemeContext();
 
-  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
+  const textboxMetadata = getMessageMetadata(id, identity);
   const messageRef = useRef('');
   const extensions = useMemo(
     () => [
@@ -72,20 +79,18 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
 
   // TODO(burdon): Change to model.
   const handleCreate: MessageTextboxProps['onSend'] = () => {
-    if (!messageRef.current?.length) {
+    if (!messageRef.current?.length || !queue) {
       return false;
     }
 
-    thread.messages.push(
-      makeRef(
-        create(MessageType, {
-          sender: { identityKey: identity.identityKey.toHex() },
-          timestamp: new Date().toISOString(),
-          text: messageRef.current,
-          context: context ? makeRef(context) : undefined,
-        }),
-      ),
-    );
+    queue.append([
+      createStatic(MessageType, {
+        sender: { identityDid: identity.did },
+        created: new Date().toISOString(),
+        blocks: [{ type: 'text', text: messageRef.current }],
+        properties: context ? { context: makeRef(context) } : undefined,
+      }),
+    ]);
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -94,24 +99,17 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
     return true;
   };
 
-  const handleDelete = (id: string) => {
-    const messageIndex = thread.messages.findIndex(Ref.hasObjectId(id));
-    if (messageIndex !== -1) {
-      thread.messages.splice(messageIndex, 1);
-    }
-  };
-
   return (
     <Thread
       current={current}
-      id={fullyQualifiedId(thread)}
+      id={id}
       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'>
         <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')}>
-            {RefArray.allResolvedTargets(thread.messages ?? []).map((message) => (
-              <MessageContainer key={message.id} message={message} members={members} onDelete={handleDelete} />
+            {(queue?.items ?? []).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. */}
@@ -126,3 +124,5 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
     </Thread>
   );
 };
+
+export default ChatContainer;

package/src/components/CommentContainer.tsx

@@ -179,8 +179,14 @@ export const CommentContainer = ({
         </div>
       </div>
       {/** TODO(dmaretskyi): How's `thread.messages` undefined? */}
-      {RefArray.allResolvedTargets(thread.messages?.filter(isNonNullable) ?? []).map((message) => (
-        <MessageContainer key={message.id} message={message} members={members} onDelete={handleMessageDelete} />
+      {RefArray.targets(thread.messages?.filter(isNonNullable) ?? []).map((message) => (
+        <MessageContainer
+          key={message.id}
+          editable
+          message={message}
+          members={members}
+          onDelete={handleMessageDelete}
+        />
       ))}
       {/*
         TODO(wittjosiah): Can't autofocus this generally.

package/src/components/Comments.stories.tsx

@@ -9,11 +9,12 @@ import React, { useEffect, useState } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { MessageType, ThreadType } from '@dxos/plugin-space/types';
+import { ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { Filter, fullyQualifiedId, 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 { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CommentsContainer } from './CommentsContainer';