@dxos/plugin-thread 0.7.4 → 0.7.5-labs.5f04cf6

package/src/capabilities/app-graph-builder.ts

@@ -0,0 +1,120 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, type PluginsContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { createExtension, toSignal } from '@dxos/plugin-graph';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { memoizeQuery } from '@dxos/plugin-space';
+import { getTypename, parseId, SpaceState } from '@dxos/react-client/echo';
+
+import { ThreadCapabilities } from './capabilities';
+import { THREAD_PLUGIN } from '../meta';
+
+const type = 'orphan-comments-for-subject';
+const icon = 'ph--chat-text--regular';
+
+export default (context: PluginsContext) => {
+  const resolver = (typename: string) =>
+    context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
+
+  return contributes(
+    Capabilities.AppGraphBuilder,
+    createExtension({
+      id: `${THREAD_PLUGIN}/comments-for-subject`,
+      resolver: ({ id }) => {
+        // TODO(Zan): Find util (or make one).
+        if (!id.endsWith('~comments')) {
+          return;
+        }
+
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const [subjectId] = id.split('~');
+        const { spaceId, objectId } = parseId(subjectId);
+        const spaces = toSignal(
+          (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+          () => client.spaces.get(),
+        );
+        const space = spaces?.find((space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY);
+        if (!objectId) {
+          // TODO(wittjosiah): Support comments for arbitrary subjects.
+          //   This is to ensure that the comments panel is not stuck on an old object.
+          return {
+            id,
+            type,
+            data: null,
+            properties: {
+              icon,
+              label: ['unnamed object threads label', { ns: THREAD_PLUGIN }],
+              showResolvedThreads: false,
+              object: null,
+              space,
+            },
+          };
+        }
+
+        const [object] = memoizeQuery(space, { id: objectId });
+        if (!object || !subjectId) {
+          return;
+        }
+
+        const meta = resolver(getTypename(object) ?? '');
+        const label = meta.label?.(object) ||
+          object.name ||
+          meta.placeholder || ['unnamed object threads label', { ns: THREAD_PLUGIN }];
+
+        const { getViewState } = context.requestCapability(ThreadCapabilities.State);
+        const viewState = getViewState(subjectId);
+
+        return {
+          id,
+          type,
+          data: null,
+          properties: {
+            icon,
+            label,
+            showResolvedThreads: viewState.showResolvedThreads,
+            object,
+          },
+        };
+      },
+      actions: ({ node }) => {
+        const dataId = node.id.split('~').at(0);
+        if (!node.id.endsWith('~comments') || !dataId) {
+          return;
+        }
+
+        const [spaceId, objectId] = dataId.split(':');
+
+        const { getViewState } = context.requestCapability(ThreadCapabilities.State);
+        const viewState = getViewState(dataId);
+        const toggle = async () => {
+          const newToggleState = !viewState.showResolvedThreads;
+          viewState.showResolvedThreads = newToggleState;
+          const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+          await dispatch(
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'threads.toggle-show-resolved',
+              properties: { spaceId, threadId: objectId, showResolved: newToggleState },
+            }),
+          );
+        };
+
+        return [
+          {
+            id: `${THREAD_PLUGIN}/toggle-show-resolved/${node.id}`,
+            data: toggle,
+            properties: {
+              label: ['toggle show resolved', { ns: THREAD_PLUGIN }],
+              menuItemType: 'toggle',
+              isChecked: viewState.showResolvedThreads,
+              testId: 'threadPlugin.toggleShowResolved',
+              icon: viewState.showResolvedThreads ? 'ph--eye-slash--regular' : 'ph--eye--regular',
+            },
+          },
+        ];
+      },
+    }),
+  );
+};

