Merge branch 'rc' of github.com:GetStream/stream-chat-react into feat/message-composer

Author: arnautov-anton

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [12.14.0](https://github.com/GetStream/stream-chat-react/compare/v12.13.1...v12.14.0) (2025-04-08)
+
+### Features
+
+* [REACT-218] add MessageBlocked component ([#2675](https://github.com/GetStream/stream-chat-react/issues/2675)) ([0ecd147](https://github.com/GetStream/stream-chat-react/commit/0ecd147264a57921623cf80dad0faa97db203cf3))
+
 ## [12.13.1](https://github.com/GetStream/stream-chat-react/compare/v12.13.0...v12.13.1) (2025-03-05)
 
 ### Chores

package.json

@@ -186,7 +186,7 @@
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/stream-chat-css": "^5.7.2",
+    "@stream-io/stream-chat-css": "^5.8.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",

src/components/Channel/Channel.tsx

@@ -119,6 +119,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'Message'
   | 'MessageActions'
   | 'MessageBouncePrompt'
+  | 'MessageBlocked'
   | 'MessageDeleted'
   | 'MessageListNotifications'
   | 'MessageListMainPanel'
@@ -1232,6 +1233,7 @@ const ChannelInner = (
       LoadingIndicator: props.LoadingIndicator,
       Message: props.Message,
       MessageActions: props.MessageActions,
+      MessageBlocked: props.MessageBlocked,
       MessageBouncePrompt: props.MessageBouncePrompt,
       MessageDeleted: props.MessageDeleted,
       MessageListNotifications: props.MessageListNotifications,
@@ -1283,6 +1285,7 @@ const ChannelInner = (
       props.DateSeparator,
       props.EditMessageInput,
       props.EmojiPicker,
+      props.emojiSearchIndex,
       props.EmptyStateIndicator,
       props.FileUploadIcon,
       props.GiphyPreviewMessage,
@@ -1292,6 +1295,7 @@ const ChannelInner = (
       props.LoadingIndicator,
       props.Message,
       props.MessageActions,
+      props.MessageBlocked,
       props.MessageBouncePrompt,
       props.MessageDeleted,
       props.MessageListNotifications,
@@ -1311,11 +1315,14 @@ const ChannelInner = (
       props.QuotedMessage,
       props.QuotedMessagePreview,
       props.QuotedPoll,
+      props.reactionOptions,
       props.ReactionSelector,
       props.ReactionsList,
       props.ReactionsListModal,
       props.SendButton,
       props.StartRecordingAudioButton,
+      props.StopAIGenerationButton,
+      props.StreamedMessageText,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,
@@ -1324,10 +1331,6 @@ const ChannelInner = (
       props.UnreadMessagesNotification,
       props.UnreadMessagesSeparator,
       props.VirtualMessage,
-      props.StopAIGenerationButton,
-      props.StreamedMessageText,
-      props.emojiSearchIndex,
-      props.reactionOptions,
     ],
   );
 

src/components/Message/MessageBlocked.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { useUserRole } from './hooks/useUserRole';
+import { useTranslationContext } from '../../context/TranslationContext';
+import { useMessageContext } from '../../context';
+
+export const MessageBlocked = () => {
+  const { message } = useMessageContext();
+  const { t } = useTranslationContext('MessageBlocked');
+
+  const { isMyMessage } = useUserRole(message);
+
+  const messageClasses = clsx(
+    'str-chat__message str-chat__message-simple str-chat__message--blocked',
+    message.type,
+    {
+      'str-chat__message--me str-chat__message-simple--me': isMyMessage,
+      'str-chat__message--other': !isMyMessage,
+    },
+  );
+
+  return (
+    <div
+      className={messageClasses}
+      data-testid='message-blocked-component'
+      key={message.id}
+    >
+      <div className='str-chat__message--blocked-inner'>
+        {t<string>('Message was blocked by moderation policies')}
+      </div>
+    </div>
+  );
+};

src/components/Message/MessageSimple.tsx

@@ -4,13 +4,15 @@ import clsx from 'clsx';
 import { MessageErrorIcon } from './icons';
 import { MessageBouncePrompt as DefaultMessageBouncePrompt } from '../MessageBounce';
 import { MessageDeleted as DefaultMessageDeleted } from './MessageDeleted';
+import { MessageBlocked as DefaultMessageBlocked } from './MessageBlocked';
 import { MessageOptions as DefaultMessageOptions } from './MessageOptions';
 import { MessageRepliesCountButton as DefaultMessageRepliesCountButton } from './MessageRepliesCountButton';
 import { MessageStatus as DefaultMessageStatus } from './MessageStatus';
 import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
 import {
   areMessageUIPropsEqual,
+  isMessageBlocked,
   isMessageBounced,
   isMessageEdited,
   messageHasAttachments,
@@ -102,6 +104,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead
     MessageActions = MessageOptions,
+    MessageBlocked = DefaultMessageBlocked,
     MessageDeleted = DefaultMessageDeleted,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
@@ -126,6 +129,10 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
     return <MessageDeleted message={message} />;
   }
 
+  if (isMessageBlocked(message)) {
+    return <MessageBlocked />;
+  }
+
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
   const allowRetry = message.status === 'failed' && message.error?.status !== 403;

src/components/Message/utils.tsx

@@ -468,5 +468,12 @@ export const isMessageBounced = (
   (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
     message.moderation?.action === 'bounce');
 
+export const isMessageBlocked = (
+  message: Pick<LocalMessage, 'type' | 'moderation' | 'moderation_details'>,
+) =>
+  message.type === 'error' &&
+  (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_REMOVE' ||
+    message.moderation?.action === 'remove');
+
 export const isMessageEdited = (message: Pick<LocalMessage, 'message_text_updated_at'>) =>
   !!message.message_text_updated_at;

src/context/ComponentContext.tsx

@@ -121,6 +121,8 @@ export type ComponentContextValue = {
   MessageActions?: React.ComponentType;
   /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
   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) */
   MessageDeleted?: React.ComponentType<MessageDeletedProps>;
   MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;

src/i18n/de.json

@@ -67,6 +67,7 @@
   "Message deleted": "Nachricht gelöscht",
   "Message has been successfully flagged": "Nachricht wurde erfolgreich gemeldet",
   "Message pinned": "Nachricht angeheftet",
+  "Message was blocked by moderation policies": "Nachricht wurde durch moderationsrichtlinien blockiert",
   "Messages have been marked unread.": "Nachrichten wurden als ungelesen markiert.",
   "Missing permissions to upload the attachment": "Fehlende Berechtigungen zum Hochladen des Anhangs",
   "Multiple answers": "Mehrere Antworten",

src/i18n/en.json

@@ -67,6 +67,7 @@
   "Message deleted": "Message deleted",
   "Message has been successfully flagged": "Message has been successfully flagged",
   "Message pinned": "Message pinned",
+  "Message was blocked by moderation policies": "Message was blocked by moderation policies",
   "Messages have been marked unread.": "Messages have been marked unread.",
   "Missing permissions to upload the attachment": "Missing permissions to upload the attachment",
   "Multiple answers": "Multiple answers",

src/i18n/es.json

@@ -67,6 +67,7 @@
   "Message deleted": "Mensaje eliminado",
   "Message has been successfully flagged": "El mensaje se marcó correctamente",
   "Message pinned": "Mensaje fijado",
+  "Message was blocked by moderation policies": "El mensaje fue bloqueado por las políticas de moderación",
   "Messages have been marked unread.": "Los mensajes han sido marcados como no leídos.",
   "Missing permissions to upload the attachment": "Faltan permisos para subir el archivo adjunto",
   "Multiple answers": "Múltiples respuestas",