@dxos/plugin-thread 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

package/src/components/Lobby/Lobby.tsx

@@ -3,17 +3,18 @@
 //
 
 import { useAtomValue } from '@effect-atom/atom-react';
-import React, { type FC, type PropsWithChildren, useEffect, useState } from 'react';
+import React, { 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 { meta } from '#meta';
+import { ThreadCapabilities } from '#types';
+
 import { Toolbar, type ToolbarProps } from '../Call';
 import { VideoObject } from '../Media';
-import { ResponsiveContainer } from '../ResponsiveGrid';
+import { ResponsivePanel } from '../ResponsiveGrid';
 
 // TODO(wittjosiah): Repurpose lobby for preview.
 
@@ -25,7 +26,8 @@ const SWARM_PEEK_INTERVAL = 1_000;
 
 type LobbyRootProps = PropsWithChildren<ThemedClassName>;
 
-const LobbyRoot: FC<LobbyRootProps> = ({ children }) => {
+// TODO(burdon): Make headless?
+const LobbyRoot = ({ children }: LobbyRootProps) => {
   return <div className='relative flex flex-col grow overflow-hidden group'>{children}</div>;
 };
 
@@ -37,7 +39,7 @@ LobbyRoot.displayName = 'LobbyRoot';
 
 type LobbyPreviewProps = {};
 
-const LobbyPreview: FC<LobbyPreviewProps> = () => {
+const LobbyPreview = (_props: LobbyPreviewProps) => {
   const { t } = useTranslation(meta.id);
   const call = useCapability(ThreadCapabilities.CallManager);
   const media = useAtomValue(call.mediaAtom);
@@ -58,7 +60,7 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
 
   return (
     <div className='grid grow p-4'>
-      <ResponsiveContainer>
+      <ResponsivePanel>
         {(media.videoEnabled && (
           <VideoObject
             videoStream={media.videoStream}
@@ -69,8 +71,8 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
               classNames,
             )}
           />
-        )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera off label')}</div>}
-      </ResponsiveContainer>
+        )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera-off.label')}</div>}
+      </ResponsivePanel>
     </div>
   );
 };
@@ -87,7 +89,7 @@ type LobbyToolbarProps = ThemedClassName<
   } & Pick<ToolbarProps, 'onJoin'>
 >;
 
-const LobbyToolbar: FC<LobbyToolbarProps> = ({ roomId, ...props }) => {
+const LobbyToolbar = ({ roomId, ...props }: LobbyToolbarProps) => {
   const call = useCapability(ThreadCapabilities.CallManager);
   const [count, setCount] = useState<number>(0);
 

package/src/components/Media/VideoObject.stories.tsx

@@ -11,8 +11,7 @@ import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { getUserMediaTrack } from '../../calls';
-import { ResponsiveContainer } from '../ResponsiveGrid';
-
+import { ResponsivePanel } from '../ResponsiveGrid';
 import { VideoObject, type VideoObjectProps } from './VideoObject';
 
 const DefaultStory = (props: VideoObjectProps) => {
@@ -37,9 +36,9 @@ const DefaultStory = (props: VideoObjectProps) => {
   }, []);
 
   return (
-    <ResponsiveContainer>
+    <ResponsivePanel>
       <VideoObject videoStream={videoStream} flip {...props} />
-    </ResponsiveContainer>
+    </ResponsivePanel>
   );
 };
 

package/src/components/{MessageContainer.tsx → MessagePanel/MessagePanel.tsx}

@@ -6,6 +6,7 @@ import { EditorView } from '@codemirror/view';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type Obj, Ref } from '@dxos/echo';
 import { useObject } from '@dxos/echo-react';
 import { PublicKey } from '@dxos/react-client';
@@ -19,16 +20,16 @@ import { type ContentBlock, type Message } from '@dxos/types';
 import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
 import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
-import { useOnEditAnalytics } from '../hooks';
-import { meta } from '../meta';
-import { getMessageMetadata } from '../util';
+import { useOnEditAnalytics } from '#hooks';
+import { meta } from '#meta';
 
-import { command } from './command-extension';
+import { command } from '../../extensions/command';
+import { getMessageMetadata } from '../../util';
 
 export const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pe-2';
 export const buttonClassNames = 'p-1! transition-opacity';
 
-export type MessageContainerProps = {
+export type MessagePanelProps = {
   message: Obj.OfShape<Message.Message> | Ref.Ref<Obj.OfShape<Message.Message>>;
   members: SpaceMember[];
   editable?: boolean;
@@ -36,13 +37,13 @@ export type MessageContainerProps = {
   onAcceptProposal?: (id: string) => void;
 };
 
-export const MessageContainer = ({
+export const MessagePanel = ({
   message: messageOrRef,
   members,
   editable = false,
   onDelete,
   onAcceptProposal,
-}: MessageContainerProps) => {
+}: MessagePanelProps) => {
   const { t } = useTranslation(meta.id);
   const [message, updateMessage] = useObject(messageOrRef);
   const identity = useIdentity();
@@ -81,7 +82,10 @@ export const MessageContainer = ({
       (message.sender.identityDid && member.identity.did === message.sender.identityDid) ||
       (message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey)),
   )?.identity;
-  const messageMetadata = getMessageMetadata(message.id, senderIdentity);
+  // Pass `message.sender` as the fallback so externally-synced messages
+  // (Slack, etc.) display the source-side sender name instead of "Anonymous"
+  // when no DXOS identity matches.
+  const messageMetadata = getMessageMetadata(message.id, senderIdentity, message.sender);
   const userIsAuthor = identity?.did === messageMetadata.authorId;
   const proposalBlock = message.blocks.find((block) => block._tag === 'proposal');
   const references = message.blocks.filter((block) => block._tag === 'reference').map((block) => block.reference);
@@ -89,14 +93,14 @@ export const MessageContainer = ({
   return (
     <MessageRoot {...messageMetadata} classNames={[hoverableControls, hoverableFocusedWithinControls]}>
       <MessageHeading authorName={messageMetadata.authorName} timestamp={messageMetadata.timestamp}>
-        <div role='none' className={buttonGroupClassNames}>
+        <div className={buttonGroupClassNames}>
           {userIsAuthor && editable && (
             <IconButton
               data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
               variant='ghost'
               icon={editing ? 'ph--check--regular' : 'ph--pencil-simple--regular'}
               iconOnly
-              label={t(editing ? 'save message label' : 'edit message label')}
+              label={t(editing ? 'save-message.label' : 'edit-message.label')}
               classNames={[buttonClassNames, hoverableControlItem]}
               onClick={handleEdit}
             />
@@ -108,7 +112,7 @@ export const MessageContainer = ({
               variant='ghost'
               icon='ph--check--regular'
               iconOnly
-              label={t('accept proposal label')}
+              label={t('accept-proposal.label')}
               classNames={[buttonClassNames, hoverableControlItem]}
               onClick={handleAcceptProposal}
             />
@@ -119,7 +123,7 @@ export const MessageContainer = ({
               variant='ghost'
               icon='ph--x--regular'
               iconOnly
-              label={t('delete message label')}
+              label={t('delete-message.label')}
               classNames={[buttonClassNames, hoverableControlItem]}
               onClick={handleDelete}
             />
@@ -187,15 +191,11 @@ const TextboxBlock = ({
     editing && view?.focus();
   }, [editing, view]);
 
-  return <div role='none' ref={parentRef} className='me-4' {...focusAttributes} />;
+  return <div ref={parentRef} className='me-4' {...focusAttributes} />;
 };
 
 const ProposalBlock = ({ block }: { block: ContentBlock.Proposal }) => {
-  return (
-    <div role='none' className='me-4 italic'>
-      {block.text}
-    </div>
-  );
+  return <div className='me-4 italic'>{block.text}</div>;
 };
 
 const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown }>(({ subject }, forwardedRef) => {
@@ -210,7 +210,12 @@ const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown
       className={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
       ref={forwardedRef}
     >
-      <Surface.Surface role='card--content' limit={1} data={{ subject }} fallback={title} />
+      <Surface.Surface
+        type={AppSurface.Card}
+        limit={1}
+        data={{ subject } satisfies AppSurface.ObjectCardData}
+        fallback={title}
+      />
     </Card.Root>
   );
 });

package/src/components/MessagePanel/index.ts

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

package/src/components/Participant/Participant.tsx

@@ -7,8 +7,9 @@ import React, { memo, useMemo } from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
+import { ThreadCapabilities } from '#types';
+
 import { type EncodedTrackName, type UserState } from '../../calls';
-import { ThreadCapabilities } from '../../types';
 import { VideoObject } from '../Media';
 import { ResponsiveGridItem, type ResponsiveGridItemProps } from '../ResponsiveGrid';
 

package/src/components/Participant/ParticipantGrid.tsx

@@ -8,7 +8,6 @@ import { type ThemedClassName } from '@dxos/react-ui';
 
 import { type UserState } from '../../calls';
 import { ResponsiveGrid } from '../ResponsiveGrid';
-
 import { Participant, SCREENSHARE_SUFFIX } from './Participant';
 
 const getId = (user: UserState): string => user.id!;

package/src/components/ResponsiveGrid/ResponsiveGrid.stories.tsx

@@ -5,10 +5,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { ResponsiveGrid, type ResponsiveGridProps } from './ResponsiveGrid';
 import { ResponsiveGridItem, type ResponsiveGridItemProps } from './ResponsiveGridItem';
@@ -53,9 +53,9 @@ const TestCell = ({ item, ...props }: ResponsiveGridItemProps<TestItem>) => {
   );
 };
 
-type StoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
+type DefaultStoryProps = ResponsiveGridProps<TestItem> & { random?: boolean; autoHideGallery?: boolean };
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const [pinned, setPinned] = useState<string | undefined>(
     (props.pinned ?? props.items.length > 1) ? props.items[0]?.id : undefined,
   );
@@ -107,13 +107,13 @@ const videoUrls = [
 ];
 
 const createItem = (type?: 'image' | 'video') => {
-  const id = faker.string.uuid();
+  const id = random.string.uuid();
   return {
     id,
     type,
-    name: faker.person.fullName(),
+    name: random.person.fullName(),
     imageUrl: `https://placehold.co/3200x1800/333/999?font=roboto&text=${id.slice(0, 2)}`,
-    videoUrl: faker.helpers.arrayElement(videoUrls),
+    videoUrl: random.helpers.arrayElement(videoUrls),
   };
 };
 

package/src/components/ResponsiveGrid/ResponsiveGrid.tsx

@@ -10,8 +10,8 @@ import { type ThemedClassName } from '@dxos/react-ui';
 import { type Size } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/ui-theme';
 
-import { ResponsiveContainer } from './ResponsiveContainer';
 import { type ResponsiveGridItemProps } from './ResponsiveGridItem';
+import { ResponsivePanel } from './ResponsivePanel';
 
 const ASPECT_RATIO = 16 / 9;
 const MIN_GALLERY_HEIGHT = 250;
@@ -136,7 +136,7 @@ export const ResponsiveGrid = <T extends object = any>({
   );
 
   return (
-    <div ref={containerRef} className={mx('relative w-full h-full', classNames)}>
+    <div ref={containerRef} className={mx('dx-expander relative', classNames)}>
       {/* Placeholder elements to calculate layout. */}
       <div className='absolute inset-0 flex flex-col grow gap-2'>
         {/* Pinned item. */}
@@ -206,7 +206,7 @@ export const ResponsiveGrid = <T extends object = any>({
 
 const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ debug, id }) => {
   return (
-    <ResponsiveContainer>
+    <ResponsivePanel>
       <div
         {...{ 'data-grid-item': id }}
         className={mx('aspect-video overflow-hidden', debug && 'z-20 border-2 border-primary-500')}
@@ -214,7 +214,7 @@ const SoloItem: FC<Pick<ResponsiveGridProps, 'debug'> & { id: string }> = ({ deb
         {/* Maximum size placeholder image forces aspect ratio. */}
         <img alt='placeholder video' className={mx('opacity-0', maxImageSize)} />
       </div>
-    </ResponsiveContainer>
+    </ResponsivePanel>
   );
 };
 

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -8,7 +8,7 @@ import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/re
 import { Waveform } from '@dxos/react-ui-sfx';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type ResponsiveGridItemProps<T extends object = any> = PropsWithChildren<
   ThemedClassName<{
@@ -49,12 +49,12 @@ export const ResponsiveGridItem = <T extends object = any>({
   const iconProps: Record<string, { icon: string; label: string; classNames?: string }> = {
     wave: {
       icon: 'ph--hand-waving--duotone',
-      label: t('icon wave'),
+      label: t('icon-wave.label'),
       classNames: 'animate-pulse bg-orange-500',
     },
     mute: {
       icon: 'ph--microphone-slash--regular',
-      label: t('icon muted'),
+      label: t('icon-muted.label'),
     },
   };
 
@@ -76,7 +76,7 @@ export const ResponsiveGridItem = <T extends object = any>({
   return (
     <div
       className={mx(
-        'relative w-full h-full group',
+        'dx-expander relative group',
         'rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500',
         speakingIndicator ? 'outline-green-500' : !video && 'outline-separator',
         classNames,
@@ -93,7 +93,7 @@ export const ResponsiveGridItem = <T extends object = any>({
             iconOnly
             icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
             size={pinned ? 5 : 4}
-            label={pinned ? t('icon unpin') : t('icon pin')}
+            label={pinned ? t('icon-unpin.label') : t('icon-pin.label')}
             onClick={() => onClick?.(item)}
           />
         </div>

package/src/components/ResponsiveGrid/{ResponsiveContainer.stories.tsx → ResponsivePanel.stories.tsx}

@@ -7,24 +7,24 @@ import React from 'react';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
-import { VideoObject as VideoObjectComponent } from '../Media';
+import { translations } from '#translations';
 
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { VideoObject as VideoObjectComponent } from '../Media';
+import { ResponsivePanel } from './ResponsivePanel';
 
 const meta = {
-  title: 'plugins/plugin-thread/components/ResponsiveContainer',
-  component: ResponsiveContainer,
+  title: 'plugins/plugin-thread/components/ResponsivePanel',
+  component: ResponsivePanel,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof ResponsiveContainer>;
+} satisfies Meta<typeof ResponsivePanel>;
 
 export default meta;
 
-type Story = StoryObj<typeof ResponsiveContainer>;
+type Story = StoryObj<typeof ResponsivePanel>;
 
 export const Image: Story = {
   args: {

package/src/components/ResponsiveGrid/{ResponsiveContainer.tsx → ResponsivePanel.tsx}

@@ -11,20 +11,18 @@ import { mx } from '@dxos/ui-theme';
  * The container will scale to fit within its parent's bounds while preserving the aspect ratio.
  *
  * @example
- * <ResponsiveContainer>
+ * <ResponsivePanel>
  *   <VideoObject />
- * </ResponsiveContainer>
+ * </ResponsivePanel>
  */
-export const ResponsiveContainer = ({ children }: PropsWithChildren) => {
+export const ResponsivePanel = ({ children }: PropsWithChildren) => {
   return (
     // Outer container that takes full size of parent.
-    <div role='none' className='relative flex w-full h-full'>
+    <div className='dx-expander relative flex'>
       {/* Absolute positioning layer for centering content. */}
-      <div role='none' className='absolute inset-0 flex justify-center items-center'>
+      <div className='absolute inset-0 flex justify-center items-center'>
         {/* Content container that maintains given aspect ratio and proper scaling. */}
-        <div role='none' className={mx('max-h-full max-w-full w-auto h-auto aspect-video')}>
-          {children}
-        </div>
+        <div className={mx('max-h-full max-w-full w-auto h-auto aspect-video')}>{children}</div>
       </div>
     </div>
   );

package/src/components/ResponsiveGrid/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ResponsiveContainer';
+export * from './ResponsivePanel';
 export * from './ResponsiveGrid';
 export * from './ResponsiveGridItem';

package/src/components/ThreadSettings/ThreadSettings.stories.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { ThreadSettings } from './ThreadSettings';
+
+const meta = {
+  title: 'plugins/plugin-thread/components/ThreadSettings',
+  component: ThreadSettings,
+  tags: ['settings'],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ThreadSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {},
+  },
+};

package/src/components/ThreadSettings/ThreadSettings.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+export type ThreadSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;
+
+// TODO(burdon): Settings.
+export const ThreadSettings = ({ settings: _settings }: ThreadSettingsProps) => {
+  const { t: _t } = useTranslation(meta.id);
+  return <SettingsForm.Viewport></SettingsForm.Viewport>;
+};

package/src/components/ThreadSettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { ThreadSettings as default } from './ThreadSettings';

package/src/components/index.ts

@@ -2,7 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type ComponentType, lazy } from 'react';
+
 export * from './Call';
-export * from './CommentsContainer';
-export * from './CommentsThreadContainer';
-export * from './MessageContainer';
+export * from './Chat';
+export * from './CommentsPanel';
+export * from './MessagePanel';
+
+export const ThreadSettings: ComponentType<any> = lazy(() => import('./ThreadSettings'));

package/src/containers/CallDebugPanel/CallDebugPanel.tsx

@@ -10,8 +10,9 @@ import { JsonView, Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
 import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
+import { meta } from '#meta';
+
 import { type EncodedTrackName, type GlobalState } from '../../calls';
-import { meta } from '../../meta';
 
 export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
 
@@ -70,7 +71,7 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       icon='ph--video-conference--regular'
       open={open}
       onToggle={handleToggle}
-      title={t('meeting status title')}
+      title={t('meeting-status.title')}
       info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
       maxHeight={0}
     >
@@ -78,13 +79,13 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
         <div className='flex items-center gap-2 items-center'>
           <Input.Root>
             <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
-            <Input.Label>{t('show webrtc stats title')}</Input.Label>
+            <Input.Label>{t('show-webrtc-stats.title')}</Input.Label>
           </Input.Root>
         </div>
         <div className='flex items-center gap-2 items-center'>
           <Input.Root>
             <Input.Switch checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
-            <Input.Label>{t('show calls history title')}</Input.Label>
+            <Input.Label>{t('show-calls-history.title')}</Input.Label>
           </Input.Root>
         </div>
         <div className='flex items-center gap-2 items-center'>

package/src/containers/CallDebugPanel/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CallDebugPanel } from './CallDebugPanel';
-
-export default CallDebugPanel;
+export { CallDebugPanel as default } from './CallDebugPanel';

package/src/containers/CallSidebar/CallSidebar.tsx

@@ -7,11 +7,12 @@ import React from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
-import { ThreadCapabilities } from '../../types';
+import { ThreadCapabilities } from '#types';
+
 import ChannelContainer from '../ChannelContainer';
 
 export const CallSidebar = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
   const roomId = useAtomValue(call.roomIdAtom);
-  return <ChannelContainer subject={undefined} roomId={roomId} />;
+  return <ChannelContainer subject={undefined} attendableId={roomId ?? ''} roomId={roomId} role='article' />;
 };

package/src/containers/CallSidebar/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CallSidebar } from './CallSidebar';
-
-export default CallSidebar;
+export { CallSidebar as default } from './CallSidebar';

package/src/containers/ChannelChat/ChannelChat.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { Filter, Obj, Query } from '@dxos/echo';
+import { type Space, useMembers, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { type Channel, Message } from '@dxos/types';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { Chat } from '#components';
+import { useStatus } from '#hooks';
+import { ThreadOperation } from '#types';
+
+export type ChannelChatProps = {
+  space: Space;
+  channel: Channel.Channel;
+};
+
+/**
+ * Channel chat: composer pinned to the bottom of the panel, messages scrolling
+ * above it (newest at the bottom). Threading via `Message.threadId` is
+ * intentionally not reconstructed in this round.
+ *
+ * Externally-synced channels (any Channel carrying foreign-key `Obj.Meta`,
+ * e.g. Slack/Discord-sourced rooms) render read-only — the composer is
+ * suppressed because there's no local-write path back to the source.
+ */
+export const ChannelChat = composable<HTMLDivElement, ChannelChatProps>(
+  ({ space, channel, ...props }, forwardedRef) => {
+    const identity = useIdentity()!;
+    const members = useMembers(space.id);
+    const id = Obj.getDXN(channel).toString();
+    const activity = useStatus(space, id);
+    const { invokePromise } = useOperationInvoker();
+
+    const feed = channel.feed?.target;
+    const messages = useQuery(
+      space.db,
+      feed ? Query.select(Filter.type(Message.Message)).from(feed) : Query.select(Filter.nothing()),
+    );
+
+    const readOnly = Obj.getMeta(channel).keys.length > 0;
+
+    const handleSend = (text: string) => {
+      if (readOnly) {
+        return false;
+      }
+      void invokePromise(ThreadOperation.AppendChannelMessage, {
+        channel,
+        sender: { identityDid: identity.did },
+        text,
+      });
+      return true;
+    };
+
+    return (
+      <Chat
+        {...composableProps(props)}
+        id={id}
+        identity={identity}
+        members={members}
+        messages={messages}
+        activity={activity}
+        onSend={handleSend}
+        orientation='bottom'
+        readOnly={readOnly}
+        ref={forwardedRef}
+      />
+    );
+  },
+);