@dxos/plugin-thread 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/components/ThreadComplementary.tsx

@@ -2,30 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo } from 'react';
-
-import { createIntent, LayoutAction, useCapability, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
-import { ThreadCapabilities } from '@dxos/plugin-space';
-import { type ThreadType } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, RefArray } from '@dxos/react-client/echo';
+import React, { useCallback, useMemo } from 'react';
+
+import {
+  createIntent,
+  LayoutAction,
+  useCapability,
+  useCapabilities,
+  useIntentDispatcher,
+  Capabilities,
+} from '@dxos/app-framework';
+import { Filter, getTypename, isInstanceOf, Query, RelationSourceId } from '@dxos/echo-schema';
+import { fullyQualifiedId, getSpace, 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 { Tabs } from '@dxos/react-ui-tabs';
-import { isNonNullable } from '@dxos/util';
+import { AnchoredTo } from '@dxos/schema';
 
-import { ThreadCapabilities as LocalThreadCapabilities } from '../capabilities';
+import { ThreadCapabilities } from '../capabilities';
 import { CommentsContainer } from '../components';
 import { THREAD_PLUGIN } from '../meta';
-import { ThreadAction } from '../types';
+import { ThreadAction, ThreadType } from '../types';
 
 export const ThreadComplementary = ({ subject }: { subject: any }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const identity = useIdentity();
   const { t } = useTranslation(THREAD_PLUGIN);
 
-  const { state, getViewState } = useCapability(LocalThreadCapabilities.MutableState);
+  const { state, getViewState } = useCapability(ThreadCapabilities.MutableState);
   const viewState = getViewState(fullyQualifiedId(subject));
   const { showResolvedThreads } = viewState;
   const onChangeViewState = useCallback(
@@ -36,36 +42,24 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
   );
   const drafts = state.drafts[fullyQualifiedId(subject)];
 
-  const threadsIntegrators = useCapabilities(ThreadCapabilities.Thread);
-  const createSort = useMemo(
-    () => threadsIntegrators.find((p) => p.predicate(subject))?.createSort,
-    [threadsIntegrators, subject],
-  );
-  const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
-
-  const threadObjects = RefArray.targets(subject.threads ?? []);
+  const anchorSorts = useCapabilities(Capabilities.AnchorSort);
+  const sort = useMemo(() => anchorSorts.find(({ key }) => key === getTypename(subject))?.sort, [anchorSorts, subject]);
 
-  const threads = useMemo(() => {
-    return threadObjects.concat(drafts ?? []).filter(isNonNullable) as ThreadType[];
-  }, [JSON.stringify(threadObjects), JSON.stringify(drafts)]);
-
-  const detachedIds = useMemo(() => {
-    return threads.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId(thread));
-  }, [threads]);
-
-  useEffect(() => {
-    if (!sort) {
-      return;
-    }
-    threads.sort((a, b) => sort(a?.anchor, b?.anchor));
-  }, [sort, threads]);
+  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) => isInstanceOf(ThreadType, anchor[RelationSourceId]))
+    .concat(drafts ?? []);
 
   const attended = useAttended();
   const qualifiedSubjectId = fullyQualifiedId(subject);
 
   const handleAttend = useCallback(
-    (thread: ThreadType) => {
+    (anchor: AnchoredTo) => {
+      const thread = anchor[RelationSourceId] as ThreadType;
       const threadId = fullyQualifiedId(thread);
+
       if (state.current !== threadId) {
         state.current = threadId;
 
@@ -77,7 +71,7 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
             part: 'current',
             subject: fullyQualifiedId(subject),
             options: {
-              cursor: thread.anchor,
+              cursor: anchor.anchor,
               ref: threadId,
             },
           }),
@@ -88,36 +82,37 @@ export const ThreadComplementary = ({ subject }: { subject: any }) => {
   );
 
   const handleComment = useCallback(
-    async (thread: ThreadType, text: string) => {
+    async (anchor: AnchoredTo, text: string) => {
       await dispatch(
-        createIntent(ThreadAction.AddMessage, { thread, subject, sender: { identityDid: identity?.did }, text }),
+        createIntent(ThreadAction.AddMessage, { anchor, subject, sender: { identityDid: identity?.did }, text }),
       );
 
+      const thread = anchor[RelationSourceId] as ThreadType;
       state.current = fullyQualifiedId(thread);
     },
     [dispatch, identity, subject],
   );
 
   const handleResolve = useCallback(
-    (thread: ThreadType) => dispatch(createIntent(ThreadAction.ToggleResolved, { thread })),
+    (anchor: AnchoredTo) =>
+      dispatch(createIntent(ThreadAction.ToggleResolved, { thread: anchor[RelationSourceId] as ThreadType })),
     [dispatch],
   );
 
   const handleThreadDelete = useCallback(
-    (thread: ThreadType) => dispatch(createIntent(ThreadAction.Delete, { thread, subject })),
+    (anchor: AnchoredTo) => dispatch(createIntent(ThreadAction.Delete, { anchor, subject })),
     [dispatch, subject],
   );
 
   const handleMessageDelete = useCallback(
-    (thread: ThreadType, messageId: string) =>
-      dispatch(createIntent(ThreadAction.DeleteMessage, { thread, subject, messageId })),
+    (anchor: AnchoredTo, messageId: string) =>
+      dispatch(createIntent(ThreadAction.DeleteMessage, { anchor, subject, messageId })),
     [dispatch, subject],
   );
 
   const comments = (
     <CommentsContainer
-      threads={threads}
-      detached={detachedIds}
+      anchors={anchors}
       currentId={attended.includes(qualifiedSubjectId) ? state.current : undefined}
       showResolvedThreads={showResolvedThreads}
       onAttend={handleAttend}

package/src/components/index.ts

@@ -4,9 +4,13 @@
 
 import { lazy } from 'react';
 
+export const ChannelContainer = lazy(() => import('./ChannelContainer'));
 export const ChatContainer = lazy(() => import('./ChatContainer'));
 
 // TODO(wittjosiah): Suspense boundary for sidebar?
+export * from './Call';
+export * from './CallDebugPanel';
+export * from './CallSidebar';
 export * from './CommentContainer';
 export * from './CommentsContainer';
 export * from './MessageContainer';

package/src/components/testing.ts

@@ -4,11 +4,12 @@
 
 import { IdentityDid } from '@dxos/keys';
 import { live, makeRef } from '@dxos/live-object';
-import { ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Identity } from '@dxos/react-client/halo';
 import { DataType } from '@dxos/schema';
 
+import { ThreadType } from '../types';
+
 export const createCommentThread = (identity: Identity) => {
   return live(ThreadType, {
     messages: faker.helpers.multiple(

package/src/extensions/threads.ts

@@ -7,14 +7,13 @@ import { EditorView } from '@codemirror/view';
 import { computed, effect } from '@preact/signals-core';
 
 import { createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { Ref } from '@dxos/echo-schema';
-import { RefArray } from '@dxos/live-object';
+import { Filter, isInstanceOf, Query, RelationSourceId } from '@dxos/echo-schema';
 import { type DocumentType } from '@dxos/plugin-markdown/types';
-import { ThreadType } from '@dxos/plugin-space/types';
-import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId, getSource } from '@dxos/react-client/echo';
 import { comments, createExternalCommentSync } from '@dxos/react-ui-editor';
+import { AnchoredTo } from '@dxos/schema';
 
-import { ThreadAction, type ThreadState } from '../types';
+import { ThreadAction, ThreadType, type ThreadState } from '../types';
 
 // TODO(burdon): Factor out.
 const getName = (doc: DocumentType, anchor: string): string | undefined => {
@@ -35,21 +34,33 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
     return [comments()];
   }
 
-  // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
-  const threads = computed(() =>
-    [...RefArray.targets(doc.threads), ...(state.drafts[fullyQualifiedId(doc)] ?? [])].filter(
-      (thread) => !(thread?.status === 'resolved'),
-    ),
+  const query = space.db.query(Query.select(Filter.ids(doc.id)).targetOf(AnchoredTo));
+  const unsubscribe = query.subscribe();
+
+  const anchors = computed(() =>
+    query.objects
+      .filter((anchor) => {
+        const thread = anchor[RelationSourceId];
+        return isInstanceOf(ThreadType, thread) && thread.status !== 'resolved';
+      })
+      .concat(state.drafts[fullyQualifiedId(doc)] ?? []),
   );
 
   return [
+    EditorView.domEventHandlers({
+      destroy: () => {
+        unsubscribe();
+      },
+    }),
+
     EditorView.updateListener.of((update) => {
       if (update.docChanged) {
-        RefArray.targets(doc.threads).forEach((thread) => {
-          if (thread.anchor) {
+        anchors.value.forEach((anchor) => {
+          if (anchor.anchor) {
             // Only update if the name has changed, otherwise this will cause an infinite loop.
             // Skip if the name is empty; this means comment text was deleted, but thread name should remain.
-            const name = getName(doc, thread.anchor);
+            const name = getName(doc, anchor.anchor);
+            const thread = anchor[RelationSourceId] as ThreadType;
             if (name && name !== thread.name) {
               thread.name = name;
             }
@@ -62,16 +73,16 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
       fullyQualifiedId(doc),
       (sink) => effect(() => sink()),
       () =>
-        threads.value
-          .filter((thread) => thread?.anchor)
-          .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
+        anchors.value
+          .filter((anchor) => anchor.anchor)
+          .map((anchor) => ({ id: fullyQualifiedId(anchor[RelationSourceId]), cursor: anchor.anchor })),
     ),
 
     comments({
       id: fullyQualifiedId(doc),
       onCreate: ({ cursor }) => {
         const name = getName(doc, cursor);
-        void dispatch(createIntent(ThreadAction.Create, { cursor, name, subject: doc }));
+        void dispatch(createIntent(ThreadAction.Create, { anchor: cursor, name, subject: doc }));
       },
       onDelete: ({ id }) => {
         const draft = state.drafts[fullyQualifiedId(doc)];
@@ -82,19 +93,26 @@ export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: Promi
           }
         }
 
-        const thread = doc.threads.find(Ref.hasObjectId(id))?.target;
+        const thread = query.objects.find((object) => getSource(object).id === id);
         if (thread) {
           thread.anchor = undefined;
         }
       },
       onUpdate: ({ id, cursor }) => {
-        const thread =
-          state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
-          doc.threads.find(Ref.hasObjectId(id))?.target;
+        const draft = state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id);
+        if (draft) {
+          const thread = draft[RelationSourceId] as ThreadType;
+          thread.name = getName(doc, cursor);
+          draft.anchor = cursor;
+        }
 
-        if (thread instanceof ThreadType && thread.anchor) {
-          thread.name = getName(doc, thread.anchor);
-          thread.anchor = cursor;
+        const relation = query.objects.find((object) => getSource(object).id === id);
+        if (relation) {
+          const thread = getSource(relation);
+          if (isInstanceOf(ThreadType, thread)) {
+            thread.name = getName(doc, cursor);
+            relation.anchor = cursor;
+          }
         }
       },
       onSelect: ({ selection }) => {

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useStatus';
 export * from './analytics';
+export * from './useDebugMode';
+export * from './useStatus';

package/src/hooks/useDebugMode.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useState, useEffect } from 'react';
+
+// TODO(burdon): Standardize across plugins/composer.
+export const useDebugMode = () => {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    const handler = (ev: KeyboardEvent) => {
+      if (ev.key.toLowerCase() === 'd' && ev.ctrlKey) {
+        ev.preventDefault();
+        setEnabled(!enabled);
+      }
+    };
+
+    document.addEventListener('keypress', handler);
+    return () => {
+      document.removeEventListener('keypress', handler);
+    };
+  }, [enabled]);
+
+  return enabled;
+};

package/src/index.ts

@@ -3,7 +3,7 @@
 //
 
 export { ThreadCapabilities } from './capabilities';
-export * from './events';
+export * from './calls';
 export * from './hooks';
 export * from './meta';
 

package/src/meta.ts

@@ -7,10 +7,11 @@ import { type PluginMeta } from '@dxos/app-framework';
 export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
 export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
 
+// TODO(wittjosiah): Needs screenshots.
 export const meta: PluginMeta = {
   id: THREAD_PLUGIN,
-  name: 'Threads',
-  description: 'Add comment threads to objects.',
-  icon: 'ph--chat--regular',
+  name: 'Chat',
+  description: 'Chat via text, voice, and video in channels or create comment threads on objects.',
+  icon: 'ph--video-conference--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-thread',
 };

package/src/peers.stories.tsx

@@ -0,0 +1,189 @@
+//
+// 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/testing/index.ts

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

package/src/testing/stories.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { live } from '@dxos/live-object';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { Config } from '@dxos/react-client';
+import { Ref } from '@dxos/react-client/echo';
+import { defaultTx } from '@dxos/react-ui-theme';
+
+import { ThreadPlugin } from '../ThreadPlugin';
+import { ChannelType, ThreadType } from '../types';
+
+export const createThreadPlugins = async () => [
+  ThemePlugin({ tx: defaultTx }),
+  ClientPlugin({
+    onClientInitialized: async (_, client) => {
+      await client.halo.createIdentity({ displayName: 'Test User' });
+    },
+    onSpacesReady: async (_, client) => {
+      await client.spaces.default.waitUntilReady();
+      const thread = live(ThreadType, { messages: [] });
+      client.spaces.default.db.add(live(ChannelType, { defaultThread: Ref.make(thread), threads: [] }));
+    },
+    config: new Config({
+      runtime: {
+        client: { edgeFeatures: { signaling: true } },
+        services: {
+          edge: {
+            url: 'https://edge.dxos.workers.dev/',
+          },
+          iceProviders: [
+            {
+              urls: 'https://edge.dxos.workers.dev/ice',
+            },
+          ],
+        },
+      },
+    }),
+  }),
+  SpacePlugin(),
+  IntentPlugin(),
+  SettingsPlugin(),
+  GraphPlugin(),
+  ThreadPlugin(),
+];

package/src/translations.ts

@@ -2,9 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { ChannelType } from '@dxos/plugin-space/types';
-
 import { THREAD_PLUGIN } from './meta';
+import { ChannelType } from './types';
 
 export default [
   {
@@ -14,7 +13,7 @@ export default [
         'object name placeholder': 'New channel',
       },
       [THREAD_PLUGIN]: {
-        'plugin name': 'Threads',
+        'plugin name': 'Chat',
         'channel title label': 'Title',
         'message placeholder': 'Reply…',
         'activity message': 'Processing…',
@@ -41,6 +40,48 @@ export default [
         'comments label': 'Comments',
         'show all label': 'All comments',
         'show unresolved label': 'Unresolved only',
+
+        'channel companion label': 'Channel',
+        'call panel label': 'Active Call',
+
+        'display name label': 'Display name',
+        'display name description': 'Set your display name before joining a meeting.',
+        'display name input placeholder': 'Enter your name',
+        'set display name label': 'Continue',
+
+        'call tab label': 'Call',
+        'meeting status title': 'Meeting',
+        'share meeting link label': 'Share meeting',
+        'show webrtc stats title': 'Detailed WebRTC Stats',
+
+        'meeting summary label': 'Summary',
+        'summarize label': 'Summarize',
+        'summarizing label': 'Creating summary...',
+        'create summary message': 'A summary doesn’t exist for this meeting yet. Create one now?',
+
+        'join call': 'Join',
+        'leave call': 'Leave',
+
+        'lobby participants_zero': 'No participants',
+        'lobby participants_one': '1 participant',
+        'lobby participants_other': '{{count}} participants',
+
+        'icon pin': 'Pin video',
+        'icon unpin': 'Unpin video',
+        'icon wave': 'Waving',
+        'icon muted': 'Muted',
+        'icon speaking': 'Speaking',
+
+        'mic on': 'Unmute',
+        'mic off': 'Mute',
+        'camera on': 'Turn camera on',
+        'camera off': 'Turn camera off',
+        'camera off label': 'Camera off',
+
+        'raise hand': 'Raise hand',
+        'lower hand': 'Lower hand',
+        'screenshare on': 'Share screen',
+        'screenshare off': 'Stop streaming',
       },
     },
   },