package/src/capabilities/capabilities.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+import { type DeepReadonly } from '@dxos/util';
+
+import { THREAD_PLUGIN } from '../meta';
+import { type ViewState, type ThreadState } from '../types';
+
+export namespace ThreadCapabilities {
+  type GetViewState = (subjectId: string) => ViewState;
+  export const State = defineCapability<{ state: DeepReadonly<ThreadState>; getViewState: GetViewState }>(
+    `${THREAD_PLUGIN}/capability/state`,
+  );
+  export const MutableState = defineCapability<{ state: ThreadState; getViewState: GetViewState }>(
+    `${THREAD_PLUGIN}/capability/state`,
+  );
+}

package/src/capabilities/index.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const Markdown = lazy(() => import('./markdown'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+export const ThreadSettings = lazy(() => import('./settings'));
+export const ThreadState = lazy(() => import('./state'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,223 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  createResolver,
+  LayoutAction,
+  NavigationAction,
+  type PluginsContext,
+} from '@dxos/app-framework';
+import { Ref } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+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 { ThreadCapabilities } from './capabilities';
+import { THREAD_PLUGIN } from '../meta';
+import { ThreadAction } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver(ThreadAction.Create, ({ 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];
+        }
+
+        return {
+          data: { object: thread },
+          intents: [
+            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
+            createIntent(NavigationAction.Open, { activeParts: { complementary: 'comments' } }),
+            createIntent(LayoutAction.SetLayout, { element: 'complementary', state: true }),
+          ],
+        };
+      } else {
+        // NOTE: This is the standalone thread creation case.
+        return {
+          data: { object: create(ChannelType, { threads: [makeRef(create(ThreadType, { messages: [] }))] }) },
+        };
+      }
+    }),
+    createResolver(ThreadAction.Select, ({ current, skipOpen }) => {
+      const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      state.current = current;
+
+      return {
+        intents: !skipOpen
+          ? [createIntent(NavigationAction.Open, { activeParts: { complementary: 'comments' } })]
+          : undefined,
+      };
+    }),
+    createResolver(ThreadAction.ToggleResolved, ({ thread }) => {
+      if (thread.status === 'active' || thread.status === undefined) {
+        thread.status = 'resolved';
+      } else if (thread.status === 'resolved') {
+        thread.status = 'active';
+      }
+
+      const space = getSpace(thread);
+      const spaceId = space?.id;
+
+      return {
+        intents: [
+          createIntent(ObservabilityAction.SendEvent, {
+            name: 'threads.toggle-resolved',
+            properties: { threadId: thread.id, spaceId },
+          }),
+        ],
+      };
+    }),
+    createResolver(ThreadAction.Delete, ({ subject, thread }, undo) => {
+      const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      const subjectId = fullyQualifiedId(subject);
+      const draft = state.drafts[subjectId];
+      if (draft) {
+        // Check if we're deleting a draft; if so, remove it.
+        const index = draft.findIndex((t) => t.id === thread.id);
+        if (index !== -1) {
+          draft.splice(index, 1);
+          return;
+        }
+      }
+
+      const space = getSpace(thread);
+      if (!space || !subject.threads) {
+        return;
+      }
+
+      if (!undo) {
+        const index = subject.threads.findIndex((t: any) => t?.id === thread.id);
+        const cursor = subject.threads[index]?.anchor;
+        if (index !== -1) {
+          subject.threads?.splice(index, 1);
+        }
+
+        space.db.remove(thread);
+
+        return {
+          undoable: {
+            message: ['thread deleted label', { ns: THREAD_PLUGIN }],
+            data: { cursor },
+          },
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'threads.delete',
+              properties: { threadId: thread.id, spaceId: space.id },
+            }),
+          ],
+        };
+      } else {
+        // TODO(wittjosiah): SDK should do this automatically.
+        const savedThread = space.db.add(thread);
+        subject.threads.push(savedThread);
+
+        return {
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'threads.undo-delete',
+              properties: { threadId: thread.id, spaceId: space.id },
+            }),
+          ],
+        };
+      }
+    }),
+    createResolver(ThreadAction.OnMessageAdd, ({ thread, subject }) => {
+      const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      const subjectId = fullyQualifiedId(subject);
+      const space = getSpace(subject);
+      const intents = [];
+      const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
+
+      if (state.drafts[subjectId]?.find((t) => t === thread)) {
+        // Move draft to document.
+        thread.status = 'active';
+        subject.threads ? subject.threads.push(makeRef(thread)) : (subject.threads = [makeRef(thread)]);
+        state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
+        intents.push(
+          createIntent(ObservabilityAction.SendEvent, {
+            name: 'threads.thread-created',
+            properties: analyticsProperties,
+          }),
+        );
+      }
+
+      intents.push(
+        createIntent(ObservabilityAction.SendEvent, {
+          name: 'threads.message-added',
+          properties: { ...analyticsProperties, threadLength: thread.messages.length },
+        }),
+      );
+
+      return { intents };
+    }),
+    createResolver(ThreadAction.DeleteMessage, ({ subject, thread, messageId, message, messageIndex }, undo) => {
+      const space = getSpace(subject);
+
+      if (!undo) {
+        const messageIndex = thread.messages.findIndex(Ref.hasObjectId(messageId));
+        const message = thread.messages[messageIndex]?.target;
+        if (!message) {
+          return;
+        }
+
+        if (messageIndex === 0 && thread.messages.length === 1) {
+          // If the message is the only message in the thread, delete the thread.
+          return {
+            intents: [createIntent(ThreadAction.Delete, { subject, thread })],
+          };
+        } else {
+          thread.messages.splice(messageIndex, 1);
+        }
+
+        return {
+          undoable: {
+            message: ['message deleted label', { ns: THREAD_PLUGIN }],
+            data: { message, messageIndex },
+          },
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'threads.message.delete',
+              properties: { threadId: thread.id, spaceId: space?.id },
+            }),
+          ],
+        };
+      } else {
+        if (!messageIndex || !message) {
+          return;
+        }
+
+        thread.messages.splice(messageIndex, 0, makeRef(message));
+        return {
+          intents: [
+            createIntent(ObservabilityAction.SendEvent, {
+              name: 'threads.message.undo-delete',
+              properties: { threadId: thread.id, spaceId: space?.id },
+            }),
+          ],
+        };
+      }
+    }),
+  ]);

