Merge pull request #396 from GetStream/custom-read-state

feat: Custom message state templates

Author: szuperaz

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

@@ -7,6 +7,7 @@ import {
   ChannelActionsContext,
   ChannelPreviewContext,
   CommandAutocompleteListItemContext,
+  DeliveredStatusContext,
   EmojiPickerContext,
   IconContext,
   LoadingIndicatorContext,
@@ -19,6 +20,8 @@ import {
   MessageReactionsContext,
   ModalContext,
   NotificationContext,
+  ReadStatusContext,
+  SendingStatusContext,
   ThreadHeaderContext,
   TypingIndicatorContext,
 } from './types';
@@ -190,6 +193,24 @@ export class CustomTemplatesService {
   threadHeaderTemplate$ = new BehaviorSubject<
     TemplateRef<ThreadHeaderContext> | undefined
   >(undefined);
+  /**
+   * The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
+   */
+  deliveredStatusTemplate$ = new BehaviorSubject<
+    TemplateRef<DeliveredStatusContext> | undefined
+  >(undefined);
+  /**
+   * The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
+   */
+  sendingStatusTemplate$ = new BehaviorSubject<
+    TemplateRef<SendingStatusContext> | undefined
+  >(undefined);
+  /**
+   * The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
+   */
+  readStatusTemplate$ = new BehaviorSubject<
+    TemplateRef<ReadStatusContext> | undefined
+  >(undefined);
 
   constructor() {}
 }

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

@@ -471,6 +471,14 @@
       </ng-container>
     </ng-template>
     <ng-template #deliveredStatus>
+      <ng-container
+        *ngTemplateOutlet="
+          customDeliveredStatusTemplate || defaultDeliveredStatus;
+          context: getDeliveredStatusContext()
+        "
+      ></ng-container>
+    </ng-template>
+    <ng-template #defaultDeliveredStatus>
       <span
         *ngIf="mode === 'main'"
         class="
@@ -499,6 +507,14 @@
       </span>
     </ng-template>
     <ng-template #sendingStatus>
+      <ng-container
+        *ngTemplateOutlet="
+          customSendingStatusTemplate || defaultSendingStatus;
+          context: getSendingStatusContext()
+        "
+      ></ng-container>
+    </ng-template>
+    <ng-template #defaultSendingStatus>
       <span
         class="
           str-chat__message-simple-status
@@ -525,6 +541,14 @@
       </span>
     </ng-template>
     <ng-template #readStatus>
+      <ng-container
+        *ngTemplateOutlet="
+          customReadStatusTemplate || defaultReadStatus;
+          context: getReadStatusContext()
+        "
+      ></ng-container>
+    </ng-template>
+    <ng-template #defaultReadStatus>
       <span
         class="
           str-chat__message-simple-status

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

@@ -20,6 +20,9 @@ import {
   MessageReactionsContext,
   DefaultStreamChatGenerics,
   StreamMessage,
+  DeliveredStatusContext,
+  SendingStatusContext,
+  ReadStatusContext,
 } from '../types';
 import { parseDate } from './parse-date';
 import emojiRegex from 'emoji-regex';
@@ -73,6 +76,11 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   visibleMessageActionsCount = 0;
   messageTextParts: MessagePart[] = [];
   mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
+  customDeliveredStatusTemplate:
+    | TemplateRef<DeliveredStatusContext>
+    | undefined;
+  customSendingStatusTemplate: TemplateRef<SendingStatusContext> | undefined;
+  customReadStatusTemplate: TemplateRef<ReadStatusContext> | undefined;
   attachmentListTemplate: TemplateRef<AttachmentListContext> | undefined;
   messageActionsBoxTemplate: TemplateRef<MessageActionsBoxContext> | undefined;
   messageReactionsTemplate: TemplateRef<MessageReactionsContext> | undefined;
@@ -124,6 +132,21 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
         (template) => (this.messageReactionsTemplate = template)
       )
     );
+    this.subscriptions.push(
+      this.customTemplatesService.deliveredStatusTemplate$.subscribe(
+        (template) => (this.customDeliveredStatusTemplate = template)
+      )
+    );
+    this.subscriptions.push(
+      this.customTemplatesService.sendingStatusTemplate$.subscribe(
+        (template) => (this.customSendingStatusTemplate = template)
+      )
+    );
+    this.subscriptions.push(
+      this.customTemplatesService.readStatusTemplate$.subscribe(
+        (template) => (this.customReadStatusTemplate = template)
+      )
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -291,6 +314,25 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
     };
   }
 
+  getDeliveredStatusContext(): DeliveredStatusContext {
+    return {
+      message: this.message!,
+    };
+  }
+
+  getSendingStatusContext(): SendingStatusContext {
+    return {
+      message: this.message!,
+    };
+  }
+
+  getReadStatusContext(): ReadStatusContext {
+    return {
+      message: this.message!,
+      readByText: this.readByText,
+    };
+  }
+
   jumpToMessage(messageId: string, parentMessageId?: string) {
     void this.channelService.jumpToMessage(messageId, parentMessageId);
   }

projects/stream-chat-angular/src/lib/types.ts

@@ -275,3 +275,16 @@ export type ImageAttachmentConfiguration = AttachmentConfigration & {
 export type VideoAttachmentConfiguration = ImageAttachmentConfiguration & {
   thumbUrl?: string;
 };
+
+export type DeliveredStatusContext = {
+  message: StreamMessage;
+};
+
+export type SendingStatusContext = {
+  message: StreamMessage;
+};
+
+export type ReadStatusContext = {
+  message: StreamMessage;
+  readByText: string;
+};