fix: Custom message edit input send working

Author: szuperaz

projects/customizations-example/src/app/app.component.html

@@ -77,6 +77,7 @@
   let-mode="mode"
   let-isMultipleFileUploadEnabled="isMultipleFileUploadEnabled"
   let-messageUpdateHandler="messageUpdateHandler"
+  let-sendMessage$="sendMessage$"
 >
   <stream-message-input
     style="--grey-whisper: rgba(165, 214, 167, 0.4); --primary-color: #8bc34a"
@@ -87,6 +88,7 @@
     [mode]="mode"
     [isMultipleFileUploadEnabled]="isMultipleFileUploadEnabled"
     (messageUpdate)="messageUpdateHandler ? messageUpdateHandler() : null"
+    [sendMessage$]="sendMessage$"
   ></stream-message-input>
 </ng-template>
 

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

@@ -58,10 +58,12 @@
       #defaultInput
       let-messageInput="message"
       let-messageUpdateHandler="messageUpdateHandler"
+      let-sendMessage$Input="sendMessage$"
     >
       <stream-message-input
         [message]="messageInput"
         (messageUpdate)="messageUpdateHandler()"
+        [sendMessage$]="sendMessage$Input"
       ></stream-message-input>
     </ng-template>
     <ng-container

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

@@ -39,7 +39,6 @@ describe('MessageActionsBoxComponent', () => {
   let queryDeleteAction: () => HTMLElement | null;
   let queryEditModal: () => ModalComponent;
   let queryModalCancelButton: () => HTMLElement | null;
-  let queryModalSendButton: () => HTMLElement | null;
   let queryMessageInputComponent: () => MessageInputComponent;
   let message: StreamMessage;
   let nativeElement: HTMLElement;
@@ -107,8 +106,6 @@ describe('MessageActionsBoxComponent', () => {
         .componentInstance as ModalComponent;
     queryModalCancelButton = () =>
       nativeElement.querySelector('[data-testid="cancel-button"]');
-    queryModalSendButton = () =>
-      nativeElement.querySelector('[data-testid="send-button"]');
     queryMessageInputComponent = () =>
       fixture.debugElement.query(By.directive(MessageInputComponent))
         .componentInstance as MessageInputComponent;
@@ -439,23 +436,17 @@ describe('MessageActionsBoxComponent', () => {
     fixture.detectChanges();
 
     expect(queryMessageInputComponent().message).toBe(component.message);
+    expect(queryMessageInputComponent().sendMessage$).toBe(
+      component.sendMessage$
+    );
   });
 
-  it('should call update message if "Send" button is clicked', () => {
-    component.enabledActions = ['update-any-message'];
-    component.isEditModalOpen = true;
-    component.ngOnChanges({
-      enabledActions: {} as SimpleChange,
-    });
-    fixture.detectChanges();
-    const messageInputComponent = queryMessageInputComponent();
-    spyOn(messageInputComponent, 'messageSent');
-    queryEditAction()?.click();
-    fixture.detectChanges();
-    queryModalSendButton()?.click();
-    fixture.detectChanges();
+  it('should trigger message if "Send" button is clicked', () => {
+    const spy = jasmine.createSpy();
+    component.sendMessage$.subscribe(spy);
+    component.sendClicked();
 
-    expect(messageInputComponent.messageSent).toHaveBeenCalledWith();
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should close modal with "Cancel" button', () => {

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

@@ -9,11 +9,10 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { MessageInputComponent } from '../message-input/message-input.component';
 import { NotificationService } from '../notification.service';
 import {
   MessageActionBoxItemContext,
@@ -63,12 +62,11 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
   modalTemplate: TemplateRef<ModalContext> | undefined;
   subscriptions: Subscription[] = [];
   visibleMessageActionItems: MessageActionItem[] = [];
+  sendMessage$: Observable<void>;
   private readonly messageActionItems: MessageActionItem[];
-  @ViewChild(MessageInputComponent) private messageInput:
-    | MessageInputComponent
-    | undefined;
   @ViewChild('modalContent', { static: true })
   private modalContent!: TemplateRef<void>;
+  private sendMessageSubject = new Subject<void>();
   constructor(
     private chatClientService: ChatClientService,
     private notificationService: NotificationService,
@@ -161,6 +159,7 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
           enabledActions.indexOf('delete-any-message') !== -1,
       },
     ];
+    this.sendMessage$ = this.sendMessageSubject.asObservable();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -191,7 +190,7 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
   }
 
   sendClicked() {
-    this.messageInput?.messageSent();
+    this.sendMessageSubject.next();
   }
 
   modalClosed = () => {
@@ -208,6 +207,7 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
       isMultipleFileUploadEnabled: undefined,
       mentionScope: undefined,
       mode: undefined,
+      sendMessage$: this.sendMessage$,
     };
   }
 

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

@@ -934,4 +934,13 @@ describe('MessageInputComponent', () => {
 
     expect(attachmentService.retryAttachmentUpload).toHaveBeenCalledWith(file);
   });
+
+  it('should trigger message send by #sendMessage$', () => {
+    const sendMessage$ = new Subject<void>();
+    component.sendMessage$ = sendMessage$;
+    component.ngOnChanges({ sendMessage$: {} as SimpleChange });
+    sendMessage$.next();
+
+    expect(component.messageSent).toHaveBeenCalledWith();
+  });
 });

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

@@ -75,6 +75,10 @@ export class MessageInputComponent
    * The message to edit
    */
   @Input() message: StreamMessage | undefined;
+  /**
+   * An observable that can be used to trigger message sending from the outside
+   */
+  @Input() sendMessage$: Observable<void> | undefined;
   /**
    * Emits when a message was successfuly sent or updated
    */
@@ -102,6 +106,7 @@ export class MessageInputComponent
   private isViewInited = false;
   private appSettings: AppSettings | undefined;
   private channel: Channel<DefaultStreamChatGenerics> | undefined;
+  private sendMessageSubcription: Subscription | undefined;
   constructor(
     private channelService: ChannelService,
     private notificationService: NotificationService,
@@ -251,9 +256,22 @@ export class MessageInputComponent
     if (changes.mode) {
       this.setCanSendMessages();
     }
+    if (changes.sendMessage$) {
+      if (this.sendMessageSubcription) {
+        this.sendMessageSubcription.unsubscribe();
+      }
+      if (this.sendMessage$) {
+        this.sendMessageSubcription = this.sendMessage$.subscribe(
+          () => void this.messageSent()
+        );
+      }
+    }
   }
 
   ngOnDestroy(): void {
+    if (this.sendMessageSubcription) {
+      this.sendMessageSubcription.unsubscribe();
+    }
     this.subscriptions.forEach((s) => s.unsubscribe());
   }
 

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

@@ -125,6 +125,7 @@ export type MessageInputContext = {
   isMultipleFileUploadEnabled: boolean | undefined;
   message: StreamMessage | undefined;
   messageUpdateHandler: Function | undefined;
+  sendMessage$: Observable<void>;
 };
 
 export type MentionTemplateContext = {