feat: add MessageDeletedBubble to ComponentContext

Author: MartinCupela

src/components/Gallery/decisions.md

@@ -122,15 +122,15 @@ The new ModalGallery is a composition component: thumbnail grid + Modal + Galler
 
 - Downstream consumers (`Image.tsx`, `AttachmentPreviewRoot.tsx`, `ComponentContext.tsx`) that use the old `ModalGalleryProps` shape will need updates in Task 8 (Exports & Public API).
 
-## Decision: GalleryContainer and FixedHeightMessage use ModalGallery instead of Gallery
+## Decision: GalleryContainer use ModalGallery instead of Gallery
 
 **Date:** 2026-02-09
 
 **Context:**
-The old `Gallery` component was a thumbnail grid that accepted `images: Attachment[]` and `innerRefs`. The new `Gallery` is a carousel provider accepting `items: GalleryItem[]`. The `GalleryContainer` (in `AttachmentContainer.tsx`) and `FixedHeightMessage` used the old `Gallery` API.
+The old `Gallery` component was a thumbnail grid that accepted `images: Attachment[]` and `innerRefs`. The new `Gallery` is a carousel provider accepting `items: GalleryItem[]`. The `GalleryContainer` (in `AttachmentContainer.tsx`) used the old `Gallery` API.
 
 **Decision:**
-Replace `Gallery` usage with `ModalGallery` in both `GalleryContainer` and `FixedHeightMessage`. Pass `attachment.images` cast to `GalleryItem[]` via `as unknown as GalleryItem[]`. The `AttachmentProps.Gallery` prop was renamed to `AttachmentProps.ModalGallery` with `ModalGalleryProps` type.
+Replace `Gallery` usage with `ModalGallery` in both `GalleryContainer`. Pass `attachment.images` cast to `GalleryItem[]` via `as unknown as GalleryItem[]`. The `AttachmentProps.Gallery` prop was renamed to `AttachmentProps.ModalGallery` with `ModalGalleryProps` type.
 
 **Reasoning:**
 The old `Gallery` rendered a thumbnail grid, which is now `ModalGallery`'s responsibility. The `GalleryContainer`'s `imageAttachmentSizeHandler` and `innerRefs` logic was removed since `ModalGallery` handles its own thumbnail rendering. The type cast is necessary because `Attachment[]` (from stream-chat) is structurally compatible with `GalleryItem` for the properties used by the Gallery UI (image_url, thumb_url, fallback).

src/components/Message/MessageSimple.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
-import { MessageDeletedBubble } from './MessageDeletedBubble';
+import { MessageDeletedBubble as DefaultMessageDeletedBubble } from './MessageDeletedBubble';
 import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
 import { MessageActions as DefaultMessageActions } from '../MessageActions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
