stream-chat-react-native-core 9.12.1 → 10.0.0-beta.1

package/src/contexts/channelContext/__tests__/publicSurface.test.ts

@@ -0,0 +1,75 @@
+import * as sdk from '../../../index';
+
+import type { ChannelContextValue } from '../../../index';
+// Type-only half: these fail to COMPILE if the hooks stop being exported, which a runtime
+// check cannot catch.
+import type { useMessagePaginator, useIsTargetedMessage } from '../../../index';
+
+/**
+ * `ChannelContextValue`'s shape, pinned.
+ *
+ * This context is read by every message row, so anything on it is re-read by the whole list. Five
+ * members were removed for that reason — `loading`, `highlightedMessageId`, `loadChannelAroundMessage`,
+ * `loadChannelAtFirstUnreadMessage`, `reloadChannel` — each of which made `<Channel>` subscribe to the
+ * paginator and re-render on channel traffic. Their replacements live on the paginator itself.
+ *
+ * Two directions matter and both are enforced below:
+ *
+ * - **Nothing per-message may come back.** A member whose value changes as messages arrive re-renders
+ *   every consumer, which is the regression this guards.
+ * - **The replacements must stay exported.** The removals are a documented breaking change
+ *   (`ai-docs/ai-migration-v9-to-v10.md` §6, §8); if the replacement hooks vanish, the guide is a lie
+ *   and integrators have no path at all.
+ */
+describe('ChannelContext public surface', () => {
+  it('exports the replacements the migration guide points at', () => {
+    // Runtime half — the guide's §8 table is unusable without these.
+    expect(typeof sdk.useMessagePaginator).toBe('function');
+    expect(typeof sdk.useIsTargetedMessage).toBe('function');
+    expect(typeof sdk.useChannelContext).toBe('function');
+    expect(sdk.DEFAULT_HIGHLIGHT_DURATION).toBe(3000);
+
+    // Type half — asserted by construction (this file IS typechecked, via tsconfig.test.json).
+    type Paginator = typeof useMessagePaginator;
+    type Targeted = typeof useIsTargetedMessage;
+    const types: [Paginator, Targeted] | undefined = undefined;
+    expect(types).toBeUndefined();
+  });
+
+  it('keeps the removed members off the context type', () => {
+    // `@ts-expect-error` is the assertion: each line FAILS THE BUILD if the member comes back, which
+    // is what makes this a guard rather than a comment.
+    type Removed = {
+      // @ts-expect-error `loading` — select it off the paginator inside the component that needs it.
+      loading: ChannelContextValue['loading'];
+      // @ts-expect-error `highlightedMessageId` — use `useIsTargetedMessage(messageId)` per row.
+      highlightedMessageId: ChannelContextValue['highlightedMessageId'];
+      // @ts-expect-error `loadChannelAroundMessage` — use `paginator.jumpToMessage(...)`.
+      loadChannelAroundMessage: ChannelContextValue['loadChannelAroundMessage'];
+      // @ts-expect-error `loadChannelAtFirstUnreadMessage` — use `paginator.jumpToTheFirstUnreadMessage(...)`.
+      loadChannelAtFirstUnreadMessage: ChannelContextValue['loadChannelAtFirstUnreadMessage'];
+      // @ts-expect-error `reloadChannel` — use `paginator.jumpToTheLatestMessage()`.
+      reloadChannel: ChannelContextValue['reloadChannel'];
+    };
+    const removed: Removed | undefined = undefined;
+    expect(removed).toBeUndefined();
+  });
+
+  it('still carries the members integrators read from it', () => {
+    // Guards the other direction: this cleanup must not have taken anything else with it.
+    const expected: Array<keyof ChannelContextValue> = [
+      'channel',
+      'disabled',
+      'enableMessageGroupingByUser',
+      'enforceUniqueReaction',
+      'hasPendingInitialTargetLoad',
+      'hideDateSeparators',
+      'hideStickyDateHeader',
+      'maxTimeBetweenGroupedMessages',
+    ];
+    // An assertion by construction: a removed member fails to compile in the array above.
+    // 8 since the state cleanup removed the never-read `isChannelActive` and
+    // `scrollToFirstUnreadThreshold`, and `threadList` gave way to `useThreadContext().thread`.
+    expect(expected).toHaveLength(8);
+  });
+});

