feat: export and import draft from/to message input

projects/stream-chat-angular/src/lib/channel.service.spec.ts

@@ -359,6 +359,9 @@ describe('ChannelService', () => {
     pinnedMessagesSpy.calls.reset();
     typingUsersSpy.calls.reset();
     typingUsersInThreadSpy.calls.reset();
+    const channelSwitchStateSpy = jasmine.createSpy();
+    service.channelSwitchState$.subscribe(channelSwitchStateSpy);
+    channelSwitchStateSpy.calls.reset();
     service.deselectActiveChannel();
 
     expect(messagesSpy).toHaveBeenCalledWith([]);
@@ -381,6 +384,10 @@ describe('ChannelService', () => {
 
     expect(messagesSpy).not.toHaveBeenCalled();
     expect(service.isMessageLoadingInProgress).toBeFalse();
+
+    expect(channelSwitchStateSpy.calls.count()).toBe(2);
+    expect(channelSwitchStateSpy.calls.first().args[0]).toBe('start');
+    expect(channelSwitchStateSpy.calls.mostRecent().args[0]).toBe('end');
   });
 
   it('should tell if user #hasMoreChannels$', async () => {
@@ -457,6 +464,9 @@ describe('ChannelService', () => {
     spyOn(newActiveChannel, 'markRead');
     const pinnedMessages = generateMockMessages();
     newActiveChannel.state.pinnedMessages = pinnedMessages;
+    const channelSwitchStateSpy = jasmine.createSpy();
+    service.channelSwitchState$.subscribe(channelSwitchStateSpy);
+    channelSwitchStateSpy.calls.reset();
     service.setAsActiveChannel(newActiveChannel);
     result = spy.calls.mostRecent().args[0] as Channel;
 
@@ -467,6 +477,9 @@ describe('ChannelService', () => {
     expect(pinnedMessagesSpy).toHaveBeenCalledWith(pinnedMessages);
     expect(typingUsersSpy).toHaveBeenCalledWith([]);
     expect(typingUsersInThreadSpy).toHaveBeenCalledWith([]);
+    expect(channelSwitchStateSpy.calls.count()).toBe(2);
+    expect(channelSwitchStateSpy.calls.first().args[0]).toBe('start');
+    expect(channelSwitchStateSpy.calls.mostRecent().args[0]).toBe('end');
   });
 
   it('should emit #activeChannelMessages$', async () => {

projects/stream-chat-angular/src/lib/channel.service.ts

@@ -307,6 +307,12 @@ export class ChannelService {
   beforeUpdateMessage?: (
     message: StreamMessage
   ) => StreamMessage | Promise<StreamMessage>;
+  /**
+   * Since switching channels changes the state of multiple obserables, this observable can be used to check if all observables are updated.
+   * - `end` means all observables are in stable state
+   * - `start` means all observables are in unstable state
+   */
+  channelSwitchState$: Observable<'start' | 'end'>;
   /**
    * @internal
    */
@@ -357,6 +363,9 @@ export class ChannelService {
   private channelQueryStateSubject = new BehaviorSubject<
     ChannelQueryState | undefined
   >(undefined);
+  private channelSwitchStateSubject = new BehaviorSubject<'start' | 'end'>(
+    'end'
+  );
   private channelQuery?:
     | ChannelQuery
     | ((queryType: ChannelQueryType) => Promise<ChannelQueryResult>);
@@ -511,6 +520,9 @@ export class ChannelService {
     this.channelQueryState$ = this.channelQueryStateSubject
       .asObservable()
       .pipe(shareReplay(1));
+    this.channelSwitchState$ = this.channelSwitchStateSubject
+      .asObservable()
+      .pipe(shareReplay(1));
   }
 
   /**
@@ -557,6 +569,7 @@ export class ChannelService {
    * @param channel
    */
   setAsActiveChannel(channel: Channel) {
+    this.channelSwitchStateSubject.next('start');
     const prevActiveChannel = this.activeChannelSubject.getValue();
     if (prevActiveChannel?.cid === channel.cid) {
       return;
@@ -585,12 +598,14 @@ export class ChannelService {
       );
     }
     this.setChannelState(channel);
+    this.channelSwitchStateSubject.next('end');
   }
 
   /**
    * Deselects the currently active (if any) channel
    */
   deselectActiveChannel() {
+    this.channelSwitchStateSubject.next('start');
     const activeChannel = this.activeChannelSubject.getValue();
     if (!activeChannel) {
       return;
@@ -611,6 +626,7 @@ export class ChannelService {
     this.activeChannelUnreadCount = undefined;
     this.areReadEventsPaused = false;
     this.isMessageLoadingInProgress = false;
+    this.channelSwitchStateSubject.next('end');
   }
 
   /**
@@ -1138,7 +1154,10 @@ export class ChannelService {
    * Selects or deselects the current message to quote reply to
    * @param message The message to select, if called with `undefined`, it deselects the message
    */
-  selectMessageToQuote(message: StreamMessage | undefined) {
+  selectMessageToQuote(message: StreamMessage | undefined | MessageResponse) {
+    if (message && !this.isStreamMessage(message)) {
+      message = this.transformToStreamMessage(message);
+    }
     this.messageToQuoteSubject.next(message);
   }
 

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">