@dxos/plugin-thread 0.8.4-main.e8ec1fe → 0.8.4-main.effb148878

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

@@ -5,70 +5,102 @@
 import { EditorView } from '@codemirror/view';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
-import { type Obj, Ref, type Type } from '@dxos/echo';
+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';
 import { type SpaceMember } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { IconButton, useOnTransition, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from '@dxos/react-ui-editor';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
+import { Card } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
 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 pie-2';
-export const buttonClassNames = '!p-1 transition-opacity';
+export const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pe-2';
+export const buttonClassNames = 'p-1! transition-opacity';
 
-export type MessageContainerProps = {
-  message: Message.Message;
+export type MessagePanelProps = {
+  message: Obj.OfShape<Message.Message> | Ref.Ref<Obj.OfShape<Message.Message>>;
   members: SpaceMember[];
   editable?: boolean;
   onDelete?: (id: string) => void;
   onAcceptProposal?: (id: string) => void;
 };
 
-export const MessageContainer = ({
-  message,
+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();
+  const [editing, setEditing] = useState(false);
+
+  const textBlockIndex = message?.blocks.findIndex((block) => block._tag === 'text') ?? -1;
+
+  const handleEdit = useCallback(() => setEditing((editing) => !editing), []);
+  const handleDelete = useCallback(() => message && onDelete?.(message.id), [message, onDelete]);
+  const handleAcceptProposal = useCallback(
+    () => message && onAcceptProposal?.(message.id),
+    [message, onAcceptProposal],
+  );
+  const handleTextBlockChange = useCallback(
+    (newText: string) => {
+      updateMessage((m) => {
+        const targetBlock = m.blocks[textBlockIndex];
+        if (targetBlock && targetBlock._tag === 'text') {
+          targetBlock.text = newText;
+        }
+      });
+    },
+    [updateMessage, textBlockIndex],
+  );
+
+  const textBlock =
+    message && textBlockIndex !== -1 ? (message.blocks[textBlockIndex] as ContentBlock.Text) : undefined;
+  useOnEditAnalytics(message, textBlock, !!editing);
+
+  if (!message) {
+    return null;
+  }
+
   const senderIdentity = members.find(
     (member) =>
       (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);
-  const userIsAuthor = useIdentity()?.did === messageMetadata.authorId;
-  const [editing, setEditing] = useState(false);
-  const handleEdit = useCallback(() => setEditing((editing) => !editing), []);
-  const handleDelete = useCallback(() => onDelete?.(message.id), [message, onDelete]);
-  const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [message, onAcceptProposal]);
-  const textBlock = message.blocks.find((block) => block._tag === 'text');
+  // 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);
 
-  useOnEditAnalytics(message, textBlock, !!editing);
-
   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}
             />
@@ -80,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}
             />
@@ -91,23 +123,25 @@ 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}
             />
           )}
         </div>
       </MessageHeading>
-      {textBlock && <TextboxBlock block={textBlock} isAuthor={userIsAuthor} editing={editing} />}
+      {textBlock && (
+        <TextboxBlock block={textBlock} isAuthor={userIsAuthor} editing={editing} onSave={handleTextBlockChange} />
+      )}
       {proposalBlock && <ProposalBlock block={proposalBlock} />}
       {Ref.Array.targets(references).map((reference, index) => (
-        <MessagePart key={index} part={reference} />
+        <MessagePart key={index} part={reference as Obj.Unknown} />
       ))}
     </MessageRoot>
   );
 };
 
-const MessagePart = ({ part }: { part: Type.Expando }) => {
+const MessagePart = ({ part }: { part: Obj.Unknown }) => {
   return <MessageBlockObjectTile subject={part} />;
 };
 
@@ -115,11 +149,13 @@ const TextboxBlock = ({
   block,
   isAuthor,
   editing,
+  onSave,
 }: {
   block: ContentBlock.Text;
   editing?: boolean;
   isAuthor?: boolean;
   identity?: Identity;
+  onSave?: (newText: string) => void;
 }) => {
   const { themeMode } = useThemeContext();
   const inMemoryContentRef = useRef(block.text);
@@ -129,8 +165,8 @@ const TextboxBlock = ({
   }, []);
 
   const saveDocumentChange = useCallback(() => {
-    block.text = inMemoryContentRef.current;
-  }, [block]);
+    onSave?.(inMemoryContentRef.current);
+  }, [onSave]);
 
   useOnTransition(editing, true, false, saveDocumentChange);
 
@@ -155,18 +191,14 @@ const TextboxBlock = ({
     editing && view?.focus();
   }, [editing, view]);
 
-  return <div role='none' ref={parentRef} className='mie-4' {...focusAttributes} />;
+  return <div ref={parentRef} className='me-4' {...focusAttributes} />;
 };
 
 const ProposalBlock = ({ block }: { block: ContentBlock.Proposal }) => {
-  return (
-    <div role='none' className='mie-4 italic'>
-      {block.text}
-    </div>
-  );
+  return <div className='me-4 italic'>{block.text}</div>;
 };
 