package/src/capabilities/markdown.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown';
+
+import { ThreadCapabilities } from './capabilities';
+import { threads } from '../extensions';
+
+export default (context: PluginsContext) =>
+  contributes(MarkdownCapabilities.Extensions, [
+    ({ document: doc }) => {
+      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+      const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      return threads(state, doc, dispatch);
+    },
+  ]);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface, isLayoutParts, useCapability } from '@dxos/app-framework';
+import { type Ref } from '@dxos/echo-schema';
+import { ChannelType, type ThreadType } from '@dxos/plugin-space/types';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { ThreadContainer, ThreadComplementary, ThreadSettings } from '../components';
+import { THREAD_PLUGIN } from '../meta';
+import { type ThreadSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${THREAD_PLUGIN}/channel`,
+      role: 'article',
+      filter: (data): data is { subject: ChannelType } =>
+        data.subject instanceof ChannelType && !!data.subject.threads[0],
+      component: ({ data, role }) => {
+        const location = useCapability(Capabilities.Location);
+        const channel = data.subject;
+        const thread = channel.threads[0].target!;
+        // 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(channel)?.db.getObjectById(objectToTheLeft.id);
+            return <ThreadContainer role={role} thread={thread} context={context} />;
+          }
+        }
+
+        return <ThreadContainer role={role} thread={thread} />;
+      },
+    }),
+    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} />,
+    }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/settings`,
+      role: 'settings',
+      filter: (data): data is any => data.subject === THREAD_PLUGIN,
+      component: () => {
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ThreadSettingsProps>(THREAD_PLUGIN)!.value;
+        return <ThreadSettings settings={settings} />;
+      },
+    }),
+  ]);

package/src/capabilities/settings.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { THREAD_PLUGIN } from '../meta';
+import { type ThreadSettingsProps, ThreadSettingsSchema } from '../types';
+
+export default () => {
+  const settings = create<ThreadSettingsProps>({});
+  return contributes(Capabilities.Settings, { schema: ThreadSettingsSchema, prefix: THREAD_PLUGIN, value: settings });
+};

