feat: empty message list placeholders

Author: szuperaz

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

@@ -292,6 +292,18 @@ export class CustomTemplatesService {
   newMessagesIndicatorTemplate$ = new BehaviorSubject<
     TemplateRef<void> | undefined
   >(undefined);
+  /**
+   * The template to show if the main message list is empty
+   */
+  emptyMainMessageListPlaceholder$ = new BehaviorSubject<
+    TemplateRef<void> | undefined
+  >(undefined);
+  /**
+   * The template to show if the thread message list is empty
+   */
+  emptyThreadMessageListPlaceholder$ = new BehaviorSubject<
+    TemplateRef<void> | undefined
+  >(undefined);
 
   constructor() {}
 }

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

@@ -4,6 +4,9 @@
   class="str-chat__list"
   style="overscroll-behavior: none"
 >
+  <ng-container *ngIf="mode === 'main' && isEmpty && emptyListTemplate">
+    <ng-container *ngTemplateOutlet="emptyListTemplate"></ng-container>
+  </ng-container>
   <div class="str-chat__reverse-infinite-scroll str-chat__message-list-scroll">
     <ul
       class="str-chat__ul"
@@ -28,6 +31,9 @@
           replies' | translate:replyCountParam)}}
         </div>
       </li>
+      <ng-container *ngIf="mode === 'thread' && isEmpty && emptyListTemplate">
+        <ng-container *ngTemplateOutlet="emptyListTemplate"></ng-container>
+      </ng-container>
       <stream-loading-indicator
         data-testid="top-loading-indicator"
         *ngIf="

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

@@ -1,6 +1,7 @@
 import {
   AfterViewChecked,
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   HostBinding,
@@ -87,10 +88,11 @@ export class MessageListComponent
   messageTemplate: TemplateRef<MessageContext> | undefined;
   customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
   customnewMessagesIndicatorTemplate: TemplateRef<void> | undefined;
+  emptyMainMessageListTemplate: TemplateRef<void> | null = null;
+  emptyThreadMessageListTemplate: TemplateRef<void> | null = null;
   messages$!: Observable<StreamMessage[]>;
   enabledMessageActions: string[] = [];
-  @HostBinding('class') private class =
-    'str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner';
+  isEmpty = true;
   unreadMessageCount = 0;
   isUserScrolled: boolean | undefined;
   groupStyles: GroupStyle[] = [];
@@ -125,12 +127,20 @@ export class MessageListComponent
   private channelId?: string;
   private parsedDates = new Map<Date, string>();
 
+  @HostBinding('class')
+  private get class() {
+    return `str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner ${
+      this.isEmpty ? 'str-chat-angular__message-list-host--empty' : ''
+    }`;
+  }
+
   constructor(
     private channelService: ChannelService,
     private chatClientService: ChatClientService,
     private customTemplatesService: CustomTemplatesService,
     private dateParser: DateParserService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef
   ) {
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
@@ -269,6 +279,28 @@ export class MessageListComponent
           }
         })
     );
+    this.subscriptions.push(
+      this.customTemplatesService.emptyMainMessageListPlaceholder$.subscribe(
+        (template) => {
+          const isChanged = this.emptyMainMessageListTemplate !== template;
+          this.emptyMainMessageListTemplate = template || null;
+          if (isChanged) {
+            this.cdRef.detectChanges();
+          }
+        }
+      )
+    );
+    this.subscriptions.push(
+      this.customTemplatesService.emptyThreadMessageListPlaceholder$.subscribe(
+        (template) => {
+          const isChanged = this.emptyThreadMessageListTemplate !== template;
+          this.emptyThreadMessageListTemplate = template || null;
+          if (isChanged) {
+            this.cdRef.detectChanges();
+          }
+        }
+      )
+    );
   }
 
   ngAfterViewChecked() {
@@ -451,6 +483,12 @@ export class MessageListComponent
     return { replyCount: this.parentMessage?.reply_count };
   }
 
+  get emptyListTemplate() {
+    return this.mode === 'main'
+      ? this.emptyMainMessageListTemplate
+      : this.emptyThreadMessageListTemplate;
+  }
+
   private preserveScrollbarPosition() {
     this.scrollContainer.nativeElement.scrollTop =
       (this.prevScrollTop || 0) +
@@ -508,6 +546,10 @@ export class MessageListComponent
           this.resetScrollState();
           return;
         }
+        if (this.isEmpty) {
+          // cdRef.detectChanges() isn't enough here, test will fail
+          setTimeout(() => (this.isEmpty = false), 0);
+        }
         this.chatClientService.chatClient?.logger?.(
           'info',
           `Received one or more messages`,
@@ -574,6 +616,7 @@ export class MessageListComponent
   }
 
   private resetScrollState() {
+    this.isEmpty = true;
     this.latestMessage = undefined;
     this.hasNewMessages = true;
     this.isUserScrolled = false;