Merge pull request #652 from GetStream/new-message-component-hooks

New message component hooks

Author: szuperaz

docusaurus/docs/Angular/code-examples/emoji-picker.mdx

@@ -150,7 +150,7 @@ The `emojiSelect` event is fired when a user selects an emoji, we emit the selec
     title="Pick your emoji…"
     emoji="point_up"
     (emojiSelect)="emojiSelected($event)"
-    [darkMode]="(theme$ | async) === 'dark'"
+    [isNative]="true"
   ></emoji-mart>
 </div>
 ```
@@ -304,6 +304,7 @@ And set the `darkMode` input on the `emoji-mart` component:
   title="Pick your emoji…"
   emoji="point_up"
   (emojiSelect)="emojiSelected($event)"
+  [isNative]="true"
   [darkMode]="(theme$ | async) === 'dark'"
 ></emoji-mart>
 ```

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

@@ -32,6 +32,7 @@ import {
   SendingStatusContext,
   SystemMessageContext,
   ThreadHeaderContext,
+  ThreadReplyButtonContext,
   TypingIndicatorContext,
   UnreadMessagesIndicatorContext,
   UnreadMessagesNotificationContext,
@@ -343,6 +344,20 @@ export class CustomTemplatesService<
   customAttachmentListTemplate$ = new BehaviorSubject<
     TemplateRef<CustomAttachmentListContext> | undefined
   >(undefined);
+  /**
+   * The template used to display the number of thread replies inside the [message component](../../components/MessageComponent.mdx)
+   */
+  threadLinkButton$ = new BehaviorSubject<
+    TemplateRef<ThreadReplyButtonContext> | undefined
+  >(undefined);
+  /**
+   * Template to display custom metadata inside the message bubble of the [message component](../components/MessageComponent.mdx)
+   *
+   * To properly position your template you should override the `grid-template-areas` of the `.str-chat__message-inner` selector
+   */
+  customMessageMetadataInsideBubbleTemplate$ = new BehaviorSubject<
+    TemplateRef<CustomMetadataContext> | undefined
+  >(undefined);
 
   constructor() {}
 }

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

@@ -452,7 +452,7 @@ export class MessageInputComponent
     if (this.configService.customPasteEventHandler) {
       this.configService.customPasteEventHandler(event, this);
     } else {
-      if (event.clipboardData?.files) {
+      if (event.clipboardData?.files && event.clipboardData?.files.length > 0) {
         event.preventDefault();
         void this.filesSelected(event.clipboardData?.files);
       }

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

@@ -69,6 +69,20 @@
             </div>
           </div>
         </div>
+        <ng-container
+          *ngIf="
+            customTemplatesService.customMessageMetadataInsideBubbleTemplate$
+              | async
+          "
+        >
+          <ng-template
+            *ngTemplateOutlet="
+              (customTemplatesService.customMessageMetadataInsideBubbleTemplate$
+                | async)!;
+              context: { message: message }
+            "
+          ></ng-template>
+        </ng-container>
         <div class="str-chat__message-reactions-host">
           <ng-template
             #defaultMessageReactions
@@ -566,15 +580,24 @@
   <div
     class="str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper"
   >
-    <button
-      *ngIf="shouldDisplayThreadLink"
-      class="str-chat__message-replies-count-button"
-      data-testid="reply-count-button"
-      (click)="setAsActiveParentMessage()"
-    >
-      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}
-      replies' | translate:replyCountParam)}}
-    </button>
+    <ng-container *ngIf="shouldDisplayThreadLink">
+      <ng-template
+        *ngTemplateOutlet="
+          (customTemplatesService.threadLinkButton$ | async) || defaultButton;
+          context: { message: message }
+        "
+      ></ng-template>
+    </ng-container>
+    <ng-template #defaultButton let-message="message">
+      <button
+        class="str-chat__message-replies-count-button"
+        data-testid="reply-count-button"
+        (click)="setAsActiveParentMessage()"
+      >
+        {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}
+        replies' | translate:replyCountParam)}}
+      </button>
+    </ng-template>
   </div>
 </ng-template>
 

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

@@ -494,3 +494,9 @@ export type CustomAttachmentPreviewListContext<
 > = {
   attachmentService: AttachmentService<T>;
 };
+
+export type ThreadReplyButtonContext<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+  message: StreamMessage<T>;
+};