feat: reaction details are now paginated, and use reaction_groups

docusaurus/docs/Angular/components/PaginatedListComponent.mdx

@@ -0,0 +1,27 @@
+The `PaginatedListComponent` can display a list of arbitrary data with support for loading indicator and pagination. This is a utility component, you don't need to use it unless you're building a custom component.
+
+## Usage
+
+The paginated list component relies on data provided by the parent component. You can provide the HTML template for the list items.
+
+```html
+<stream-paginated-list
+  [items]="<list of items to display>"
+  [isLoading]="<set to true to display loading indicator>"
+  [hasMore]="<whether or not the list has more pages to retrieve>"
+  (loadMore)="<use this output to fetch the next page of items>"
+>
+    <ng-template let-item="item" let-index="index"
+        ><div data-testid="test-item" [style.height]="height">
+          {{ index }}. {{ item }}
+        </div></ng-template
+    >
+</stream-user-list>
+```
+
+## Customization
+
+You can provide the HTML template for the list items, see above example.
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

docusaurus/docs/Angular/components/UserListComponent.mdx

@@ -0,0 +1,21 @@
+The `UserListComponent` can display a list of Stream users with pagination. This can be useful if you want to build a user list in your application.
+
+## Usage
+
+The user list component relies on data provided by the parent component:
+
+```html
+<stream-user-list
+  [users]="<list of users to display>"
+  [isLoading]="<set to true to display loading indicator>"
+  [hasMore]="<whether or not the list has more pages to retrieve>"
+  (loadMore)="<use this output to fetch the next page of users>"
+></stream-user-list>
+```
+
+## Customization
+
+The component is built on top of the [`PaginatedListComponent`](../../components/PaginatedListComponent.mdx), you can use that component to build your own user list component.
+
+[//]: # "Start of generated content"
+[//]: # "End of generated content"

package.json

@@ -113,7 +113,7 @@
     "@ctrl/ngx-emoji-mart": "^8.2.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@stream-io/stream-chat-css": "4.18.0",
+    "@stream-io/stream-chat-css": "4.19.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",
@@ -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/customizations-example/src/app/app.component.html

@@ -163,14 +163,12 @@
 
 <ng-template
   #messageReactionsTemplate
-  let-messageReactionCounts="messageReactionCounts"
-  let-latestReactions="latestReactions"
+  let-messageReactionGroups="messageReactionGroups"
   let-messageId="messageId"
   let-ownReactions="ownReactions"
 >
   <stream-message-reactions
-    [messageReactionCounts]="messageReactionCounts"
-    [latestReactions]="latestReactions"
+    [messageReactionGroups]="messageReactionGroups"
     [messageId]="messageId"
     [ownReactions]="ownReactions"
   ></stream-message-reactions>

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/package.json

@@ -21,7 +21,7 @@
     "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "@ngx-translate/core": "^14.0.0 || ^15.0.0",
     "rxjs": "^7.4.0",
-    "stream-chat": "^8.26.0"
+    "stream-chat": "^8.29.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",

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