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

package/src/capabilities/react-root.tsx

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

package/src/capabilities/react-surface.tsx

@@ -4,55 +4,67 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useLayout } from '@dxos/app-framework';
-import { type Ref } from '@dxos/echo-schema';
-import { DXN } from '@dxos/keys';
+import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { isInstanceOf, type Ref } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
-import { ChannelType, type ThreadType } from '@dxos/plugin-space/types';
-import { getSpace, isSpace, type Space } from '@dxos/react-client/echo';
+import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 
-import { ChatContainer, ThreadComplementary, ThreadSettings } from '../components';
+import { ThreadCapabilities } from './capabilities';
+import {
+  CallSidebar,
+  CallDebugPanel,
+  ChannelContainer,
+  ThreadComplementary,
+  ThreadSettings,
+  ChatContainer,
+} from '../components';
 import { THREAD_PLUGIN } from '../meta';
-import { type ThreadSettingsProps } from '../types';
+import { ChannelType, ThreadType, type ThreadSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: `${THREAD_PLUGIN}/channel`,
       role: 'article',
-      filter: (data): data is { subject: ChannelType } => data.subject instanceof ChannelType,
-      component: ({ data: { subject: channel }, role }) => {
-        const layout = useLayout();
-        const currentPosition = layout.active.findIndex((id) => id === channel.id);
-        const objectToTheLeft = layout.active[currentPosition - 1];
-        const context = currentPosition > 0 ? getSpace(channel)?.db.getObjectById(objectToTheLeft) : undefined;
+      filter: (data): data is { subject: ChannelType } => isInstanceOf(ChannelType, data.subject),
+      component: ({ data: { subject: channel }, role }) => <ChannelContainer channel={channel} role={role} />,
+    }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/chat-companion`,
+      role: 'article',
+      filter: (data): data is { companionTo: ChannelType; subject: 'chat' } =>
+        isInstanceOf(ChannelType, data.companionTo) && data.subject === 'chat',
+      component: ({ data: { companionTo: channel } }) => {
         const space = getSpace(channel);
-        if (!space) {
+        const thread = channel.defaultThread.target;
+        if (!space || !thread) {
           return null;
         }
 
-        return <ChatContainer space={space} dxn={channel.queue.dxn} context={context} />;
+        return <ChatContainer thread={thread} space={space} />;
+      },
+    }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/thread`,
+      role: 'article',
+      filter: (data): data is { subject: ThreadType } => isInstanceOf(ThreadType, data.subject),
+      component: ({ data: { subject: thread } }) => {
+        const space = getSpace(thread);
+        if (!space || !thread) {
+          return null;
+        }
+
+        return <ChatContainer thread={thread} space={space} />;
       },
     }),
     createSurface({
       id: `${THREAD_PLUGIN}/comments`,
       role: 'article',
       filter: (data): data is { companionTo: { threads: Ref<ThreadType>[] } } =>
-        data.subject === 'comments' &&
-        !!data.companionTo &&
-        typeof data.companionTo === 'object' &&
-        'threads' in data.companionTo &&
-        Array.isArray(data.companionTo.threads),
+        data.subject === 'comments' && isEchoObject(data.companionTo),
       // TODO(wittjosiah): This isn't scrolling properly in a plank.
       component: ({ data }) => <ThreadComplementary subject={data.companionTo} />,
     }),
