Add messageDraftChange output to message input

szuperaz · szuperaz · commit ff0de6dd3d96 · 2025-10-18T12:38:32.000+02:00
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.html b/projects/stream-chat-angular/src/lib/message-input/message-input.component.html
@@ -171,9 +171,9 @@
             [autoFocus]="autoFocus"
             [placeholder]="textareaPlaceholder"
             [(value)]="textareaValue"
-            (valueChange)="typingStart$.next()"
+            (valueChange)="typingStart$.next(); updateMessageDraft()"
             (send)="messageSent()"
-            (userMentions)="mentionedUsers = $event"
+            (userMentions)="userMentionsChanged($event)"
             (pasteFromClipboard)="itemsPasted($event)"
           ></ng-container>
           <ng-container *ngIf="emojiPickerTemplate" data-testid="emoji-picker">
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts
@@ -36,7 +36,7 @@ import { CustomTemplatesService } from '../custom-templates.service';
 import { MessageInputConfigService } from './message-input-config.service';
 import { MessageTextComponent } from '../message-text/message-text.component';
 
-describe('MessageInputComponent', () => {
+fdescribe('MessageInputComponent', () => {
   let nativeElement: HTMLElement;
   let component: MessageInputComponent;
   let fixture: ComponentFixture<MessageInputComponent>;
@@ -1144,4 +1144,200 @@ describe('MessageInputComponent', () => {
     expect(queryFileInput()?.disabled).toBe(true);
     expect(queryVoiceRecorderButton()?.disabled).toBe(true);
   });
+
+  describe('message draft output', () => {
+    it('should emit undefined when all message fields are cleared', () => {
+      // Parent id doesn't count here
+      component.mode = 'thread';
+      mockActiveParentMessageId$.next('parentMessageId');
+      attachmentService.mapToAttachments.and.returnValue([]);
+
+      attachmentService.resetAttachmentUploads();
+      component.quotedMessage = undefined;
+      component.textareaValue = '';
+      component['pollId'] = undefined;
+      component.mentionedUsers = [];
+
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      component.updateMessageDraft();
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(undefined);
+    });
+
+    it('should emit message draft when textarea value changes', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      queryTextarea()?.valueChange.next('Hello, world!');
+
+      expect(messageDraftSpy).toHaveBeenCalledWith({
+        text: 'Hello, world!',
+        attachments: undefined,
+        mentioned_users: [],
+        parent_id: undefined,
+        quoted_message_id: undefined,
+        poll_id: undefined,
+      });
+    });
+
+    it('should emit message draft when mentioned users change', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      queryTextarea()?.userMentions.next([{ id: 'user1', name: 'User 1' }]);
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          mentioned_users: ['user1'],
+        })
+      );
+    });
+
+    it('should emit message draft when poll is added', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      component.addPoll('poll1');
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          poll_id: 'poll1',
+        })
+      );
+    });
+
+    it('should emit message draft when attachment is added', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      attachmentService.mapToAttachments.and.returnValue([{ type: 'file' }]);
+      attachmentService.attachmentUploads$.next([
+        {
+          type: 'file',
+          state: 'success',
+          url: 'url',
+          file: { name: 'file.pdf', type: 'application/pdf' } as File,
+        } as AttachmentUpload,
+      ]);
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          attachments: [{ type: 'file' }],
+        })
+      );
+    });
+
+    it('should not emit if attachment upload is in progress', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      attachmentService.mapToAttachments.and.returnValue([]);
+      attachmentService.attachmentUploads$.next([
+        {
+          type: 'file',
+          state: 'uploading',
+          url: 'url',
+          file: { name: 'file.pdf', type: 'application/pdf' } as File,
+        } as AttachmentUpload,
+      ]);
+
+      expect(messageDraftSpy).not.toHaveBeenCalled();
+    });
+
+    it('should emit message draft when custom attachment is added', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      const customAttachment = {
+        type: 'image',
+        image_url: 'url',
+      };
+      attachmentService.mapToAttachments.and.returnValue([customAttachment]);
+      attachmentService.customAttachments$.next([customAttachment]);
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          attachments: [customAttachment],
+        })
+      );
+    });
+
+    it('should emit undefined if message is sent', async () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      queryTextarea()?.valueChange.next('Hello');
+      messageDraftSpy.calls.reset();
+      await component.messageSent();
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).toHaveBeenCalledOnceWith(undefined);
+    });
+
+    it('should not emit undefined even if message request fails (users can retry from preview added to message list)', async () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      queryTextarea()?.valueChange.next('Hello');
+      messageDraftSpy.calls.reset();
+      sendMessageSpy.and.throwError('error');
+      await component.messageSent();
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).toHaveBeenCalledOnceWith(undefined);
+    });
+
+    it('should emit if quoted message changes', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      const quotedMessage = mockMessage();
+      mockMessageToQuote$.next(quotedMessage);
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).toHaveBeenCalledWith(
+        jasmine.objectContaining({
+          quoted_message_id: quotedMessage.id,
+        })
+      );
+    });
+
+    it(`shouldn't emit if in edit mode`, () => {
+      component.message = mockMessage();
+      fixture.detectChanges();
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      queryTextarea()?.valueChange.next('Hello');
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not emit if active channel changes', () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      queryTextarea()?.valueChange.next('Hello');
+      messageDraftSpy.calls.reset();
+      mockActiveChannel$.next({
+        ...mockActiveChannel$.getValue(),
+        id: 'new-channel',
+      } as any as Channel);
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).not.toHaveBeenCalled();
+    });
+
+    it(`shouldn't emit if parent message id changes (it's basically same as active channel changes)`, () => {
+      const messageDraftSpy = jasmine.createSpy();
+      component.messageDraftChange.subscribe(messageDraftSpy);
+      messageDraftSpy.calls.reset();
+      mockActiveParentMessageId$.next('parentMessageId');
+      fixture.detectChanges();
+
+      expect(messageDraftSpy).not.toHaveBeenCalled();
+    });
+  });
 });
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
@@ -21,8 +21,13 @@ import {
   ViewChild,
 } from '@angular/core';
 import { combineLatest, Observable, Subject, Subscription, timer } from 'rxjs';
