@dxos/plugin-thread 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/capabilities/call-manager/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const CallManager = Capability.lazy('CallManager', () => import('./call-manager'));

package/src/capabilities/markdown/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const Markdown = Capability.lazy('Markdown', () => import('./markdown'));

package/src/capabilities/operation-handler/index.ts

@@ -1,11 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
-
-export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
-  'OperationHandler',
-  () => import('./operation-handler'),
-);

package/src/capabilities/react-root/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));

package/src/capabilities/react-root/react-root.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React from 'react';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-
-import { Call } from '../../components';
-import { meta } from '../../meta';
-
-export default Capability.makeModule(() =>
-  Effect.sync(() => {
-    return Capability.contributes(Capabilities.ReactRoot, {
-      id: meta.id,
-      root: () => <Call.Audio />,
-    });
-  }),
-);

package/src/capabilities/react-surface/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -1,101 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useAtomValue } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
-import React from 'react';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { Obj, type Ref } from '@dxos/echo';
-import { getSpace } from '@dxos/react-client/echo';
-import { Thread } from '@dxos/types';
-
-import {
-  CallDebugPanel,
-  CallSidebar,
-  ChannelContainer,
-  ChatContainer,
-  ThreadCompanion,
-  ThreadSettings,
-} from '../../containers';
-import { meta } from '../../meta';
-import { Channel, ThreadCapabilities, type ThreadSettingsProps } from '../../types';
-
-export default Capability.makeModule(() =>
-  Effect.succeed(
-    Capability.contributes(Capabilities.ReactSurface, [
-      Surface.create({
-        id: `${meta.id}.channel`,
-        role: 'article',
-        filter: (data): data is { attendableId: string; subject: Channel.Channel } =>
-          typeof data.attendableId === 'string' && Obj.instanceOf(Channel.Channel, data.subject),
-        component: ({ data: { subject, attendableId }, role }) => (
-          <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
-        ),
-      }),
-      Surface.create({
-        id: `${meta.id}.chat-companion`,
-        role: 'article',
-        filter: (data): data is { companionTo: Channel.Channel; subject: 'chat' } =>
-          Obj.instanceOf(Channel.Channel, data.companionTo) && data.subject === 'chat',
-        component: ({ data: { companionTo: channel } }) => {
-          const space = getSpace(channel);
-          const thread = channel.defaultThread.target;
-          if (!space || !thread) {
-            return null;
-          }
-
-          return <ChatContainer thread={thread} space={space} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}.thread`,
-        role: 'article',
-        filter: (data): data is { subject: Thread.Thread } => Obj.instanceOf(Thread.Thread, data.subject),
-        component: ({ data: { subject } }) => {
-          const space = getSpace(subject);
-          if (!space || !subject) {
-            return null;
-          }
-
-          return <ChatContainer thread={subject} space={space} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}.comments`,
-        role: 'article',
-        filter: (data): data is { attendableId?: string; companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
-          data.subject === 'comments' && Obj.isObject(data.companionTo),
-        // TODO(wittjosiah): This isn't scrolling properly in a plank.
-        component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
-      }),
-      Surface.create({
-        id: `${meta.id}.plugin-settings`,
-        role: 'article',
-        filter: (data): data is { subject: AppCapabilities.Settings } =>
-          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
-        component: ({ data: { subject } }) => {
-          const { settings, updateSettings } = useSettingsState<ThreadSettingsProps>(subject.atom);
-          return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
-        },
-      }),
-      Surface.create({
-        id: `${meta.id}.assistant`,
-        role: 'deck-companion--active-call',
-        component: () => <CallSidebar />,
-      }),
-      Surface.create({
-        id: `${meta.id}.devtools-overview`,
-        role: 'devtools-overview',
-        component: () => {
-          const call = useCapability(ThreadCapabilities.CallManager);
-          const state = useAtomValue(call.stateAtom);
-          return <CallDebugPanel state={state} />;
-        },
-      }),
-    ]),
-  ),
-);

package/src/capabilities/settings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ThreadSettings = Capability.lazy('ThreadSettings', () => import('./settings'));

package/src/capabilities/state/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ThreadState = Capability.lazy('ThreadState', () => import('./state'));

package/src/capabilities/undo-mappings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/components/Call/Call.tsx

@@ -1,93 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useAtomValue } from '@effect-atom/atom-react';
-import React, { type FC, type PropsWithChildren } from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { type ThemedClassName } from '@dxos/react-ui';
-
-import { useDebugMode } from '../../hooks';
-import { ThreadCapabilities } from '../../types';
-import { AudioStream } from '../Media';
-import { ParticipantGrid } from '../Participant';
-
-import { Toolbar, type ToolbarProps } from './Toolbar';
-
-//
-// Root
-//
-
-type CallRootProps = PropsWithChildren<ThemedClassName>;
-
-const CallRoot: FC<CallRootProps> = ({ children }) => {
-  return <div className='relative dx-container flex flex-col'>{children}</div>;
-};
-
-CallRoot.displayName = 'CallRoot';
-
-//
-// Audio
-//
-
-type CallAudioProps = {};
-
-const CallAudio: FC<CallAudioProps> = () => {
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
-
-  return <AudioStream tracks={audioTracksToPlay} />;
-};
-
-CallAudio.displayName = 'CallAudio';
-
-//
-// Room
-//
-
-type CallGridProps = {
-  fullscreen?: boolean;
-};
-
-const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
-  const debug = useDebugMode();
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const self = useAtomValue(call.selfAtom);
-  const users = useAtomValue(call.usersAtom);
-
-  return (
-    <div className='grid grow p-4 dark:bg-neutral-900'>
-      <ParticipantGrid self={self} users={users} debug={debug} fullscreen={fullscreen} />
-    </div>
-  );
-};
-
-CallGrid.displayName = 'CallGrid';
-
-//
-// Toolbar
-//
-
-type CallToolbarProps = Pick<ToolbarProps, 'channel' | 'onLeave'>;
-
-const CallToolbar: FC<CallToolbarProps> = (props) => {
-  return (
-    <div className='absolute bottom-0 left-0 right-0 flex justify-center'>
-      <Toolbar isInRoom {...props} />
-    </div>
-  );
-};
-
-CallToolbar.displayName = 'CallToolbar';
-
-//
-// Export
-//
-
-export const Call = {
-  Root: CallRoot,
-  Grid: CallGrid,
-  Audio: CallAudio,
-  Toolbar: CallToolbar,
-};

