In progress

Author: szuperaz

package-lock.json

@@ -116,7 +116,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": "5.8.0",
+    "@stream-io/stream-chat-css": "5.12.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",

package.json

@@ -54,3 +54,7 @@
 <ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
   <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
 </ng-template>
+
+<ng-template #pollTemplate let-pollId="pollId" let-messageId="messageId">
+  <stream-poll [pollId]="pollId" [messageId]="messageId"> </stream-poll>
+</ng-template>

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

@@ -30,6 +30,10 @@ export class AppComponent implements AfterViewInit {
   @ViewChild('emojiPickerTemplate')
   emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
   @ViewChild('avatar') avatarTemplate!: TemplateRef<AvatarContext>;
+  @ViewChild('pollTemplate') pollTemplate!: TemplateRef<{
+    pollId: string;
+    messageId: string;
+  }>;
   theme$: Observable<string>;
   counter = 0;
 
@@ -59,6 +63,7 @@ export class AppComponent implements AfterViewInit {
         : environment.userToken,
       { timeout: 10000 }
     );
+    this.chatService.chatClient.polls.registerSubscriptions();
     void this.channelService.init(
       environment.channelsFilter || {
         type: 'messaging',
@@ -78,6 +83,7 @@ export class AppComponent implements AfterViewInit {
     this.customTemplateService.emojiPickerTemplate$.next(
       this.emojiPickerTemplate
     );
+    this.customTemplateService.pollTemplate$.next(this.pollTemplate);
   }
 
   closeMenu(event: Event) {

projects/sample-app/src/app/app.component.ts

@@ -8,6 +8,7 @@ import {
   StreamAutocompleteTextareaModule,
   StreamChatModule,
   VoiceRecorderModule,
+  StreamPollsModule,
 } from 'stream-chat-angular';
 import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
@@ -20,6 +21,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     StreamChatModule,
     PickerModule,
     VoiceRecorderModule,
+    StreamPollsModule,
     StreamAutocompleteTextareaModule,
   ],
   bootstrap: [AppComponent],

projects/sample-app/src/app/app.module.ts

@@ -133,5 +133,25 @@ export const en = {
     'and others': 'and others',
     'Message was blocked by moderation policies':
       'Message was blocked by moderation policies',
+    'Vote ended': 'Vote ended',
+    'Select one': 'Select one',
+    'Select up to {{count}}': 'Select up to {{count}}',
+    'Select one or more': 'Select one or more',
+    'See all options ({{count}})': 'See all options ({{count}})',
+    'Suggest an option': 'Suggest an option',
+    'Add a comment': 'Add a comment',
+    'Update your comment': 'Update your comment',
+    'View {{count}} comments': 'View {{count}} comments',
+    'View results': 'View results',
+    'End vote': 'End vote',
+    'After a poll is closed, no more votes can be cast':
+      'After a poll is closed, no more votes can be cast',
+    'Failed to end vote': 'Failed to end vote',
+    'Failed to cast vote': 'Failed to cast vote',
+    Anonymous: 'Anonymous',
+    '{{ count }} votes': '{{ count }} votes',
+    'Show all': 'Show all',
+    'Poll results': 'Poll results',
+    'Error loading votes': 'Error loading votes',
   },
 };

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -373,6 +373,12 @@ export class CustomTemplatesService {
   messageBlockedTemplate$ = new BehaviorSubject<
     TemplateRef<MessageBlockedContext> | undefined
   >(undefined);
+  /**
+   * Template to display polls inside [message component](/chat/docs/sdk/angular/components/MessageComponent/). There is no default template, but the `PollsModule` contains default components.
+   */
+  pollTemplate$ = new BehaviorSubject<
+    TemplateRef<{ pollId: string; messageId: string }> | undefined
+  >(undefined);
 
   constructor() {}
 }

projects/stream-chat-angular/src/lib/custom-templates.service.ts

@@ -184,6 +184,10 @@ export class MessageActionsService {
    * @internal
    */
   messageMenuOpenedFor$ = new BehaviorSubject<string | undefined>(undefined);
+  /**
+   * @internal
+   */
+  modalOpenedForMessage = new BehaviorSubject<string | undefined>(undefined);
   private hasDisplayedClipboardWarning = false;
 
   constructor(

projects/stream-chat-angular/src/lib/message-actions.service.ts

@@ -167,7 +167,7 @@
           <div
             class="str-chat__message-bubble str-chat-angular__message-bubble"
             [class.str-chat-angular__message-bubble--attachment-modal-open]="
-              imageAttachmentModalState === 'opened'
+              nestedModalState === 'opened'
             "
             data-testid="message-bubble"
             [floatUiLoose]="messageMenuFloat"
@@ -190,6 +190,19 @@
                 ></ng-container>
               </div>
             </ng-container>
+            <ng-container
+              *ngIf="
+                message?.poll_id &&
+                (customTemplatesService.pollTemplate$ | async)
+              "
+            >
+              <ng-container
+                *ngTemplateOutlet="
+                  (customTemplatesService.pollTemplate$ | async)!;
+                  context: { pollId: message?.poll_id, messageId: message?.id }
+                "
+              ></ng-container>
+            </ng-container>
             <div
               *ngIf="
                 message?.text || (message?.quoted_message && hasAttachment)

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

@@ -28,7 +28,7 @@ import {
   MessageTextContext,
   MessageBlockedContext,
 } from '../types';
-import { Observable, Subscription, take } from 'rxjs';
+import { Observable, pairwise, Subscription, take } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { listUsers } from '../list-users';
 import { DateParserService } from '../date-parser.service';
@@ -81,7 +81,7 @@ export class MessageComponent
   isEditedFlagOpened = false;
   shouldDisplayTranslationNotice = false;
   displayedMessageTextContent: 'original' | 'translation' = 'original';
-  imageAttachmentModalState: 'opened' | 'closed' = 'closed';
+  nestedModalState: 'opened' | 'closed' = 'closed';
   shouldDisplayThreadLink = false;
   isSentByCurrentUser = false;
   readByText = '';
@@ -189,6 +189,15 @@ export class MessageComponent
         }
       })
     );
+    this.subscriptions.push(
+      this.messageActionsService.modalOpenedForMessage.subscribe(
+        (messageId) => {
+          if (messageId === this.message?.id) {
+            this.nestedModalState = 'opened';
+          }
+        }
+      )
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -300,6 +309,17 @@ export class MessageComponent
         }
       })
     );
+    this.subscriptions.push(
+      this.messageActionsService.modalOpenedForMessage
+        .pipe(pairwise())
+        .subscribe(([oldId, newId]) => {
+          if (newId === this.message?.id) {
+            this.nestedModalState = 'opened';
+          } else if (oldId === this.message?.id && newId === undefined) {
+            this.nestedModalState = 'closed';
+          }
+        })
+    );
   }
 
   ngOnDestroy(): void {
@@ -373,8 +393,7 @@ export class MessageComponent
       messageId: this.message?.id || '',
       attachments: this.message?.attachments || [],
       parentMessageId: this.message?.parent_id,
-      imageModalStateChangeHandler: (state) =>
-        (this.imageAttachmentModalState = state),
+      imageModalStateChangeHandler: (state) => (this.nestedModalState = state),
     };
   }