@dxos/plugin-thread 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -0,0 +1,131 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useState, type CSSProperties, type PropsWithChildren } from 'react';
+
+import { Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Waveform } from '@dxos/react-ui-sfx';
+import { hoverableHidden, mx } from '@dxos/react-ui-theme';
+
+import { THREAD_PLUGIN } from '../../meta';
+
+export type ResponsiveGridItemProps<T extends object = any> = PropsWithChildren<
+  ThemedClassName<{
+    item: T;
+    style?: CSSProperties;
+    pinned?: boolean;
+    name?: string;
+    self?: boolean;
+    screenshare?: boolean;
+    video?: boolean;
+    mute?: boolean;
+    wave?: boolean;
+    speaking?: boolean;
+    debug?: boolean;
+    onClick?: (item: T) => void;
+  }>
+>;
+
+/**
+ * Cell container.
+ */
+export const ResponsiveGridItem = <T extends object = any>({
+  children,
+  classNames,
+  item,
+  style,
+  name,
+  self,
+  pinned,
+  screenshare,
+  video,
+  mute,
+  wave,
+  speaking,
+  onClick,
+}: ResponsiveGridItemProps<T>) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
+    wave: {
+      icon: 'ph--hand-waving--duotone',
+      label: t('icon wave'),
+      classNames: 'animate-pulse bg-orange-500',
+    },
+    mute: {
+      icon: 'ph--microphone-slash--regular',
+      label: t('icon muted'),
+    },
+  };
+
+  const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : undefined;
+
+  // Debounce speaking indicator.
+  const [speakingIndicator, setSpeakingIndicator] = useState(speaking);
+  useEffect(() => {
+    if (speaking) {
+      setSpeakingIndicator(true);
+    } else {
+      const timeout = setTimeout(() => {
+        setSpeakingIndicator(false);
+      }, 1_000);
+      return () => clearTimeout(timeout);
+    }
+  }, [speaking]);
+
+  return (
+    <div
+      className={mx(
+        'relative w-full h-full group',
+        'rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500',
+        speakingIndicator ? 'outline-green-500' : !video && 'outline-separator',
+        classNames,
+      )}
+      style={style}
+    >
+      {children}
+
+      {/* Action. */}
+      {onClick && (
+        <div className='z-10 absolute top-1 right-1 flex'>
+          <IconButton
+            classNames={mx('p-1 min-bs-1 rounded', hoverableHidden)}
+            iconOnly
+            icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
+            size={pinned ? 5 : 4}
+            label={pinned ? t('icon unpin') : t('icon pin')}
+            onClick={() => onClick?.(item)}
+          />
+        </div>
+      )}
+
+      {/* Name. */}
+      {name && (
+        <div className='z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center'>
+          {/* TODO(burdon): Replace with avatar for everyone. */}
+          {/* {self && <Icon icon='ph--asterisk--regular' size={pinned ? 5 : 4} />} */}
+          {screenshare && <Icon icon='ph--broadcast--regular' size={pinned ? 5 : 4} />}
+          <div
+            className={mx('bg-neutral-800 text-neutral-100 py-0.5 truncate rounded', pinned ? 'px-2' : 'px-1 text-xs')}
+          >
+            {name}
+          </div>
+        </div>
+      )}
+
+      {/* Activity. */}
+      <div className='z-10 absolute bottom-1 left-1 flex'>
+        {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
+          (props && (
+            <IconButton
+              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
+              icon={props?.icon}
+              label={props?.label}
+              size={pinned ? 5 : 4}
+              iconOnly
+            />
+          ))}
+      </div>
+    </div>
+  );
+};

package/src/components/ResponsiveGrid/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ResponsiveContainer';
+export * from './ResponsiveGrid';
+export * from './ResponsiveGridItem';

package/src/components/ThreadComplementary.tsx