package/src/components/Call/Toolbar.tsx

@@ -1,189 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useAtomValue } from '@effect-atom/atom-react';
-import React from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { Node, useActionRunner } from '@dxos/plugin-graph';
-import { useActions, useNode } from '@dxos/plugin-graph';
-import {
-  Icon,
-  IconButton,
-  type IconButtonProps,
-  Toolbar as NaturalToolbar,
-  type ThemedClassName,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-import { ThreadCapabilities } from '../../types';
-import { type Channel } from '../../types';
-
-export type ToolbarProps = ThemedClassName<{
-  channel?: Channel.Channel;
-  participants?: number;
-  autoHideControls?: boolean;
-  isInRoom?: boolean;
-  onJoin?: () => void;
-  onLeave?: () => void;
-}>;
-
-// TODO(wittjosiah): Use ToolbarMenu.
-export const Toolbar = ({
-  classNames,
-  channel,
-  participants,
-  autoHideControls = true,
-  onJoin,
-  onLeave,
-}: ToolbarProps) => {
-  const { t } = useTranslation(meta.id);
-  const { graph } = useAppGraph();
-  const runAction = useActionRunner();
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const media = useAtomValue(call.mediaAtom);
-  const joined = useAtomValue(call.joinedAtom);
-  const raisedHand = useAtomValue(call.raisedHandAtom);
-
-  // Channel app graph node.
-  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
-  const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
-
-  // Screen sharing.
-  const isScreensharing = media.screenshareTrack !== undefined;
-  const canSharescreen =
-    typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia !== undefined;
-
-  // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
-  return (
-    <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
-        <ToggleButton
-          active={media.audioEnabled}
-          state={{
-            on: {
-              icon: 'ph--microphone--regular',
-              label: t('mic off'),
-              onClick: () => call.turnAudioOff(),
-              classNames: 'bg-call-active',
-            },
-            off: {
-              icon: 'ph--microphone-slash--duotone',
-              label: t('mic on'),
-              onClick: () => call.turnAudioOn(),
-            },
-          }}
-        />
-        <ToggleButton
-          active={media.videoEnabled}
-          state={{
-            on: {
-              icon: 'ph--video-camera--regular',
-              label: t('camera off'),
-              onClick: () => call.turnVideoOff(),
-            },
-            off: {
-              icon: 'ph--video-camera-slash--duotone',
-              label: t('camera on'),
-              onClick: () => call.turnVideoOn(),
-            },
-          }}
-        />
-
-        {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
-            <Icon icon='ph--users--regular' />
-            <div>{participants}</div>
-          </div>
-        )) || <NaturalToolbar.Separator variant='gap' />}
-
-        {joined && (
-          <>
-            <ToggleButton
-              disabled={!canSharescreen}
-              active={isScreensharing}
-              state={{
-                on: {
-                  icon: 'ph--monitor--regular',
-                  label: t('screenshare off'),
-                  onClick: () => call.turnScreenshareOff(),
-                },
-                off: {
-                  icon: 'ph--monitor-arrow-up--duotone',
-                  label: t('screenshare on'),
-                  onClick: () => call.turnScreenshareOn(),
-                },
-              }}
-            />
-
-            {/* Companion actions. */}
-            {actions
-              .filter((action): action is Node.Action => Node.isAction(action))
-              .map((action) => (
-                <IconButton
-                  key={action.id}
-                  {...defaultButtonProps}
-                  icon={action.properties.icon}
-                  label={toLocalizedString(action.properties.label, t)}
-                  classNames={action.properties.classNames}
-                  onClick={() => node && void runAction(action, { parent: node })}
-                />
-              ))}
-
-            <ToggleButton
-              active={raisedHand}
-              state={{
-                on: {
-                  icon: 'ph--hand-waving--regular',
-                  label: t('lower hand'),
-                  onClick: () => call.setRaisedHand(false),
-                },
-                off: {
-                  icon: 'ph--hand-palm--duotone',
-                  label: t('raise hand'),
-                  onClick: () => call.setRaisedHand(true),
-                },
-              }}
-            />
-          </>
-        )}
-        {joined ? (
-          <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
-        ) : (
-          <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
-        )}
-      </NaturalToolbar.Root>
-    </div>
-  );
-};
-
-Toolbar.displayName = 'MeetingToolbar';
-
-type ToolbarButtonProps = Pick<IconButtonProps, 'disabled'> & {
-  active?: boolean;
-  state: {
-    on: Pick<IconButtonProps, 'icon' | 'label' | 'onClick' | 'classNames'>;
-    off: Pick<IconButtonProps, 'icon' | 'label' | 'onClick' | 'classNames'>;
-  };
-};
-
-const defaultButtonProps: Partial<IconButtonProps> = {
-  size: 5,
-  iconOnly: true,
-};
-
-const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
-  <IconButton
-    {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
-    icon={active ? state.on.icon : state.off.icon}
-    label={active ? state.on.label : state.off.label}
-    onClick={active ? state.on.onClick : state.off.onClick}
-  />
-);

