Poll composer added

Author: szuperaz

package-lock.json

@@ -129,7 +129,7 @@
     "replace": "^1.2.2",
     "rxjs": "~7.4.0",
     "starwars-names": "^1.6.0",
-    "stream-chat": "9.0.0",
+    "stream-chat": "9.20.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.3.0",
     "uuid": "^9.0.1",

package.json

@@ -26,7 +26,10 @@
     </stream-channel-header>
     <stream-message-list></stream-message-list>
     <stream-notification-list></stream-notification-list>
-    <stream-message-input [displayVoiceRecordingButton]="true">
+    <stream-message-input
+      [displayPollCreateButton]="true"
+      [displayVoiceRecordingButton]="true"
+    >
       <ng-template voice-recorder let-service="service">
         <stream-voice-recorder
           [voiceRecorderService]="service"
@@ -71,3 +74,14 @@
     <stream-poll [pollId]="pollId" [messageId]="messageId"> </stream-poll>
   </ng-template>
 </ng-template>
+
+<ng-template
+  #pollComposerTemplate
+  let-pollCompose="pollCompose"
+  let-cancel="cancel"
+>
+  <stream-poll-composer
+    (pollCompose)="pollCompose($event)"
+    (cancel)="cancel()"
+  ></stream-poll-composer>
+</ng-template>

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

@@ -34,6 +34,11 @@ export class AppComponent implements AfterViewInit {
     pollId: string;
     messageId: string;
   }>;
+  @ViewChild('pollComposerTemplate')
+  pollComposerTemplate!: TemplateRef<{
+    pollCompose: (pollId: string) => void;
+    cancel: () => void;
+  }>;
   theme$: Observable<string>;
   counter = 0;
 
@@ -84,6 +89,9 @@ export class AppComponent implements AfterViewInit {
       this.emojiPickerTemplate
     );
     this.customTemplateService.pollTemplate$.next(this.pollTemplate);
+    this.customTemplateService.pollComposerTemplate$.next(
+      this.pollComposerTemplate
+    );
   }
 
   closeMenu(event: Event) {

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

@@ -163,5 +163,21 @@ export const en = {
     'Option already exists': 'Option already exists',
     'You have reached the maximum number of votes allowed':
       'You have reached the maximum number of votes allowed',
+    'Create poll': 'Create poll',
+    Create: 'Create',
+    Question: 'Question',
+    'Ask a question': 'Ask a question',
+    'Question is required': 'Question is required',
+    Options: 'Options',
+    'Add an option': 'Add an option',
+    'Multiple answers': 'Multiple answers',
+    'Maximum number of votes': 'Maximum number of votes',
+    'Provide a value between {{ min }} and {{ max }}':
+      'Provide a value between {{ min }} and {{ max }}',
+    'Anonymous poll': 'Anonymous poll',
+    'Allow option suggestions': 'Allow option suggestions',
+    'Allow comments': 'Allow comments',
+    'Failed to create poll': 'Failed to create poll',
+    'Provide at least one option': 'Provide at least one option',
   },
 };

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

