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

package/src/components/ChannelContainer.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+import React, { useCallback, useEffect, useMemo, useState, type ChangeEvent } from 'react';
+
+import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { Context } from '@dxos/context';
+import { log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useTranslation, Input, ElevationProvider } from '@dxos/react-ui';
+import { ControlGroup, ControlItemInput, ControlGroupButton } from '@dxos/react-ui-form';
+import { ToolbarMenu, MenuProvider, createMenuAction, useMenuActions, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { useSoundEffect } from '@dxos/react-ui-sfx';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { Call } from './Call';
+import ChatContainer from './ChatContainer';
+import { ThreadCapabilities } from '../capabilities';
+import { THREAD_PLUGIN } from '../meta';
+import { type ChannelType } from '../types';
+
+export type ChannelContainerProps = {
+  channel?: ChannelType;
+  roomId?: string;
+  role?: string;
+  fullscreen?: boolean;
+};
+
+/**
+ * Renders a call when active, otherwise renders the channel chat.
+ */
+export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+  const space = getSpace(channel);
+  const callManager = useCapability(ThreadCapabilities.CallManager);
+  const roomId = channel ? fullyQualifiedId(channel) : _roomId;
+  const identity = useIdentity();
+  const isNamed = !!identity?.profile?.displayName;
+  const joinSound = useSoundEffect('JoinCall');
+  const leaveSound = useSoundEffect('LeaveCall');
+
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+  useEffect(() => {
+    const ctx = new Context();
+    callManager.left.on(ctx, (roomId) => {
+      extensions.forEach((extension) => {
+        void extension.onLeave?.(roomId);
+      });
+    });
+
+    callManager.callStateUpdated.on(ctx, (state) => {
+      extensions.forEach((extension) => {
+        void extension.onCallStateUpdated?.(state);
+      });
+    });
+
+    callManager.mediaStateUpdated.on(ctx, (state) => {
+      extensions.forEach((extension) => {
+        void extension.onMediaStateUpdated?.(state);
+      });
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [callManager, extensions]);
+
+  /**
+   * Join the call.
+   */
+  // TODO(wittjosiah): Show preview before joining?
+  const handleJoin = useCallback(async () => {
+    if (!roomId || !channel) {
+      return;
+    }
+
+    if (callManager.joined) {
+      await callManager.leave();
+    }
+
+    try {
+      void joinSound.play();
+      callManager.setRoomId(roomId);
+      await callManager.join();
+      await Promise.all(extensions.map((extension) => extension.onJoin?.({ channel, roomId })));
+    } catch (err) {
+      // TODO(burdon): Error sound.
+      log.catch(err);
+    }
+  }, [extensions, channel, roomId]);
+
+  /**
+   * Leave the call.
+   */
+  const handleLeave = useCallback(async () => {
+    try {
+      void leaveSound.play();
+    } catch (err) {
+      // TODO(burdon): Error sound.
+      log.catch(err);
+    } finally {
+      void callManager.turnAudioOff();
+      void callManager.turnVideoOff();
+      void callManager.turnScreenshareOff();
+      void callManager.leave();
+    }
+  }, [extensions, roomId]);
+
+  const isJoined = callManager.joined && callManager.roomId === roomId;
+
+  return (
+    <StackItem.Content toolbar={!isJoined} classNames={isJoined && 'h-full'}>
+      {isJoined && !isNamed && <DisplayNameMissing />}
+      {isJoined && isNamed && (
+        <Call.Root>
+          <Call.Grid fullscreen={fullscreen} />
+          <Call.Toolbar channel={channel} onLeave={handleLeave} />
+        </Call.Root>
+      )}
+      {!isJoined && channel && channel.defaultThread.target && space && (
+        <>
+          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
+          <ChatContainer space={space} thread={channel.defaultThread.target} />
+        </>
+      )}
+    </StackItem.Content>
+  );
+};
+
+export default ChannelContainer;
+
+const DisplayNameMissing = () => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  const client = useClient();
+  const [displayName, setDisplayName] = useState('');
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setDisplayName(event.target.value), []);
+  const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
+
+  return (
+    <ControlGroup classNames='p-4 place-content-center'>
+      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+        <Input.TextInput
+          value={displayName}
+          onChange={handleChange}
+          placeholder={t('display name input placeholder')}
+          classNames='md:min-is-64'
+        />
+      </ControlItemInput>
+      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+        {t('set display name label')}
+      </ControlGroupButton>
+    </ControlGroup>
+  );
+};
+
+const useChannelToolbarActions = (onJoinCall?: () => void) => {
+  const creator = useMemo(
+    () =>
+      Rx.make(() => {
+        const nodes = [];
+        const edges = [];
+
+        const rootGroup = createMenuItemGroup('root', {
+          label: ['channel toolbar title', { ns: THREAD_PLUGIN }],
+        });
+        nodes.push(rootGroup);
+
+        const sortAction = createMenuAction('video-call', () => onJoinCall?.(), {
+          label: ['start video call label', { ns: THREAD_PLUGIN }],
+          icon: 'ph--video-camera--regular',
+          type: 'video-call',
+        });
+        nodes.push(sortAction);
+        edges.push({ source: 'root', target: sortAction.id });
+
+        return { nodes, edges };
+      }),
+    [],
+  );
+
+  return useMenuActions(creator);
+};
+
+type ChannelToolbarProps = {
+  attendableId?: string;
+  role?: string;
+  onJoinCall?: () => void;
+};
+
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
+  const menuProps = useChannelToolbarActions(onJoinCall);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...menuProps} attendableId={attendableId}>
+        <ToolbarMenu />
+      </MenuProvider>
+    </ElevationProvider>
+  );
+};

