feat: Add message options trigger input to message list

Author: szuperaz

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

@@ -5,7 +5,12 @@
   (scroll)="scrolled()"
 >
   <div class="str-chat__reverse-infinite-scroll str-chat__message-list-scroll">
-    <ul class="str-chat__ul">
+    <ul
+      class="str-chat__ul"
+      [class.str-chat__message-options-in-bubble]="
+        messageOptionsTrigger === 'message-bubble'
+      "
+    >
       <li
         #parentMessageElement
         *ngIf="mode === 'thread'"

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

@@ -910,4 +910,21 @@ describe('MessageListComponent', () => {
     expect(queryLoadingIndicator('top')).not.toBeNull();
     expect(queryLoadingIndicator('bottom')).toBeNull();
   });
+
+  it('should add/rome CSS class based on #messageOptionsTrigger input', () => {
+    expect(
+      fixture.nativeElement.querySelector(
+        '.str-chat__message-options-in-bubble'
+      )
+    ).toBeNull();
+
+    component.messageOptionsTrigger = 'message-bubble';
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector(
+        '.str-chat__message-options-in-bubble'
+      )
+    ).not.toBeNull();
+  });
 });

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

@@ -46,6 +46,11 @@ export class MessageListComponent
    * The direction of the messages in the list, `bottom-to-top` means newest message is at the bottom of the message list and users scroll upwards to load older messages
    */
   @Input() direction: 'bottom-to-top' | 'top-to-bottom' = 'bottom-to-top';
+  /**
+   * Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (`message-row` option), or you can set `message-bubble`, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear.
+   */
+  @Input() messageOptionsTrigger: 'message-row' | 'message-bubble' =
+    'message-row';
   typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
   messageTemplate: TemplateRef<MessageContext> | undefined;
   messages$!: Observable<StreamMessage[]>;