Merge branch 'master' into 6.x.x-rc

Author: szuperaz

package-lock.json

@@ -116,7 +116,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",

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

@@ -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,
@@ -364,5 +365,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,22 @@
+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 {
+  /**
+   * The message that has been blocked.
+   */
+  @Input() message: StreamMessage | undefined;
+  /**
+   * Whether the message is the current user's own message.
+   */
+  @Input() isMyMessage = false;
+}