@dxos/plugin-thread 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/{components → containers/ChannelContainer}/ChannelContainer.stories.tsx

@@ -5,44 +5,44 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { contributes } from '@dxos/app-framework';
+import { Capability } 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 { withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
 
-import { createThreadPlugins } from '../testing';
-import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { createThreadPlugins } from '../../testing';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelContainerProps) => {
-  const space = useSpace();
-  const [channel] = useQuery(space, Query.type(ChannelType));
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} roomId={roomId} />;
+  return <ChannelContainer subject={channel} roomId={roomId} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/ChannelContainer',
+  title: 'plugins/plugin-thread/containers/ChannelContainer',
   component: ChannelContainer,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [ChannelType, ThreadType, DataType.Message])],
+      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
     }),
   ],
   parameters: {
-    layout: 'column',
     translations,
   },
 } satisfies Meta<typeof ChannelContainer>;
@@ -54,6 +54,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     // Fixed room for testing.
+    subject: undefined,
     roomId: '04a1d1911703b8e929d0649021a965',
   },
 };

package/src/{components → containers/ChannelContainer}/ChannelContainer.tsx

@@ -2,49 +2,54 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { useCapabilities, useCapability } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ElevationProvider, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
-import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
+import { ElevationProvider, Input, Panel, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { Menu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { ThreadCapabilities } from '../capabilities';
-import { meta } from '../meta';
-import { type ChannelType } from '../types';
+import { Call } from '../../components';
+import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
+import { type Channel } from '../../types';
+import ChatContainer from '../ChatContainer';
 
-import { Call } from './Call';
-import ChatContainer from './ChatContainer';
-
-export type ChannelContainerProps = {
-  channel?: ChannelType;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+export type ChannelContainerProps = SurfaceComponentProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
 
 /**
  * Renders a call when active, otherwise renders the channel chat.
  */
-export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+// TODO(burdon): Create Radix style layout.
+export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
+  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
   const leaveSound = useSoundEffect('LeaveCall');
 
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
   useEffect(() => {
     const ctx = new Context();
     callManager.left.on(ctx, (roomId) => {
@@ -79,7 +84,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -92,7 +97,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       // TODO(burdon): Error sound.
       log.catch(err);
     }
-  }, [extensions, channel, roomId]);
+  }, [extensions, channel, roomId, joined]);
 
   /**
    * Leave the call.
@@ -111,28 +116,39 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
-
-  return (
-    <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>
-      {isJoined && !isNamed && <DisplayNameMissing />}
-      {isJoined && isNamed && (
-        <Call.Root>
-          <Call.Grid fullscreen={fullscreen} />
-          <Call.Toolbar channel={channel} onLeave={handleLeave} />
-        </Call.Root>
-      )}
-      {!isJoined && channel && channel.defaultThread.target && space && (
-        <>
-          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
+  const isJoined = joined && currentRoomId === roomId;
+  if (isJoined) {
+    return (
+      <Panel.Root>
+        <Panel.Content>
+          {isNamed ? (
+            <Call.Root>
+              <Call.Grid fullscreen={fullscreen} />
+              <Call.Toolbar channel={channel} onLeave={handleLeave} />
+            </Call.Root>
+          ) : (
+            <DisplayNameMissing />
+          )}
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  if (channel && channel.defaultThread.target && space) {
+    return (
+      <Panel.Root classNames='dx-article'>
+        <Panel.Toolbar asChild>
+          <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
           <ChatContainer space={space} thread={channel.defaultThread.target} />
-        </>
-      )}
-    </StackItem.Content>
-  );
-};
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
 
-export default ChannelContainer;
+  return null;
+};
 
 const DisplayNameMissing = () => {
   const { t } = useTranslation(meta.id);
@@ -142,26 +158,26 @@ const DisplayNameMissing = () => {
   const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
 
   return (
-    <ControlGroup classNames='p-4 place-content-center'>
-      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+    <Settings.Group classNames='p-4 place-content-center'>
+      <Settings.ItemInput title={t('display name label')} description={t('display name description')}>
         <Input.TextInput
           value={displayName}
           onChange={handleChange}
           placeholder={t('display name input placeholder')}
-          classNames='md:min-is-64'
+          classNames='md:min-w-64'
         />
-      </ControlItemInput>
-      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+      </Settings.ItemInput>
+      <Settings.GroupButton disabled={!displayName} onClick={handleSave}>
         {t('set display name label')}
-      </ControlGroupButton>
-    </ControlGroup>
+      </Settings.GroupButton>
+    </Settings.Group>
   );
 };
 
 const useChannelToolbarActions = (onJoinCall?: () => void) => {
   const creator = useMemo(
     () =>
-      Rx.make(() => {
+      Atom.make(() => {
         return {
           nodes: [
             createMenuItemGroup('root', {
@@ -173,7 +189,7 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
               type: 'video-call',
             }),
           ],
-          edges: [{ source: 'root', target: 'video-call' }],
+          edges: [{ source: 'root', target: 'video-call', relation: 'child' }],
         };
       }),
     [],
@@ -182,20 +198,20 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = ThemedClassName<{
+type ChannelToolbarProps = {
   attendableId?: string;
   role?: string;
   onJoinCall?: () => void;
-}>;
+};
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }: ChannelToolbarProps) => {
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
   const menuProps = useChannelToolbarActions(onJoinCall);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} />
-      </MenuProvider>
+      <Menu.Root {...menuProps} attendableId={attendableId}>
+        <Menu.Toolbar textBlockWidth />
+      </Menu.Root>
     </ElevationProvider>
   );
 };

package/src/containers/ChannelContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ChannelContainer } from './ChannelContainer';
+
+export default ChannelContainer;

package/src/{components/Chat.stories.tsx → containers/ChatContainer/ChatContainer.stories.tsx}

@@ -5,22 +5,22 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
+import { Capabilities, Capability, OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Ref } from '@dxos/echo';
+import { Surface } from '@dxos/app-framework/ui';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Thread } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
 
-import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
 
 import { ChatContainer } from './ChatContainer';
 
@@ -30,17 +30,12 @@ const DefaultStory = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [channel, setChannel] = useState<ChannelType | null>();
+  const [channel, setChannel] = useState<Channel.Channel | null>();
 
   useAsyncEffect(async () => {
     if (identity) {
       const space = await client.spaces.create();
-      const channel = space.db.add(
-        Obj.make(ChannelType, {
-          defaultThread: Ref.make(Obj.make(ThreadType, { messages: [], status: 'active' })),
-          threads: [],
-        }),
-      );
+      const channel = space.db.add(Channel.make());
       setSpace(space);
       setChannel(channel);
     }
@@ -50,25 +45,24 @@ const DefaultStory = () => {
     return null;
   }
 
-  return (
-    <main className='is-full max-is-prose mli-auto bs-dvh overflow-hidden'>
-      <ChatContainer space={space} thread={channel.defaultThread.target} />
-    </main>
-  );
+  return <ChatContainer space={space} thread={channel.defaultThread.target} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Chat',
-  component: Thread.Root as any,
+  title: 'plugins/plugin-thread/containers/ChatContainer',
+  component: ThreadComponent.Root as any,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin()],
       capabilities: [
-        contributes(
+        Capability.contributes(
           Capabilities.ReactSurface,
-          createSurface({
+          Surface.create({
             id: 'test',
             role: 'card',
             component: ({ role }) => <span>{JSON.stringify({ role })}</span>,
@@ -76,7 +70,10 @@ const meta = {
         ),
       ],
     }),
-    withClientProvider({ createSpace: true, types: [ThreadType, ChannelType, DataType.Message] }),
+    withClientProvider({
+      createSpace: true,
+      types: [Thread.Thread, Channel.Channel, Message.Message],
+    }),
   ],
   parameters: {
     layout: 'fullscreen',

package/src/{components → containers/ChatContainer}/ChatContainer.tsx

@@ -5,29 +5,27 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { type Space, fullyQualifiedId, useMembers } from '@dxos/react-client/echo';
+import { type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
+import { Icon, ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
 import {
   MessageTextbox,
   type MessageTextboxProps,
-  Thread,
+  Thread as ThreadComponent,
   type ThreadRootProps,
   threadLayout,
 } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { Message, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { useStatus } from '../hooks';
-import { meta } from '../meta';
-import { type ThreadType } from '../types';
-import { getMessageMetadata } from '../util';
-
-import { command } from './command-extension';
-import { MessageContainer } from './MessageContainer';
+import { MessageContainer } from '../../components';
+import { command } from '../../components/command-extension';
+import { useStatus } from '../../hooks';
+import { meta } from '../../meta';
+import { getMessageMetadata } from '../../util';
 
 export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   const { t } = useTranslation(meta.id);
@@ -41,25 +39,36 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export type ChatContainerProps = {
-  space: Space;
-  thread: ThreadType;
-  context?: Obj.Any;
-  autoFocusTextbox?: boolean;
-} & Pick<ThreadRootProps, 'current'>;
-
-export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+export type ChatContainerProps = ThemedClassName<
+  {
+    space: Space;
+    thread: Thread.Thread;
+    context?: Obj.Unknown;
+    autoFocusTextbox?: boolean;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export const ChatContainer = ({
+  classNames,
+  space,
+  thread,
+  context,
+  current,
+  autoFocusTextbox,
+}: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
-  const id = fullyQualifiedId(thread);
+  const { themeMode } = useThemeContext();
+
+  const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const activity = useStatus(space, id);
+  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+  const threadScrollRef = useRef<HTMLDivElement | null>(null);
+
   // 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 [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
-  const threadScrollRef = useRef<HTMLDivElement | null>(null);
-  const { themeMode } = useThemeContext();
 
   const textboxMetadata = getMessageMetadata(id, identity);
   const messageRef = useRef('');
@@ -67,7 +76,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
     () => [
       createBasicExtensions({ placeholder: t('message placeholder') }),
       createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
       command,
     ],
     [themeMode, _count],
@@ -90,16 +99,18 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
       return false;
     }
 
-    thread.messages.push(
-      Ref.make(
-        Obj.make(DataType.Message, {
-          created: new Date().toISOString(),
-          sender: { identityDid: identity.did },
-          blocks: [{ _tag: 'text', text: messageRef.current }],
-          properties: context ? { context: Ref.make(context) } : undefined,
-        }),
-      ),
-    );
+    Obj.change(thread, (t) => {
+      t.messages.push(
+        Ref.make(
+          Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: { identityDid: identity.did },
+            blocks: [{ _tag: 'text', text: messageRef.current }],
+            properties: context ? { context: Ref.make(context) } : undefined,
+          }),
+        ),
+      );
+    });
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -109,16 +120,17 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
   };
 
   return (
-    <Thread.Root
+    <ThreadComponent.Root
       current={current}
       id={id}
       classNames={[
-        'bs-full is-full max-is-prose mli-auto grid-rows-[1fr_min-content_min-content] overflow-hidden',
-        'transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0',
+        'h-full grid-rows-[1fr_min-content_min-content] overflow-hidden',
+        'transition-[padding-h-end] [[data-sidebar-left-state=open]_&]:lg:pb-0',
+        classNames,
       ]}
     >
-      <ScrollArea.Root classNames='col-span-2'>
-        <ScrollArea.Viewport classNames='overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]'>
+      <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+        <ScrollArea.Viewport ref={threadScrollRef}>
           <div role='none' className={mx(threadLayout, 'place-self-end')}>
             {thread.messages
               .map((message) => message.target)
@@ -127,19 +139,11 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
                 <MessageContainer key={message.id} message={message} members={members} />
               ))}
           </div>
-          {/* 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} />
-          <ScrollArea.Scrollbar>
-            <ScrollArea.Thumb />
-          </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>
 
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
-
-      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
-    </Thread.Root>
+      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
+    </ThreadComponent.Root>
   );
 };
-
-export default ChatContainer;

package/src/containers/ChatContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ChatContainer } from './ChatContainer';
+
+export default ChatContainer;