-    createSurface({
-      id: `${THREAD_PLUGIN}/tabpanel`,
-      role: 'tabpanel',
-      filter: (data): data is { subject: DXN; space: Space } =>
-        data.subject instanceof DXN && data.type === 'chat' && isSpace(data.space),
-      component: ({ data: { subject: dxn, space } }) => <ChatContainer dxn={dxn} space={space} />,
-    }),
     createSurface({
       id: `${THREAD_PLUGIN}/plugin-settings`,
       role: 'article',
@@ -60,4 +72,17 @@ export default () =>
         data.subject instanceof SettingsStore && data.subject.prefix === THREAD_PLUGIN,
       component: ({ data: { subject } }) => <ThreadSettings settings={subject.value} />,
     }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/assistant`,
+      role: 'deck-companion--active-call',
+      component: () => <CallSidebar />,
+    }),
+    createSurface({
+      id: `${THREAD_PLUGIN}/devtools-overview`,
+      role: 'devtools-overview',
+      component: () => {
+        const call = useCapability(ThreadCapabilities.CallManager);
+        return <CallDebugPanel state={call.state} />;
+      },
+    }),
   ]);

package/src/capabilities/state.ts

@@ -11,7 +11,7 @@ import { type ThreadState, type ViewStore } from '../types';
 const initialViewState = { showResolvedThreads: false };
 
 export default () => {
-  const state = live<ThreadState>({ activities: {}, drafts: {} });
+  const state = live<ThreadState>({ toolbar: {}, drafts: {} });
   const viewStore = live<ViewStore>({});
 
   const getViewState = (subjectId: string) => {

package/src/components/Call/Call.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren, type FC } from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+import { type ThemedClassName } from '@dxos/react-ui';
+
+import { Toolbar, type ToolbarProps } from './Toolbar';
+import { ThreadCapabilities } from '../../capabilities';
+import { useDebugMode } from '../../hooks';
+import { AudioStream } from '../Media';
+import { ParticipantGrid } from '../Participant';
+
+//
+// Root
+//
+
+type CallRootProps = PropsWithChildren<ThemedClassName>;
+
+const CallRoot: FC<CallRootProps> = ({ children }) => {
+  return <div className='relative flex flex-col grow overflow-hidden'>{children}</div>;
+};
+
+CallRoot.displayName = 'CallRoot';
+
+//
+// Audio
+//
+
+type CallAudioProps = {};
+
+const CallAudio: FC<CallAudioProps> = () => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+
+  return <AudioStream tracks={call.pulledAudioTracks} />;
+};
+
+CallAudio.displayName = 'CallAudio';
+
+//
+// Room
+//
+
+type CallGridProps = {
+  fullscreen?: boolean;
+};
+
+const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
+  const debug = useDebugMode();
+  const call = useCapability(ThreadCapabilities.CallManager);
+
+  return (
+    <div className='grid grow p-4 dark:bg-neutral-900'>
+      <ParticipantGrid self={call.self} users={call.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

@@ -0,0 +1,182 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useAppGraph, useCapability } from '@dxos/app-framework';
+import { useNode, useActions } from '@dxos/plugin-graph';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import {
+  Icon,
+  IconButton,
+  type IconButtonProps,
+  type ThemedClassName,
+  Toolbar as NativeToolbar,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { hoverableHidden, mx } from '@dxos/react-ui-theme';
+
+import { ThreadCapabilities } from '../../capabilities';
+import { THREAD_PLUGIN } from '../../meta';
+import { type ChannelType } from '../../types';
+
+export type ToolbarProps = ThemedClassName<{
+  channel?: ChannelType;
+  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(THREAD_PLUGIN);
+  const { graph } = useAppGraph();
+  const call = useCapability(ThreadCapabilities.CallManager);
+
+  // Channel app graph node.
+  const node = useNode(graph, channel && fullyQualifiedId(channel));
+  const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
+
+  // Screen sharing.
+  const isScreensharing = call.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 && hoverableHidden)}>
+      <NativeToolbar.Root classNames={['p-2 bg-modalSurface rounded-lg shadow-lg', classNames]}>
+        <ToggleButton
+          active={call.media.audioEnabled}
+          state={{
+            on: {
+              icon: 'ph--microphone--regular',
+              label: t('mic off'),
+              onClick: () => call.turnAudioOff(),
+              classNames: 'bg-callActive',
+            },
+            off: {
+              icon: 'ph--microphone-slash--duotone',
+              label: t('mic on'),
+              onClick: () => call.turnAudioOn(),
+              classNames: [call.joined && 'bg-callAlert'],
+            },
+          }}
+        />
+        <ToggleButton
+          active={call.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 is-[5rem] text-xs text-subdued'>
+            <Icon icon='ph--users--regular' size={4} />
+            <div>{participants}</div>
+          </div>
+        )) || <NativeToolbar.Separator variant='gap' />}
+
+        {call.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.map((action) => (
+              <IconButton
+                key={action.id}
+                {...defaultButtonProps}
+                icon={action.properties.icon}
+                label={toLocalizedString(action.properties.label, t)}
+                classNames={action.properties.classNames}
+                onClick={() => action.data({ node })}
+              />
+            ))}
+
+            <ToggleButton
+              active={call.raisedHand}
+              state={{
+                on: {
+                  icon: 'ph--hand-waving--regular',
+                  label: t('lower hand'),
+                  onClick: () => call.setRaisedHand(false),
+                  classNames: [call.joined && 'bg-callAlert'],
+                },
+                off: {
+                  icon: 'ph--hand-palm--duotone',
+                  label: t('raise hand'),
+                  onClick: () => call.setRaisedHand(true),
+                },
+              }}
+            />
+          </>
+        )}
+        {call.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} />
+        )}
+      </NativeToolbar.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-callActive' : 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

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

package/src/components/CallDebugPanel.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { WebRTCStats } from '@peermetrics/webrtc-stats';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Panel } from '@dxos/devtools';
+import { log } from '@dxos/log';
+import { Input, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+
+import { type GlobalState } from '../calls';
+import { THREAD_PLUGIN } from '../meta';
+
+export type CallDebugPanelProps = ThemedClassName<{
+  state?: GlobalState;
+}>;
+
+export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
+  const users = state?.call?.users;
+  const self = state?.call?.self;
+  const { t } = useTranslation(THREAD_PLUGIN);
+
+  const [open, setOpen] = useState(false);
+  const handleToggle = () => setOpen(!open);
+  const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState(false);
+  const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
+
+  const webrtcStats = useMemo(
+    () =>
+      new WebRTCStats({
+        getStatsInterval: 1000,
+      }),
+    [],
+  );
+
+  const [stats, setStats] = useState<Record<string, any>>({});
+  useEffect(() => {
+    const pc = state?.media.peer?.session?.peerConnection;
+    const handleStats = (stats: Record<string, any>) => setStats(stats.data);
+    let added = false;
+    if (pc && showDetailedWebRTCStats) {
+      webrtcStats.addConnection({ pc, peerId: 1, connectionId: '1' });
+      webrtcStats.on('stats', handleStats);
+      added = true;
+    }
+    return () => {
+      try {
+        if (pc && added) {
+          webrtcStats.removeConnection({ pc });
+          webrtcStats.removeListener('stats', handleStats);
+        }
+      } catch (error) {
+        log.error('error removing webrtc stats', { error, pc, peerId: 1, connectionId: '1' });
+      }
+    };
+  }, [state?.media.peer?.session?.peerConnection, showDetailedWebRTCStats]);
+
+  return (
+    <Panel
+      id='meeting-status'
+      icon='ph--video-conference--regular'
+      open={open}
+      onToggle={handleToggle}
+      title={t('meeting status title')}
+      maxHeight={false}
+      info={
+        <div className='flex items-center gap-2'>
+          <span title='Joined'>{self?.joined ? 'Active' : 'Inactive'}</span>
+          {users?.length !== undefined && <span title='Users'>{users?.length ?? 0} User(s)</span>}
+        </div>
+      }
+    >
+      <div className='flex flex-col gap-2 overflow-y-auto'>
+        <div className='flex items-row gap-2'>
+          <Input.Root>
+            <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
+            <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+          </Input.Root>
+        </div>
+        <Json
+          classNames='text-sm'
+          data={{
+            users,
+            activities: state?.call?.activities,
+            ...(showDetailedWebRTCStats
+              ? {
+                  webrtc: {
+                    connectionState: state?.media.peer?.session?.peerConnection.connectionState,
+                    iceConnectionState: state?.media.peer?.session?.peerConnection.iceConnectionState,
+                    stats,
+                  },
+                }
+              : {}),
+            tracks: state?.media.peer?.session?.peerConnection.getTransceivers().map((transceiver) => {
+              const track =
+                transceiver.direction === 'recvonly' ? transceiver.receiver.track : transceiver.sender.track;
+              return {
+                id: track?.id,
+                kind: track?.kind,
+                direction: transceiver.direction,
+                enabled: track?.enabled,
+                muted: track?.muted,
+                readyState: track?.readyState,
+                settings: track?.getSettings(),
+              };
+            }),
+            callsServiceHistory: state?.media.peer?.history.get(),
+          }}
+        />
+      </div>
+    </Panel>
+  );
+};

package/src/components/CallSidebar.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useCapability } from '@dxos/app-framework';
+
+import { ChannelContainer } from './ChannelContainer';
+import { ThreadCapabilities } from '../capabilities';
+
+export const CallSidebar = () => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+  return <ChannelContainer roomId={call.roomId} />;
+};
+
+export default CallSidebar;

package/src/components/ChannelContainer.stories.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { contributes } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
+import { withLayout, ColumnContainer } from '@dxos/storybook-utils';
+
+import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+import { createThreadPlugins } from '../testing';
+import translations from '../translations';
+import { ChannelType, ThreadType } from '../types';
+
+// TODO(wittjosiah): Channel doesn't render full height.
+const Story = () => {
+  const space = useSpace();
+  const [channel] = useQuery(space, Query.type(ChannelType));
+  if (!channel) {
+    return null;
+  }
+
+  return <ChannelContainer channel={channel} />;
+};
+
+const meta: Meta<ChannelContainerProps> = {
+  title: 'plugins/plugin-thread/ChannelContainer',
+  component: ChannelContainer,
+  render: () => <Story />,
+  decorators: [
+    withPluginManager({
+      plugins: [...(await createThreadPlugins())],
+      capabilities: [contributes(ClientCapabilities.Schema, [ChannelType, ThreadType, DataType.Message])],
+    }),
+    withLayout({ Container: ColumnContainer, classNames: 'w-[40rem] overflow-hidden' }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ChannelContainerProps>;
+
+export const Default: Story = {
+  args: {
+    // Fixed room for testing.
+    roomId: '04a1d1911703b8e929d0649021a965',
+  },
+};