package/src/capabilities/state.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { ThreadCapabilities } from './capabilities';
+import { type ThreadState, type ViewStore } from '../types';
+
+const initialViewState = { showResolvedThreads: false };
+
+export default () => {
+  const state = create<ThreadState>({ drafts: {} });
+  const viewStore = create<ViewStore>({});
+
+  const getViewState = (subjectId: string) => {
+    if (!viewStore[subjectId]) {
+      viewStore[subjectId] = { ...initialViewState };
+    }
+    return viewStore[subjectId];
+  };
+
+  return contributes(ThreadCapabilities.State, { state, getViewState });
+};

package/src/components/Chat.stories.tsx

@@ -7,13 +7,14 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { SurfaceProvider } from '@dxos/app-framework';
-import { ThreadType } from '@dxos/plugin-space/types';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { MessageType, 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 { useIdentity } from '@dxos/react-client/halo';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 import { Thread } from '@dxos/react-ui-thread';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -46,22 +47,10 @@ const Story = () => {
   }
 
   return (
-    <SurfaceProvider
-      value={{
-        components: {
-          ObjectMessage: ({ role }) => {
-            return <span>{JSON.stringify({ role })}</span>;
-          },
-        },
-      }}
-    >
-      <Mosaic.Root debug>
-        <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>
-          {space && <ChatContainer thread={thread} />}
-        </main>
-        <Mosaic.DragOverlay />
-      </Mosaic.Root>
-    </SurfaceProvider>
+    <Mosaic.Root debug>
+      <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>{space && <ChatContainer thread={thread} />}</main>
+      <Mosaic.DragOverlay />
+    </Mosaic.Root>
   );
 };
 
@@ -70,9 +59,24 @@ export const Default = {};
 const meta: Meta = {
   title: 'plugins/plugin-thread/Chat',
   component: Thread,
-  // TODO(burdon): Use decorator.
-  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType]} />,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  render: () => <Story />,
+  decorators: [
+    withPluginManager({
+      capabilities: [
+        contributes(
+          Capabilities.ReactSurface,
+          createSurface({
+            id: 'test',
+            role: 'card',
+            component: ({ role }) => <span>{JSON.stringify({ role })}</span>,
+          }),
+        ),
+      ],
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+    withClientProvider({ createSpace: true, types: [ThreadType, MessageType] }),
+  ],
   parameters: { translations },
 };
 

package/src/components/ChatContainer.tsx

@@ -4,16 +4,16 @@
 
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
-import { create } from '@dxos/live-object';
+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 { fullyQualifiedId, getSpace, useMembers, type Expando } 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 { nonNullable } from '@dxos/util';
 
 import { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
@@ -77,12 +77,14 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
     }
 
     thread.messages.push(
-      create(MessageType, {
-        sender: { identityKey: identity.identityKey.toHex() },
-        timestamp: new Date().toISOString(),
-        text: messageRef.current,
-        context,
-      }),
+      makeRef(
+        create(MessageType, {
+          sender: { identityKey: identity.identityKey.toHex() },
+          timestamp: new Date().toISOString(),
+          text: messageRef.current,
+          context: makeRef(context as Expando),
+        }),
+      ),
     );
 
     messageRef.current = '';
@@ -93,7 +95,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   };
 
   const handleDelete = (id: string) => {
-    const messageIndex = thread.messages.filter(nonNullable).findIndex((message) => message.id === id);
+    const messageIndex = thread.messages.findIndex(Ref.hasObjectId(id));
     if (messageIndex !== -1) {
       thread.messages.splice(messageIndex, 1);
     }
@@ -108,7 +110,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
       <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')}>
-            {thread.messages.filter(nonNullable).map((message) => (
+            {RefArray.allResolvedTargets(thread.messages ?? []).map((message) => (
               <MessageContainer key={message.id} message={message} members={members} onDelete={handleDelete} />
             ))}
           </div>