feat: introduce MessageUI to ComponentContext

src/components/Message/Message.tsx

@@ -72,7 +72,11 @@ const MessageWithContext = (props: MessageWithContextProps) => {
 
   const { client, isMessageAIGenerated } = useChatContext('Message');
   const { channelConfig, read } = useChannelStateContext('Message');
-  const { Message: contextMessage } = useComponentContext('Message');
+  const {
+    Message: contextMessage = DefaultMessageUI,
+    // TODO: remove this passthrough once we drop Message from the ComponentContext
+    MessageUI: contextMessageUI = contextMessage,
+  } = useComponentContext('Message');
   const { getTranslationView, setTranslationView: setTranslationViewInContext } =
     useMessageTranslationViewContext();
 
@@ -83,7 +87,7 @@ const MessageWithContext = (props: MessageWithContextProps) => {
   );
 
   const actionsEnabled = message.type === 'regular' && message.status === 'received';
-  const MessageUIComponent = propMessage ?? contextMessage ?? DefaultMessageUI;
+  const MessageUIComponent = propMessage ?? contextMessageUI;
 
   const { onUserClick, onUserHover } = useUserHandler(message, {
     onUserClickHandler: propOnUserClick,

src/components/Message/types.ts

@@ -41,8 +41,10 @@ export type MessageProps = {
   // todo: could be moved to the Channel instance reactive state as lastReceivedMessage keeping the the receipt status as well (useful for channel preview)
   /** Latest message id on current channel */
   lastReceivedId?: string | null;
-  /** UI component to display a Message in MessageList, overrides value in [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/#message) */
-  Message?: ComponentContextValue['Message'];
+  /** UI component to display a Message in MessageList, overrides value in [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/#message)
+   * @deprecated use `ComponentContext` (`WithComponents`) component override instead (`MessageUI` slot)
+   */
+  Message?: ComponentContextValue['MessageUI'];
   /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */
   messageActions?: MessageActionsArray;
   /** DOMRect object for parent MessageList component */

src/context/ComponentContext.tsx

@@ -158,6 +158,10 @@ export type ComponentContextValue = {
   /** Custom UI component for determinate progress (0–100), defaults to and accepts same props as: [ProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/progress-indicators.tsx) */
   ProgressIndicator?: React.ComponentType<ProgressIndicatorProps>;
   /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */
+  MessageUI?: React.ComponentType<MessageUIComponentProps>;
+  /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx)
+   * @deprecated use `MessageUI` instead
+   */
   Message?: React.ComponentType<MessageUIComponentProps>;
   /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */
   MessageActions?: React.ComponentType;