package/src/components/Chat.stories.tsx

@@ -9,9 +9,7 @@ import React, { useEffect, useState } from 'react';
 
 import { Capabilities, contributes, createSurface, IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { createQueueDxn } from '@dxos/echo-schema';
-import { refFromDXN } from '@dxos/live-object';
-import { ChannelType, ThreadType } from '@dxos/plugin-space/types';
+import { makeRef } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { live, type Space } from '@dxos/react-client/echo';
@@ -23,6 +21,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ChatContainer } from './ChatContainer';
 import translations from '../translations';
+import { ChannelType, ThreadType } from '../types';
 
 faker.seed(1);
 
@@ -38,7 +37,8 @@ const Story = () => {
         const space = await client.spaces.create();
         const channel = space.db.add(
           live(ChannelType, {
-            queue: refFromDXN(createQueueDxn(space.id)),
+            defaultThread: makeRef(live(ThreadType, { messages: [], status: 'active' })),
+            threads: [],
           }),
         );
         setSpace(space);
@@ -47,13 +47,13 @@ const Story = () => {
     }
   }, [identity]);
 
-  if (!identity || !channel || !space) {
+  if (!identity || !channel || !space || !channel.defaultThread.target) {
     return null;
   }
 
   return (
     <main className='max-is-prose mli-auto bs-dvh overflow-hidden'>
-      <ChatContainer space={space} dxn={channel.queue.dxn} />
+      <ChatContainer space={space} thread={channel.defaultThread.target} />
     </main>
   );
 };

package/src/components/ChatContainer.tsx