@@ -838,7 +838,8 @@ export class ChannelService {
     mentionedUsers: UserResponse[] = [],
     parentId: string | undefined = undefined,
     quotedMessageId: string | undefined = undefined,
-    customData: undefined | CustomMessageData = undefined
+    customData: undefined | CustomMessageData = undefined,
+    pollId: string | undefined = undefined
   ) {
     let input: MessageInput = {
       text,
@@ -847,6 +848,7 @@ export class ChannelService {
       parentId,
       quotedMessageId,
       customData,
+      pollId,
     };
     if (this.beforeSendMessage) {
       input = await this.beforeSendMessage(input);
@@ -858,7 +860,8 @@ export class ChannelService {
       input.mentionedUsers,
       input.parentId,
       input.quotedMessageId,
-      input.customData
+      input.customData,
+      input.pollId
     );
     const channel = this.activeChannelSubject.getValue()!;
     channel.state.addMessageSorted(preview, true);
@@ -1206,6 +1209,7 @@ export class ChannelService {
         mentioned_users: preview.mentioned_users?.map((u) => u.id),
         parent_id: preview.parent_id,
         quoted_message_id: preview.quoted_message_id,
+        poll_id: preview.poll_id,
         ...customData,
       } as Message); // TODO: find out why we need typecast here
       channel.state.addMessageSorted(

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

@@ -379,6 +379,13 @@ export class CustomTemplatesService {
   pollTemplate$ = new BehaviorSubject<
     TemplateRef<{ pollId: string; messageId: string }> | undefined
   >(undefined);
+  /**
+   * Template to display poll composer inside [message input component](/chat/docs/sdk/angular/components/MessageInputComponent/). There is no default template, but the `PollsModule` contains default components.
+   */
+  pollComposerTemplate$ = new BehaviorSubject<
+    | TemplateRef<{ pollCompose: (pollId: string) => void; cancel: () => void }>
+    | undefined
+  >(undefined);
 
   constructor() {}
 }

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

@@ -22,7 +22,8 @@ export type Icon =
   | 'play'
   | 'pause'
   | 'mic'
-  | 'bin';
+  | 'bin'
+  | 'poll';
 
 /**
  * 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,6 +66,14 @@
           </div>
         </ng-template>
       </ng-container>
+      <ng-container *ngIf="canSendPolls && displayPollCreateButton">
+        <button
+          class="str-chat-angular__create-poll"
+          (click)="openPollComposer()"
+        >
+          <stream-icon-placeholder icon="poll"></stream-icon-placeholder>
+        </button>
+      </ng-container>
       <div class="str-chat__message-textarea-container">
         <div
           *ngIf="quotedMessage"
@@ -232,3 +240,13 @@
   [ngTemplateOutlet]="voiceRecorderRef"
   [ngTemplateOutletContext]="{ service: voiceRecorderService }"
 ></ng-template>
+<ng-template
+  *ngIf="
+    isComposerOpen && (customTemplatesService.pollComposerTemplate$ | async)
+  "
+  [ngTemplateOutlet]="(customTemplatesService.pollComposerTemplate$ | async)!"
+  [ngTemplateOutletContext]="{
+    pollCompose: addPoll,
+    cancel: closePollComposer
+  }"
+></ng-template>

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

@@ -108,6 +108,10 @@ export class MessageInputComponent
    * You can enable/disable voice recordings with this input
    */
   @Input() displayVoiceRecordingButton = false;
+  /**
+   * You can enable/disable polls with this input
+   */
+  @Input() displayPollCreateButton = false;
   /**
    * Emits when a message was successfuly sent or updated
    */
@@ -122,6 +126,7 @@ export class MessageInputComponent
   isFileUploadAuthorized: boolean | undefined;
   canSendLinks: boolean | undefined;
   canSendMessages: boolean | undefined;
+  canSendPolls: boolean | undefined;
   attachmentUploads$: Observable<AttachmentUpload[]>;
   customAttachments$: Observable<Attachment[]>;
   attachmentUploadInProgressCounter$: Observable<number>;
@@ -141,6 +146,7 @@ export class MessageInputComponent
     | undefined;
   textareaPlaceholder: string;
   fileInputId = uuidv4();
+  isComposerOpen = false;
   @ViewChild('fileInput') private fileInput!: ElementRef<HTMLInputElement>;
   @ViewChild(TextareaDirective, { static: false })
   private textareaAnchor!: TextareaDirective;
@@ -152,6 +158,7 @@ export class MessageInputComponent
   private readonly defaultTextareaPlaceholder = 'streamChat.Type your message';
   private readonly slowModeTextareaPlaceholder = 'streamChat.Slow Mode ON';
   private messageToEdit?: StreamMessage;
+  private pollId: string | undefined;
 
   constructor(
     private channelService: ChannelService,
@@ -184,13 +191,15 @@ export class MessageInputComponent
         if (channel && this.channel && channel.id !== this.channel.id) {
           this.textareaValue = '';
           this.attachmentService.resetAttachmentUploads();
+          this.pollId = undefined;
           this.voiceRecorderService.isRecorderVisible$.next(false);
         }
         const capabilities = channel?.data?.own_capabilities as string[];
         if (capabilities) {
           this.isFileUploadAuthorized =
             capabilities.indexOf('upload-file') !== -1;
           this.canSendLinks = capabilities.indexOf('send-links') !== -1;
+          this.canSendPolls = capabilities.indexOf('send-poll') !== -1;
           this.channel = channel;
           this.setCanSendMessages();
         }
@@ -377,7 +386,8 @@ export class MessageInputComponent
     const textContainsOnlySpaceChars = !text.replace(/ /g, ''); //spcae
     if (
       (!text || textContainsOnlySpaceChars) &&
-      (!attachments || attachments.length === 0)
+      (!attachments || attachments.length === 0) &&
+      !this.pollId
     ) {
       return;
     }
@@ -390,8 +400,10 @@ export class MessageInputComponent
       );
       return;
     }
+    const pollId = this.pollId;
     if (!this.isUpdate) {
       this.textareaValue = '';
+      this.pollId = undefined;
     }
     try {
       const message = await (this.isUpdate
@@ -405,7 +417,9 @@ export class MessageInputComponent
             attachments,
             this.mentionedUsers,
             this.parentMessageId,
-            this.quotedMessage?.id
+            this.quotedMessage?.id,
+            undefined,
+            pollId
           ));
       this.messageUpdate.emit({ message });
       if (this.isUpdate) {
@@ -509,6 +523,20 @@ export class MessageInputComponent
     }
   }
 
+  openPollComposer() {
+    this.isComposerOpen = true;
+  }
+
+  closePollComposer = () => {
+    this.isComposerOpen = false;
+  };
+
+  addPoll = (pollId: string) => {
+    this.isComposerOpen = false;
+    this.pollId = pollId;
+    this.messageSent();
+  };
+
   async voiceRecordingReady(recording: AudioRecording) {
     try {
       await this.attachmentService.uploadVoiceRecording(recording);
@@ -641,8 +669,10 @@ export class MessageInputComponent
         this.message!.attachments || []
       );
       this.textareaValue = this.message!.text || '';
+      this.pollId = this.message!.poll_id;
     } else {
       this.textareaValue = '';
+      this.pollId = undefined;
     }
   }
 }