Merge pull request #700 from GetStream/blocked-message-component

feat: display message blocked component when message is blocked by mo…

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ctrl/ngx-emoji-mart": "^8.2.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@stream-io/stream-chat-css": "5.6.1",
+    "@stream-io/stream-chat-css": "5.8.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",
@@ -128,7 +128,7 @@
     "pretty-bytes": "^6.1.1",
     "rxjs": "~7.4.0",
     "starwars-names": "^1.6.0",
-    "stream-chat": "^8.44.0",
+    "stream-chat": "^8.60.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",
     "uuid": "^9.0.1",

package.json

@@ -275,3 +275,16 @@
     [isQuoted]="isQuoted"
   ></app-message-text>
 </ng-template>
+
+<ng-template
+  #messageBlocked
+  let-message="message"
+  let-isMyMessage="isMyMessage"
+>
+  <ng-container *ngIf="isMyMessage; else othersMessage">
+    You message was blocked by moderation policies.
+  </ng-container>
+  <ng-template #othersMessage>
+    Message from {{ message.user.name }} was blocked by moderation policies.
+  </ng-template>
+</ng-template>

projects/customizations-example/src/app/app.component.html

@@ -37,6 +37,7 @@ import {
   ChannelPreviewInfoContext,
   MessageReactionsSelectorComponent,
   MessageTextContext,
+  MessageBlockedContext,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -98,6 +99,8 @@ export class AppComponent implements AfterViewInit {
   private emptyThreadMessageListTemplate!: TemplateRef<void>;
   @ViewChild('messageText')
   messageTextTemplate!: TemplateRef<MessageTextContext>;
+  @ViewChild('messageBlocked')
+  messageBlockedTemplate!: TemplateRef<MessageBlockedContext>;
 
   constructor(
     private chatService: ChatClientService,
@@ -195,6 +198,9 @@ export class AppComponent implements AfterViewInit {
     this.customTemplatesService.messageTextTemplate$.next(
       this.messageTextTemplate
     );
+    this.customTemplatesService.messageBlockedTemplate$.next(
+      this.messageBlockedTemplate
+    );
   }
 
   inviteClicked(channel: Channel) {

projects/customizations-example/src/app/app.component.ts

@@ -22,7 +22,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@ngx-translate/core": "^14.0.0 || ^15.0.0",
     "rxjs": "^7.4.0",
-    "stream-chat": "^8.44.0"
+    "stream-chat": "^8.60.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {

projects/stream-chat-angular/package.json

@@ -131,5 +131,7 @@ export const en = {
     'You currently have {{count}} attachments, the maximum is {{max}}':
       'You currently have {{count}} attachments, the maximum is {{max}}',
     'and others': 'and others',
+    'Message was blocked by moderation policies':
+      'Message was blocked by moderation policies',
   },
 };

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -23,6 +23,7 @@ import {
   MentionTemplateContext,
   MessageActionBoxItemContext,
   MessageActionsBoxContext,
+  MessageBlockedContext,
   MessageContext,
   MessageReactionsContext,
   MessageReactionsSelectorContext,
@@ -149,7 +150,7 @@ export class CustomTemplatesService<
     TemplateRef<MessageActionsBoxContext> | undefined
   >(undefined);
   /**
-   * The template used for displaying an item in the [message actions box](/chat/docs/sdk/angular/components/MessageActionsBoxComponent/)
+   * The template used for displaying an item in the [message actions box](/chat/docs/angular/components/MessageActionsBoxComponent/)
    *
    */
   messageActionsBoxItemTemplate$ = new BehaviorSubject<
@@ -366,5 +367,14 @@ export class CustomTemplatesService<
     TemplateRef<MessageTextContext> | undefined
   >(undefined);
 
+  /**
+   * The template used to display blocked messages that have been removed by moderation policies instead of the default [message blocked component](/chat/docs/sdk/angular/components/MessageBlockedComponent/)
+   *
+   * The template has no effect if you're using a custom `messageTemplate$`
+   */
+  messageBlockedTemplate$ = new BehaviorSubject<
+    TemplateRef<MessageBlockedContext> | undefined
+  >(undefined);
+
   constructor() {}
 }

projects/stream-chat-angular/src/lib/custom-templates.service.ts

@@ -0,0 +1,11 @@
+<div
+  class="str-chat__message str-chat__message-simple str-chat__message--blocked"
+  [class.str-chat__message--me]="isMyMessage"
+  [class.str-chat__message-simple--me]="isMyMessage"
+  [class.str-chat__message--other]="!isMyMessage"
+  [attr.data-testid]="'message-blocked-component'"
+>
+  <div class="str-chat__message--blocked-inner">
+    {{ "streamChat.Message was blocked by moderation policies" | translate }}
+  </div>
+</div>

projects/stream-chat-angular/src/lib/message-blocked/message-blocked.component.html

@@ -0,0 +1,78 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { MessageBlockedComponent } from './message-blocked.component';
+import { ChangeDetectionStrategy } from '@angular/core';
+
+describe('MessageBlockedComponent', () => {
+  let component: MessageBlockedComponent;
+  let fixture: ComponentFixture<MessageBlockedComponent>;
+  let nativeElement: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [MessageBlockedComponent],
+    })
+      .overrideComponent(MessageBlockedComponent, {
+        set: { changeDetection: ChangeDetectionStrategy.Default },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageBlockedComponent);
+    component = fixture.componentInstance;
+    nativeElement = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the blocked message text', () => {
+    const blockedMessageElement = nativeElement.querySelector(
+      '[data-testid="message-blocked-component"]'
+    );
+    expect(blockedMessageElement).not.toBeNull();
+    expect(blockedMessageElement?.textContent?.trim()).toContain(
+      'streamChat.Message was blocked by moderation policies'
+    );
+  });
+
+  it('should apply "me" classes when isMyMessage is true', () => {
+    component.isMyMessage = true;
+    fixture.detectChanges();
+
+    const messageElement = nativeElement.querySelector(
+      '[data-testid="message-blocked-component"]'
+    );
+    expect(
+      messageElement?.classList.contains('str-chat__message--me')
+    ).toBeTrue();
+    expect(
+      messageElement?.classList.contains('str-chat__message-simple--me')
+    ).toBeTrue();
+    expect(
+      messageElement?.classList.contains('str-chat__message--other')
+    ).toBeFalse();
+  });
+
+  it('should apply "other" class when isMyMessage is false', () => {
+    component.isMyMessage = false;
+    fixture.detectChanges();
+
+    const messageElement = nativeElement.querySelector(
+      '[data-testid="message-blocked-component"]'
+    );
+    expect(
+      messageElement?.classList.contains('str-chat__message--me')
+    ).toBeFalse();
+    expect(
+      messageElement?.classList.contains('str-chat__message-simple--me')
+    ).toBeFalse();
+    expect(
+      messageElement?.classList.contains('str-chat__message--other')
+    ).toBeTrue();
+  });
+});

projects/stream-chat-angular/src/lib/message-blocked/message-blocked.component.spec.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { StreamMessage } from '../types';
+
+/**
+ * The `MessageBlocked` component displays a message that has been blocked by moderation policies.
+ */
+@Component({
+  selector: 'stream-message-blocked',
+  templateUrl: './message-blocked.component.html',
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MessageBlockedComponent {
+  @Input() message: StreamMessage | undefined;
+  @Input() isMyMessage = false;
+}