diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index f32ea288e..49cebdb5d 100644 --- a/src/components/Message/Message.tsx +++ b/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, diff --git a/src/components/Message/types.ts b/src/components/Message/types.ts index 941ee781c..53f8fed1b 100644 --- a/src/components/Message/types.ts +++ b/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 */ diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index 322197a65..51b055933 100644 --- a/src/context/ComponentContext.tsx +++ b/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; /** 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; + /** 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; /** 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;