stream-chat-react-native-core 9.0.0-beta.30 → 9.0.0-beta.32

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -0,0 +1,62 @@
+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.
+ *
+ * Every key is optional — only specify the components you want to override.
+ */
+export type ComponentOverrides = Partial<
+  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+>;
+
+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).
+ *
+ * @example
+ * ```tsx
+ * <WithComponents overrides={{ Message: MyCustomMessage, SendButton: MyCustomSendButton }}>
+ *   <Channel channel={channel}>
+ *     <MessageList />
+ *     <MessageInput />
+ *   </Channel>
+ * </WithComponents>
+ * ```
+ */
+export const WithComponents = ({
+  children,
+  overrides,
+}: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
+  const parent = useContext(ComponentsContext);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
+};
+
+// Lazy-loaded to break circular dependency:
+// defaultComponents.ts → imports components → components import useComponentsContext from this file
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = (): ComponentOverrides => {
+  if (!cachedDefaults) {
+    cachedDefaults = (require('./defaultComponents') as { DEFAULT_COMPONENTS: ComponentOverrides })
+      .DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+
+/**
+ * Hook to access resolved component overrides.
+ * Returns all components with defaults filled in — user overrides merged over defaults.
+ */
+export const useComponentsContext = () => {
+  const overrides = useContext(ComponentsContext);
+  return useMemo(
+    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
+};

package/src/contexts/componentsContext/PLAN.md

@@ -0,0 +1,148 @@
+# WithComponents — Component Override System
+
+## Design Principle
+
+**All components are read from `useComponentsContext()`. All other contexts only provide data + APIs — never components.**
+
+## Current State (Completed)
+
+### What was done
+
+1. **Created `ComponentsContext`** — `WithComponents` provider, `useComponentsContext()` hook, `ComponentOverrides` type
+2. **Created `defaultComponents.ts`** — centralized map of all ~130 default components
+3. **Stripped component keys** from all existing context types: `MessagesContextValue`, `InputMessageInputContextValue`, `ChannelContextValue`, `ChannelsContextValue`, `AttachmentPickerContextValue`, `ThreadsContextValue`, `ImageGalleryContextValue`
+4. **Simplified `useCreate*Context` hooks** — no longer receive or forward component params
+5. **Simplified `Channel.tsx`** — removed ~90 component imports, prop defaults, forwarding lines
+6. **Simplified `ChannelList.tsx`** — removed ~19 component props
+7. **Updated ~80 consumer files** — switched from old context hooks to `useComponentsContext()`
+8. **Removed component override props** from ALL individual components
+9. **Updated all 3 example apps** (SampleApp, ExpoMessaging, TypeScriptMessaging)
+10. **Updated ~45 documentation pages** across docs-content repo
+11. **Merged with develop** and resolved conflicts
+
+### Architecture
+
+```
+User: <WithComponents overrides={{ Message: Custom }}>
+  ↓
+ComponentsContext (merges parent + overrides, inner wins)
+  ↓
+useComponentsContext() → { ...DEFAULT_COMPONENTS, ...overrides }
+  ↓
+Consumer: const { Message } = useComponentsContext()
+```
+
+### Key Files
+
+| File                    | Purpose                                                                                                                                   |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentsContext.tsx` | ~60 lines. `ComponentOverrides` type (derived from `typeof DEFAULT_COMPONENTS`), `WithComponents` provider, `useComponentsContext()` hook |
+| `defaultComponents.ts`  | ~300 lines. Single source of truth for all default component mappings. Adding a new component here auto-extends `ComponentOverrides`      |
+
+### Type System
+
+`ComponentOverrides` is derived automatically:
+
+```ts
+export type ComponentOverrides = Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>;
+```
+
+No manual type maintenance — add a component to `DEFAULT_COMPONENTS` and the type updates.
+
+### Circular Dependency Handling
+
+`defaultComponents.ts` → imports components → components import `useComponentsContext` from `ComponentsContext.tsx`.
+
+Broken by lazy-loading defaults in the hook:
+
+```ts
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = () => {
+  if (!cachedDefaults) {
+    cachedDefaults = require('./defaultComponents').DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+```
+
+### Naming Conventions
+
+Some component keys differ from their default component names to avoid collisions:
+
+| Override Key                  | Default Component                       | Why renamed                                                |
+| ----------------------------- | --------------------------------------- | ---------------------------------------------------------- |
+| `FileAttachmentIcon`          | `FileIcon`                              | Clarity                                                    |
+| `ChannelListLoadingIndicator` | `ChannelListLoadingIndicator`           | Split from shared `LoadingIndicator` — renders skeleton UI |
+| `MessageListLoadingIndicator` | `LoadingIndicator`                      | Split from shared `LoadingIndicator` — renders text        |
+| `ChatLoadingIndicator`        | `undefined`                             | Optional, no default                                       |
+| `ThreadMessageComposer`       | `MessageComposer`                       | Avoid collision with `MessageComposer` component name      |
+| `ThreadListComponent`         | `DefaultThreadListComponent`            | Avoid collision with exported `ThreadList`                 |
+| `StartAudioRecordingButton`   | `AudioRecordingButton`                  | Historical naming                                          |
+| `Preview`                     | `ChannelPreviewView`                    | ChannelList preview item                                   |
+| `PreviewAvatar`               | `ChannelAvatar`                         | ChannelList preview avatar                                 |
+| `FooterLoadingIndicator`      | `ChannelListFooterLoadingIndicator`     | ChannelList footer                                         |
+| `HeaderErrorIndicator`        | `ChannelListHeaderErrorIndicator`       | ChannelList header                                         |
+| `HeaderNetworkDownIndicator`  | `ChannelListHeaderNetworkDownIndicator` | ChannelList header                                         |
+
+### Optional Components (no default)
+
+These exist in `DEFAULT_COMPONENTS` as `undefined` with `React.ComponentType<any> | undefined` type assertions:
+
+`AttachmentPickerIOSSelectMorePhotos`, `ChatLoadingIndicator`, `CreatePollContent`, `ImageComponent`, `Input`, `ListHeaderComponent`, `MessageContentBottomView`, `MessageContentLeadingView`, `MessageContentTopView`, `MessageContentTrailingView`, `MessageLocation`, `MessageSpacer`, `MessageText`, `PollContent`
+
+### Shared Component Keys (audited)
+
+Some keys were used in multiple contexts before the refactor. Audit results:
+
+| Key                     | Used By               | Same Default?                                               | Resolution                                                                  |
+| ----------------------- | --------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `EmptyStateIndicator`   | Channel + ChannelList | Yes (differentiates via `listType` prop)                    | Single key ✅                                                               |
+| `LoadingErrorIndicator` | Channel + ChannelList | Yes (differentiates via `listType` prop)                    | Single key ✅                                                               |
+| `LoadingIndicator`      | Channel + ChannelList | **No** — Channel used text-based, ChannelList used skeleton | Split into `MessageListLoadingIndicator` + `ChannelListLoadingIndicator` ✅ |
+
+### API Alignment with stream-chat-react
+
+| Aspect    | React Native                        | React Web                              |
+| --------- | ----------------------------------- | -------------------------------------- |
+| Provider  | `WithComponents`                    | `WithComponents`                       |
+| Prop name | `overrides`                         | `overrides`                            |
+| Hook      | `useComponentsContext()`            | `useComponentContext()`                |
+| Type      | `ComponentOverrides` (auto-derived) | `ComponentContextValue` (hand-written) |
+| Defaults  | Lazy-loaded via `require()`         | Set at `Channel` level                 |
+| Merge     | `useMemo`                           | Plain spread (no memo)                 |
+
+## Known Issues / Future Work
+
+### Pre-existing Test Failures (not caused by this work)
+
+These test suites fail on `develop` too:
+
+- `offline-support/index.test.ts` — timeout
+- `ChannelList.test.js` — filter race condition (`channel.countUnread` mock missing)
+- `isAttachmentEqualHandler.test.js`, `MessageContent.test.js`, `MessageTextContainer.test.tsx`, `MessageUserReactions.test.tsx`, `ChannelPreview.test.tsx` — various pre-existing issues
+
+### Linter Interaction
+
+`@typescript-eslint/no-unused-vars` (warn, max-warnings 0) aggressively strips unused type keys. When adding new keys to `ComponentOverrides`, the type and its consumer must land in the same edit — otherwise the linter removes the key between saves.
+
+Since `ComponentOverrides` is now auto-derived from `DEFAULT_COMPONENTS`, this is no longer an issue for the type itself. But be aware when adding optional components (`undefined as React.ComponentType<any> | undefined`).
+
+### `contexts/index.ts` Barrel Export
+
+The `export * from './componentsContext/ComponentsContext'` line in `contexts/index.ts` was stripped by the linter multiple times during development. If `WithComponents` becomes unexportable from the package, check this barrel file first.
+
+### Documentation
+
+Docs PR: https://github.com/GetStream/docs-content/pull/1169
+
+Updated ~45 pages across:
+
+- Core teaching pages (custom_components, message-customization, etc.)
+- Component reference pages (channel-list, message-list, message-composer, etc.)
+- Context docs (stripped component keys from 7 context pages)
+- Migration guide (upgrading-from-v8.md — comprehensive WithComponents section)
+- Advanced guides (audio, AI, image-picker, etc.)
+
+### SDK PR
+
+https://github.com/GetStream/stream-chat-react-native/pull/3542

package/src/contexts/componentsContext/__tests__/defaultComponents.test.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_COMPONENTS } from '../defaultComponents';
+
+// Optional component keys that are intentionally undefined (no default implementation)
+const OPTIONAL_KEYS = new Set([
+  'AttachmentPickerIOSSelectMorePhotos',
+  'ChatLoadingIndicator',
+  'CreatePollContent',
+  'Input',
+  'ListHeaderComponent',
+  'MessageContentBottomView',
+  'MessageContentLeadingView',
+  'MessageContentTopView',
+  'MessageContentTrailingView',
+  'MessageLocation',
+  'MessageSpacer',
+  'MessageText',
+  'PollContent',
+]);
+
+describe('DEFAULT_COMPONENTS', () => {
+  it('should have all required values defined', () => {
+    const entries = Object.entries(DEFAULT_COMPONENTS);
+    expect(entries.length).toBeGreaterThan(50);
+
+    const unexpectedUndefined = entries.filter(
+      ([key, value]) => value === undefined && !OPTIONAL_KEYS.has(key),
+    );
+    if (unexpectedUndefined.length > 0) {
+      console.log(
+        'Unexpectedly undefined keys:',
+        unexpectedUndefined.map(([k]) => k),
+      );
+    }
+    expect(unexpectedUndefined).toEqual([]);
+  });
+
+  it('optional keys should be explicitly listed', () => {
+    const entries = Object.entries(DEFAULT_COMPONENTS);
+    const actualUndefined = new Set(
+      entries.filter(([, v]) => v === undefined || v === null).map(([k]) => k),
+    );
+    expect(actualUndefined).toEqual(OPTIONAL_KEYS);
+  });
+});

package/src/contexts/componentsContext/defaultComponents.ts

@@ -0,0 +1,332 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { Attachment } from '../../components/Attachment/Attachment';
+import { AudioAttachment } from '../../components/Attachment/Audio';
+import { FileAttachment } from '../../components/Attachment/FileAttachment';
+import { FileAttachmentGroup } from '../../components/Attachment/FileAttachmentGroup';
+import { FileIcon } from '../../components/Attachment/FileIcon';
+import { FilePreview } from '../../components/Attachment/FilePreview';
+import { Gallery } from '../../components/Attachment/Gallery';
+import { Giphy } from '../../components/Attachment/Giphy';
+import { ImageLoadingFailedIndicator } from '../../components/Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../components/Attachment/ImageLoadingIndicator';
+import { UnsupportedAttachment } from '../../components/Attachment/UnsupportedAttachment';
+import { URLPreview } from '../../components/Attachment/UrlPreview';
+import { URLPreviewCompact } from '../../components/Attachment/UrlPreview/URLPreviewCompact';
+import { VideoThumbnail } from '../../components/Attachment/VideoThumbnail';
+import { AttachmentPickerContent } from '../../components/AttachmentPicker/components/AttachmentPickerContent';
+import { AttachmentPickerSelectionBar } from '../../components/AttachmentPicker/components/AttachmentPickerSelectionBar';
+import { ImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
+import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
+import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
+import { InputView } from '../../components/AutoCompleteInput/InputView';
+import { ChannelListFooterLoadingIndicator } from '../../components/ChannelList/ChannelListFooterLoadingIndicator';
+import { ChannelListHeaderErrorIndicator } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
+import { ChannelListHeaderNetworkDownIndicator } from '../../components/ChannelList/ChannelListHeaderNetworkDownIndicator';
+import { ChannelListLoadingIndicator } from '../../components/ChannelList/ChannelListLoadingIndicator';
+import { Skeleton } from '../../components/ChannelList/Skeleton';
+import { ChannelDetailsBottomSheet } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
+import { ChannelDetailsHeader } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
+import { ChannelLastMessagePreview } from '../../components/ChannelPreview/ChannelLastMessagePreview';
+import { ChannelMessagePreviewDeliveryStatus } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
+import { ChannelPreviewMessage } from '../../components/ChannelPreview/ChannelPreviewMessage';
+import { ChannelPreviewMutedStatus } from '../../components/ChannelPreview/ChannelPreviewMutedStatus';
+import { ChannelPreviewStatus } from '../../components/ChannelPreview/ChannelPreviewStatus';
+import { ChannelPreviewTitle } from '../../components/ChannelPreview/ChannelPreviewTitle';
+import { ChannelPreviewTypingIndicator } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
+import { ChannelPreviewUnreadCount } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
+import { ChannelPreviewView } from '../../components/ChannelPreview/ChannelPreviewView';
+import { ImageGalleryFooter } from '../../components/ImageGallery/components/ImageGalleryFooter';
+import { ImageGalleryHeader } from '../../components/ImageGallery/components/ImageGalleryHeader';
+import { ImageGalleryVideoControl } from '../../components/ImageGallery/components/ImageGalleryVideoControl';
+import { ImageGalleryGrid } from '../../components/ImageGallery/components/ImageGrid';
+import { EmptyStateIndicator } from '../../components/Indicators/EmptyStateIndicator';
+import { LoadingErrorIndicator } from '../../components/Indicators/LoadingErrorIndicator';
+import { LoadingIndicator } from '../../components/Indicators/LoadingIndicator';
+import { KeyboardCompatibleView } from '../../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { Message } from '../../components/Message/Message';
+import { MessagePinnedHeader } from '../../components/Message/MessageItemView/Headers/MessagePinnedHeader';
+import { MessageReminderHeader } from '../../components/Message/MessageItemView/Headers/MessageReminderHeader';
+import { MessageSavedForLaterHeader } from '../../components/Message/MessageItemView/Headers/MessageSavedForLaterHeader';
+import { SentToChannelHeader } from '../../components/Message/MessageItemView/Headers/SentToChannelHeader';
+import { MessageAuthor } from '../../components/Message/MessageItemView/MessageAuthor';
+import { MessageBlocked } from '../../components/Message/MessageItemView/MessageBlocked';
+import { MessageBounce } from '../../components/Message/MessageItemView/MessageBounce';
+import { MessageContent } from '../../components/Message/MessageItemView/MessageContent';
+import { MessageDeleted } from '../../components/Message/MessageItemView/MessageDeleted';
+import { MessageError } from '../../components/Message/MessageItemView/MessageError';
+import { MessageFooter } from '../../components/Message/MessageItemView/MessageFooter';
+import { MessageHeader } from '../../components/Message/MessageItemView/MessageHeader';
+import { MessageItemView } from '../../components/Message/MessageItemView/MessageItemView';
+import { MessageReplies } from '../../components/Message/MessageItemView/MessageReplies';
+import { MessageRepliesAvatars } from '../../components/Message/MessageItemView/MessageRepliesAvatars';
+import { MessageStatus } from '../../components/Message/MessageItemView/MessageStatus';
+import { MessageSwipeContent } from '../../components/Message/MessageItemView/MessageSwipeContent';
+import { MessageTimestamp } from '../../components/Message/MessageItemView/MessageTimestamp';
+import { ReactionListBottom } from '../../components/Message/MessageItemView/ReactionList/ReactionListBottom';
+import { ReactionListClustered } from '../../components/Message/MessageItemView/ReactionList/ReactionListClustered';
+import {
+  ReactionListCountItem,
+  ReactionListItem,
+} from '../../components/Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItemWrapper } from '../../components/Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+import { ReactionListTop } from '../../components/Message/MessageItemView/ReactionList/ReactionListTop';
+import { StreamingMessageView } from '../../components/Message/MessageItemView/StreamingMessageView';
+import { AttachmentUploadPreviewList } from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
+import {
+  FileUploadInProgressIndicator,
+  FileUploadNotSupportedIndicator,
+  FileUploadRetryIndicator,
+  ImageUploadInProgressIndicator,
+  ImageUploadNotSupportedIndicator,
+  ImageUploadRetryIndicator,
+} from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { AudioAttachmentUploadPreview } from '../../components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview';
+import { FileAttachmentUploadPreview } from '../../components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
+import { ImageAttachmentUploadPreview } from '../../components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview';
+import { VideoAttachmentUploadPreview } from '../../components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview';
+import { AudioRecorder } from '../../components/MessageInput/components/AudioRecorder/AudioRecorder';
+import { AudioRecordingButton } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingButton';
+import { AudioRecordingInProgress } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingInProgress';
+import { AudioRecordingLockIndicator } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
+import { AudioRecordingPreview } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingPreview';
+import { AudioRecordingWaveform } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingWaveform';
+import { InputButtons } from '../../components/MessageInput/components/InputButtons';
+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';
+import { MessageInputHeaderView } from '../../components/MessageInput/MessageInputHeaderView';
+import { MessageInputLeadingView } from '../../components/MessageInput/MessageInputLeadingView';
+import { MessageInputTrailingView } from '../../components/MessageInput/MessageInputTrailingView';
+import { SendMessageDisallowedIndicator } from '../../components/MessageInput/SendMessageDisallowedIndicator';
+import { ShowThreadMessageInChannelButton } from '../../components/MessageInput/ShowThreadMessageInChannelButton';
+import { StopMessageStreamingButton } from '../../components/MessageInput/StopMessageStreamingButton';
+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';
+import { StickyHeader } from '../../components/MessageList/StickyHeader';
+import { TypingIndicator } from '../../components/MessageList/TypingIndicator';
+import { TypingIndicatorContainer } from '../../components/MessageList/TypingIndicatorContainer';
+import { UnreadMessagesNotification } from '../../components/MessageList/UnreadMessagesNotification';
+import { MessageActionList } from '../../components/MessageMenu/MessageActionList';
+import { MessageActionListItem } from '../../components/MessageMenu/MessageActionListItem';
+import { MessageMenu } from '../../components/MessageMenu/MessageMenu';
+import { MessageReactionPicker } from '../../components/MessageMenu/MessageReactionPicker';
+import { MessageUserReactions } from '../../components/MessageMenu/MessageUserReactions';
+import { MessageUserReactionsAvatar } from '../../components/MessageMenu/MessageUserReactionsAvatar';
+import { MessageUserReactionsItem } from '../../components/MessageMenu/MessageUserReactionsItem';
+import { PollAnswersListContent } from '../../components/Poll/components/PollAnswersList';
+import { PollButtons } from '../../components/Poll/components/PollButtons';
+import { PollAllOptionsContent } from '../../components/Poll/components/PollOption';
+import { PollOptionFullResultsContent } from '../../components/Poll/components/PollResults/PollOptionFullResults';
+import { PollResultsContent } from '../../components/Poll/components/PollResults/PollResults';
+import { PollHeader } from '../../components/Poll/Poll';
+import { Reply } from '../../components/Reply/Reply';
+import {
+  DefaultThreadListComponent as ThreadListComponent,
+  DefaultThreadListEmptyPlaceholder,
+  DefaultThreadListLoadingIndicator,
+  DefaultThreadListLoadingNextIndicator,
+} from '../../components/ThreadList/ThreadList';
+import { ThreadListItemComponent as ThreadListItem } from '../../components/ThreadList/ThreadListItem';
+import { ThreadListItemMessagePreview } from '../../components/ThreadList/ThreadListItemMessagePreview';
+import { ThreadListUnreadBanner } from '../../components/ThreadList/ThreadListUnreadBanner';
+import { ThreadMessagePreviewDeliveryStatus } from '../../components/ThreadList/ThreadMessagePreviewDeliveryStatus';
+import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
+import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
+
+/**
+ * All default component implementations used across the SDK.
+ * These are the components used when no overrides are provided via WithComponents.
+ */
+export const DEFAULT_COMPONENTS = {
+  Attachment,
+  AttachButton,
+  AttachmentPickerContent,
+  AttachmentPickerSelectionBar,
+  AttachmentUploadPreviewList,
+  AudioAttachment,
+  AudioAttachmentUploadPreview,
+  AudioRecorder,
+  AudioRecordingInProgress,
+  AudioRecordingLockIndicator,
+  AudioRecordingPreview,
+  AudioRecordingWaveform,
+  AutoCompleteSuggestionHeader,
+  AutoCompleteSuggestionItem,
+  AutoCompleteSuggestionList,
+  ChannelDetailsBottomSheet,
+  CooldownTimer,
+  DateHeader,
+  EmptyStateIndicator,
+  FileAttachment,
+  FileAttachmentGroup,
+  FileAttachmentIcon: FileIcon,
+  FileAttachmentUploadPreview,
+  FileUploadInProgressIndicator,
+  FileUploadNotSupportedIndicator,
+  FileUploadRetryIndicator,
+  FilePreview,
+  FooterLoadingIndicator: ChannelListFooterLoadingIndicator,
+  Gallery,
+  Giphy,
+  HeaderErrorIndicator: ChannelListHeaderErrorIndicator,
+  HeaderNetworkDownIndicator: ChannelListHeaderNetworkDownIndicator,
+  ImageAttachmentUploadPreview,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
+  ImageOverlaySelectedComponent,
+  ImageUploadInProgressIndicator,
+  ImageUploadNotSupportedIndicator,
+  ImageUploadRetryIndicator,
+  InlineDateSeparator,
+  InlineUnreadIndicator,
+  InputButtons,
+  InputView,
+  KeyboardCompatibleView,
+  LoadingErrorIndicator,
+  ChannelListLoadingIndicator,
+  MessageListLoadingIndicator: LoadingIndicator,
+  Message,
+  MessageActionList,
+  MessageActionListItem,
+  MessageAuthor,
+  MessageBlocked,
+  MessageBounce,
+  MessageComposerLeadingView,
+  MessageComposerTrailingView,
+  MessageContent,
+  MessageDeleted,
+  MessageError,
+  MessageFooter,
+  MessageHeader,
+  MessageInputFooterView,
+  MessageInputHeaderView,
+  MessageInputLeadingView,
+  MessageInputTrailingView,
+  MessageItemView,
+  MessageList,
+  MessageMenu,
+  MessagePinnedHeader,
+  MessageReactionPicker,
+  MessageReminderHeader,
+  MessageReplies,
+  MessageRepliesAvatars,
+  MessageSavedForLaterHeader,
+  MessageStatus,
+  MessageSwipeContent,
+  MessageSystem,
+  MessageTimestamp,
+  MessageUserReactions,
+  MessageUserReactionsAvatar,
+  MessageUserReactionsItem,
+  NetworkDownIndicator,
+  Preview: ChannelPreviewView,
+  PreviewAvatar: ChannelAvatar,
+  PreviewLastMessage: ChannelLastMessagePreview,
+  PreviewMessage: ChannelPreviewMessage,
+  PreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
+  PreviewMutedStatus: ChannelPreviewMutedStatus,
+  PreviewStatus: ChannelPreviewStatus,
+  PreviewTitle: ChannelPreviewTitle,
+  PreviewTypingIndicator: ChannelPreviewTypingIndicator,
+  PreviewUnreadCount: ChannelPreviewUnreadCount,
+  ReactionListBottom,
+  ReactionListClustered,
+  ReactionListCountItem,
+  ReactionListItem,
+  ReactionListItemWrapper,
+  ReactionListTop,
+  Reply,
+  ScrollToBottomButton,
+  SendButton,
+  SendMessageDisallowedIndicator,
+  SentToChannelHeader,
+  ShowThreadMessageInChannelButton,
+  Skeleton,
+  StartAudioRecordingButton: AudioRecordingButton,
+  StickyHeader,
+  StopMessageStreamingButton,
+  StreamingMessageView,
+  TypingIndicator,
+  TypingIndicatorContainer,
+  UnreadMessagesNotification,
+  UnsupportedAttachment,
+  UrlPreview: URLPreview,
+  URLPreviewCompact,
+  VideoAttachmentUploadPreview,
+  VideoThumbnail,
+
+  // Channel details
+  ChannelDetailsHeader,
+
+  // Thread
+  ThreadMessageComposer: MessageComposer,
+  ThreadListComponent,
+  ThreadListEmptyPlaceholder: DefaultThreadListEmptyPlaceholder,
+  ThreadListItem,
+  ThreadListItemMessagePreview,
+  ThreadListLoadingIndicator: DefaultThreadListLoadingIndicator,
+  ThreadListLoadingMoreIndicator: DefaultThreadListLoadingNextIndicator,
+  ThreadListUnreadBanner,
+  ThreadMessagePreviewDeliveryStatus,
+
+  // Poll
+  PollButtons,
+  PollHeader,
+  PollAllOptionsContent,
+  PollAnswersListContent,
+  PollResultsContent,
+  PollOptionFullResultsContent,
+
+  // ImageGallery
+  ImageGalleryFooter,
+  ImageGalleryGrid,
+  ImageGalleryHeader,
+  ImageGalleryVideoControls: ImageGalleryVideoControl,
+
+  // Overlay
+  MessageOverlayBackground: DefaultMessageOverlayBackground,
+
+  // Image
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ImageComponent: Image as React.ComponentType<any>,
+
+  // Optional overrides (no defaults — undefined unless user provides via WithComponents)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  AttachmentPickerIOSSelectMorePhotos: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ChatLoadingIndicator: undefined as React.ComponentType<any> | null | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  CreatePollContent: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Input: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ListHeaderComponent: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageContentBottomView: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageContentLeadingView: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageContentTopView: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageContentTrailingView: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageLocation: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageSpacer: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MessageText: undefined as React.ComponentType<any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  PollContent: undefined as React.ComponentType<any> | undefined,
+};

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -7,10 +7,6 @@ import {
   useImageGalleryContext,
 } from './ImageGalleryContextBase';
 
-import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../components/ImageGallery/components/ImageGalleryFooter';
-import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../components/ImageGallery/components/ImageGalleryHeader';
-import { ImageGalleryVideoControl as ImageGalleryVideoControlDefault } from '../../components/ImageGallery/components/ImageGalleryVideoControl';
-import { ImageGalleryGrid as ImageGalleryGridDefault } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
 
 export const ImageGalleryProvider = ({
@@ -30,10 +26,6 @@ export const ImageGalleryProvider = ({
     () => ({
       autoPlayVideo: value?.autoPlayVideo,
       imageGalleryStateStore,
-      ImageGalleryHeader: ImageGalleryHeaderDefault,
-      ImageGalleryFooter: ImageGalleryFooterDefault,
-      ImageGalleryVideoControls: ImageGalleryVideoControlDefault,
-      ImageGalleryGrid: ImageGalleryGridDefault,
       ...value,
     }),
     [imageGalleryStateStore, value],

package/src/contexts/imageGalleryContext/ImageGalleryContextBase.tsx

@@ -2,12 +2,6 @@ import React, { useContext } from 'react';
 
 import type { Attachment } from 'stream-chat';
 
-import type {
-  ImageGalleryFooterProps,
-  ImageGalleryGridProps,
-  ImageGalleryHeaderProps,
-  ImageGalleryVideoControlProps,
-} from '../../components/ImageGallery/components/types';
 import { ImageGalleryStateStore } from '../../state-store/image-gallery-state-store';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -17,10 +11,6 @@ export type ImageGalleryProviderProps = {
   autoPlayVideo?: boolean;
   giphyVersion?: keyof NonNullable<Attachment['giphy']>;
   numberOfImageGalleryGridColumns?: number;
-  ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
-  ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
-  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
-  ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
 };
 
 export type ImageGalleryContextValue = ImageGalleryProviderProps & {

package/src/contexts/index.ts

@@ -1,4 +1,5 @@
 export * from './attachmentPickerContext/AttachmentPickerContext';
+export * from './componentsContext/ComponentsContext';
 export * from './bottomSheetContext/BottomSheetContext';
 export * from './channelContext/ChannelContext';
 export * from './channelsContext/ChannelsContext';