feat: allow displaying custom metadata template inside message component

Author: szuperaz

docusaurus/docs/Angular/components/MessageListComponent.mdx

@@ -19,30 +19,7 @@ If you want to customize how messages are displayed in the list, head over to th
 
 ### Custom message list
 
-The message list contains a lot of low-level logic related to scrolling, we don't advise to create your own message list component, however it's possible: see [our customization guide](../concepts/customization.mdx) on how to provide your own message list component.
-
-:::note
-If you want to create your own message list, you can use the [`ChannelService`](../services/ChannelService.mdx) to receive the necessary messages and interact with the Stream API.
-
-Other building blocks, that you might find useful:
-
-### Message group styles
-
-Message group styles makes the message list more readable, by grouping messages from the same author on the same day together. The grouping assigns a CSS class to every message, if you want to take advantage of this functionality, you can use the [`getGroupStyles`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-list/group-styles.ts) utility function.
-
-**Example 1** - Messages with group styles
-
-<img src={MessagesWithGroupingsScreenhot} width="500" />
-
-**Example 2** - Messages without group styles
-
-<img src={MessagesWithoutGroupingsScreenhot} width="500" />
-
-:::
-
-**Example 2** - Using a custom message component
-
-If you only want to customize the messages (not the whole list), see the [message customization guide](./MessageComponent.mdx/#customization).
+The message list contains a lot of low-level logic related to scrolling, we don't advise to create your own message list component
 
 [//]: # "Start of generated content"
 [//]: # "End of generated content"

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.3.0",
+    "@stream-io/stream-chat-css": "4.5.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -10,7 +10,9 @@ import {
   ChannelPreviewContext,
   CommandAutocompleteListItemContext,
   CustomAttachmentUploadContext,
+  CustomMetadataContext,
   DateSeparatorContext,
+  DefaultStreamChatGenerics,
   DeliveredStatusContext,
   EmojiPickerContext,
   IconContext,
@@ -39,7 +41,9 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class CustomTemplatesService {
+export class CustomTemplatesService<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> {
   /**
    * The autocomplete list item template for mentioning users (used in the [`AutocompleteTextareaComponent`](../components/AutocompleteTextareaComponent.mdx))
    */
@@ -201,6 +205,8 @@ export class CustomTemplatesService {
   /**
    * The template used for displaying the delivered state of the message inside the [message component](../components/MessageComponent.mdx)
    *
+   * Displayed for the last message sent by the current user, if the message isn't yet read by anyone
+   *
    * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
    */
   deliveredStatusTemplate$ = new BehaviorSubject<
@@ -209,6 +215,8 @@ export class CustomTemplatesService {
   /**
    * The template used for displaying the sending state of the message inside the [message component](../components/MessageComponent.mdx)
    *
+   * Displayed for the last message sent by the current user, if the message is currently being sent
+   *
    * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
    */
   sendingStatusTemplate$ = new BehaviorSubject<
@@ -217,11 +225,21 @@ export class CustomTemplatesService {
   /**
    * The template used for displaying the sent state of the message inside the [message component](../components/MessageComponent.mdx)
    *
+   * Displayed for the last message sent by the current user, if the message is read at least by one user
+   *
    * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
    */
   readStatusTemplate$ = new BehaviorSubject<
     TemplateRef<ReadStatusContext> | undefined
   >(undefined);
+  /**
+   * Template to display custom metadata inside [message component](../components/MessageComponent.mdx)
+   *
+   * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
+   */
+  customMessageMetadataTemplate$ = new BehaviorSubject<
+    TemplateRef<CustomMetadataContext<T>> | undefined
+  >(undefined);
   /**
    * The template used to display additional information about a channel under the channel name inside the [channel header component](../components/ChannelHeaderComponent.mdx)
    *

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

@@ -440,6 +440,18 @@
         streamChat.See translation
       </button>
     </div>
+    <ng-container
+      *ngIf="customTemplatesService.customMessageMetadataTemplate$ | async"
+    >
+      <div class="str-chat__custom-message-metadata">
+        <ng-container
+          *ngTemplateOutlet="
+            (customTemplatesService.customMessageMetadataTemplate$ | async)!;
+            context: getMessageMetadataContext()
+          "
+        ></ng-container>
+      </div>
+    </ng-container>
     <div
       class="
         str-chat__message-data

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

@@ -27,6 +27,7 @@ import {
   ReadStatusContext,
   CustomMessageActionItem,
   SystemMessageContext,
+  CustomMetadataContext,
 } from '../types';
 import emojiRegex from 'emoji-regex';
 import { Subscription } from 'rxjs';
@@ -367,6 +368,12 @@ export class MessageComponent
     };
   }
 
+  getMessageMetadataContext(): CustomMetadataContext {
+    return {
+      message: this.message!,
+    };
+  }
+
   jumpToMessage(messageId: string, parentMessageId?: string) {
     void this.channelService.jumpToMessage(messageId, parentMessageId);
   }

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

@@ -339,6 +339,12 @@ export type SendingStatusContext = {
   message: StreamMessage;
 };
 
+export type CustomMetadataContext<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  message: StreamMessage<T>;
+};
+
 export type ReadStatusContext = {
   message: StreamMessage;
   readByText: string;