@@ -4,23 +4,29 @@
 
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
-import { create } 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 { live, makeRef } from '@dxos/live-object';
+import { type AnyLiveObject, fullyQualifiedId, type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { 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 {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread,
+  ThreadFooter,
+  threadLayout,
+  type ThreadProps,
+} from '@dxos/react-ui-thread';
 import { DataType } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
-import { type ThreadContainerProps } from './types';
 import { useStatus } from '../hooks';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 import { getMessageMetadata } from '../util';
 
 export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
@@ -35,16 +41,17 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export type ChatContainerProps = Omit<ThreadContainerProps, 'thread'> & {
+export type ChatContainerProps = {
   space: Space;
-  dxn: DXN;
-};
+  thread: ThreadType;
+  context?: AnyLiveObject<any>;
+  autoFocusTextbox?: boolean;
+} & Pick<ThreadProps, 'current'>;
 
-export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }: ChatContainerProps) => {
-  const id = dxn.toString();
+export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+  const id = fullyQualifiedId(thread);
   const identity = useIdentity()!;
   const members = useMembers(space?.key);
-  const queue = useQueue<DataType.Message>(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.
@@ -79,18 +86,20 @@ export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }
 
   // TODO(burdon): Change to model.
   const handleCreate: MessageTextboxProps['onSend'] = () => {
-    if (!messageRef.current?.length || !queue) {
+    if (!messageRef.current?.length) {
       return false;
     }
 
-    queue.append([
-      create(DataType.Message, {
-        sender: { identityDid: identity.did },
-        created: new Date().toISOString(),
-        blocks: [{ type: 'text', text: messageRef.current }],
-        properties: context ? { context: makeRef(context) } : undefined,
-      }),
-    ]);
+    thread.messages.push(
+      makeRef(
+        live(DataType.Message, {
+          sender: { identityDid: identity.did },
+          created: new Date().toISOString(),
+          blocks: [{ type: 'text', text: messageRef.current }],
+          properties: context ? { context: makeRef(context) } : undefined,
+        }),
+      ),
+    );
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -108,9 +117,12 @@ export const ChatContainer = ({ space, dxn, context, current, autoFocusTextbox }
       <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')}>
-            {(queue?.items ?? []).map((message) => (
-              <MessageContainer key={message.id} message={message} members={members} />
-            ))}
+            {thread.messages
+              .map((message) => message.target)
+              .filter(isNonNullable)
+              .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. */}
           <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />

package/src/components/CommentContainer.tsx

@@ -5,6 +5,7 @@
 import { CheckCircle, X } from '@phosphor-icons/react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
+import { RelationSourceId } from '@dxos/echo-schema';
 import { RefArray } from '@dxos/live-object';
 import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -17,14 +18,22 @@ import {
   hoverableFocusedWithinControls,
   mx,
 } from '@dxos/react-ui-theme';
-import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, ThreadHeading } from '@dxos/react-ui-thread';
+import {
+  MessageTextbox,
+  type MessageTextboxProps,
+  Thread,
+  ThreadFooter,
+  ThreadHeading,
+  type ThreadProps,
+} from '@dxos/react-ui-thread';
+import { type AnchoredTo } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { MessageContainer } from './MessageContainer';
 import { command } from './command-extension';
-import { type ThreadContainerProps } from './types';
 import { useStatus } from '../hooks';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 import { getMessageMetadata } from '../util';
 
 const sizeClass = getSize(4);
@@ -74,19 +83,29 @@ const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
   );
 };
 
+export type CommentContainerProps = {
+  anchor: AnchoredTo;
+  onAttend?: (anchor: AnchoredTo) => void;
+  onComment?: (anchor: AnchoredTo, message: string) => void;
+  onResolve?: (anchor: AnchoredTo) => void;
+  onMessageDelete?: (anchor: AnchoredTo, messageId: string) => void;
+  onThreadDelete?: (anchor: AnchoredTo) => void;
+} & Pick<ThreadProps, 'current'>;
+
 export const CommentContainer = ({
-  thread,
-  detached,
+  anchor,
   current,
   onAttend,
   onComment,
   onResolve,
   onMessageDelete,
   onThreadDelete,
-}: ThreadContainerProps) => {
+}: CommentContainerProps) => {
   const identity = useIdentity()!;
-  const space = getSpace(thread);
+  const space = getSpace(anchor);
   const members = useMembers(space?.key);
+  const detached = !anchor.anchor;
+  const thread = anchor[RelationSourceId] as ThreadType;
   const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
@@ -111,23 +130,23 @@ export const CommentContainer = ({
   const scrollToEnd = (behavior: ScrollBehavior) =>
     setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
 
-  const handleAttend = useCallback(() => onAttend?.(thread), [onAttend, thread]);
-  const handleResolve = useCallback(() => onResolve?.(thread), [onResolve, thread]);
-  const handleMessageDelete = useCallback((id: string) => onMessageDelete?.(thread, id), [onMessageDelete, thread]);
-  const handleThreadDelete = useCallback(() => onThreadDelete?.(thread), [onThreadDelete, thread]);
+  const handleAttend = useCallback(() => onAttend?.(anchor), [onAttend, anchor]);
+  const handleResolve = useCallback(() => onResolve?.(anchor), [onResolve, anchor]);
+  const handleMessageDelete = useCallback((id: string) => onMessageDelete?.(anchor, id), [onMessageDelete, anchor]);
+  const handleThreadDelete = useCallback(() => onThreadDelete?.(anchor), [onThreadDelete, anchor]);
 
   const handleComment: MessageTextboxProps['onSend'] = useCallback(() => {
     if (!messageRef.current) {
       return false;
     }
 
-    onComment?.(thread, messageRef.current);
+    onComment?.(anchor, messageRef.current);
     messageRef.current = '';
     scrollToEnd('instant');
     rerenderEditor();
 
     return true;
-  }, [thread, identity]);
+  }, [anchor, identity]);
 
   return (
     <Thread onClickCapture={handleAttend} onFocusCapture={handleAttend} current={current} id={fullyQualifiedId(thread)}>

package/src/components/Comments.stories.tsx

@@ -5,50 +5,52 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ThreadType } from '@dxos/plugin-space/types';
+import { Expando, Query, RelationSourceId, RelationTargetId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { Filter, fullyQualifiedId, useQuery, useSpace } from '@dxos/react-client/echo';
+import { live, useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { DataType } from '@dxos/schema';
+import { AnchoredTo, DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread } from './testing';
 import translations from '../translations';
+import { ThreadType } from '../types';
 
 faker.seed(1);
 
 const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
-  const threads = useQuery(space, Filter.type(ThreadType));
-  const [detached, setDetached] = useState<string[]>([]);
+  const anchors = useQuery(space, Query.type(AnchoredTo));
 
   useEffect(() => {
     if (identity && space) {
       const t = setTimeout(async () => {
-        space.db.add(createCommentThread(identity));
-        const thread = space.db.add(createCommentThread(identity));
-        setDetached([fullyQualifiedId(thread)]);
+        const object = space.db.add(live(Expando, {}));
+        const thread1 = space.db.add(createCommentThread(identity));
+        const thread2 = space.db.add(createCommentThread(identity));
+        space.db.add(live(AnchoredTo, { [RelationSourceId]: thread1, [RelationTargetId]: object }));
+        space.db.add(live(AnchoredTo, { [RelationSourceId]: thread2, [RelationTargetId]: object }));
       });
 
       return () => clearTimeout(t);
     }
   }, [identity, space]);
 
-  if (!identity || !space || !threads) {
+  if (!identity || !space || !anchors) {
     return null;
   }
 
   return (
     <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
       <div className='flex flex-col w-[30rem]'>
-        <CommentsContainer threads={threads} detached={detached} onThreadDelete={console.log} />
+        <CommentsContainer anchors={anchors} onThreadDelete={console.log} />
       </div>
     </div>
   );

package/src/components/CommentsContainer.tsx

@@ -5,21 +5,18 @@
 import { ChatText } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
 
-import { type ThreadType } from '@dxos/plugin-space/types';
+import { RelationSourceId } from '@dxos/echo-schema';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useTranslation, Trans } from '@dxos/react-ui';
 import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { type AnchoredTo } from '@dxos/schema';
 
-import { CommentContainer } from './CommentContainer';
-import { type ThreadContainerProps } from './types';
+import { CommentContainer, type CommentContainerProps } from './CommentContainer';
 import { THREAD_PLUGIN } from '../meta';
+import { type ThreadType } from '../types';
 
-export type ThreadsContainerProps = Omit<ThreadContainerProps, 'thread' | 'detached' | 'current' | 'autoFocus'> & {
-  threads: ThreadType[];
-  /**
-   * Threads that are no longer anchored to a position in the object.
-   */
-  detached?: string[];
+export type ThreadsContainerProps = Omit<CommentContainerProps, 'anchor' | 'current'> & {
+  anchors: AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
 };
@@ -27,15 +24,15 @@ export type ThreadsContainerProps = Omit<ThreadContainerProps, 'thread' | 'detac
 /**
  * Comment threads.
  */
-export const CommentsContainer = ({
-  threads,
-  detached = [],
-  currentId,
-  showResolvedThreads,
-  ...props
-}: ThreadsContainerProps) => {
+export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: ThreadsContainerProps) => {
   const { t } = useTranslation(THREAD_PLUGIN);
-  const filteredThreads = showResolvedThreads ? threads : threads.filter((thread) => !(thread?.status === 'resolved'));
+  // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
+  const filteredAnchors = showResolvedThreads
+    ? anchors.filter((anchor) => !!anchor[RelationSourceId])
+    : anchors.filter((anchor) => {
+        const thread = anchor[RelationSourceId];
+        return thread && thread.status !== 'resolved';
+      });
 
   useEffect(() => {
     if (currentId) {
@@ -45,18 +42,11 @@ export const CommentsContainer = ({
 
   return (
     <>
-      {filteredThreads.length > 0 ? (
-        filteredThreads.map((thread) => {
+      {filteredAnchors.length > 0 ? (
+        filteredAnchors.map((anchor) => {
+          const thread = anchor[RelationSourceId] as ThreadType;
           const threadId = fullyQualifiedId(thread);
-          return (
-            <CommentContainer
-              key={threadId}
-              thread={thread}
-              current={currentId === threadId}
-              detached={detached.includes(threadId)}
-              {...props}
-            />
-          );
+          return <CommentContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
         })
       ) : (
         <div role='alert' className={mx(descriptionMessage, 'place-self-center rounded-lg text-center m-4')}>