-const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Any }>(({ subject }, forwardedRef) => {
+const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown }>(({ subject }, forwardedRef) => {
   // TODO(burdon): Use annotation to get title.
   let title = (subject as any).name ?? (subject as any).title ?? (subject as any).type ?? 'Object';
   if (typeof title !== 'string') {
@@ -174,12 +206,16 @@ const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Any }>(
   }
 
   return (
-    <div
-      role='group'
-      className={mx('grid col-span-3 plb-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
+    <Card.Root
+      className={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
       ref={forwardedRef}
     >
-      <Surface role='card' limit={1} data={{ subject }} fallback={title} />
-    </div>
+      <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/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,19 @@
+//
+// 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>;
+
+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,17 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
+import { type ComponentType, lazy } from 'react';
 
-// TODO(wittjosiah): Suspense boundary for sidebar?
-export * from './Call';
-export * from './CallDebugPanel';
-export * from './CallSidebar';
-export * from './CommentsContainer';
-export * from './CommentsThreadContainer';
-export * from './MessageContainer';
-export * from './ThreadCompanion';
-export * from './ThreadSettings';
+export * from './Chat';
+export * from './CommentsPanel';
+export * from './MessagePanel';
 
-export const ChannelContainer = lazy(() => import('./ChannelContainer'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
+export const ThreadSettings: ComponentType<any> = lazy(() => import('./ThreadSettings'));

package/src/containers/ChannelArticle/ChannelArticle.stories.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Feed, Query } from '@dxos/echo';
+import { createFeedServiceLayer } from '@dxos/echo-db';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config } from '@dxos/react-client';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { Channel, Message, Thread } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { ThreadPlugin } from '../../ThreadPlugin';
+import { ChannelArticle, type ChannelArticleProps } from './ChannelArticle';
+
+// TODO(wittjosiah): Channel doesn't render full height.
+const DefaultStory = ({ roomId }: ChannelArticleProps) => {
+  const [space] = useSpaces();
+  const [channel] = useQuery(space?.db, Query.type(Channel.Channel));
+  if (!channel) {
+    return <Loading data={{ channel }} />;
+  }
+
+  return <ChannelArticle subject={channel} attendableId='story' roomId={roomId} role='article' />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/containers/ChannelArticle',
+  component: ChannelArticle,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      capabilities: [
+        Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Feed.Feed, Thread.Thread, Message.Message]),
+      ],
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Channel.Channel, Feed.Feed, Thread.Thread, Message.Message],
+          config: new Config({
+            runtime: {
+              services: {
+                edge: {
+                  url: 'https://edge.dxos.workers.dev/',
+                },
+                iceProviders: [
+                  {
+                    urls: 'https://edge.dxos.workers.dev/ice',
+                  },
+                ],
+              },
+            },
+          }),
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              const channel = personalSpace.db.add(Channel.make({ name: 'general' }));
+              const feed = yield* Effect.promise(() => channel.feed.load());
+              const seed = [
+                Message.make({ sender: { role: 'user' }, blocks: [{ _tag: 'text', text: 'Hello, channel.' }] }),
+                Message.make({
+                  sender: { role: 'user' },
+                  blocks: [{ _tag: 'text', text: 'Messages are stored in the feed.' }],
+                }),
+              ];
+              yield* Feed.append(feed, seed).pipe(Effect.provide(createFeedServiceLayer(personalSpace.queues)));
+            }),
+        }),
+        SpacePlugin({}),
+        ThreadPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChannelArticle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // Fixed room for testing.
+    subject: undefined,
+    attendableId: 'story',
+    role: 'article',
+    roomId: '04a1d1911703b8e929d0649021a965',
+  },
+};

package/src/containers/ChannelArticle/ChannelArticle.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { getSpace } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { type Channel } from '@dxos/types';
+
+import { ChannelChat } from '../ChannelChat';
+
+export type ChannelArticleProps = AppSurface.ObjectArticleProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
+
+/**
+ * Renders the channel chat. The "Start video call" action and the in-call surface
+ * are contributed by plugin-calls — this container is call-agnostic.
+ */
+// TODO(burdon): Create Radix style layout.
+// TODO(burdon): Restore graph-driven toolbar so plugin-calls can contribute a "Start video call" action (F-1.1).
+export const ChannelArticle = ({ subject: channel }: ChannelArticleProps) => {
+  const space = getSpace(channel);
+
+  if (channel && space) {
+    return (
+      <Panel.Root classNames='dx-document'>
+        <Panel.Content asChild>
+          <ChannelChat classNames='border' space={space} channel={channel} />
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  return null;
+};

package/src/containers/ChannelArticle/index.ts

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

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 { composable, composableProps } from '@dxos/react-ui';
+import { type Channel, Message } from '@dxos/types';
+
+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.getURI(channel);
+    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}
+      />
+    );
+  },
+);

package/src/containers/ChannelChat/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { ChannelChat } from './ChannelChat';
+
+export { ChannelChat };
+export default ChannelChat;