@dxos/plugin-thread 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/src/components/Call/Toolbar.tsx

@@ -19,11 +19,11 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
+import { type Channel } from '@dxos/types';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 import { ThreadCapabilities } from '#types';
-import { type Channel } from '#types';
 
 export type ToolbarProps = ThemedClassName<{
   channel?: Channel.Channel;

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,218 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type RefObject, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { type SpaceMember } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type MessageMetadata,
+  MessageTextbox,
+  Thread as ThreadComponent,
+  type ThreadRootProps,
+  threadLayout,
+} from '@dxos/react-ui-thread';
+import { type Message } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener, type Extension } from '@dxos/ui-editor';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta } from '#meta';
+
+import { command } from '../../extensions';
+import { getMessageMetadata } from '../../util';
+import { MessagePanel } from '../MessagePanel';
+
+export type ChatProps = ThemedClassName<
+  {
+    /** Stable id used for the underlying thread root and message metadata. */
+    id: string;
+    /** Identity used to attribute outgoing messages in the textbox metadata. */
+    identity?: Identity;
+    /** Space members for rendering sender names/avatars on incoming messages. */
+    members: SpaceMember[];
+    /** Messages to render in order. */
+    messages: readonly Message.Message[];
+    /** Activity indicator (e.g. processing) shown beneath the textbox. */
+    activity?: boolean;
+    /**
+     * Called with the user's textbox content when they press send.
+     * Returning `true` signals the message was accepted; the textbox is then cleared.
+     */
+    onSend: (text: string) => boolean;
+    autoFocusTextbox?: boolean;
+    /**
+     * Where the composer sits relative to the messages.
+     * - `'top'` (default) — composer follows the messages at intrinsic height,
+     *   suitable for inline comment threads.
+     * - `'bottom'` — composer pinned to the bottom of the panel, messages
+     *   scrolling above it. Suitable for full-panel multi-party chat.
+     */
+    orientation?: ChatOrientation;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export type ChatOrientation = 'top' | 'bottom';
+
+/**
+ * Pure chat UI: scrollable message list + composer textbox + activity indicator.
+ * Owns its own UI state (textbox content, scroll position, editor extensions) but
+ * does not load data or invoke operations — the caller passes messages and an
+ * `onSend` callback. Used by both `ThreadContainer` (AutoMerge `Thread`) and
+ * `ChannelContainer`'s feed-backed channel chat.
+ */
+export const Chat = composable<HTMLDivElement, ChatProps>(
+  (
+    { id, identity, members, messages, activity, onSend, autoFocusTextbox, current, orientation = 'top', ...props },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+    const sentinelRef = useRef<HTMLDivElement | null>(null);
+    const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+
+    // Force the editor to remount after a successful send so its content resets.
+    const [_count, _setCount] = useState(0);
+
+    const textboxMetadata = getMessageMetadata(id, identity);
+    const messageRef = useRef('');
+    const extensions = useMemo(
+      () => [
+        createBasicExtensions({ placeholder: t('message.placeholder') }),
+        createThemeExtensions({ themeMode }),
+        listener({ onChange: ({ text }) => (messageRef.current = text) }),
+        command,
+      ],
+      [themeMode, _count],
+    );
+
+    const scrollToEnd = (behavior: ScrollBehavior) =>
+      setTimeout(() => sentinelRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+    useLayoutEffect(() => {
+      scrollToEnd('instant');
+    }, []);
+    // NOTE: Auto-scroll on new messages is intentionally not implemented here. Smooth-scroll
+    // animations were causing ResizeObserver feedback loops with CodeMirror/ScrollArea. The
+    // proper fix is "scroll only if user is already at the bottom" — deferred to a follow-up.
+
+    const handleSend = () => {
+      const text = messageRef.current;
+      if (!text?.length) {
+        return false;
+      }
+
+      const accepted = onSend(text);
+      if (!accepted) {
+        return false;
+      }
+
+      messageRef.current = '';
+      setAutoFocus(true);
+      scrollToEnd('smooth');
+      _setCount((count) => count + 1);
+      return true;
+    };
+
+    const filteredMessages = messages.filter(isNonNullable);
+    const renderState: ChatRenderState = {
+      messages: filteredMessages,
+      members,
+      activity,
+      extensions,
+      autoFocus,
+      handleSend,
+      textboxMetadata,
+      scrollRef,
+      sentinelRef,
+    };
+
+    return orientation === 'bottom' ? (
+      <ChannelLayout
+        {...composableProps(props, { classNames: 'flex flex-col bs-full min-h-0' })}
+        id={id}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    ) : (
+      <ThreadLayout
+        {...composableProps(props, { classNames: 'dx-container grid-rows-[1fr_min-content_min-content]' })}
+        id={id}
+        current={current}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    );
+  },
+);
+
+//
+// Internal layout helpers — share state via the ChatRenderState bag.
+//
+
+type ChatRenderState = {
+  messages: Message.Message[];
+  members: SpaceMember[];
+  activity?: boolean;
+  extensions: Extension[];
+  autoFocus?: boolean;
+  handleSend: () => boolean;
+  textboxMetadata: MessageMetadata;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  sentinelRef: RefObject<HTMLDivElement | null>;
+};
+
+type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+  id: string;
+  state: ChatRenderState;
+};
+
+/** Thread layout — composer follows messages at intrinsic height. */
+const ThreadLayout = React.forwardRef<HTMLDivElement, LayoutProps & Pick<ThreadRootProps, 'current'>>(
+  ({ id, current, state, ...props }, ref) => {
+    const { t } = useTranslation(meta.id);
+    const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, sentinelRef } = state;
+    return (
+      <ThreadComponent.Root {...props} id={id} current={current} ref={ref}>
+        <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+          <ScrollArea.Viewport ref={sentinelRef}>
+            <div role='none' className={mx(threadLayout, 'place-self-end')}>
+              {messages.map((message) => (
+                <MessagePanel key={message.id} message={message} members={members} />
+              ))}
+            </div>
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+        <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+        <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+      </ThreadComponent.Root>
+    );
+  },
+);
+
+/** Channel layout — composer pinned to the bottom, messages scroll above it. */
+const ChannelLayout = React.forwardRef<HTMLDivElement, LayoutProps>(({ id, state, ...props }, ref) => {
+  const { t } = useTranslation(meta.id);
+  const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, scrollRef, sentinelRef } =
+    state;
+  return (
+    <div {...props} id={id} ref={ref}>
+      <div ref={scrollRef} className='flex-1 min-h-0 overflow-y-auto'>
+        {messages.map((message) => (
+          <div key={message.id} className='grid grid-cols-[var(--dx-rail-size)_1fr] w-full'>
+            <MessagePanel message={message} members={members} />
+          </div>
+        ))}
+        <div ref={sentinelRef} />
+      </div>
+      <div className='shrink-0 grid grid-cols-[var(--dx-rail-size)_1fr]'>
+        <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+      </div>
+      <div className='shrink-0 px-2 pb-1 text-xs text-description'>{activity ? t('activity.message') : null}</div>
+    </div>
+  );
+});

package/src/components/Chat/index.ts

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

package/src/components/CommentsPanel/CommentsPanel.stories.tsx

@@ -13,21 +13,23 @@ import { TestSchema } from '@dxos/echo/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { random } from '@dxos/random';
-import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { AnchoredTo, Message, Thread } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { createCommentThread, createProposalThread } from '../../testing/data';
-import { translations } from '../../translations';
 import { CommentsPanel } from './CommentsPanel';
 
 random.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const db = useDatabase();
+  const [space] = useSpaces();
+  const db = space?.db;
   const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {

package/src/components/Lobby/Lobby.tsx

@@ -3,7 +3,7 @@
 //
 
 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';
@@ -26,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>;
 };
 
@@ -38,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);
@@ -88,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/MessagePanel/MessagePanel.tsx

@@ -6,7 +6,7 @@ import { EditorView } from '@codemirror/view';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/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';
@@ -97,7 +97,7 @@ export const MessagePanel = ({
               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}
             />
@@ -212,7 +212,7 @@ const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown
       ref={forwardedRef}
     >
       <Surface.Surface
-        role='card--content'
+        type={AppSurface.Card}
         limit={1}
         data={{ subject } satisfies AppSurface.ObjectCardData}
         fallback={title}

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

@@ -8,7 +8,8 @@ import React, { useEffect, useState } from 'react';
 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';
 

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

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { VideoObject as VideoObjectComponent } from '../Media';
 import { ResponsivePanel } from './ResponsivePanel';
 

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

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { ThreadSettings } from './ThreadSettings';
 
 const meta = {

package/src/components/index.ts

@@ -5,6 +5,7 @@
 import { type ComponentType, lazy } from 'react';
 
 export * from './Call';
+export * from './Chat';
 export * from './CommentsPanel';
 export * from './MessagePanel';
 

package/src/containers/ChannelChat/ChannelChat.tsx

@@ -0,0 +1,65 @@
+//
+// 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 '#operations';
+
+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.
+ */
+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()),
+    ) as Message.Message[];
+
+    const handleSend = (text: string) => {
+      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'
+        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;

package/src/containers/ChannelContainer/ChannelContainer.stories.tsx

@@ -3,27 +3,34 @@
 //
 
 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 { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
+import { Feed } from '@dxos/echo';
+import { createFeedServiceLayer } from '@dxos/echo-db';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config } from '@dxos/react-client';
+import { Query, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
-import { Message, Thread } from '@dxos/types';
+import { Channel, Message, Thread } from '@dxos/types';
 
-import { createThreadPlugins } from '#testing';
-import { Channel } from '#types';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
+import { ThreadPlugin } from '../../ThreadPlugin';
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelContainerProps) => {
-  const db = useDatabase();
-  const [channel] = useQuery(db, Query.type(Channel.Channel));
+  const [space] = useSpaces();
+  const [channel] = useQuery(space?.db, Query.type(Channel.Channel));
   if (!channel) {
-    return <Loading data={{ db: !!db, channel: !!channel }} />;
+    return <Loading data={{ channel }} />;
   }
 
   return <ChannelContainer subject={channel} attendableId='story' roomId={roomId} role='article' />;
@@ -37,8 +44,45 @@ const meta = {
     withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager({
-      plugins: [...(await createThreadPlugins())],
-      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
+      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: {

package/src/containers/ChannelContainer/ChannelContainer.tsx

@@ -17,14 +17,14 @@ import { Button, ElevationProvider, Input, Panel, useTranslation } from '@dxos/r
 import { Settings } from '@dxos/react-ui-form';
 import { Menu, MenuRootProps, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
+import { type Channel } from '@dxos/types';
 import { composable, composableProps } from '@dxos/ui-theme';
 
 import { Call } from '#components';
 import { meta } from '#meta';
 import { ThreadCapabilities } from '#types';
-import { type Channel } from '#types';
 
-import { ChatContainer } from '../ChatContainer';
+import { ChannelChat } from '../ChannelChat';
 
 export type ChannelContainerProps = AppSurface.ObjectArticleProps<
   Channel.Channel | undefined,
@@ -140,14 +140,14 @@ export const ChannelContainer = ({
     );
   }
 
-  if (channel && channel.defaultThread.target && space) {
+  if (channel && space) {
     return (
       <Panel.Root classNames='dx-document'>
         <Panel.Toolbar asChild>
           <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
         </Panel.Toolbar>
         <Panel.Content asChild>
-          <ChatContainer space={space} thread={channel.defaultThread.target} />
+          <ChannelChat space={space} channel={channel} />
         </Panel.Content>
       </Panel.Root>
     );

package/src/containers/{ChatContainer/ChatContainer.stories.tsx → ThreadContainer/ThreadContainer.stories.tsx}

@@ -19,10 +19,9 @@ import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { withLayout, Loading } from '@dxos/react-ui/testing';
 import { Message, Thread } from '@dxos/types';
 
-import { Channel } from '#types';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
-import { ChatContainer } from './ChatContainer';
+import { ThreadContainer } from './ThreadContainer';
 
 random.seed(1);
 
@@ -30,26 +29,26 @@ const DefaultStory = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [channel, setChannel] = useState<Channel.Channel | null>();
+  const [thread, setThread] = useState<Thread.Thread | null>();
 
   useAsyncEffect(async () => {
     if (identity) {
       const space = await client.spaces.create();
-      const channel = space.db.add(Channel.make());
+      const thread = space.db.add(Thread.make({ status: 'active' }));
       setSpace(space);
-      setChannel(channel);
+      setThread(thread);
     }
   }, [identity]);
 
-  if (!identity || !channel || !space || !channel.defaultThread.target) {
-    return <Loading data={{ identity: !!identity, space: !!space, channel: !!channel }} />;
+  if (!identity || !thread || !space) {
+    return <Loading data={{ identity: !!identity, space: !!space, thread: !!thread }} />;
   }
 
-  return <ChatContainer space={space} thread={channel.defaultThread.target} />;
+  return <ThreadContainer space={space} thread={thread} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/containers/ChatContainer',
+  title: 'plugins/plugin-thread/containers/ThreadContainer',
   component: ThreadComponent.Root as any,
   render: DefaultStory,
   decorators: [
@@ -71,7 +70,7 @@ const meta = {
     }),
     withClientProvider({
       createSpace: true,
-      types: [Thread.Thread, Channel.Channel, Message.Message],
+      types: [Thread.Thread, Message.Message],
     }),
   ],
   parameters: {