@@ -2,30 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo } from 'react';
-
-import { createIntent, LayoutAction, useCapability, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
-import { ThreadCapabilities } from '@dxos/plugin-space';
-import { type ThreadType } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, RefArray } from '@dxos/react-client/echo';
+import React, { useCallback, useMemo } from 'react';
+
+import {
+  createIntent,
+  LayoutAction,
+  useCapability,
+  useCapabilities,
+  useIntentDispatcher,
+  Capabilities,
+} from '@dxos/app-framework';
+import { Filter, getTypename, isInstanceOf, Query, RelationSourceId } from '@dxos/echo-schema';
+import { fullyQualifiedId, getSpace, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { StackItem } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { isNonNullable } from '@dxos/util';
+import { AnchoredTo } from '@dxos/schema';
 
-import { ThreadCapabilities as LocalThreadCapabilities } from '../capabilities';
+import { ThreadCapabilities } from '../capabilities';
 import { CommentsContainer } from '../components';
 import { THREAD_PLUGIN } from '../meta';
-import { ThreadAction } from '../types';
+import { ThreadAction, ThreadType } from '../types';
 
 export const ThreadComplementary = ({ subject }: { subject: any }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const identity = useIdentity();
   const { t } = useTranslation(THREAD_PLUGIN);
 
-  const { state, getViewState } = useCapability(LocalThreadCapabilities.MutableState);
+  const { state, getViewState } = useCapability(ThreadCapabilities.MutableState);
   const viewState = getViewState(fullyQualifiedId(subject));
   const { showResolvedThreads } = viewState;
   const onChangeViewState = useCallback(
@@ -36,36 +42,24 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
   );
   const drafts = state.drafts[fullyQualifiedId(subject)];
 
-  const threadsIntegrators = useCapabilities(ThreadCapabilities.Thread);
-  const createSort = useMemo(
-    () => threadsIntegrators.find((p) => p.predicate(subject))?.createSort,
-    [threadsIntegrators, subject],
-  );
-  const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
-
-  const threadObjects = RefArray.targets(subject.threads ?? []);
+  const anchorSorts = useCapabilities(Capabilities.AnchorSort);
+  const sort = useMemo(() => anchorSorts.find(({ key }) => key === getTypename(subject))?.sort, [anchorSorts, subject]);
 
-  const threads = useMemo(() => {
-    return threadObjects.concat(drafts ?? []).filter(isNonNullable) as ThreadType[];
-  }, [JSON.stringify(threadObjects), JSON.stringify(drafts)]);
-
-  const detachedIds = useMemo(() => {
-    return threads.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId(thread));
-  }, [threads]);
-
-  useEffect(() => {
-    if (!sort) {
-      return;
-    }
-    threads.sort((a, b) => sort(a?.anchor, b?.anchor));
-  }, [sort, threads]);
+  const space = getSpace(subject);
+  const objectsAnchoredTo = useQuery(space, Query.select(Filter.ids(subject.id)).targetOf(AnchoredTo));
+  const anchors = objectsAnchoredTo
+    .toSorted((a, b) => sort?.(a, b) ?? 0)
+    .filter((anchor) => isInstanceOf(ThreadType, anchor[RelationSourceId]))
+    .concat(drafts ?? []);
 
   const attended = useAttended();
   const qualifiedSubjectId = fullyQualifiedId(subject);
 
   const handleAttend = useCallback(
-    (thread: ThreadType) => {
+    (anchor: AnchoredTo) => {
+      const thread = anchor[RelationSourceId] as ThreadType;
       const threadId = fullyQualifiedId(thread);
+
       if (state.current !== threadId) {
         state.current = threadId;
 
@@ -77,7 +71,7 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
             part: 'current',
             subject: fullyQualifiedId(subject),
             options: {
-              cursor: thread.anchor,
+              cursor: anchor.anchor,
               ref: threadId,
             },
           }),
@@ -88,36 +82,37 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
   );
 
   const handleComment = useCallback(
-    async (thread: ThreadType, text: string) => {
+    async (anchor: AnchoredTo, text: string) => {
       await dispatch(
-        createIntent(ThreadAction.AddMessage, { thread, subject, sender: { identityDid: identity?.did }, text }),
+        createIntent(ThreadAction.AddMessage, { anchor, subject, sender: { identityDid: identity?.did }, text }),
       );
 
+      const thread = anchor[RelationSourceId] as ThreadType;
       state.current = fullyQualifiedId(thread);
     },
     [dispatch, identity, subject],
   );
 
   const handleResolve = useCallback(
-    (thread: ThreadType) => dispatch(createIntent(ThreadAction.ToggleResolved, { thread })),
+    (anchor: AnchoredTo) =>
+      dispatch(createIntent(ThreadAction.ToggleResolved, { thread: anchor[RelationSourceId] as ThreadType })),
     [dispatch],
   );
 
   const handleThreadDelete = useCallback(
-    (thread: ThreadType) => dispatch(createIntent(ThreadAction.Delete, { thread, subject })),
+    (anchor: AnchoredTo) => dispatch(createIntent(ThreadAction.Delete, { anchor, subject })),
     [dispatch, subject],
   );
 
   const handleMessageDelete = useCallback(
-    (thread: ThreadType, messageId: string) =>
-      dispatch(createIntent(ThreadAction.DeleteMessage, { thread, subject, messageId })),
+    (anchor: AnchoredTo, messageId: string) =>
+      dispatch(createIntent(ThreadAction.DeleteMessage, { anchor, subject, messageId })),
     [dispatch, subject],
   );
 
   const comments = (
     <CommentsContainer
-      threads={threads}
-      detached={detachedIds}
+      anchors={anchors}
       currentId={attended.includes(qualifiedSubjectId) ? state.current : undefined}
       showResolvedThreads={showResolvedThreads}
       onAttend={handleAttend}

package/src/components/index.ts

@@ -4,9 +4,13 @@
 
 import { lazy } from 'react';
 
+export const ChannelContainer = lazy(() => import('./ChannelContainer'));
 export const ChatContainer = lazy(() => import('./ChatContainer'));
 
 // TODO(wittjosiah): Suspense boundary for sidebar?
+export * from './Call';
+export * from './CallDebugPanel';
+export * from './CallSidebar';
 export * from './CommentContainer';
 export * from './CommentsContainer';
 export * from './MessageContainer';

package/src/components/testing.ts

@@ -4,17 +4,18 @@
 
 import { IdentityDid } from '@dxos/keys';
 import { live, makeRef } from '@dxos/live-object';
-import { ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Identity } from '@dxos/react-client/halo';
-import { MessageType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
+
+import { ThreadType } from '../types';
 
 export const createCommentThread = (identity: Identity) => {
   return live(ThreadType, {
     messages: faker.helpers.multiple(
       () =>
         makeRef(
-          live(MessageType, {
+          live(DataType.Message, {
             sender: {
               identityDid: faker.datatype.boolean() ? identity.did : IdentityDid.random(),
             },

package/src/extensions/threads.ts

@@ -7,14 +7,13 @@ import { EditorView } from '@codemirror/view';
 import { computed, effect } from '@preact/signals-core';
 
 import { createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { Ref } from '@dxos/echo-schema';
-import { RefArray } from '@dxos/live-object';
+import { Filter, isInstanceOf, Query, RelationSourceId } from '@dxos/echo-schema';
 import { type DocumentType } from '@dxos/plugin-markdown/types';
-import { ThreadType } from '@dxos/plugin-space/types';
-import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId, getSource } from '@dxos/react-client/echo';
 import { comments, createExternalCommentSync } from '@dxos/react-ui-editor';
+import { AnchoredTo } from '@dxos/schema';
 
-import { ThreadAction, type ThreadState } from '../types';
+import { ThreadAction, ThreadType, type ThreadState } from '../types';
 
 // TODO(burdon): Factor out.
 const getName = (doc: DocumentType, anchor: string): string | undefined => {
@@ -35,21 +34,33 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
     return [comments()];
   }
 
-  // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
-  const threads = computed(() =>
-    [...RefArray.targets(doc.threads), ...(state.drafts[fullyQualifiedId(doc)] ?? [])].filter(
-      (thread) => !(thread?.status === 'resolved'),
-    ),
+  const query = space.db.query(Query.select(Filter.ids(doc.id)).targetOf(AnchoredTo));
+  const unsubscribe = query.subscribe();
+
+  const anchors = computed(() =>
+    query.objects
+      .filter((anchor) => {
+        const thread = anchor[RelationSourceId];
+        return isInstanceOf(ThreadType, thread) && thread.status !== 'resolved';
+      })
+      .concat(state.drafts[fullyQualifiedId(doc)] ?? []),
   );
 
   return [
+    EditorView.domEventHandlers({
+      destroy: () => {
+        unsubscribe();
+      },
+    }),
+
     EditorView.updateListener.of((update) => {
       if (update.docChanged) {
-        RefArray.targets(doc.threads).forEach((thread) => {
-          if (thread.anchor) {
+        anchors.value.forEach((anchor) => {
+          if (anchor.anchor) {
             // Only update if the name has changed, otherwise this will cause an infinite loop.
             // Skip if the name is empty; this means comment text was deleted, but thread name should remain.
-            const name = getName(doc, thread.anchor);
+            const name = getName(doc, anchor.anchor);
+            const thread = anchor[RelationSourceId] as ThreadType;
             if (name && name !== thread.name) {
               thread.name = name;
             }
@@ -62,16 +73,16 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
       fullyQualifiedId(doc),
       (sink) => effect(() => sink()),
       () =>
-        threads.value
-          .filter((thread) => thread?.anchor)
-          .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
+        anchors.value
+          .filter((anchor) => anchor.anchor)
+          .map((anchor) => ({ id: fullyQualifiedId(anchor[RelationSourceId]), cursor: anchor.anchor })),
     ),
 
     comments({
       id: fullyQualifiedId(doc),
       onCreate: ({ cursor }) => {
         const name = getName(doc, cursor);
-        void dispatch(createIntent(ThreadAction.Create, { cursor, name, subject: doc }));
+        void dispatch(createIntent(ThreadAction.Create, { anchor: cursor, name, subject: doc }));
       },
       onDelete: ({ id }) => {
         const draft = state.drafts[fullyQualifiedId(doc)];
@@ -82,19 +93,26 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
           }
         }
 
-        const thread = doc.threads.find(Ref.hasObjectId(id))?.target;
+        const thread = query.objects.find((object) => getSource(object).id === id);
         if (thread) {
           thread.anchor = undefined;
         }
       },
       onUpdate: ({ id, cursor }) => {
-        const thread =
-          state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
-          doc.threads.find(Ref.hasObjectId(id))?.target;
+        const draft = state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id);
+        if (draft) {
+          const thread = draft[RelationSourceId] as ThreadType;
+          thread.name = getName(doc, cursor);
+          draft.anchor = cursor;
+        }
 
-        if (thread instanceof ThreadType && thread.anchor) {
-          thread.name = getName(doc, thread.anchor);
-          thread.anchor = cursor;
+        const relation = query.objects.find((object) => getSource(object).id === id);
+        if (relation) {
+          const thread = getSource(relation);
+          if (isInstanceOf(ThreadType, thread)) {
+            thread.name = getName(doc, cursor);
+            relation.anchor = cursor;
+          }
         }
       },
       onSelect: ({ selection }) => {

package/src/hooks/analytics.ts

@@ -9,9 +9,13 @@ import { type Live } from '@dxos/live-object';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { getSpace } from '@dxos/react-client/echo';
 import { useOnTransition } from '@dxos/react-ui';
-import { type TextContentBlock } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
-export const useOnEditAnalytics = (message: Live<any>, textBlock: TextContentBlock | undefined, editing: boolean) => {
+export const useOnEditAnalytics = (
+  message: Live<any>,
+  textBlock: DataType.MessageBlock.Text | undefined,
+  editing: boolean,
+) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const onEdit = useCallback(() => {

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useStatus';
 export * from './analytics';
+export * from './useDebugMode';
+export * from './useStatus';

package/src/hooks/useDebugMode.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useState, useEffect } from 'react';
+
+// TODO(burdon): Standardize across plugins/composer.
+export const useDebugMode = () => {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const handler = (ev: KeyboardEvent) => {
+      if (ev.key.toLowerCase() === 'd' && ev.ctrlKey) {
+        ev.preventDefault();
+        setEnabled(!enabled);
+      }
+    };
+
+    document.addEventListener('keypress', handler);
+    return () => {
+      document.removeEventListener('keypress', handler);
+    };
+  }, [enabled]);
+
+  return enabled;
+};

package/src/index.ts

@@ -3,7 +3,7 @@
 //
 
 export { ThreadCapabilities } from './capabilities';
-export * from './events';
+export * from './calls';
 export * from './hooks';
 export * from './meta';
 

package/src/meta.ts

@@ -7,10 +7,11 @@ import { type PluginMeta } from '@dxos/app-framework';
 export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
 export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
 
+// TODO(wittjosiah): Needs screenshots.
 export const meta: PluginMeta = {
   id: THREAD_PLUGIN,
-  name: 'Threads',
-  description: 'Add comment threads to objects.',
-  icon: 'ph--chat--regular',
+  name: 'Chat',
+  description: 'Chat via text, voice, and video in channels or create comment threads on objects.',
+  icon: 'ph--video-conference--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-thread',
 };