@@ -85,6 +85,7 @@ const MessageSimpleWithContext = ({
     MessageBlocked = DefaultMessageBlocked,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageDeleted,
+    MessageDeletedBubble = DefaultMessageDeletedBubble,
     MessageIsThreadReplyInChannelButtonIndicator = DefaultMessageIsThreadReplyInChannelButtonIndicator,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,

src/components/MessageList/__tests__/VirtualizedMessageList.test.js

@@ -40,15 +40,6 @@ jest.mock('../../Loading', () => ({
   LoadingIndicator: jest.fn(() => <div>LoadingIndicator</div>),
 }));
 
-jest.mock('../../Message', () => ({
-  FixedHeightMessage: jest.fn(({ groupedByUser }) => (
-    <div data-testid='msg'>
-      FixedHeightMessage groupedByUser:
-      {groupedByUser ? 'true' : 'false'}
-    </div>
-  )),
-}));
-
 async function createChannel(empty = false) {
   const user1 = generateUser();
   const user2 = generateUser();

src/context/ComponentContext.tsx

@@ -1,59 +1,58 @@
 import type { PropsWithChildren } from 'react';
 import React, { useContext } from 'react';
 
-import type {
-  AttachmentPreviewListProps,
-  AttachmentProps,
-  AvatarProps,
-  AvatarStackProps,
-  BaseImageProps,
-  CalloutDialogProps,
-  ChannelPreviewActionButtonsProps,
-  DateSeparatorProps,
-  EmojiSearchIndex,
-  EmptyStateIndicatorProps,
-  EventComponentProps,
-  FileDragAndDropContentProps,
-  FixedHeightMessageProps,
-  GalleryProps,
-  GiphyPreviewMessageProps,
-  LoadingErrorIndicatorProps,
-  LoadingIndicatorProps,
-  MessageBouncePromptProps,
-  MessageDeletedProps,
-  MessageInputProps,
-  MessageListNotificationsProps,
-  MessageNotificationProps,
-  MessageProps,
-  MessageRepliesCountButtonProps,
-  MessageStatusProps,
-  MessageTimestampProps,
-  MessageUIComponentProps,
-  ModalGalleryProps,
-  ModalProps,
-  PinIndicatorProps,
-  PollCreationDialogProps,
-  PollOptionSelectorProps,
-  QuotedMessagePreviewProps,
-  ReactionOptions,
-  ReactionSelectorProps,
-  ReactionsListModalProps,
-  ReactionsListProps,
-  RecordingPermissionDeniedNotificationProps,
-  ReminderNotificationProps,
-  SendButtonProps,
-  StartRecordingAudioButtonProps,
-  StreamedMessageTextProps,
-  TextareaComposerProps,
-  ThreadHeaderProps,
-  ThreadListItemProps,
-  ThreadListItemUIProps,
-  TimestampProps,
-  TranslationIndicatorProps,
-  TypingIndicatorProps,
-  UnreadMessagesNotificationProps,
-  UnreadMessagesSeparatorProps,
-  VoiceRecordingPreviewSlotProps,
+import {
+  type AttachmentPreviewListProps,
+  type AttachmentProps,
+  type AvatarProps,
+  type AvatarStackProps,
+  type BaseImageProps,
+  type CalloutDialogProps,
+  type ChannelPreviewActionButtonsProps,
+  type DateSeparatorProps,
+  type EmojiSearchIndex,
+  type EmptyStateIndicatorProps,
+  type EventComponentProps,
+  type FileDragAndDropContentProps,
+  type GalleryProps,
+  type GiphyPreviewMessageProps,
+  type LoadingErrorIndicatorProps,
+  type LoadingIndicatorProps,
+  type MessageBouncePromptProps,
+  type MessageDeletedProps,
+  type MessageInputProps,
+  type MessageListNotificationsProps,
+  type MessageNotificationProps,
+  type MessageProps,
+  type MessageRepliesCountButtonProps,
+  type MessageStatusProps,
+  type MessageTimestampProps,
+  type MessageUIComponentProps,
+  type ModalGalleryProps,
+  type ModalProps,
+  type PinIndicatorProps,
+  type PollCreationDialogProps,
+  type PollOptionSelectorProps,
+  type QuotedMessagePreviewProps,
+  type ReactionOptions,
+  type ReactionSelectorProps,
+  type ReactionsListModalProps,
+  type ReactionsListProps,
+  type RecordingPermissionDeniedNotificationProps,
+  type ReminderNotificationProps,
+  type SendButtonProps,
+  type StartRecordingAudioButtonProps,
+  type StreamedMessageTextProps,
+  type TextareaComposerProps,
+  type ThreadHeaderProps,
+  type ThreadListItemProps,
+  type ThreadListItemUIProps,
+  type TimestampProps,
+  type TranslationIndicatorProps,
+  type TypingIndicatorProps,
+  type UnreadMessagesNotificationProps,
+  type UnreadMessagesSeparatorProps,
+  type VoiceRecordingPreviewSlotProps,
 } from '../components';
 
 import type {
@@ -140,8 +139,10 @@ export type ComponentContextValue = {
   MessageBouncePrompt?: React.ComponentType<MessageBouncePromptProps>;
   /** Custom UI component for a moderation-blocked message, defaults to and accepts same props as: [MessageBlocked](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageBlocked.tsx) */
   MessageBlocked?: React.ComponentType;
-  /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
+  /** Custom UI component for a deleted message. Has no default component */
   MessageDeleted?: React.ComponentType<MessageDeletedProps>;
+  /** Custom UI component for a message bubble of a deleted message, defaults to and accepts same props as: [MessageDeletedBubble](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeletedBubble.tsx) */
+  MessageDeletedBubble?: React.ComponentType;
   /** Custom UI component for an indicator that a message is a thread reply sent to channel list: [MessageIsThreadReplyInChannelButtonIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageIsThreadReplyInChannelButtonIndicator.tsx) */
   MessageIsThreadReplyInChannelButtonIndicator?: React.ComponentType;
   MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
@@ -249,7 +250,7 @@ export type ComponentContextValue = {
   /** Component used to play video. If not provided, ReactPlayer is used as a default video player. */
   VideoPlayer?: React.ComponentType<VideoPlayerProps>;
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
-  VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
+  VirtualMessage?: React.ComponentType<MessageUIComponentProps>;
   /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
   MessageListWrapper?: React.ComponentType<PropsWithChildren>;
   /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */