Channel Detail Views

The Channel Detail plugin ships five built-in views, one per default section of ChannelDetail. Each view is a SectionNavigator section content component — it receives the current layout and reads the active channel from ChannelDetailContext — and most are paired with a dedicated search/pagination hook backed by a stream-chat search source.

All views are exported from stream-chat-react/channel-detail. Override a view by passing a replacement SectionContent in a custom sections array.

ChannelManagementView

Renders channel information with a read (view) mode and an edit mode, the channel's membership state, and a set of channel-level actions gated behind confirmation dialogs (mute channel, mute user, block user, leave channel, delete chat).

Props

A ChannelManagementActionItem is { type, Component }, where type is one of "muteChannel", "muteUser", "blockUser", "leaveChannel", "deleteChat" (or a custom string). The default components are available as DefaultChannelManagementActions so you can reorder or wrap them:

import {
  ChannelManagementView,
  DefaultChannelManagementActions,
} from "stream-chat-react/channel-detail";

const channelManagementActionSet = [
  {
    type: "muteChannel",
    Component: DefaultChannelManagementActions.MuteChannel,
  },
  {
    type: "leaveChannel",
    Component: DefaultChannelManagementActions.LeaveChannel,
  },
];

ChannelMembersView

A mode-driven view: it renders a member list (browse), an add-members flow (add), and a per-member detail (memberDetail). The browse and memberDetail modes are handled internally; every other mode — the built-in add or any app-provided mode — is resolved from the modeViews registry.

Props

A mode is { Title, Body }, keyed by the mode string passed to modeController.setMode. The mode's Body receives a modeController ({ mode, setMode }) it uses to navigate between modes:

import { ChannelMembersView } from "stream-chat-react/channel-detail";

const modeViews = {
  bulkRemove: {
    Title: () => <>Remove members</>,
    Body: ({ modeController }) => (
      <BulkRemove onDone={() => modeController.setMode("browse")} />
    ),
  },
};

<ChannelMembersView modeViews={modeViews} />;

The two built-in mode views are exported so you can reuse or wrap them in a custom modeViews registry:

• ChannelMembersBrowseView — the browse member list. Accepts an optional onMemberSelect(member) callback.
• ChannelMembersAddView — the add flow. Receives the modeController and accepts an optional searchSource (UserSearchSource) to override how users are searched.

ChannelMemberDetail

The per-member detail (the memberDetail mode) renders member actions — send message, mute/unmute, block/unblock, remove — as a ChannelMemberActionItem[] ({ type, Component }, where type is "sendMessage" | "muteUser" | "blockUser" | "removeUser" or a custom string). The defaults are exported as DefaultChannelMemberActions and defaultChannelMemberActionSet.

PinnedMessagesView, ChannelMediaView, ChannelFilesView

ChannelMediaView and ChannelFilesView take only the section content layout prop (SectionNavigatorSectionContentProps); they read the channel from context and paginate through dedicated hooks. PinnedMessagesView additionally accepts an optional searchSource (MessageSearchSource) so you can supply a preconfigured search source. Customize them by replacing the view component or by composing their search hooks into your own UI.

Search & pagination hooks

Each list view is backed by a hook that wraps a stream-chat search source and exposes the items, loading state, and the source for pagination. They are exported so you can build custom list UIs:

usePinnedMessagesSearch accepts an optional { searchSource } (UsePinnedMessagesSearchParams). When you pass your own MessageSearchSource, it is used as-is — its filters and sort are respected. Otherwise the hook builds one scoped to the channel with a pinned: true filter and text $autocomplete matching.

import { useChannelMediaSearch } from "stream-chat-react/channel-detail";

const CustomMediaGrid = () => {
  const { mediaItems, isLoading, hasResultsLoaded } = useChannelMediaSearch();
  if (isLoading && !hasResultsLoaded) return <Spinner />;
  return <Grid items={mediaItems} />;
};

These hooks must be used within ChannelDetail (or a ChannelDetailProvider), since they resolve the active channel from useChannelDetailContext.

Media & files data transforms

The media and files views build their lists from two pure helpers that flatten an array of messages into render-ready items. They are exported so you can derive the same item shapes when building a fully custom grid or list outside the view components:

The attachment types each helper recognizes are exported as constants: MEDIA_ATTACHMENT_TYPES (['image', 'video']) and FILE_ATTACHMENT_TYPES (['file', 'audio']), along with the ChannelMediaItem, ChannelMediaItemType, ChannelFileItem, ChannelFileSection, ChannelFileSections, and ChannelFileAttachmentType types.

import { toChannelMediaItems } from "stream-chat-react/channel-detail";

const items = toChannelMediaItems(messages);