feat: reaction details are now paginated

package.json

@@ -122,8 +122,8 @@
     "ngx-float-ui": "^15.0.0",
     "pretty-bytes": "^6.1.1",
     "rxjs": "~7.4.0",
-    "stream-chat": "^8.26.0",
     "starwars-names": "^1.6.0",
+    "stream-chat": "^8.40.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",
     "uuid": "^9.0.1",
@@ -141,10 +141,10 @@
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@types/jasmine": "~3.8.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
     "@types/starwars-names": "^1.6.2",
     "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.3.0",
@@ -161,7 +161,7 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "lint-staged": "^11.1.2",
     "ng-packagr": "^15.2.2",
-    "prettier": "^2.4.0",
+    "prettier": "^2.8.8",
     "prettier-eslint": "^13.0.0",
     "semantic-release": "^18.0.0",
     "typedoc": "^0.25.13",

projects/sample-app/src/app/custom-message/custom-message.component.html

@@ -2,6 +2,6 @@
   <div class="message">{{ message?.text }}</div>
   <div class="sender-info">
     {{ message?.user?.name || message?.user?.id }} |
-    {{ message?.created_at | date: "long" }}
+    {{ message?.created_at | date : "long" }}
   </div>
 </div>

projects/stream-chat-angular/.eslintrc.json

