feat: Implement channel capabilities #63

Author: szuperaz

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

@@ -27,11 +27,11 @@ If you want to create your own message input, you can use the [`ChannelService`]
 
 ### isFileUploadEnabled
 
-If file upload is enabled, the user can open a file selector from the input.
+If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
 
 | Type    | Default |
 | ------- | ------- |
-| boolean | false   |
+| boolean | true    |
 
 ### acceptedFileTypes
 

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

@@ -58,3 +58,19 @@ By default, the [default message component](./message.mdx) is used. To change th
 | Type        |
 | ----------- |
 | TemplateRef |
+
+### areReactionsEnabled
+
+If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | true    |
+
+### enabledMessageActions
+
+The list of [actions that are enabled](./message-actions.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI.
+
+| Type            | Default  |
+| --------------- | -------- |
+| MessageAction[] | ['flag'] |

docusaurus/docs/Angular/components/message.mdx

@@ -37,8 +37,19 @@ The message list uses the `Message` component to display messages, if you want t
   <stream-message-input></stream-message-input>
 </stream-channel>
 
-<ng-template #customMessageTemplate let-message="message">
-  <app-custom-message [message]="message"></app-custom-message>
+<ng-template
+  #customMessageTemplate
+  let-message="message"
+  let-enabledMessageActions="enabledMessageActions"
+  let-areReactionsEnabled="areReactionsEnabled"
+  let-canReactToMessage="canReactToMessage"
+>
+  <app-custom-message
+    [message]="message"
+    [enabledMessageActions]="enabledMessageActions"
+    [areReactionsEnabled]="areReactionsEnabled"
+    [canReactToMessage]="canReactToMessage"
+  ></app-custom-message>
 </ng-template>
 ```
 
@@ -89,19 +100,33 @@ The `Message` component uses the [`Icon`](./icons.mdx) component to display icon
 
 ### enabledMessageActions
 
-The list of [actions that are enabled](./message-actions.mdx).
+The list of [actions that are enabled](./message-actions.mdx), please note that the user also has to have the necessary [channel capabilities](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript) for actions to work. Unathorized actions won't be displayed on the UI.
 
-| Type            | Default  |
-| --------------- | -------- |
-| MessageAction[] | ['flag'] |
+If you use the default chat UI you can also set this using the [`MessageList`](./message-list.mdx) component.
+
+| Type            |
+| --------------- |
+| MessageAction[] |
 
 ### areReactionsEnabled
 
-If true, the message reactions are displayed, and the current user can react to messages.
+If true, the message reactions are displayed.
+
+If you use the default chat UI you can also set this using the [`MessageList`](./message-list.mdx) component.
+
+| Type    |
+| ------- |
+| boolean |
+
+### canReactToMessage
+
+If true, the user can add reactions to the message.
+
+If you use the default chat UI the [`MessageList`](./message-list.mdx) component automatically sets this based on [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
 
-| Type    | Default |
-| ------- | ------- |
-| boolean | true    |
+| Type   |
+| ------ |
+| boolen |
 
 ### isLastSentMessage
 

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

@@ -140,7 +140,7 @@
         ></textarea>
       </div>
       <div
-        *ngIf="isFileUploadEnabled"
+        *ngIf="isFileUploadEnabled && isFileUploadAuthorized"
         class="str-chat__fileupload-wrapper"
         data-testid="file-upload-button"
       >

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

@@ -158,8 +158,16 @@ describe('MessageInputComponent', () => {
     expect(textarea?.value).toBe('');
   });
 
-  it('should display file upload button, if #isFileUploadEnabled is true', () => {
+  it('should display file upload button, if #isFileUploadEnabled is true and has permission to upload file', () => {
     expect(queryattachmentUploadButton()).not.toBeNull();
+
+    mockActiveChannel$.next({
+      ...channel,
+      data: { own_capabilities: [] },
+    } as any as Channel);
+    fixture.detectChanges();
+
+    expect(queryattachmentUploadButton()).toBeNull();
   });
 
   it(`shouldn't display file upload button, if #isFileUploadEnabled is false`, () => {

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts

@@ -21,6 +21,7 @@ export class MessageInputComponent implements OnDestroy {
   @Input() acceptedFileTypes: string[] | undefined;
   @Input() isMultipleFileUploadEnabled = true;
   attachmentUploads: AttachmentUpload[] = [];
+  isFileUploadAuthorized: boolean | undefined;
   private attachmentUploadInProgressCounter = 0;
   @ViewChild('input') private messageInput!: ElementRef<HTMLInputElement>;
   @ViewChild('fileInput') private fileInput!: ElementRef<HTMLInputElement>;
@@ -32,11 +33,16 @@ export class MessageInputComponent implements OnDestroy {
     private notificationService: NotificationService
   ) {
     this.subscriptions.push(
-      this.channelService.activeChannel$.subscribe(() => {
+      this.channelService.activeChannel$.subscribe((channel) => {
         if (this.messageInput) {
           this.messageInput.nativeElement.value = '';
         }
         this.attachmentUploads = [];
+        const capabilities = channel?.data?.own_capabilities as string[];
+        if (capabilities) {
+          this.isFileUploadAuthorized =
+            capabilities.indexOf('upload-file') !== -1;
+        }
       })
     );
   }

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

@@ -21,6 +21,8 @@
               messageTemplate;
               context: {
                 message: message,
+                areReactionsEnabled: areReactionsEnabled,
+                canReactToMessage: canReactToMessage,
                 lastSentMessageId: !!(
                   lastSentMessageId && message?.id === lastSentMessageId
                 )
@@ -31,9 +33,12 @@
         <ng-template #defaultMessageTemplate>
           <stream-message
             [message]="message"
+            [areReactionsEnabled]="areReactionsEnabled"
+            [canReactToMessage]="canReactToMessage"
             [isLastSentMessage]="
               !!(lastSentMessageId && message?.id === lastSentMessageId)
             "
+            [enabledMessageActions]="enabledMessageActions"
           ></stream-message>
         </ng-template>
       </li>

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

@@ -1,3 +1,4 @@
+import { SimpleChange } from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -76,6 +77,10 @@ describe('MessageListComponent', () => {
       expect(m.isLastSentMessage).toBe(
         i === messages.length - 2 ? true : false
       );
+
+      expect(m.areReactionsEnabled).toBe(component.areReactionsEnabled);
+      expect(m.canReactToMessage).toBe(component.canReactToMessage);
+      expect(m.enabledMessageActions).toEqual(['flag']);
     });
   });
 
@@ -268,4 +273,44 @@ describe('MessageListComponent', () => {
     );
     /* eslint-enable jasmine/new-line-before-expect */
   });
+
+  it('should only enable reactions if channel capabilites permit it', () => {
+    channelServiceMock.activeChannel$.next({
+      id: 'id',
+      data: { own_capabilities: [] },
+    } as any as Channel);
+    fixture.detectChanges();
+
+    expect(component.canReactToMessage).toBeFalse();
+    expect(queryMessageComponents()[0].canReactToMessage).toBeFalse();
+
+    channelServiceMock.activeChannel$.next({
+      id: 'id',
+      data: { own_capabilities: ['send-reaction'] },
+    } as any as Channel);
+
+    expect(component.canReactToMessage).toBeTrue();
+  });
+
+  it('should only enable flag action if channel capabilites permit it', () => {
+    channelServiceMock.activeChannel$.next({
+      id: 'id',
+      data: { own_capabilities: [] },
+    } as any as Channel);
+    component.enabledMessageActionsInput = ['flag'];
+    component.ngOnChanges({
+      enabledMessageActionsInput: {} as any as SimpleChange,
+    });
+    fixture.detectChanges();
+
+    expect(queryMessageComponents()[0].enabledMessageActions).toEqual([]);
+
+    channelServiceMock.activeChannel$.next({
+      id: 'id',
+      data: { own_capabilities: ['flag-message'] },
+    } as any as Channel);
+    fixture.detectChanges();
+
+    expect(queryMessageComponents()[0].enabledMessageActions).toEqual(['flag']);
+  });
 });

