@dxos/plugin-thread 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/CommentContainer.tsx

@@ -1,198 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { CheckCircle, X } from '@phosphor-icons/react';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-
-import { Relation } from '@dxos/echo';
-import { RefArray } from '@dxos/live-object';
-import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { Button, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
-import {
-  getSize,
-  hoverableControlItem,
-  hoverableControls,
-  hoverableFocusedWithinControls,
-  mx,
-} from '@dxos/react-ui-theme';
-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 { useStatus } from '../hooks';
-import { THREAD_PLUGIN } from '../meta';
-import { type ThreadType } from '../types';
-import { getMessageMetadata } from '../util';
-
-const sizeClass = getSize(4);
-
-// TODO(thure): #8149
-const commentControlClassNames = '!p-1 !min-bs-0 transition-opacity';
-
-const ToggleResolvedButton = ({
-  isResolved,
-  onResolve,
-}: {
-  isResolved: boolean | undefined;
-  onResolve: () => void;
-}) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
-  const label = t(isResolved ? 'mark as unresolved label' : 'mark as resolved label');
-  return (
-    <Tooltip.Trigger asChild content={label}>
-      <Button
-        variant='ghost'
-        data-testid='thread.toggle-resolved'
-        onClick={onResolve}
-        classNames={[commentControlClassNames, !isResolved && hoverableControlItem]}
-      >
-        <span className='sr-only'>{label}</span>
-        {isResolved ? <CheckCircle className={sizeClass} weight='fill' /> : <CheckCircle className={sizeClass} />}
-      </Button>
-    </Tooltip.Trigger>
-  );
-};
-
-const DeleteThreadButton = ({ onDelete }: { onDelete: () => void }) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
-  const label = t('delete thread label');
-  return (
-    <Tooltip.Trigger asChild content={label}>
-      <Button
-        variant='ghost'
-        data-testid='thread.delete'
-        onClick={onDelete}
-        classNames={[commentControlClassNames, hoverableControlItem]}
-      >
-        <span className='sr-only'>{label}</span>
-        <X className={sizeClass} />
-      </Button>
-    </Tooltip.Trigger>
-  );
-};
-
-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 = ({
-  anchor,
-  current,
-  onAttend,
-  onComment,
-  onResolve,
-  onMessageDelete,
-  onThreadDelete,
-}: CommentContainerProps) => {
-  const identity = useIdentity()!;
-  const space = getSpace(anchor);
-  const members = useMembers(space?.key);
-  const detached = !anchor.anchor;
-  const thread = Relation.getSource(anchor) as ThreadType;
-  const activity = useStatus(space, fullyQualifiedId(thread));
-  const { t } = useTranslation(THREAD_PLUGIN);
-  const threadScrollRef = useRef<HTMLDivElement | null>(null);
-  const { themeMode } = useThemeContext();
-
-  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
-  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
-  const [_count, _setCount] = useState(0);
-  const rerenderEditor = () => _setCount((count) => count + 1);
-  const messageRef = useRef('');
-  const extensions = useMemo(
-    () => [
-      createBasicExtensions({ placeholder: t('message placeholder') }),
-      createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
-      command,
-    ],
-    [_count],
-  );
-
-  // TODO(thure): Factor out.
-  const scrollToEnd = (behavior: ScrollBehavior) =>
-    setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
-
-  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?.(anchor, messageRef.current);
-    messageRef.current = '';
-    scrollToEnd('instant');
-    rerenderEditor();
-
-    return true;
-  }, [anchor, identity]);
-
-  return (
-    <Thread onClickCapture={handleAttend} onFocusCapture={handleAttend} current={current} id={fullyQualifiedId(thread)}>
-      <div
-        role='none'
-        className={mx(
-          'col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]',
-          hoverableControls,
-          hoverableFocusedWithinControls,
-        )}
-      >
-        {detached ? (
-          <Tooltip.Trigger asChild content={t('detached thread label')} side='top'>
-            <ThreadHeading detached>{thread.name}</ThreadHeading>
-          </Tooltip.Trigger>
-        ) : (
-          <ThreadHeading>{thread.name}</ThreadHeading>
-        )}
-        <div className='flex flex-row items-center pli-1'>
-          {thread.status === 'staged' && <Tag palette='neutral'>{t('draft button')}</Tag>}
-          {onResolve && !(thread?.status === 'staged') && (
-            <ToggleResolvedButton isResolved={thread?.status === 'resolved'} onResolve={handleResolve} />
-          )}
-          {onThreadDelete && <DeleteThreadButton onDelete={handleThreadDelete} />}
-        </div>
-      </div>
-      {/** TODO(dmaretskyi): How's `thread.messages` undefined? */}
-      {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.
-          There can be multiple threads with inputs and they can't all be focused.
-          Also, it steals focus from documents when first rendered.
-          Need to find a way to autofocus in one scenario only: when a new thread is created.
-      */}
-      <MessageTextbox extensions={extensions} onSend={handleComment} {...textboxMetadata} />
-      <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
-      {/* 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} />
-    </Thread>
-  );
-};

package/src/components/ThreadComplementary.tsx

@@ -1,151 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useCapability,
-  useCapabilities,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { fullyQualifiedId, getSpace, useQuery } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { useThemeContext, 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 { AnchoredTo } from '@dxos/schema';
-
-import { ThreadCapabilities } from '../capabilities';
-import { CommentsContainer } from '../components';
-import { THREAD_PLUGIN } from '../meta';
-import { ThreadAction, ThreadType } from '../types';
-
-export const ThreadComplementary = ({ subject }: { subject: any }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const identity = useIdentity();
-  const { t } = useTranslation(THREAD_PLUGIN);
-  const { tx } = useThemeContext();
-  const subjectId = fullyQualifiedId(subject);
-
-  const { state, getViewState } = useCapability(ThreadCapabilities.MutableState);
-  const drafts = state.drafts[subjectId];
-  const viewState = useMemo(() => getViewState(subjectId), [getViewState, subjectId]);
-  const { showResolvedThreads } = viewState;
-  const onChangeViewState = useCallback(
-    (nextValue: string) => {
-      viewState.showResolvedThreads = nextValue === 'all';
-    },
-    [viewState],
-  );
-
-  const anchorSorts = useCapabilities(Capabilities.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));
-  const anchors = objectsAnchoredTo
-    .toSorted((a, b) => sort?.(a, b) ?? 0)
-    .filter((anchor) => Obj.instanceOf(ThreadType, Relation.getSource(anchor)))
-    .concat(drafts ?? []);
-
-  const attended = useAttended();
-
-  const handleAttend = useCallback(
-    (anchor: AnchoredTo) => {
-      const thread = Relation.getSource(anchor) as ThreadType;
-      const threadId = fullyQualifiedId(thread);
-
-      if (state.current !== threadId) {
-        state.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: fullyQualifiedId(subject),
-            options: {
-              cursor: anchor.anchor,
-              ref: threadId,
-            },
-          }),
-        );
-      }
-    },
-    [state.current, dispatch, subject],
-  );
-
-  const handleComment = useCallback(
-    async (anchor: AnchoredTo, text: string) => {
-      await dispatch(
-        createIntent(ThreadAction.AddMessage, { anchor, subject, sender: { identityDid: identity?.did }, text }),
-      );
-
-      const thread = Relation.getSource(anchor) as ThreadType;
-      state.current = fullyQualifiedId(thread);
-    },
-    [dispatch, identity, subject],
-  );
-
-  const handleResolve = useCallback(
-    (anchor: AnchoredTo) =>
-      dispatch(createIntent(ThreadAction.ToggleResolved, { thread: Relation.getSource(anchor) as ThreadType })),
-    [dispatch],
-  );
-
-  const handleThreadDelete = useCallback(
-    (anchor: AnchoredTo) => dispatch(createIntent(ThreadAction.Delete, { anchor, subject })),
-    [dispatch, subject],
-  );
-
-  const handleMessageDelete = useCallback(
-    (anchor: AnchoredTo, messageId: string) =>
-      dispatch(createIntent(ThreadAction.DeleteMessage, { anchor, subject, messageId })),
-    [dispatch, subject],
-  );
-
-  const comments = (
-    <CommentsContainer
-      anchors={anchors}
-      currentId={attended.includes(subjectId) ? state.current : undefined}
-      showResolvedThreads={showResolvedThreads}
-      onAttend={handleAttend}
-      onComment={handleComment}
-      onResolve={handleResolve}
-      onMessageDelete={handleMessageDelete}
-      onThreadDelete={handleThreadDelete}
-    />
-  );
-
-  return (
-    <StackItem.Content toolbar>
-      <Tabs.Root
-        value={showResolvedThreads ? 'all' : 'unresolved'}
-        orientation='horizontal'
-        classNames='contents [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:overflow-y-auto [&_[role="tabpanel"]]:scrollbar-thin'
-        onValueChange={onChangeViewState}
-      >
-        <Tabs.Tablist classNames={tx('toolbar.root', 'toolbar', {})}>
-          <Tabs.Tab value='unresolved' classNames='text-sm'>
-            {t('show unresolved label')}
-          </Tabs.Tab>
-          <Tabs.Tab value='all' classNames='text-sm'>
-            {t('show all label')}
-          </Tabs.Tab>
-        </Tabs.Tablist>
-        <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
-        <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
-      </Tabs.Root>
-    </StackItem.Content>
-  );
-};

package/src/peers.stories.tsx

@@ -1,189 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-
-import { scheduleTask, sleep } from '@dxos/async';
-import { Context } from '@dxos/context';
-import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
-import { Config, useConfig } from '@dxos/react-client';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { Button } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { type TrackObject, CallsServicePeer, CALLS_URL } from './calls';
-// @ts-ignore
-import video from '../testing/video.mp4';
-
-const useVideoStreamTrack = (videoElement: HTMLVideoElement | null) => {
-  // Get video stream track.
-  const [videoStreamTrack, setVideoStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);
-  const hadRun = useRef(false);
-  useEffect(() => {
-    // This is done to capture only one video stream.
-    if (!videoElement || hadRun.current || !video) {
-      return;
-    }
-    hadRun.current = true;
-
-    videoElement.src = video;
-    videoElement.addEventListener('playing', () => {
-      const stream = (videoElement as any).captureStream();
-      log.info('captured stream', { stream });
-      stream.onaddtrack = (event: MediaStreamTrackEvent) => {
-        if (event.track.kind === 'video') {
-          log.info('video stream track state', { state: event.track.readyState });
-          setVideoStreamTrack(event.track);
-        }
-      };
-    });
-  }, [videoElement]);
-
-  return videoStreamTrack;
-};
-
-const DefaultStory = ({ videoSrc }: { videoSrc: string }) => {
-  const config = useConfig();
-  const callsConfig = {
-    iceServers: config.get('runtime.services.ice'),
-    apiBase: `${CALLS_URL}/api/calls`,
-  };
-  const peerPush = useMemo(() => new CallsServicePeer(callsConfig), []);
-  const peerPull = useMemo(() => new CallsServicePeer(callsConfig), []);
-  const pushVideoElement = useRef<HTMLVideoElement>(null);
-  const pullVideoElement = useRef<HTMLVideoElement>(null);
-  const [metrics, setMetrics] = useState<Record<string, any>>({});
-  // Get video stream track.
-  const videoStreamTrack = useVideoStreamTrack(pushVideoElement.current);
-  const pullCtx = useRef<Context | undefined>(undefined);
-  const trackInfo = useRef<TrackObject | undefined>(undefined);
-  const hadRun = useRef(false);
-
-  // Push/pull video stream track to cloudflare.
-  useEffect(() => {
-    if (hadRun.current || !videoStreamTrack || !peerPush || !peerPull) {
-      return;
-    }
-    hadRun.current = true;
-    const ctx = new Context();
-    scheduleTask(ctx, async () => {
-      log.info('starting push/pull', { videoStreamTrack });
-      await peerPush.open();
-      await peerPull.open();
-      ctx.onDispose(() => {
-        void peerPush.close();
-        void peerPull.close();
-      });
-
-      // Push track to cloudflare.
-      performance.mark('push:begin');
-      const pushedTrack = await peerPush.pushTrack({ track: videoStreamTrack });
-      trackInfo.current = pushedTrack;
-      performance.mark('push:end');
-      const pushTime = performance.measure('push', 'push:begin', 'push:end').duration;
-      log.info('successfully pushed track', { pushTime, pushedTrack });
-      setMetrics((prev) => ({ ...prev, 'time to push track [ms]': Math.round(pushTime) }));
-
-      // Wait for cloudflare to process the track.
-      await sleep(500);
-
-      // Pull track from cloudflare.
-      performance.mark('pullTrack:begin');
-      pullCtx.current = new Context();
-      const pulledTrack = await peerPull.pullTrack({
-        trackData: { ...pushedTrack, mid: undefined },
-        ctx: pullCtx.current,
-      });
-      performance.mark('pullTrack:end');
-      const pullTime = performance.measure('pullTrack', 'pullTrack:begin', 'pullTrack:end').duration;
-      setMetrics((prev) => ({ ...prev, 'time to pull track [ms]': Math.round(pullTime) }));
-      log.info('successfully pulled track', { pullTime, pulledTrack });
-
-      invariant(pulledTrack);
-      invariant(pullVideoElement.current);
-      performance.mark('playVideo:begin');
-      pullVideoElement.current.srcObject = new MediaStream([pulledTrack]);
-      await pullVideoElement.current.play();
-      performance.mark('playVideo:end');
-      const playTime = performance.measure('playVideo', 'playVideo:begin', 'playVideo:end').duration;
-      setMetrics((prev) => ({ ...prev, 'time to play pulled video [ms]': Math.round(playTime) }));
-    });
-
-    return () => {
-      void ctx.dispose();
-    };
-  }, [videoStreamTrack, peerPush, peerPull]);
-
-  const handleRePullVideo = async () => {
-    performance.mark('rePullVideo:begin');
-    invariant(pullVideoElement.current);
-    invariant(pullVideoElement.current.srcObject instanceof MediaStream);
-    const pulledTrack = pullVideoElement.current.srcObject.getTracks()[0];
-    invariant(pulledTrack);
-    pullVideoElement.current.srcObject.removeTrack(pulledTrack);
-    await pullCtx.current!.dispose();
-    pulledTrack.stop();
-    pullCtx.current = new Context();
-    const newPulledTrack = await peerPull.pullTrack({
-      trackData: { ...trackInfo.current!, mid: undefined },
-      ctx: pullCtx.current,
-    });
-    invariant(newPulledTrack);
-    pullVideoElement.current.srcObject.addTrack(newPulledTrack);
-    performance.mark('rePullVideo:end');
-    const rePullTime = performance.measure('rePullVideo', 'rePullVideo:begin', 'rePullVideo:end').duration;
-    setMetrics((prev) => ({ ...prev, 'time to re-pull video [ms]': Math.round(rePullTime) }));
-  };
-
-  return (
-    <div className='grid grid-cols-3 gap-4 items-center'>
-      <video ref={pushVideoElement} muted autoPlay src={video} loop />
-      <Json data={metrics} />
-      <div className='flex flex-col gap-4'>
-        <video ref={pullVideoElement} muted />
-        <Button
-          disabled={
-            !(
-              pullVideoElement?.current?.srcObject instanceof MediaStream &&
-              pullVideoElement.current.srcObject.getTracks()[0]
-            )
-          }
-          onClick={handleRePullVideo}
-        >
-          Re-pull video
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-thread/peers',
-  render: DefaultStory,
-  decorators: [
-    withClientProvider({
-      config: new Config({ runtime: { services: { iceProviders: [{ urls: 'https://edge.dxos.workers.dev/ice' }] } } }),
-    }),
-    withTheme,
-    withLayout(),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DefaultStory>;
-
-export const Default: Story = {
-  args: {
-    videoSrc: video,
-  },
-};

package/src/types/schema.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Type } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
-
-export const ThreadStatus = Schema.Union(
-  Schema.Literal('staged'),
-  Schema.Literal('active'),
-  Schema.Literal('resolved'),
-);
-
-const _ThreadType = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  status: Schema.optional(ThreadStatus),
-  messages: Schema.mutable(Schema.Array(Type.Ref(DataType.Message))),
-}).pipe(Type.Obj({ typename: 'dxos.org/type/Thread', version: '0.1.0' }));
-export interface ThreadType extends Schema.Schema.Type<typeof _ThreadType> {}
-export const ThreadType: Type.obj<Schema.Schema<ThreadType, Schema.Schema.Encoded<typeof _ThreadType>, never>> =
-  _ThreadType;
-
-const _ChannelType = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  defaultThread: Type.Ref(ThreadType),
-  // TODO(wittjosiah): Should be an "ordered collection".
-  threads: Schema.mutable(Schema.Array(Type.Ref(ThreadType))),
-}).pipe(Type.Obj({ typename: 'dxos.org/type/Channel', version: '0.1.0' }));
-export interface ChannelType extends Schema.Schema.Type<typeof _ChannelType> {}
-export const ChannelType: Type.obj<Schema.Schema<ChannelType, Schema.Schema.Encoded<typeof _ChannelType>, never>> =
-  _ChannelType;