@@ -54,7 +54,8 @@
       "rules": {
         "@typescript-eslint/no-unsafe-call": "off",
         "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off"
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@angular-eslint/component-max-inline-declarations": "off"
       }
     },
     {

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

@@ -256,10 +256,7 @@
         ></ng-container>
         <ng-template #defaultFile let-attachmentContext="attachment">
           <div
-            class="
-              str-chat__message-attachment-file--item
-              str-chat-angular__message-attachment-file-single
-            "
+            class="str-chat__message-attachment-file--item str-chat-angular__message-attachment-file-single"
           >
             <stream-icon-placeholder
               class="str-chat__attachment-type-icon"
@@ -447,10 +444,7 @@
   <div class="stream-chat-angular__image-modal str-chat__image-carousel">
     <img
       #imgElement
-      class="
-        stream-chat-angular__image-modal-image
-        str-chat__image-carousel-image
-      "
+      class="stream-chat-angular__image-modal-image str-chat__image-carousel-image"
       data-testid="modal-image"
       [src]="
         getCarouselImageAttachmentConfiguration(
@@ -484,10 +478,7 @@
     />
     <div>
       <button
-        class="
-          stream-chat-angular__image-modal-stepper
-          str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev
-        "
+        class="stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-prev"
         data-testid="image-modal-prev"
         type="button"
         [ngStyle]="{
@@ -499,10 +490,7 @@
         <stream-icon-placeholder icon="arrow-left"></stream-icon-placeholder>
       </button>
       <button
-        class="
-          stream-chat-angular__image-modal-stepper
-          str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next
-        "
+        class="stream-chat-angular__image-modal-stepper str-chat__image-carousel-stepper str-chat__image-carousel-stepper-next"
         type="button"
         data-testid="image-modal-next"
         [ngStyle]="{

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html

@@ -10,9 +10,7 @@
   <div class="str-chat__header-livestream-left str-chat__channel-header-end">
     <p
       data-testid="name"
-      class="
-        str-chat__header-livestream-left--title str-chat__channel-header-title
-      "
+      class="str-chat__header-livestream-left--title str-chat__channel-header-title"
     >
       {{ displayText }}
     </p>
@@ -25,10 +23,7 @@
     <ng-template #defaultChannelInfo>
       <p
         data-testid="info"
-        class="
-          str-chat__header-livestream-left--members
-          str-chat__channel-header-info
-        "
+        class="str-chat__header-livestream-left--members str-chat__channel-header-info"
       >
         {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}
         {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |

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

@@ -102,9 +102,7 @@
   >
     <div class="str-chat__loading-channels-avatar"></div>
     <div
-      class="
-        str-chat__loading-channels-meta str-chat__channel-preview-end-loading
-      "
+      class="str-chat__loading-channels-meta str-chat__channel-preview-end-loading"
     >
       <div class="str-chat__loading-channels-username"></div>
       <div class="str-chat__loading-channels-status"></div>

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html

@@ -16,9 +16,7 @@
     ></stream-avatar-placeholder>
   </div>
   <div
-    class="
-      str-chat__channel-preview-messenger--right str-chat__channel-preview-end
-    "
+    class="str-chat__channel-preview-messenger--right str-chat__channel-preview-end"
   >
     <ng-container
       *ngTemplateOutlet="

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

@@ -307,7 +307,7 @@ describe('ChannelPreviewComponent', () => {
       component.channel = channel;
       fixture.detectChanges();
       const deletedMessage = mockMessage();
-      deletedMessage.deleted_at = new Date().toISOString();
+      deletedMessage.deleted_at = new Date();
       channel.state.latestMessages[channel.state.latestMessages.length - 1] =
         deletedMessage;
       channel.handleEvent('message.updated', { message: deletedMessage });

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

@@ -672,7 +672,7 @@ describe('ChannelService', () => {
     service.activeChannel$.subscribe((c) => (activeChannel = c!));
     const message =
       activeChannel.state.messages[activeChannel.state.messages.length - 1];
-    message.deleted_at = new Date().toISOString();
+    message.deleted_at = new Date();
     (activeChannel as MockChannel).handleEvent('message.deleted', { message });
 
     expect(spy).toHaveBeenCalledWith(jasmine.arrayContaining([message]));
@@ -2153,7 +2153,13 @@ describe('ChannelService', () => {
     expect(mockChatClient.queryChannels).toHaveBeenCalledWith(
       jasmine.any(Object),
       jasmine.any(Object),
-      { limit: 20, state: true, presence: true, watch: true, message_limit: 25 }
+      {
+        limit: 20,
+        state: true,
+        presence: true,
+        watch: true,
+        message_limit: 25,
+      }
     );
   });
 

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

@@ -397,7 +397,7 @@ describe('ChannelService - threads', () => {
       messages: [messageToDelete],
     } as any as GetRepliesAPIResponse<DefaultStreamChatGenerics>);
     await service.setAsActiveParentMessage(parentMessage);
-    messageToDelete.deleted_at = new Date().toISOString();
+    messageToDelete.deleted_at = new Date();
     activeChannel.state.threads = { [parentMessage.id]: [messageToDelete] };
     (activeChannel as MockChannel).handleEvent('message.deleted', {
       message: messageToDelete,

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

@@ -1636,6 +1636,7 @@ export class ChannelService<
 
   /**
    * Get the last 1200 reactions of a message in the current active channel. If you need to fetch more reactions please use the [following endpoint](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript#paginating-reactions).
+   * @deprecated use [`messageReactionsService.queryReactions()`](https://getstream.io/chat/docs/sdk/angular/services/MessageReactionsService/#queryreactions) instead
    * @param messageId
    * @returns all reactions of a message
    */
@@ -1768,6 +1769,7 @@ export class ChannelService<
       message.reaction_scores = { ...e.message?.reaction_scores };
       message.latest_reactions = [...(e.message?.latest_reactions || [])];
       message.own_reactions = [...(e.message?.own_reactions || [])];
+      message.reaction_groups = { ...e.message?.reaction_groups };
 
       messages[messageIndex] = { ...message };
       isThreadMessage

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

@@ -99,7 +99,9 @@ export class ChatClientService<
     apiKey: string,
     userOrId: string | OwnUserResponse<T> | UserResponse<T> | undefined,
     userTokenOrProvider: TokenOrProvider,
-    clientOptions?: StreamChatOptions & { trackPendingChannelInvites?: boolean }
+    clientOptions?: StreamChatOptions & {
+      trackPendingChannelInvites?: boolean;
+    }
   ): ConnectAPIResponse<T> {
     if (this.chatClient && this.chatClient.key !== apiKey) {
       this.appSettingsSubject.next(undefined);

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

@@ -1,11 +1,7 @@
 <div
   #actionBox
   data-testid="action-box"
-  class="
-    str-chat__message-actions-box
-    str-chat__message-actions-box-angular
-    str-chat__message-actions-box--open
-  "
+  class="str-chat__message-actions-box str-chat__message-actions-box-angular str-chat__message-actions-box--open"
 >
   <ul class="str-chat__message-actions-list">
     <ng-container

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html

@@ -1,12 +1,7 @@
 <textarea
   #input
   data-testid="textarea"
-  class="
-    rta__textarea
-    str-chat__textarea__textarea
-    str-chat__angular-textarea
-    str-chat__message-textarea
-  "
+  class="rta__textarea str-chat__textarea__textarea str-chat__angular-textarea str-chat__message-textarea"
   rows="1"
   [value]="value || ''"
   [autofocus]="autoFocus"