package/src/contexts/channelDetailsContext/channelDetailsContext.tsx

@@ -8,9 +8,7 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelDetailsContextValue = {
   channel: Channel;
-  /**
-   * Signals all ChannelDetails modals to close themselves.
-   */
+  /** Signals all channel details modals to close. */
   closeModals: () => void;
   signalStore: SignalStore;
 };

package/src/contexts/channelEditDetailsContext/ChannelEditDetailsContext.tsx

@@ -15,31 +15,19 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelEditDetailsContextValue = {
   store: EditChannelDetailsStore;
-  /**
-   * Saves the edited channel details (name and/or image). Resolves once every
-   * update succeeds and rejects if any of them fail.
-   */
+  /** Saves the edited name and/or image. Rejects with an `AggregateError` if any update fails. */
   submit: () => Promise<void>;
-  /**
-   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
-   * to the channel image picked during editing.
-   */
+  /** Compression quality from 0 to 1 (1 is best) for the channel image picked while editing. */
   compressImageQuality?: number;
-  /** Override the upload request used to upload the channel image. */
+  /** Overrides the request that uploads the channel image. */
   doFileUploadRequest?: GlobalFileUploadRequest;
 };
 
-/**
- * Props for the {@link ChannelEditDetailsProvider} that seed the edit flow
- * configuration into the context.
- */
+/** Props of the {@link ChannelEditDetailsProvider}. */
 export type ChannelEditDetailsProviderProps = PropsWithChildren<{
-  /**
-   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
-   * to the channel image picked during editing.
-   */
+  /** Compression quality from 0 to 1 (1 is best) for the channel image picked while editing. */
   compressImageQuality?: number;
-  /** Override the upload request used to upload the channel image. */
+  /** Overrides the request that uploads the channel image. */
   doFileUploadRequest?: GlobalFileUploadRequest;
 }>;
 
@@ -49,8 +37,8 @@ export const ChannelEditDetailsContext = React.createContext(
 
 /**
  * Builds the {@link ChannelEditDetailsContextValue}. Rendered inside the
- * {@link NotificationTargetProvider} so that notifications emitted by `submit`
- * (via {@link useChannelActions}) resolve to the channel edit details host.
+ * {@link NotificationTargetProvider} so notifications from `submit` resolve to the edit details
+ * host.
  */
 const ChannelEditDetailsContextProviderInner = ({
   children,
@@ -97,10 +85,9 @@ const ChannelEditDetailsContextProviderInner = ({
 };
 
 /**
- * Creates and provides an {@link EditChannelDetailsStore} snapshotted from the
- * channel in the {@link ChannelDetailsContext}. Mount this once per edit session — the store captures the
- * channel's name/image at construction and does not track later WebSocket
- * updates, so an inbound `channel.updated` does not clobber in-progress edits.
+ * Provides an {@link EditChannelDetailsStore} snapshotted from the channel in the
+ * {@link ChannelDetailsContext}. Mount it once per edit session: the store does not track later
+ * `channel.updated` events, so they cannot overwrite in-progress edits.
  */
 export const ChannelEditDetailsProvider = ({
   children,

package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx

@@ -30,8 +30,8 @@ export const ChannelFileAttachmentListProvider = ({
     source.messageSearchFilters = {
       $or: [{ 'attachments.type': 'file' }, { 'attachments.type': 'audio' }],
     };
-    // Newest first so the list groups cleanly under month section headers.
-    source.messageSearchSort = { created_at: -1 };
+    // Newest first, so the list groups under month section headers.
+    source.messageSearchSort = [{ field: 'created_at', direction: -1 }];
     source.activate();
     return source;
   });

package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx

@@ -31,8 +31,8 @@ export const ChannelMediaListProvider = ({
       'attachments.type': { $in: ['image', 'video'] },
       type: undefined,
     };
-    // Newest media first so the grid reads top-to-bottom from most recent.
-    source.messageSearchSort = { created_at: -1 };
+    // Newest first.
+    source.messageSearchSort = [{ field: 'created_at', direction: -1 }];
     source.activate();
     return source;
   });

package/src/contexts/channelMemberListContext/ChannelMemberListContext.tsx

@@ -36,7 +36,7 @@ export const ChannelMemberListProvider = ({
         },
       },
     );
-    source.sort = { name: 1 };
+    source.sort = [{ field: 'name', direction: 1 }];
     source.activate();
     return source;
   });

package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx

@@ -21,20 +21,11 @@ export const ChannelPinnedMessageListProvider = ({
 }: PropsWithChildren<{ channel: Channel; searchSource?: MessageSearchSource }>) => {
   const { client } = useChatContext();
   const [defaultSearchSource] = useState(() => {
-    const source = new MessageSearchSource(
-      client,
-      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
-      {
-        messageSearch: {
-          initialFilterConfig: {
-            $or: {
-              enabled: true,
-              generate: ({ searchQuery }) => (searchQuery ? { text: { $q: searchQuery } } : {}),
-            },
-          },
-        },
-      },
-    );
+    const source = new MessageSearchSource(client, {
+      pageSize: 25,
+      allowEmptySearchString: true,
+      resetOnNewSearchQuery: false,
+    });
     source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
     source.messageSearchFilters = { pinned: true, type: undefined };
     source.activate();

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -3,9 +3,8 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { FlatListProps } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
 
-import type { Channel } from 'stream-chat';
+import type { Channel, ChannelPaginator } from 'stream-chat';
 
-import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { GetChannelActionItems } from '../../hooks/actions/useChannelActionItems';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -13,105 +12,47 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue = {
   /**
-   * Besides the existing default behavior of the ChannelListView component, you can attach
-   * additional props to the underlying React Native FlatList.
-   *
-   * You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props
-   *
-   * **EXAMPLE:**
+   * Extra props for the underlying FlatList. Use `setFlatListRef` rather than these to get the ref.
    *
    * ```
-   * <ChannelListView
-   *  channels={channels}
-   *  additionalFlatListProps={{ bounces: true }}
-   * />
+   * <ChannelList additionalFlatListProps={{ bounces: true }} />
    * ```
-   *
-   * **Note:** Don't use `additionalFlatListProps` to access the FlatList ref, use `setFlatListRef`
    */
   additionalFlatListProps: Partial<FlatListProps<Channel>>;
   /**
-   * A control prop used to determine whether the first query of the channel list has succeeded.
-   */
-  channelListInitialized: boolean;
-  /**
-   * Channels can be either an array of channels or a promise which resolves to an array of channels
-   */
-  channels: Channel[] | null;
-  /**
-   * Incremental number change to force update the FlatList
-   */
-  forceUpdate: number;
-  /**
-   * Whether or not the FlatList has another page to render
-   */
-  hasNextPage: boolean;
-  /**
-   * Initial channels query loading state, triggers the LoadingIndicator
-   */
-  loadingChannels: boolean;
-  /**
-   * Whether or not additional channels are being loaded, triggers the
-   * ChannelListFooterLoadingIndicator
+   * The FlatList `onEndReachedThreshold`, in multiples of the visible list length. Defaults to 0.1.
    */
-  loadingNextPage: boolean;
-  /**
-   * The React Native FlatList threshold to fetch more data
-   * @see See loadMoreThreshold [doc](https://facebook.github.io/react-native/docs/flatlist#onendreachedthreshold)
-   * */
   loadMoreThreshold: number;
-  /**
-   * Loads the next page of `channels`, which is present as a required prop
-   */
-  loadNextPage: QueryChannels;
-  /**
-   * Max number to display within notification badge. Default: 255 and it cannot be higher than that for now due to backend limitations
-   */
+  /** Loads the next page of channels. */
+  loadNextPage: () => Promise<void>;
+  /** Highest unread count shown in the badge, which caps larger counts. Defaults to 255. */
   maxUnreadCount: number;
-  /**
-   * Number of skeletons that should show when loading. Default: 8
-   */
+  /** Number of skeleton rows shown while loading. Defaults to 8. */
   numberOfSkeletons: number;
   /**
-   * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
+   * The list's `ChannelPaginator`. Read the loaded channels and the query state from
+   * `paginator.state`, e.g. `useStateStore(paginator.state, selector)`.
    */
-  refreshing: boolean;
+  paginator: ChannelPaginator;
   /**
-   * Function to refresh the channel list that is similar to `reloadList`, but it doesn't wipe out existing channels
-   * from UI before loading the new ones
+   * Re-queries the first page while keeping the current channels on screen, unlike `reloadList`.
+   * Ignored within 5 seconds of the previous refresh unless the list is in an error state.
    */
   refreshList: () => void | Promise<void>;
-  /**
-   * Removes all the existing channels from UI and loads fresh channels
-   * */
+  /** Clears the channels from the UI and loads the first page again. */
   reloadList: () => Promise<void>;
-  // /**
-  //  * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
-  //  *
-  //  * @param channel A channel object
-  //  */
-  // setActiveChannel?: (channel: Channel) => void;
   /**
-   * Function to gain access to the inner FlatList ref
-   *
-   * **Example:**
+   * Receives the inner FlatList ref, and `null` on unmount.
    *
    * ```
-   * <ChannelListView
-   *  setFlatListRef={(ref) => {
-   *    // Use ref for your own good
-   *  }}
+   * <ChannelList setFlatListRef={(ref) => { listRef.current = ref; }} />
    * ```
    */
   setFlatListRef: (ref: FlatList<Channel> | null) => void;
   /**
-   * Error in channels query, if any
-   */
-  error?: Error;
-  /**
-   * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
+   * Called when a channel is tapped. Bridges `ChannelList` and `Channel`.
    *
-   * @param channel A channel object
+   * @param channel The tapped channel.
    */
   onSelect?: (channel: Channel) => void;
   getChannelActionItems?: GetChannelActionItems;
@@ -141,7 +82,7 @@ export const useChannelsContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useChannelsContext hook was called outside of the ChannelsContext provider. Make sure you have configured ChannelList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel-list',
+      'The useChannelsContext hook was called outside of the ChannelsContext provider. Make sure you have configured ChannelList component correctly - https://getstream.io/chat/docs/sdk/react-native/core-components/channel-list/',
     );
   }
 

package/src/contexts/chatConfigContext/ChatConfigContext.tsx

@@ -1,9 +1,7 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
 export type ChatConfigContextValue = {
-  /**
-   * This option allows you to specify a list of CDNs that offer image resizing.
-   */
+  /** CDN hosts whose image URLs can be resized. Defaults to `['.stream-io-cdn.com']`. */
   resizableCDNHosts?: string[];
 };
 

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,25 +1,26 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
+import type { GetApplicationResponse, LocalMessage, StreamChat } from 'stream-chat';
 
-import { MessageContextValue } from '../messageContext/MessageContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChatContextValue = {
   /**
-   * Object of application settings returned from Stream.
-   * */
-  appSettings: AppSettingsAPIResponse | null;
+   * Resolves the application settings returned from Stream. The first call fetches them and later
+   * calls reuse the result. With offline support enabled, it falls back to the copy stored in the
+   * offline database while the request cannot be made.
+   */
+  getAppSettings: () => Promise<GetApplicationResponse>;
   /**
-   * The StreamChat client object
+   * The `StreamChat` client.
    *
    * ```
    * import { StreamChat } from 'stream-chat';
    * import { Chat } from 'stream-chat-react-native';
    *
-   * const client = StreamChat.getInstance('api_key);
+   * const client = StreamChat.getInstance('api_key');
    * await client.connectUser('user_id', 'userToken');
    *
    * <Chat client={client}>
@@ -29,35 +30,9 @@ export type ChatContextValue = {
    * @overrideType StreamChat
    * */
   client: StreamChat;
-  connectionRecovering: boolean;
-  enableOfflineSupport: boolean;
-  isOnline: boolean | null;
-  mutedUsers: Mute[];
-  /**
-   * @param newChannel Channel to set as active.
-   *
-   * @overrideType Function
-   */
-  setActiveChannel: (newChannel?: Channel) => void;
-  /**
-   * Instance of channel object from stream-chat package.
-   *
-   * Please check the docs around how to create or query channel - https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript
-   *
-   * ```
-   * import { StreamChat, Channel } from 'stream-chat';
-   * import { Chat, Channel} from 'stream-chat-react-native';
-   *
-   * const client = StreamChat.getInstance('api_key');
-   * await client.connectUser('user_id', 'user_token');
-   * const channel = client.channel('messaging', 'channel_id');
-   * await channel.watch();
-   * ```
-   *
-   * @overrideType Channel
-   */
-  channel?: Channel;
-} & Partial<Pick<MessageContextValue, 'isMessageAIGenerated'>>;
+  /** Decides whether a message renders as AI generated. Defaults to never. */
+  isMessageAIGenerated: (message: LocalMessage) => boolean;
+};
 
 export const ChatContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ChatContextValue);
 
@@ -77,7 +52,7 @@ export const useChatContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useChatContext hook was called outside the ChatContext Provider. Make sure you have configured Chat component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#chat',
+      'The useChatContext hook was called outside the ChatContext Provider. Make sure you have configured Chat component correctly - https://getstream.io/chat/docs/sdk/react-native/core-components/chat/',
     );
   }
 

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -1,15 +1,10 @@
 import React, { PropsWithChildren, useContext, useMemo } from 'react';
 
 /**
- * All overridable UI components in the SDK.
- * Derived from the DEFAULT_COMPONENTS map in defaultComponents.ts.
- * Adding a new default automatically makes it available as an override.
+ * The overridable UI components, derived from `DEFAULT_COMPONENTS` in `defaultComponents.ts`, so a
+ * new default is overridable automatically. Every key is optional.
  *
- * Every key is optional — only specify the components you want to override.
- *
- * The `icons` slot is a nested map: it is typed as a *partial* icon map so
- * integrators can override individual icons without having to supply them all.
- * Sibling defaults are preserved via a deep merge (see below).
+ * `icons` is a partial map: overriding one icon keeps the other defaults.
  */
 export type ComponentOverrides = Omit<
   Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>,
@@ -20,9 +15,8 @@ export type ComponentOverrides = Omit<
   };
 
 /**
- * Resolved component overrides with defaults filled in. Unlike
- * `ComponentOverrides`, the `icons` map is guaranteed fully populated (defaults
- * back every key), so consumers can read `icons.Mute` without a null check.
+ * The component overrides merged over the defaults. Unlike `ComponentOverrides`, every key is
+ * defined, including each entry of `icons`.
  */
 export type ResolvedComponents = Required<Omit<ComponentOverrides, 'icons'>> & {
   icons: import('./defaultComponents').IconsMap;
@@ -31,8 +25,9 @@ export type ResolvedComponents = Required<Omit<ComponentOverrides, 'icons'>> & {
 const ComponentsContext = React.createContext<ComponentOverrides>({});
 
 /**
- * Provider to override UI components at any level of the tree.
- * Supports nesting — inner overrides merge over outer ones (closest wins).
+ * Overrides UI components for the tree below it. Nested providers merge, and the closest wins.
+ *
+ * `overrides` is read once at mount and must be stable.
  *
  * @example
  * ```tsx
@@ -53,8 +48,7 @@ export const WithComponents = ({
     () => ({
       ...parent,
       ...overrides,
-      // Deep-merge the nested `icons` map so overriding one icon keeps the
-      // rest (a shallow spread would replace the whole map).
+      // `icons` is merged one level deeper so overriding one icon keeps the rest.
       icons: { ...parent.icons, ...overrides.icons },
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
@@ -63,8 +57,8 @@ export const WithComponents = ({
   return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
 };
 
-// Lazy-loaded to break circular dependency:
-// defaultComponents.ts → imports components → components import useComponentsContext from this file
+// Required lazily to break a circular import: `defaultComponents` imports components, which import
+// `useComponentsContext` from this file.
 let cachedDefaults: ComponentOverrides | undefined;
 const getDefaults = (): ComponentOverrides => {
   if (!cachedDefaults) {
@@ -75,8 +69,7 @@ const getDefaults = (): ComponentOverrides => {
 };
 
 /**
- * Hook to access resolved component overrides.
- * Returns all components with defaults filled in — user overrides merged over defaults.
+ * Returns every overridable component, with the user's overrides merged over the defaults.
  */
 export const useComponentsContext = () => {
   const overrides = useContext(ComponentsContext);
@@ -85,7 +78,7 @@ export const useComponentsContext = () => {
     return {
       ...defaults,
       ...overrides,
-      // Deep-merge icons so user overrides layer over the full default map.
+      // `icons` is merged one level deeper so overriding one icon keeps the rest.
       icons: { ...defaults.icons, ...overrides.icons },
     } as ResolvedComponents;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount

package/src/contexts/componentsContext/defaultComponents.ts

@@ -137,7 +137,6 @@ import { InputButtons } from '../../components/MessageInput/components/InputButt
 import { AttachButton } from '../../components/MessageInput/components/InputButtons/AttachButton';
 import { CooldownTimer } from '../../components/MessageInput/components/OutputButtons/CooldownTimer';
 import { SendButton } from '../../components/MessageInput/components/OutputButtons/SendButton';
-import { MessageComposer } from '../../components/MessageInput/MessageComposer';
 import { MessageComposerLeadingView } from '../../components/MessageInput/MessageComposerLeadingView';
 import { MessageComposerTrailingView } from '../../components/MessageInput/MessageComposerTrailingView';
 import { MessageInputFooterView } from '../../components/MessageInput/MessageInputFooterView';
@@ -150,7 +149,6 @@ import { StopMessageStreamingButton } from '../../components/MessageInput/StopMe
 import { DateHeader } from '../../components/MessageList/DateHeader';
 import { InlineDateSeparator } from '../../components/MessageList/InlineDateSeparator';
 import { InlineUnreadIndicator } from '../../components/MessageList/InlineUnreadIndicator';
-import { MessageList } from '../../components/MessageList/MessageList';
 import { MessageSystem } from '../../components/MessageList/MessageSystem';
 import { NetworkDownIndicator } from '../../components/MessageList/NetworkDownIndicator';
 import { ScrollToBottomButton } from '../../components/MessageList/ScrollToBottomButton';
@@ -271,22 +269,14 @@ import { XCircle } from '../../icons/x-circle';
 import { NewClose } from '../../icons/xmark';
 import { Cross } from '../../icons/xmark-1';
 
-/**
- * Normalizes each component entry to React.ComponentType<P>, stripping
- * extra inferred properties (like `displayName: string` from runtime
- * assignments) that would otherwise leak into the override types and
- * force integrators to match them.
- */
+/** Reduces each component to `React.ComponentType<P>`, so inferred extras do not leak out. */
 type NormalizeComponents<T> = {
   [K in keyof T]: T[K] extends React.ComponentType<infer P> ? React.ComponentType<P> : T[K];
 };
 
 /**
- * All overridable icon components in the SDK, keyed by their exported name.
- * Exposed via `WithComponents` under the nested `icons` key so integrators can
- * swap any icon: `<WithComponents overrides={{ icons: { Mute: MyMute } }}>`.
- *
- * Only icons that are actually rendered by the SDK are registered here.
+ * The overridable icons, keyed by exported name. Overridden through the nested `icons` key:
+ * `<WithComponents overrides={{ icons: { Mute: MyMute } }}>`.
  */
 export const defaultIcons = {
   ArrowBoxLeft,
@@ -383,10 +373,7 @@ export const defaultIcons = {
   ZIP,
 } satisfies Record<string, React.ComponentType<IconProps>>;
 
-/**
- * Map of all overridable SDK icons. Used to type the `icons` override slot
- * and the resolved value returned by `useComponentsContext().icons`.
- */
+/** The type of `defaultIcons`, which types the `icons` override slot. */
 export type IconsMap = typeof defaultIcons;
 
 const components = {
@@ -460,7 +447,6 @@ const components = {
   MessageInputLeadingView,
   MessageInputTrailingView,
   MessageItemView,
-  MessageList,
   MessagePinnedHeader,
   MessageReactionPicker,
   MessageReminderHeader,
@@ -515,10 +501,8 @@ const components = {
   VideoAttachmentUploadPreview,
   VideoThumbnail,
 
-  // Channel details
   ChannelDetailsHeader,
 
-  // Channel Details Screen
   ChannelAddMembersButton,
   ChannelAddMembersForm,
   ChannelAddMembersFormContent,
@@ -548,8 +532,6 @@ const components = {
   PinnedMessageItem,
   PinnedMessageList,
 
-  // Thread
-  ThreadMessageComposer: MessageComposer,
   ThreadListComponent,
   ThreadListEmptyPlaceholder: DefaultThreadListEmptyPlaceholder,
   ThreadListItem,
@@ -559,7 +541,6 @@ const components = {
   ThreadListUnreadBanner,
   ThreadMessagePreviewDeliveryStatus,
 
-  // Poll
   PollButtons,
   PollHeader,
   PollAllOptionsContent,
@@ -567,23 +548,17 @@ const components = {
   PollResultsContent,
   PollOptionFullResultsContent,
 
-  // ImageGallery
   ImageGalleryFooter,
   ImageGalleryGrid,
   ImageGalleryHeader,
   ImageGalleryVideoControls: ImageGalleryVideoControl,
 
-  // Overlay
   MessageOverlayBackground: DefaultMessageOverlayBackground,
 
-  // Image
   ImageComponent: SvgAwareImage,
 };
 
-/**
- * Optional component slots that have no default implementation.
- * These are `undefined` unless the integrator provides them via WithComponents.
- */
+/** Component slots with no default, `undefined` unless provided via `WithComponents`. */
 export interface OptionalComponentOverrides {
   AttachmentPickerIOSSelectMorePhotos?: React.ComponentType;
   ChatLoadingIndicator?: React.ComponentType | null;
@@ -604,11 +579,5 @@ export interface OptionalComponentOverrides {
   PollContent?: React.ComponentType;
 }
 
-/**
- * All default component implementations used across the SDK.
- * These are the components used when no overrides are provided via WithComponents.
- *
- * The `NormalizeComponents` cast ensures that internal details like
- * `displayName: string` don't leak into the public override types.
- */
+/** The default component for every overridable slot, typed through `NormalizeComponents`. */
 export const DEFAULT_COMPONENTS: NormalizeComponents<typeof components> = components;