package/src/components/Call/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Call';
-export * from './Toolbar';

package/src/components/Lobby/Lobby.tsx

@@ -1,121 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useAtomValue } from '@effect-atom/atom-react';
-import React, { type FC, type PropsWithChildren, useEffect, useState } from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-import { ThreadCapabilities } from '../../types';
-import { Toolbar, type ToolbarProps } from '../Call';
-import { VideoObject } from '../Media';
-import { ResponsivePanel } from '../ResponsiveGrid';
-
-// TODO(wittjosiah): Repurpose lobby for preview.
-
-const SWARM_PEEK_INTERVAL = 1_000;
-
-//
-// Root
-//
-
-type LobbyRootProps = PropsWithChildren<ThemedClassName>;
-
-const LobbyRoot: FC<LobbyRootProps> = ({ children }) => {
-  return <div className='relative flex flex-col grow overflow-hidden group'>{children}</div>;
-};
-
-LobbyRoot.displayName = 'LobbyRoot';
-
-//
-// Preview
-//
-
-type LobbyPreviewProps = {};
-
-const LobbyPreview: FC<LobbyPreviewProps> = () => {
-  const { t } = useTranslation(meta.id);
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const media = useAtomValue(call.mediaAtom);
-  const [classNames, setClassNames] = useState('');
-  useEffect(() => {
-    if (!media.videoEnabled) {
-      setClassNames('');
-      return;
-    }
-
-    // Video element will expand once the stream is available.
-    const timeout = setTimeout(() => {
-      setClassNames('outline-neutral-900 opacity-100');
-    }, 500);
-
-    return () => clearTimeout(timeout);
-  }, [media.videoEnabled]);
-
-  return (
-    <div className='grid grow p-4'>
-      <ResponsivePanel>
-        {(media.videoEnabled && (
-          <VideoObject
-            videoStream={media.videoStream}
-            flip
-            muted
-            classNames={mx(
-              'rounded-md outline outline-2 outline-transparent opacity-0 transition-all duration-500',
-              classNames,
-            )}
-          />
-        )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera off label')}</div>}
-      </ResponsivePanel>
-    </div>
-  );
-};
-
-LobbyPreview.displayName = 'LobbyPreview';
-
-//
-// Toolbar
-//
-
-type LobbyToolbarProps = ThemedClassName<
-  {
-    roomId: string;
-  } & Pick<ToolbarProps, 'onJoin'>
->;
-
-const LobbyToolbar: FC<LobbyToolbarProps> = ({ roomId, ...props }) => {
-  const call = useCapability(ThreadCapabilities.CallManager);
-  const [count, setCount] = useState<number>(0);
-
-  // TODO(wittjosiah): Leaving the room doesn't remove you from the swarm.
-  useEffect(() => {
-    void call.peek(roomId).then((count) => setCount(count));
-    const interval = setInterval(() => {
-      void call.peek(roomId).then((count) => setCount(count));
-    }, SWARM_PEEK_INTERVAL);
-
-    return () => clearInterval(interval);
-  }, [call, roomId]);
-
-  return (
-    <div className='absolute bottom-0 left-0 right-0 flex justify-center'>
-      <Toolbar participants={count} isInRoom={false} {...props} />
-    </div>
-  );
-};
-
-LobbyToolbar.displayName = 'LobbyToolbar';
-
-//
-// Export
-//
-
-export const Lobby = {
-  Root: LobbyRoot,
-  Preview: LobbyPreview,
-  Toolbar: LobbyToolbar,
-};

package/src/components/Lobby/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Lobby';

package/src/components/Media/AudioStream.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type FC, useEffect, useRef } from 'react';
-
-export type AudioStreamProps = {
-  tracks: MediaStreamTrack[];
-};
-
-export const AudioStream: FC<AudioStreamProps> = ({ tracks }) => {
-  const mediaStreamRef = useRef(new MediaStream());
-  const ref = useRef<HTMLAudioElement>(null);
-
-  useEffect(() => {
-    const audio = ref.current;
-    if (!audio) {
-      return;
-    }
-
-    const mediaStream = mediaStreamRef.current;
-    audio.srcObject = mediaStream;
-  }, []);
-
-  const resetSrcObject = () => {
-    const audio = ref.current;
-    const mediaStream = mediaStreamRef.current;
-    if (!audio || !mediaStream) {
-      return;
-    }
-
-    // Need to set srcObject again in Chrome and call play() again for Safari
-    // https://www.youtube.com/live/Tkx3OGrwVk8?si=K--P_AzNnAGrjraV&t=2533
-    // Calling play() this way to make Chrome happy otherwise it throws an error.
-    audio.addEventListener('canplay', () => audio.play(), { once: true });
-    audio.srcObject = mediaStream;
-  };
-
-  return (
-    <>
-      <audio ref={ref} autoPlay />
-      {tracks.map((track) => (
-        <AudioTrack key={track.id} track={track} mediaStream={mediaStreamRef.current} resetSrcObject={resetSrcObject} />
-      ))}
-    </>
-  );
-};
-
-type AudioTrackParams = {
-  track: MediaStreamTrack;
-  mediaStream: MediaStream;
-  resetSrcObject: () => void;
-};
-
-const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackParams) => {
-  useEffect(() => {
-    const currentTrack = track;
-    mediaStream.addTrack(currentTrack);
-    resetSrcObject();
-    return () => {
-      mediaStream.removeTrack(currentTrack);
-      resetSrcObject();
-    };
-  }, [track, mediaStream]);
-
-  return null;
-};