feat: [REACT-218] add MessageBlocked component (#2675)

This PR adds a `MessageBlocked` component to render instead of a normal
message UI whenever sync/async moderation blocks an inappropriate
message.

Ref: GetStream/stream-chat-js#1510
Ref: GetStream/stream-chat-css#327

Also awaits BE changes to the `message.updated` message object's
payload.

Author: arnautov-anton

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

@@ -128,6 +128,7 @@ type ChannelPropsForwardedToComponentContext<
   | 'Message'
   | 'MessageActions'
   | 'MessageBouncePrompt'
+  | 'MessageBlocked'
   | 'MessageDeleted'
   | 'MessageListNotifications'
   | 'MessageListMainPanel'
@@ -1337,6 +1338,7 @@ const ChannelInner = <
       LoadingIndicator: props.LoadingIndicator,
       Message: props.Message,
       MessageActions: props.MessageActions,
+      MessageBlocked: props.MessageBlocked,
       MessageBouncePrompt: props.MessageBouncePrompt,
       MessageDeleted: props.MessageDeleted,
       MessageListNotifications: props.MessageListNotifications,
@@ -1389,6 +1391,7 @@ const ChannelInner = <
       props.DateSeparator,
       props.EditMessageInput,
       props.EmojiPicker,
+      props.emojiSearchIndex,
       props.EmptyStateIndicator,
       props.FileUploadIcon,
       props.GiphyPreviewMessage,
@@ -1398,6 +1401,7 @@ const ChannelInner = <
       props.LoadingIndicator,
       props.Message,
       props.MessageActions,
+      props.MessageBlocked,
       props.MessageBouncePrompt,
       props.MessageDeleted,
       props.MessageListNotifications,
@@ -1417,11 +1421,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,
@@ -1431,10 +1438,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,
@@ -77,6 +79,7 @@ const MessageSimpleWithContext = <
     // 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,
@@ -102,6 +105,10 @@ const MessageSimpleWithContext = <
     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.errorStatusCode !== 403;

src/components/Message/utils.tsx

@@ -496,6 +496,13 @@ export const isMessageBounced = <
   (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_BOUNCE' ||
     message.moderation?.action === 'bounce');
 
+export const isMessageBlocked = (
+  message: Pick<StreamMessage, 'type' | 'moderation' | 'moderation_details'>,
+) =>
+  message.type === 'error' &&
+  (message.moderation_details?.action === 'MESSAGE_RESPONSE_ACTION_REMOVE' ||
+    message.moderation?.action === 'remove');
+
 export const isMessageEdited = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(

src/context/ComponentContext.tsx

@@ -132,6 +132,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<StreamChatGenerics>>;
   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",

src/i18n/fr.json

@@ -67,6 +67,7 @@
   "Message deleted": "Message supprimé",
   "Message has been successfully flagged": "Le message a été signalé avec succès",
   "Message pinned": "Message épinglé",
+  "Message was blocked by moderation policies": "Le message a été bloqué par les politiques de modération",
   "Messages have been marked unread.": "Les messages ont été marqués comme non lus.",
   "Missing permissions to upload the attachment": "Autorisations manquantes pour télécharger la pièce jointe",
   "Multiple answers": "Réponses multiples",

src/i18n/hi.json

@@ -68,6 +68,7 @@
   "Message deleted": "मैसेज हटा दिया गया",
   "Message has been successfully flagged": "मैसेज को फ्लैग कर दिया गया है",
   "Message pinned": "संदेश पिन किया गया",
+  "Message was blocked by moderation policies": "संदेश को मॉडरेशन नीतियों द्वारा ब्लॉक कर दिया गया है",
   "Messages have been marked unread.": "संदेशों को अपठित चिह्नित किया गया है।",
   "Missing permissions to upload the attachment": "अटैचमेंट अपलोड करने के लिए अनुमतियां गायब",
   "Multiple answers": "कई उत्तर",

src/i18n/it.json

@@ -67,6 +67,7 @@
   "Message deleted": "Messaggio cancellato",
   "Message has been successfully flagged": "Il messaggio è stato segnalato con successo",
   "Message pinned": "Messaggio bloccato",
+  "Message was blocked by moderation policies": "Il messaggio è stato bloccato dalle politiche di moderazione",
   "Messages have been marked unread.": "I messaggi sono stati contrassegnati come non letti.",
   "Missing permissions to upload the attachment": "Autorizzazioni mancanti per caricare l'allegato",
   "Multiple answers": "Risposte multiple",

src/i18n/ja.json

@@ -67,6 +67,7 @@
   "Message deleted": "メッセージが削除されました",
   "Message has been successfully flagged": "メッセージに正常にフラグが付けられました",
   "Message pinned": "メッセージにピンが付けられました",
+  "Message was blocked by moderation policies": "メッセージはモデレーションポリシーによってブロックされました",
   "Messages have been marked unread.": "メッセージは未読としてマークされました。",
   "Missing permissions to upload the attachment": "添付ファイルをアップロードするための許可がありません",
   "Multiple answers": "複数回答",

src/i18n/ko.json

@@ -67,6 +67,7 @@
   "Message deleted": "메시지가 삭제되었습니다.",
   "Message has been successfully flagged": "메시지에 플래그가 지정되었습니다.",
   "Message pinned": "메시지 핀했습니다",
+  "Message was blocked by moderation policies": "메시지가 관리 정책에 의해 차단되었습니다.",
   "Messages have been marked unread.": "메시지가 읽지 않음으로 표시되었습니다.",
   "Missing permissions to upload the attachment": "첨부 파일을 업로드하려면 권한이 필요합니다",
   "Multiple answers": "복수 응답",

src/i18n/nl.json

@@ -67,6 +67,7 @@
   "Message deleted": "Bericht verwijderd",
   "Message has been successfully flagged": "Bericht is succesvol gemarkeerd",
   "Message pinned": "Bericht vastgezet",
+  "Message was blocked by moderation policies": "Bericht is geblokkeerd door moderatiebeleid",
   "Messages have been marked unread.": "Berichten zijn gemarkeerd als ongelezen.",
   "Missing permissions to upload the attachment": "Missende toestemmingen om de bijlage te uploaden",
   "Multiple answers": "Meerdere antwoorden",

src/i18n/pt.json

@@ -67,6 +67,7 @@
   "Message deleted": "Mensagem apagada",
   "Message has been successfully flagged": "A mensagem foi reportada com sucesso",
   "Message pinned": "Mensagem fixada",
+  "Message was blocked by moderation policies": "A mensagem foi bloqueada pelas políticas de moderação",
   "Messages have been marked unread.": "Mensagens foram marcadas como não lidas.",
   "Missing permissions to upload the attachment": "Faltando permissões para enviar o anexo",
   "Multiple answers": "Múltiplas respostas",

src/i18n/ru.json

@@ -67,6 +67,7 @@
   "Message deleted": "Сообщение удалено",
   "Message has been successfully flagged": "Жалоба на сообщение была принята",
   "Message pinned": "Сообщение закреплено",
+  "Message was blocked by moderation policies": "Сообщение было заблокировано модерацией",
   "Messages have been marked unread.": "Сообщения были отмечены как непрочитанные.",
   "Missing permissions to upload the attachment": "Отсутствуют разрешения для загрузки вложения",
   "Multiple answers": "Несколько ответов",

src/i18n/tr.json

@@ -67,6 +67,7 @@
   "Message deleted": "Mesaj silindi",
   "Message has been successfully flagged": "Mesaj başarıyla bayraklandı",
   "Message pinned": "Mesaj sabitlendi",
+  "Message was blocked by moderation policies": "Mesaj moderasyon politikaları tarafından engellendi",
   "Messages have been marked unread.": "Mesajlar okunmamış olarak işaretlendi.",
   "Missing permissions to upload the attachment": "Ek yüklemek için izinler eksik",
   "Multiple answers": "Çoklu cevaplar",

yarn.lock

@@ -2438,10 +2438,10 @@
   resolved "https://registry.yarnpkg.com/@stream-io/escape-string-regexp/-/escape-string-regexp-5.0.1.tgz#362505c92799fea6afe4e369993fbbda8690cc37"
   integrity sha512-qIaSrzJXieZqo2fZSYTdzwSbZgHHsT3tkd646vvZhh4fr+9nO4NlvqGmPF43Y+OfZiWf+zYDFgNiPGG5+iZulQ==
 
-"@stream-io/stream-chat-css@^5.7.2":
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-5.7.2.tgz#0bd05bb62e9f43d6158af9c3b57798aab4bf2be4"
-  integrity sha512-AI5uoG9PHaTavkmEMLD1UXHAKD5L4CrGl/FWXH8RK5yldnnHh+4MSeyrPG4IZrCGNd1jqcZ9tYN1lRoY7jUwGA==
+"@stream-io/stream-chat-css@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-5.8.0.tgz#6c0032544cfbc59447f71ef88b3c0736aaa676a8"
+  integrity sha512-p9Z1Ktx3E+o+7EFubNyZWNjg26UNgux8IAK0nhoC04t47Cok5pSHcUbPmTgiICSPXYNNEcDxrCil5crM0ItUUA==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"