@dxos/plugin-thread 0.8.4-main.7ace549 → 0.8.4-main.9735255

package/src/components/MessageContainer.tsx

@@ -3,19 +3,21 @@
 //
 
 import { EditorView } from '@codemirror/view';
-import type * as Schema from 'effect/Schema';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/react';
 import { type Obj, Ref } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
 import { PublicKey } from '@dxos/react-client';
 import { type SpaceMember } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { IconButton, useOnTransition, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from '@dxos/react-ui-editor';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { useTextEditor } from '@dxos/react-ui-editor';
+import { Card } from '@dxos/react-ui-mosaic';
 import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
 import { type ContentBlock, type Message } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
 import { useOnEditAnalytics } from '../hooks';
 import { meta } from '../meta';
@@ -27,8 +29,7 @@ export const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pie-2';
 export const buttonClassNames = '!p-1 transition-opacity';
 
 export type MessageContainerProps = {
-  // TODO(wittjosiah): Find a simpler way to define this type.
-  message: Obj.Obj<Schema.Schema.Type<typeof Message.Message>>;
+  message: Obj.Obj<Message.Message> | Ref.Ref<Obj.Obj<Message.Message>>;
   members: SpaceMember[];
   editable?: boolean;
   onDelete?: (id: string) => void;
@@ -36,30 +37,55 @@ export type MessageContainerProps = {
 };
 
 export const MessageContainer = ({
-  message,
+  message: messageOrRef,
   members,
   editable = false,
   onDelete,
   onAcceptProposal,
 }: MessageContainerProps) => {
   const { t } = useTranslation(meta.id);
+  const [message, updateMessage] = useObject(messageOrRef);
+  const identity = useIdentity();
+  const [editing, setEditing] = useState(false);
+
+  const textBlockIndex = message?.blocks.findIndex((block) => block._tag === 'text') ?? -1;
+
+  const handleEdit = useCallback(() => setEditing((editing) => !editing), []);
+  const handleDelete = useCallback(() => message && onDelete?.(message.id), [message, onDelete]);
+  const handleAcceptProposal = useCallback(
+    () => message && onAcceptProposal?.(message.id),
+    [message, onAcceptProposal],
+  );
+  const handleTextBlockChange = useCallback(
+    (newText: string) => {
+      updateMessage((m) => {
+        const targetBlock = m.blocks[textBlockIndex];
+        if (targetBlock && targetBlock._tag === 'text') {
+          targetBlock.text = newText;
+        }
+      });
+    },
+    [updateMessage, textBlockIndex],
+  );
+
+  const textBlock =
+    message && textBlockIndex !== -1 ? (message.blocks[textBlockIndex] as ContentBlock.Text) : undefined;
+  useOnEditAnalytics(message, textBlock, !!editing);
+
+  if (!message) {
+    return null;
+  }
+
   const senderIdentity = members.find(
     (member) =>
       (message.sender.identityDid && member.identity.did === message.sender.identityDid) ||
       (message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey)),
   )?.identity;
   const messageMetadata = getMessageMetadata(message.id, senderIdentity);
-  const userIsAuthor = useIdentity()?.did === messageMetadata.authorId;
-  const [editing, setEditing] = useState(false);
-  const handleEdit = useCallback(() => setEditing((editing) => !editing), []);
-  const handleDelete = useCallback(() => onDelete?.(message.id), [message, onDelete]);
-  const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [message, onAcceptProposal]);
-  const textBlock = message.blocks.find((block) => block._tag === 'text');
+  const userIsAuthor = identity?.did === messageMetadata.authorId;
   const proposalBlock = message.blocks.find((block) => block._tag === 'proposal');
   const references = message.blocks.filter((block) => block._tag === 'reference').map((block) => block.reference);
 
-  useOnEditAnalytics(message, textBlock, !!editing);
-
   return (
     <MessageRoot {...messageMetadata} classNames={[hoverableControls, hoverableFocusedWithinControls]}>
       <MessageHeading authorName={messageMetadata.authorName} timestamp={messageMetadata.timestamp}>
@@ -100,16 +126,18 @@ export const MessageContainer = ({
           )}
         </div>
       </MessageHeading>
-      {textBlock && <TextboxBlock block={textBlock} isAuthor={userIsAuthor} editing={editing} />}
+      {textBlock && (
+        <TextboxBlock block={textBlock} isAuthor={userIsAuthor} editing={editing} onSave={handleTextBlockChange} />
+      )}
       {proposalBlock && <ProposalBlock block={proposalBlock} />}
       {Ref.Array.targets(references).map((reference, index) => (
-        <MessagePart key={index} part={reference as Obj.Any} />
+        <MessagePart key={index} part={reference as Obj.Unknown} />
       ))}
     </MessageRoot>
   );
 };
 
-const MessagePart = ({ part }: { part: Obj.Any }) => {
+const MessagePart = ({ part }: { part: Obj.Unknown }) => {
   return <MessageBlockObjectTile subject={part} />;
 };
 
@@ -117,11 +145,13 @@ const TextboxBlock = ({
   block,
   isAuthor,
   editing,
+  onSave,
 }: {
   block: ContentBlock.Text;
   editing?: boolean;
   isAuthor?: boolean;
   identity?: Identity;
+  onSave?: (newText: string) => void;
 }) => {
   const { themeMode } = useThemeContext();
   const inMemoryContentRef = useRef(block.text);
@@ -131,8 +161,8 @@ const TextboxBlock = ({
   }, []);
 
   const saveDocumentChange = useCallback(() => {
-    block.text = inMemoryContentRef.current;
-  }, [block]);
+    onSave?.(inMemoryContentRef.current);
+  }, [onSave]);
 
   useOnTransition(editing, true, false, saveDocumentChange);
 
@@ -168,7 +198,7 @@ const ProposalBlock = ({ block }: { block: ContentBlock.Proposal }) => {
   );
 };
 
-const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Any }>(({ subject }, forwardedRef) => {
+const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown }>(({ subject }, forwardedRef) => {
   // TODO(burdon): Use annotation to get title.
   let title = (subject as any).name ?? (subject as any).title ?? (subject as any).type ?? 'Object';
   if (typeof title !== 'string') {
@@ -176,12 +206,11 @@ const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Any }>(
   }
 
   return (
-    <div
-      role='group'
+    <Card.Root
       className={mx('grid col-span-3 plb-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
       ref={forwardedRef}
     >
-      <Surface role='card' limit={1} data={{ subject }} fallback={title} />
-    </div>
+      <Surface role='card-content' limit={1} data={{ subject }} fallback={title} />
+    </Card.Root>
   );
 });

package/src/components/Participant/Participant.tsx

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
 import { useCapability } from '@dxos/app-framework/react';
 
 import { type EncodedTrackName, type UserState } from '../../calls';
-import { ThreadCapabilities } from '../../capabilities';
+import { ThreadCapabilities } from '../../types';
 import { VideoObject } from '../Media';
 import { ResponsiveGridItem, type ResponsiveGridItemProps } from '../ResponsiveGrid';
 
@@ -15,27 +16,39 @@ export const SCREENSHARE_SUFFIX = '_screenshare';
 
 export const Participant = memo(({ item: user, debug, ...props }: ResponsiveGridItemProps<UserState>) => {
   const call = useCapability(ThreadCapabilities.CallManager);
-  const isSelf: boolean = call.self.id !== undefined && user.id !== undefined && user.id.startsWith(call.self.id);
+  const self = useAtomValue(call.selfAtom);
+  const media = useAtomValue(call.mediaAtom);
+  const isSelf: boolean = self.id !== undefined && user.id !== undefined && user.id.startsWith(self.id);
   const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
 
-  const pulledVideoStream =
-    !isSelf && isScreenshare && user.tracks?.screenshareEnabled
-      ? call.getVideoStream(user.tracks?.screenshare as EncodedTrackName)
-      : !isSelf && !isScreenshare && user.tracks?.videoEnabled
-        ? call.getVideoStream(user.tracks?.video as EncodedTrackName)
-        : undefined;
+  // Get pulled video stream for non-self users.
+  const pulledVideoStream = useMemo<MediaStream | undefined>(() => {
+    if (isSelf) {
+      return undefined;
+    }
+    const trackName =
+      isScreenshare && user.tracks?.screenshareEnabled
+        ? (user.tracks?.screenshare as EncodedTrackName)
+        : !isScreenshare && user.tracks?.videoEnabled
+          ? (user.tracks?.video as EncodedTrackName)
+          : undefined;
+    return trackName ? media.pulledVideoStreams[trackName]?.stream : undefined;
+  }, [
+    isSelf,
+    isScreenshare,
+    media.pulledVideoStreams,
+    user.tracks?.screenshare,
+    user.tracks?.video,
+    user.tracks?.screenshareEnabled,
+    user.tracks?.videoEnabled,
+  ]);
 
   const videoStream = useMemo<MediaStream | undefined>(() => {
     if (isSelf) {
-      if (isScreenshare) {
-        return call.media.screenshareVideoStream;
-      } else if (!isScreenshare) {
-        return call.media.videoStream;
-      }
-    } else if (!isSelf) {
-      return pulledVideoStream;
+      return isScreenshare ? media.screenshareVideoStream : media.videoStream;
     }
-  }, [isSelf, isScreenshare, call.media.videoStream, call.media.screenshareVideoStream, pulledVideoStream]);
+    return pulledVideoStream;
+  }, [isSelf, isScreenshare, media.videoStream, media.screenshareVideoStream, pulledVideoStream]);
 
   return (
     <ResponsiveGridItem
@@ -43,8 +56,8 @@ export const Participant = memo(({ item: user, debug, ...props }: ResponsiveGrid
       item={user}
       name={user.name}
       self={isSelf}
-      screenshare={!!call.media.screenshareVideoStream}
-      video={call.media.videoEnabled}
+      screenshare={!!media.screenshareVideoStream}
+      video={media.videoEnabled}
       mute={user ? !user.tracks?.audioEnabled : false}
       wave={user.raisedHand}
       speaking={user.speaking}

package/src/components/ResponsiveGrid/ResponsiveContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * A container component that maintains the child's aspect ratio while centering its content.

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -8,7 +8,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type Size } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { ResponsiveContainer } from './ResponsiveContainer';
 import { type ResponsiveGridItemProps } from './ResponsiveGridItem';

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -6,7 +6,7 @@ import React, { type CSSProperties, type PropsWithChildren, useEffect, useState
 
 import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 

package/src/components/ThreadCompanion.tsx

@@ -2,50 +2,68 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useMemo } from 'react';
 
-import { Capabilities, CollaborationActions, LayoutAction, createIntent } from '@dxos/app-framework';
-import { useCapabilities, useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useCapabilities, useCapability, useOperationInvoker } from '@dxos/app-framework/react';
 import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { Ref, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Ref, 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 { Layout } from '@dxos/react-ui-mosaic';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/react-ui-theme';
 import { AnchoredTo, Thread } from '@dxos/types';
+import { mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../capabilities';
 import { CommentsContainer, type CommentsContainerProps } from '../components';
 import { meta } from '../meta';
-import { ThreadAction } from '../types';
+import { ThreadCapabilities, ThreadOperation, type ViewState } from '../types';
+
+const initialViewState: ViewState = { showResolvedThreads: false };
 
 export const ThreadCompanion = ({ subject }: { subject: any }) => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const subjectId = Obj.getDXN(subject).toString();
+  const registry = useCapability(Common.Capability.AtomRegistry);
 
-  const { state, getViewState } = useCapability(ThreadCapabilities.MutableState);
+  const stateAtom = useCapability(ThreadCapabilities.State);
+  const viewStoreAtom = useCapability(ThreadCapabilities.ViewState);
+  const state = useAtomValue(stateAtom);
+  const viewStore = useAtomValue(viewStoreAtom);
   const drafts = state.drafts[subjectId];
-  const viewState = useMemo(() => getViewState(subjectId), [getViewState, subjectId]);
+
+  // Get or initialize view state for this subject.
+  const viewState = useMemo(() => {
+    if (!viewStore[subjectId]) {
+      registry.set(viewStoreAtom, { ...viewStore, [subjectId]: { ...initialViewState } });
+      return initialViewState;
+    }
+    return viewStore[subjectId];
+  }, [viewStore, subjectId, registry, viewStoreAtom]);
   const { showResolvedThreads } = viewState;
+
   const onChangeViewState = useCallback(
     (nextValue: string) => {
-      viewState.showResolvedThreads = nextValue === 'all';
+      registry.set(viewStoreAtom, {
+        ...registry.get(viewStoreAtom),
+        [subjectId]: { ...registry.get(viewStoreAtom)[subjectId], showResolvedThreads: nextValue === 'all' },
+      });
     },
-    [viewState],
+    [registry, viewStoreAtom, subjectId],
   );
 
-  const anchorSorts = useCapabilities(Capabilities.AnchorSort);
+  const anchorSorts = useCapabilities(Common.Capability.AnchorSort);
   const sort = useMemo(
     () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
     [anchorSorts, subject],
   );
 
-  const space = getSpace(subject);
-  const objectsAnchoredTo = useQuery(space, Query.select(Filter.ids(subject.id)).targetOf(AnchoredTo.AnchoredTo));
+  const db = Obj.getDatabase(subject);
+  const objectsAnchoredTo = useQuery(db, Query.select(Filter.id(subject.id)).targetOf(AnchoredTo.AnchoredTo));
   const anchors = objectsAnchoredTo
     .toSorted((a, b) => sort?.(a, b) ?? 0)
     .filter((anchor) => Obj.instanceOf(Thread.Thread, Relation.getSource(anchor)))
@@ -59,68 +77,57 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
       const threadId = Obj.getDXN(thread).toString();
 
       if (state.current !== threadId) {
-        state.current = threadId;
+        registry.set(stateAtom, { ...registry.get(stateAtom), current: threadId });
 
         // TODO(wittjosiah): Should this be a thread-specific intent?
         //  The layout doesn't know about threads and this working depends on other plugins conditionally handling it.
         //  This may be overloading this intent or highjacking its intended purpose.
-        void dispatch(
-          createIntent(LayoutAction.ScrollIntoView, {
-            part: 'current',
-            subject: Obj.getDXN(subject).toString(),
-            options: {
-              cursor: anchor.anchor,
-              ref: threadId,
-            },
-          }),
-        );
+        void invokePromise(Common.LayoutOperation.ScrollIntoView, {
+          subject: Obj.getDXN(subject).toString(),
+          cursor: anchor.anchor,
+          ref: threadId,
+        });
       }
     },
-    [state.current, dispatch, subject],
+    [state.current, invokePromise, subject, registry, stateAtom],
   );
 
   const handleComment = useCallback(
     async (anchor: AnchoredTo.AnchoredTo, text: string) => {
-      await dispatch(
-        createIntent(ThreadAction.AddMessage, {
-          anchor,
-          subject,
-          sender: { identityDid: identity?.did },
-          text,
-        }),
-      );
+      await invokePromise(ThreadOperation.AddMessage, {
+        anchor,
+        subject,
+        sender: { identityDid: identity?.did },
+        text,
+      });
 
       const thread = Relation.getSource(anchor) as Thread.Thread;
-      state.current = Obj.getDXN(thread).toString();
+      registry.set(stateAtom, { ...registry.get(stateAtom), current: Obj.getDXN(thread).toString() });
     },
-    [dispatch, identity, subject],
+    [invokePromise, identity, subject, registry, stateAtom],
   );
 
   const handleResolve = useCallback(
     (anchor: AnchoredTo.AnchoredTo) =>
-      dispatch(
-        createIntent(ThreadAction.ToggleResolved, {
-          thread: Relation.getSource(anchor) as Thread.Thread,
-        }),
-      ),
-    [dispatch],
+      invokePromise(ThreadOperation.ToggleResolved, {
+        thread: Relation.getSource(anchor) as Thread.Thread,
+      }),
+    [invokePromise],
   );
 
   const handleThreadDelete = useCallback(
-    (anchor: AnchoredTo.AnchoredTo) => dispatch(createIntent(ThreadAction.Delete, { anchor, subject })),
-    [dispatch, subject],
+    (anchor: AnchoredTo.AnchoredTo) => invokePromise(ThreadOperation.Delete, { anchor, subject }),
+    [invokePromise, subject],
   );
 
   const handleMessageDelete = useCallback(
     (anchor: AnchoredTo.AnchoredTo, messageId: string) =>
-      dispatch(
-        createIntent(ThreadAction.DeleteMessage, {
-          anchor,
-          subject,
-          messageId,
-        }),
-      ),
-    [dispatch, subject],
+      invokePromise(ThreadOperation.DeleteMessage, {
+        anchor,
+        subject,
+        messageId,
+      }),
+    [invokePromise, subject],
   );
 
   const handleAcceptProposal = useCallback<NonNullable<CommentsContainerProps['onAcceptProposal']>>(
@@ -133,16 +140,14 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
         return;
       }
 
-      await dispatch(
-        createIntent(CollaborationActions.AcceptProposal, {
-          subject,
-          anchor: anchor.anchor,
-          proposal,
-        }),
-      );
-      await dispatch(createIntent(ThreadAction.ToggleResolved, { thread }));
+      await invokePromise(Common.CollaborationOperation.AcceptProposal, {
+        subject,
+        anchor: anchor.anchor,
+        proposal,
+      });
+      await invokePromise(ThreadOperation.ToggleResolved, { thread });
     },
-    [dispatch, subject],
+    [invokePromise, subject],
   );
 
   const comments = (
@@ -160,7 +165,7 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
   );
 
   return (
-    <StackItem.Content toolbar>
+    <Layout.Main toolbar>
       <Tabs.Root
         value={showResolvedThreads ? 'all' : 'unresolved'}
         orientation='horizontal'
@@ -183,6 +188,6 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
           <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
         </div>
       </Tabs.Root>
-    </StackItem.Content>
+    </Layout.Main>
   );
 };

package/src/components/ThreadSettings.tsx

@@ -10,7 +10,12 @@ import { ControlPage } from '@dxos/react-ui-form';
 import { meta } from '../meta';
 import type { ThreadSettingsProps } from '../types';
 
-export const ThreadSettings = ({ settings: _settings }: { settings: ThreadSettingsProps }) => {
+export type ThreadSettingsComponentProps = {
+  settings: ThreadSettingsProps;
+  onSettingsChange: (fn: (current: ThreadSettingsProps) => ThreadSettingsProps) => void;
+};
+
+export const ThreadSettings = ({ settings: _settings }: ThreadSettingsComponentProps) => {
   const { t: _t } = useTranslation(meta.id);
   return <ControlPage></ControlPage>;
 };

package/src/components/command-extension.ts

@@ -5,8 +5,8 @@
 import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 
-import { tags } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { tags } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts

package/src/components/index.ts

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-// TODO(wittjosiah): Suspense boundary for sidebar?
 export * from './Call';
 export * from './CallDebugPanel';
 export * from './CallSidebar';
@@ -14,5 +11,5 @@ export * from './MessageContainer';
 export * from './ThreadCompanion';
 export * from './ThreadSettings';
 
-export const ChannelContainer = lazy(() => import('./ChannelContainer'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
+export { ChannelContainer } from './ChannelContainer';
+export { ChatContainer } from './ChatContainer';