Merge pull request #186 from GetStream/qoute-message

feat: Quote reply to messages #174

Author: szuperaz

docusaurus/docs/Angular/components/message-actions.mdx

@@ -34,10 +34,6 @@ export class CustomMessageComponent {
 }
 ```
 
-:::important
-The `MessageActionBox` component doesn't check if the user has the necessary capabilities to perform a given aciton, it is done by the [`MessageList`](./message-list.mdx/#enabledmessageactions) component.
-:::
-
 ## Inputs
 
 ### <div class="label required basic">Required</div> message

docusaurus/docs/Angular/concepts/message-interactions.mdx

@@ -16,3 +16,4 @@ Users can interact with the messages in the message list. The following table pr
 | Send reaction to a message                                                                           | send-reaction                            | [`MessageReactions`](../components/message-reactions.mdx) |
 | Receive read events                                                                                  | read-events                              | [`Message`](../components/message.mdx)                    |
 | Reply to a message in a thread                                                                       | send-reply                               | [`Message`](../components/message.mdx)                    |
+| Quote reply to a message                                                                             | quote-message                            | [`MessageActionsBox`](../components/message-actions.mdx)  |

docusaurus/docs/Angular/services/channel.mdx

@@ -54,6 +54,10 @@ Sets the given `channel` as active.
 
 Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
 
+## selectMessageToQuote
+
+Sets the given `message` as a message to be quoted. If `undefined` is provided, it will deleselect the current message.
+
 ## hasMoreChannels$
 
 Emits `false` if there are no more pages of channels that can be loaded.
@@ -74,6 +78,10 @@ Emits the id of the currently selected parent message. If no message is selected
 
 Emits the currently selected parent message. If no message is selected, it emits undefined.
 
+## messageToQuote$
+
+Emits the currently selected message to be quoted. If no message is selected, it emits undefined.
+
 ## activeThreadMessages$
 
 Emits the list of currently loaded thread replies belonging to the selected parent message. If there is no currently active thread it emits an empty array.

package-lock.json

@@ -78,7 +78,7 @@
     "@angular/router": "~12.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "@stream-io/stream-chat-css": "2.1.0",
+    "@stream-io/stream-chat-css": "2.2.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -13,16 +13,7 @@
     "@angular/core": "^12.2.0 || ^13.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
     "stream-chat": ">=4.3.0",
-    "stream-chat-css": "1.0.23",
-    "@stream-io/stream-chat-css": "2.1.0"
-  },
-  "peerDependenciesMeta": {
-    "stream-chat-css": {
-      "optional": true
-    },
-    "@stream-io/stream-chat-css": {
-      "optional": true
-    }
+    "@stream-io/stream-chat-css": "2.2.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

projects/stream-chat-angular/package.json

@@ -130,14 +130,18 @@ describe('ChannelService', () => {
     service.activeChannel$.subscribe(activeChannelSpy);
     const channelsSpy = jasmine.createSpy();
     service.channels$.subscribe(channelsSpy);
+    const messageToQuoteSpy = jasmine.createSpy();
+    service.messageToQuote$.subscribe(messageToQuoteSpy);
     messagesSpy.calls.reset();
     activeChannelSpy.calls.reset();
     channelsSpy.calls.reset();
+    messageToQuoteSpy.calls.reset();
     service.reset();
 
     expect(messagesSpy).toHaveBeenCalledWith([]);
     expect(channelsSpy).toHaveBeenCalledWith(undefined);
     expect(activeChannelSpy).toHaveBeenCalledWith(undefined);
+    expect(messageToQuoteSpy).toHaveBeenCalledWith(undefined);
   });
 
   it('should tell if user #hasMoreChannels$', async () => {
@@ -183,6 +187,9 @@ describe('ChannelService', () => {
     const messagesSpy = jasmine.createSpy();
     service.activeChannelMessages$.subscribe(messagesSpy);
     messagesSpy.calls.reset();
+    const messageToQuoteSpy = jasmine.createSpy();
+    service.messageToQuote$.subscribe(messageToQuoteSpy);
+    messageToQuoteSpy.calls.reset();
     const newActiveChannel = mockChannels[1];
     spyOn(newActiveChannel, 'markRead');
     service.setAsActiveChannel(newActiveChannel);
@@ -191,6 +198,7 @@ describe('ChannelService', () => {
     expect(result.cid).toBe(newActiveChannel.cid);
     expect(messagesSpy).toHaveBeenCalledWith(jasmine.any(Object));
     expect(newActiveChannel.markRead).toHaveBeenCalledWith();
+    expect(messageToQuoteSpy).toHaveBeenCalledWith(undefined);
   });
 
   it('should emit #activeChannelMessages$', async () => {
@@ -782,11 +790,18 @@ describe('ChannelService', () => {
     const text = 'Hi';
     const attachments = [{ fallback: 'image.png', url: 'url/to/image' }];
     const mentionedUsers = [{ id: 'sara', name: 'Sara' }];
+    const quotedMessageId = 'quotedMessage';
     let prevMessageCount!: number;
     service.activeChannelMessages$
       .pipe(first())
       .subscribe((m) => (prevMessageCount = m.length));
-    await service.sendMessage(text, attachments, mentionedUsers);
+    await service.sendMessage(
+      text,
+      attachments,
+      mentionedUsers,
+      undefined,
+      quotedMessageId
+    );
     let latestMessage!: StreamMessage;
     let messageCount!: number;
     service.activeChannelMessages$.subscribe((m) => {
@@ -800,6 +815,7 @@ describe('ChannelService', () => {
       mentioned_users: ['sara'],
       id: jasmine.any(String),
       parent_id: undefined,
+      quoted_message_id: quotedMessageId,
     });
 
     expect(channel.state.addMessageSorted).toHaveBeenCalledWith(
@@ -1167,4 +1183,23 @@ describe('ChannelService', () => {
 
     expect(result.length).toBe(1);
   });
+
+  it('should select message to be quoted', async () => {
+    await init();
+    const spy = jasmine.createSpy();
+    service.messageToQuote$.subscribe(spy);
+    const message = mockMessage();
+    service.selectMessageToQuote(message);
+
+    expect(spy).toHaveBeenCalledWith(message);
+  });
+
+  it('should deselect message to be quoted', async () => {
+    await init();
+    const spy = jasmine.createSpy();
+    service.messageToQuote$.subscribe(spy);
+    service.selectMessageToQuote(undefined);
+
+    expect(spy).toHaveBeenCalledWith(undefined);
+  });
 });

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

@@ -126,20 +126,43 @@ describe('ChannelService - threads', () => {
 
   it('should remove active parent message and reset thread messages', async () => {
     await init();
+    const messageToQuote = mockMessage();
+    messageToQuote.parent_id = 'parentId';
+    service.selectMessageToQuote(messageToQuote);
     const messagesSpy = jasmine.createSpy();
     const activeParentMessageIdSpy = jasmine.createSpy();
     const activeParentMessageSpy = jasmine.createSpy();
+    const messageToQuoteSpy = jasmine.createSpy();
     service.activeThreadMessages$.subscribe(messagesSpy);
     service.activeParentMessageId$.subscribe(activeParentMessageIdSpy);
     service.activeParentMessage$.subscribe(activeParentMessageSpy);
+    service.messageToQuote$.subscribe(messageToQuoteSpy);
     messagesSpy.calls.reset();
     activeParentMessageIdSpy.calls.reset();
     activeParentMessageSpy.calls.reset();
+    messageToQuoteSpy.calls.reset();
     await service.setAsActiveParentMessage(undefined);
 
     expect(messagesSpy).toHaveBeenCalledWith([]);
     expect(activeParentMessageIdSpy).toHaveBeenCalledWith(undefined);
     expect(activeParentMessageSpy).toHaveBeenCalledWith(undefined);
+    expect(messageToQuoteSpy).toHaveBeenCalledWith(undefined);
+  });
+
+  it(`shouldn't deselect message to quote, if not a thread reply`, async () => {
+    await init();
+    const messageToQuoteSpy = jasmine.createSpy();
+    service.messageToQuote$.subscribe(messageToQuoteSpy);
+    const parentMessage = mockMessage();
+    parentMessage.id = 'parentMessage';
+    const messageToQuote = mockMessage();
+    messageToQuote.parent_id = undefined;
+    await service.setAsActiveParentMessage(parentMessage);
+    service.selectMessageToQuote(messageToQuote);
+    messageToQuoteSpy.calls.reset();
+    await service.setAsActiveParentMessage(undefined);
+
+    expect(messageToQuoteSpy).not.toHaveBeenCalled();
   });
 
   it('should reset', async () => {
@@ -434,6 +457,7 @@ describe('ChannelService - threads', () => {
       mentioned_users: ['sara'],
       id: jasmine.any(String),
       parent_id: 'parentId',
+      quoted_message_id: undefined,
     });
 
     expect(channel.state.addMessageSorted).toHaveBeenCalledWith(

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

@@ -35,6 +35,7 @@ export class ChannelService {
   activeParentMessageId$: Observable<string | undefined>;
   activeThreadMessages$: Observable<StreamMessage[]>;
   activeParentMessage$: Observable<StreamMessage | undefined>;
+  messageToQuote$: Observable<StreamMessage | undefined>;
   customNewMessageNotificationHandler?: (
     notification: Notification,
     channelListSetter: (channels: Channel[]) => void
@@ -116,6 +117,9 @@ export class ChannelService {
   private sort: ChannelSort | undefined;
   private options: ChannelOptions | undefined;
   private readonly messagePageSize = 25;
+  private messageToQuoteSubject = new BehaviorSubject<
+    StreamMessage | undefined
+  >(undefined);
 
   private channelListSetter = (channels: Channel[]) => {
     this.channelsSubject.next(channels);
@@ -176,6 +180,7 @@ export class ChannelService {
       ),
       shareReplay()
     );
+    this.messageToQuote$ = this.messageToQuoteSubject.asObservable();
 
     this.chatClientService.connectionState$
       .pipe(filter((s) => s === 'online'))
@@ -198,9 +203,14 @@ export class ChannelService {
     this.activeChannelMessagesSubject.next([...channel.state.messages]);
     this.activeParentMessageIdSubject.next(undefined);
     this.activeThreadMessagesSubject.next([]);
+    this.messageToQuoteSubject.next(undefined);
   }
 
   async setAsActiveParentMessage(message: StreamMessage | undefined) {
+    const messageToQuote = this.messageToQuoteSubject.getValue();
+    if (messageToQuote && !!messageToQuote.parent_id) {
+      this.messageToQuoteSubject.next(undefined);
+    }
     if (!message) {
       this.activeParentMessageIdSubject.next(undefined);
       this.activeThreadMessagesSubject.next([]);
@@ -276,6 +286,7 @@ export class ChannelService {
     this.activeParentMessageIdSubject.next(undefined);
     this.activeThreadMessagesSubject.next([]);
     this.channelsSubject.next(undefined);
+    this.selectMessageToQuote(undefined);
   }
 
   async loadMoreChannels() {
@@ -299,14 +310,16 @@ export class ChannelService {
     text: string,
     attachments: Attachment[] = [],
     mentionedUsers: UserResponse[] = [],
-    parentId: string | undefined = undefined
+    parentId: string | undefined = undefined,
+    quotedMessageId: string | undefined = undefined
   ) {
     const preview = createMessagePreview(
       this.chatClientService.chatClient.user!,
       text,
       attachments,
       mentionedUsers,
-      parentId
+      parentId,
+      quotedMessageId
     );
     const channel = this.activeChannelSubject.getValue()!;
     preview.readBy = [];
@@ -429,6 +442,10 @@ export class ChannelService {
     }
   }
 
+  selectMessageToQuote(message: StreamMessage | undefined) {
+    this.messageToQuoteSubject.next(message);
+  }
+
   private async sendMessageRequest(preview: MessageResponse | StreamMessage) {
     const channel = this.activeChannelSubject.getValue()!;
     const isThreadReply = !!preview.parent_id;
@@ -444,6 +461,7 @@ export class ChannelService {
         mentioned_users: preview.mentioned_users?.map((u) => u.id),
         id: preview.id,
         parent_id: preview.parent_id,
+        quoted_message_id: preview.quoted_message_id,
       });
       if (response?.message) {
         channel.state.addMessageSorted(

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

@@ -186,11 +186,11 @@
   />
 </svg>
 <svg
-  data-testid="close-no-outline"
-  *ngIf="icon === 'close-no-outline'"
   height="10"
   width="10"
   xmlns="http://www.w3.org/2000/svg"
+  data-testid="close-no-outline"
+  *ngIf="icon === 'close-no-outline'"
 >
   <path
     d="M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z"