feat: Message list supports top to bottom layout #212

Author: szuperaz

package-lock.json

@@ -111,7 +111,7 @@
     "@ctrl/ngx-emoji-mart": "^6.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "@stream-io/stream-chat-css": "2.8.1",
+    "@stream-io/stream-chat-css": "2.9.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -254,3 +254,32 @@
     fill="black"
   />
 </svg>
+
+<svg
+  data-testid="arrow-up"
+  *ngIf="icon === 'arrow-up'"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z"
+    fill="var(--primary-color)"
+  />
+</svg>
+<svg
+  data-testid="arrow-down"
+  *ngIf="icon === 'arrow-down'"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z"
+    fill="var(--primary-color)"
+  />
+</svg>

projects/stream-chat-angular/src/lib/icon/icon.component.html

@@ -124,6 +124,20 @@ describe('IconComponent', () => {
     expect(queryIcon('arrow-left')).not.toBeNull();
   });
 
+  it('should display arrow-up icon', () => {
+    component.icon = 'arrow-up';
+    fixture.detectChanges();
+
+    expect(queryIcon('arrow-up')).not.toBeNull();
+  });
+
+  it('should display arrow-down icon', () => {
+    component.icon = 'arrow-down';
+    fixture.detectChanges();
+
+    expect(queryIcon('arrow-down')).not.toBeNull();
+  });
+
   it('should not display anything if #icon is not provided', () => {
     expect(nativeElement.innerHTML).not.toContain('svg');
   });

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

@@ -15,7 +15,9 @@ export type Icon =
   | 'reply-in-thread'
   | 'arrow-left'
   | 'arrow-right'
-  | 'menu';
+  | 'menu'
+  | 'arrow-up'
+  | 'arrow-down';
 
 /**
  * The `Icon` component can be used to display different icons (i. e. message delivered icon).

projects/stream-chat-angular/src/lib/icon/icon.component.ts

@@ -66,21 +66,25 @@
 </div>
 <div class="str-chat__list-notifications">
   <button
-    data-testid="scroll-to-bottom"
-    *ngIf="isUserScrolledUp"
+    data-testid="scroll-to-latest"
+    *ngIf="isUserScrolled"
     class="
       str-chat__message-notification
       str-chat__message-notification-right
-      str-chat__message-notification-scroll-down
+      str-chat__message-notification-scroll-to-latest
     "
-    (keyup.enter)="scrollToBottom()"
-    (click)="scrollToBottom()"
+    (keyup.enter)="scrollToLatestMessage()"
+    (click)="scrollToLatestMessage()"
   >
+    <stream-icon
+      style="display: inline-block; height: 24px"
+      [icon]="direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'"
+    ></stream-icon>
     <div
       *ngIf="unreadMessageCount > 0"
       class="
         str-chat__message-notification
-        str-chat__message-notification-scroll-down-unread-count
+        str-chat__message-notification-scroll-to-latest-unread-count
       "
     >
       {{ unreadMessageCount }}