projects/stream-chat-angular/src/lib/message-list/message-list.component.ts

@@ -4,6 +4,8 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  OnChanges,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
@@ -14,14 +16,22 @@ import { StreamMessage } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { getGroupStyles, GroupStyle } from './group-styles';
 import { ImageLoadService } from './image-load.service';
+import { MessageActions } from '../message-actions-box/message-actions-box.component';
 @Component({
   selector: 'stream-message-list',
   templateUrl: './message-list.component.html',
   styles: [],
 })
-export class MessageListComponent implements AfterViewChecked {
+export class MessageListComponent implements AfterViewChecked, OnChanges {
   @Input() messageTemplate: TemplateRef<any> | undefined;
+  @Input() areReactionsEnabled = true;
+  /* eslint-disable-next-line @angular-eslint/no-input-rename */
+  @Input('enabledMessageActions') enabledMessageActionsInput:
+    | MessageActions[]
+    | undefined;
   messages$!: Observable<StreamMessage[]>;
+  canReactToMessage: boolean | undefined;
+  enabledMessageActions: MessageActions[] = ['flag'];
   @HostBinding('class') private class =
     'str-chat-angular__main-panel-inner str-chat-angular__message-list-host';
   unreadMessageCount = 0;
@@ -36,14 +46,15 @@ export class MessageListComponent implements AfterViewChecked {
   private oldestMessageDate: Date | undefined;
   private olderMassagesLoaded: boolean | undefined;
   private isNewMessageSentByUser: boolean | undefined;
+  private authorizedMessageActions: MessageActions[] = ['flag'];
   private readonly isUserScrolledUpThreshold = 300;
 
   constructor(
     private channelService: ChannelService,
     private chatClientService: ChatClientService,
     private imageLoadService: ImageLoadService
   ) {
-    this.channelService.activeChannel$.subscribe(() => {
+    this.channelService.activeChannel$.subscribe((channel) => {
       this.latestMessageDate = undefined;
       this.hasNewMessages = true;
       this.isUserScrolledUp = false;
@@ -52,6 +63,15 @@ export class MessageListComponent implements AfterViewChecked {
       this.oldestMessageDate = undefined;
       this.unreadMessageCount = 0;
       this.isNewMessageSentByUser = undefined;
+      const capabilites = channel?.data?.own_capabilities as string[];
+      if (capabilites) {
+        this.canReactToMessage = capabilites.indexOf('send-reaction') !== -1;
+        this.authorizedMessageActions = [];
+        if (capabilites.indexOf('flag-message') !== -1) {
+          this.authorizedMessageActions.push('flag');
+        }
+        this.setEnabledActions();
+      }
     });
     this.messages$ = this.channelService.activeChannelMessages$.pipe(
       tap((messages) => {
@@ -110,6 +130,12 @@ export class MessageListComponent implements AfterViewChecked {
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.enabledMessageActionsInput) {
+      this.setEnabledActions();
+    }
+  }
+
   ngAfterViewChecked() {
     if (this.hasNewMessages) {
       if (!this.isUserScrolledUp || this.isNewMessageSentByUser) {
@@ -156,4 +182,17 @@ export class MessageListComponent implements AfterViewChecked {
     this.scrollContainer.nativeElement.scrollTop =
       this.scrollContainer.nativeElement.scrollHeight - this.containerHeight!;
   }
+
+  private setEnabledActions() {
+    if (!this.enabledMessageActionsInput) {
+      return;
+    }
+    this.enabledMessageActions = [];
+    this.enabledMessageActionsInput.forEach((action) => {
+      const isAuthorized = this.authorizedMessageActions.indexOf(action) !== -1;
+      if (isAuthorized) {
+        this.enabledMessageActions.push(action);
+      }
+    });
+  }
 }

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

@@ -66,7 +66,7 @@
             ></stream-icon>
           </div>
           <div
-            *ngIf="areReactionsEnabled"
+            *ngIf="areReactionsEnabled && canReactToMessage"
             class="
               str-chat__message-simple__actions__action
               str-chat__message-simple__actions__action--reactions