-import { first, map, take, tap } from 'rxjs/operators';
-import { Attachment, Channel, UserResponse } from 'stream-chat';
+import { distinctUntilChanged, first, map, take, tap } from 'rxjs/operators';
+import {
+  Attachment,
+  Channel,
+  DraftMessagePayload,
+  UserResponse,
+} from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
 import { textareaInjectionToken } from '../injection-tokens';
@@ -118,6 +123,18 @@ export class MessageInputComponent
   @Output() readonly messageUpdate = new EventEmitter<{
     message: StreamMessage;
   }>();
+  /**
+   * Emits the messsage draft whenever the composed message changes.
+   * - If the user clears the message input, or sends the message, undefined is emitted.
+   * - If active channel changes, nothing is emitted.
+   *
+   * To save and fetch message drafts, you can use the [Stream message drafts API](https://getstream.io/chat/docs/javascript/drafts/).
+   *
+   * Message draft only works for new messages, nothing is emitted when input is in edit mode.
+   */
+  @Output() readonly messageDraftChange = new EventEmitter<
+    DraftMessagePayload | undefined
+  >();
   @ContentChild(TemplateRef) voiceRecorderRef:
     | TemplateRef<{ service: VoiceRecorderService }>
     | undefined;
@@ -159,6 +176,8 @@ export class MessageInputComponent
   private readonly slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
   private messageToEdit?: StreamMessage;
   private pollId: string | undefined;
+  private isChannelChangeResetInProgress = false;
+  private isSendingMessage = false;
 
   constructor(
     private channelService: ChannelService,
@@ -186,13 +205,35 @@ export class MessageInputComponent
         }
       )
     );
