From bd5720cf0f2a4a8c5ee21b55f470a161af0901a2 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Tue, 8 Oct 2024 16:08:36 -0500
Subject: [PATCH 1/2] feat: add new temlplate hooks inside the message
 component

---
 .../Angular/code-examples/emoji-picker.mdx    |  3 +-
 .../src/lib/custom-templates.service.ts       | 15 +++++++
 .../src/lib/message/message.component.html    | 41 +++++++++++++++----
 projects/stream-chat-angular/src/lib/types.ts |  6 +++
 4 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/docusaurus/docs/Angular/code-examples/emoji-picker.mdx b/docusaurus/docs/Angular/code-examples/emoji-picker.mdx
index 7aad2b2e..ca4eed0e 100644
--- a/docusaurus/docs/Angular/code-examples/emoji-picker.mdx
+++ b/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>
 ```
diff --git a/projects/stream-chat-angular/src/lib/custom-templates.service.ts b/projects/stream-chat-angular/src/lib/custom-templates.service.ts
index cc7f8ad8..92fc19e5 100644
--- a/projects/stream-chat-angular/src/lib/custom-templates.service.ts
+++ b/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() {}
 }
diff --git a/projects/stream-chat-angular/src/lib/message/message.component.html b/projects/stream-chat-angular/src/lib/message/message.component.html
index 43d1569a..da296210 100644
--- a/projects/stream-chat-angular/src/lib/message/message.component.html
+++ b/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>
 
diff --git a/projects/stream-chat-angular/src/lib/types.ts b/projects/stream-chat-angular/src/lib/types.ts
index d0d3bc33..935680f6 100644
--- a/projects/stream-chat-angular/src/lib/types.ts
+++ b/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>;
+};

From 46435a938adeafe44722b281a3da447f27cbd779 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Tue, 8 Oct 2024 16:12:59 -0500
Subject: [PATCH 2/2] fix: pasting text not working

---
 .../src/lib/message-input/message-input.component.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts
index 32527685..4be02cad 100644
--- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts
+++ b/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);
       }