+    this.subscriptions.push(
+      this.attachmentService.attachmentUploads$
+        .pipe(
+          distinctUntilChanged(
+            (prev, current) =>
+              prev.filter((v) => v.state === 'success').length ===
+              current.filter((v) => v.state === 'success').length
+          )
+        )
+        .subscribe(() => {
+          this.updateMessageDraft();
+        })
+    );
+    this.subscriptions.push(
+      this.attachmentService.customAttachments$.subscribe(() => {
+        this.updateMessageDraft();
+      })
+    );
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
         if (channel && this.channel && channel.id !== this.channel.id) {
+          this.isChannelChangeResetInProgress = true;
           this.textareaValue = '';
           this.attachmentService.resetAttachmentUploads();
           this.pollId = undefined;
           this.voiceRecorderService.isRecorderVisible$.next(false);
+          // Preemptively deselect quoted message, to avoid unwanted draft emission
+          this.channelService.selectMessageToQuote(undefined);
+          this.isChannelChangeResetInProgress = false;
         }
         const capabilities = channel?.data?.own_capabilities as string[];
         if (capabilities) {
@@ -209,11 +250,13 @@ export class MessageInputComponent
       this.channelService.messageToQuote$.subscribe((m) => {
         const isThreadReply = m && m.parent_id;
         if (
-          (this.mode === 'thread' && isThreadReply) ||
-          (this.mode === 'thread' && this.quotedMessage && !m) ||
-          (this.mode === 'main' && !isThreadReply)
+          ((this.mode === 'thread' && isThreadReply) ||
+            (this.mode === 'thread' && this.quotedMessage && !m) ||
+            (this.mode === 'main' && !isThreadReply)) &&
+          (!!m || !!this.quotedMessage)
         ) {
           this.quotedMessage = m;
+          this.updateMessageDraft();
         }
       })
     );
@@ -366,6 +409,7 @@ export class MessageInputComponent
     if (this.isCooldownInProgress) {
       return;
     }
+    this.isSendingMessage = true;
     let attachmentUploadInProgressCounter!: number;
     this.attachmentService.attachmentUploadInProgressCounter$
       .pipe(first())
@@ -428,11 +472,15 @@ export class MessageInputComponent
         this.attachmentService.resetAttachmentUploads();
       }
     } catch (error) {
+      this.isSendingMessage = false;
       if (this.isUpdate) {
         this.notificationService.addTemporaryNotification(
           'streamChat.Edit message request failed'
         );
       }
+    } finally {
+      this.isSendingMessage = false;
+      this.updateMessageDraft();
     }
     void this.channelService.typingStopped(this.parentMessageId);
     if (this.quotedMessage) {
@@ -534,9 +582,50 @@ export class MessageInputComponent
   addPoll = (pollId: string) => {
     this.isComposerOpen = false;
     this.pollId = pollId;
+    this.updateMessageDraft();
     void this.messageSent();
   };
 
+  userMentionsChanged(userMentions: UserResponse[]) {
+    if (
+      userMentions.map((u) => u.id).join(',') !==
+      this.mentionedUsers.map((u) => u.id).join(',')
+    ) {
+      this.mentionedUsers = userMentions;
+      this.updateMessageDraft();
+    }
+  }
+
+  updateMessageDraft() {
+    if (
+      this.isSendingMessage ||
+      this.isChannelChangeResetInProgress ||
+      this.isUpdate
+    ) {
+      return;
+    }
+    const attachments = this.attachmentService.mapToAttachments();
+
+    if (
+      !this.textareaValue &&
+      !this.mentionedUsers.length &&
+      !attachments?.length &&
+      !this.pollId &&
+      !this.quotedMessage?.id
+    ) {
+      this.messageDraftChange.emit(undefined);
+    } else {
+      this.messageDraftChange.emit({
+        text: this.textareaValue,
+        attachments: this.attachmentService.mapToAttachments(),
+        mentioned_users: this.mentionedUsers.map((user) => user.id),
+        poll_id: this.pollId,
+        parent_id: this.parentMessageId,
+        quoted_message_id: this.quotedMessage?.id,
+      });
+    }
+  }
+
   async voiceRecordingReady(recording: AudioRecording) {
     try {
       await this.attachmentService.uploadVoiceRecording(recording);
