diff --git a/projects/stream-chat-angular/src/lib/modal/stream-modal.module.ts b/projects/stream-chat-angular/src/lib/modal/stream-modal.module.ts
new file mode 100644
index 00000000..e0168ae8
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/modal/stream-modal.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalComponent } from './modal.component';
+import { IconModule } from '../icon/icon.module';
+
+@NgModule({
+ declarations: [ModalComponent],
+ imports: [CommonModule, IconModule],
+ exports: [ModalComponent],
+})
+export class StreamModalModule {}
diff --git a/projects/stream-chat-angular/src/lib/notification-list/stream-notification.module.ts b/projects/stream-chat-angular/src/lib/notification-list/stream-notification.module.ts
new file mode 100644
index 00000000..1894a5de
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/notification-list/stream-notification.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { NotificationListComponent } from './notification-list.component';
+import { NotificationComponent } from '../notification/notification.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+ declarations: [NotificationComponent, NotificationListComponent],
+ imports: [CommonModule, TranslateModule],
+ exports: [NotificationComponent, NotificationListComponent],
+})
+export class StreamNotificationModule {}
diff --git a/projects/stream-chat-angular/src/lib/paginated-list/stream-paginated-list.module.ts b/projects/stream-chat-angular/src/lib/paginated-list/stream-paginated-list.module.ts
new file mode 100644
index 00000000..e9efa3d3
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/paginated-list/stream-paginated-list.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { PaginatedListComponent } from './paginated-list.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconModule } from '../icon/icon.module';
+
+@NgModule({
+ declarations: [PaginatedListComponent],
+ imports: [CommonModule, TranslateModule, IconModule],
+ exports: [PaginatedListComponent],
+})
+export class StreamPaginatedListModule {}
diff --git a/projects/stream-chat-angular/src/lib/polls/base-poll.component.ts b/projects/stream-chat-angular/src/lib/polls/base-poll.component.ts
new file mode 100644
index 00000000..7ddaa214
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/base-poll.component.ts
@@ -0,0 +1,123 @@
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ Input,
+ OnChanges,
+ OnDestroy,
+ SimpleChanges,
+} from '@angular/core';
+import { ChatClientService } from '../chat-client.service';
+import { Poll, User } from 'stream-chat';
+import { ChannelService } from '../channel.service';
+import { Subscription } from 'rxjs';
+import { CustomTemplatesService } from '../custom-templates.service';
+import { NotificationService } from '../notification.service';
+
+/**
+ * @internal
+ */
+@Component({
+ selector: 'stream-base-poll',
+ template: '',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export abstract class BasePollComponent
+ implements OnChanges, AfterViewInit, OnDestroy
+{
+ /**
+ * The poll id to display
+ */
+ @Input() pollId: string | undefined;
+ /**
+ * The message id the poll is attached to
+ */
+ @Input() messageId: string | undefined;
+ canVote = false;
+ canQueryVotes = false;
+ private pollStateUnsubscribe?: () => void;
+ private isViewInited = false;
+ private capabilitySubscription?: Subscription;
+ protected dismissNotificationFn: (() => void) | undefined;
+
+ constructor(
+ public customTemplatesService: CustomTemplatesService,
+ private chatClientService: ChatClientService,
+ private cdRef: ChangeDetectorRef,
+ private channelService: ChannelService,
+ protected notificationService: NotificationService
+ ) {
+ this.capabilitySubscription = this.channelService.activeChannel$.subscribe(
+ (channel) => {
+ if (channel) {
+ const capabilities = channel.data?.own_capabilities as string[];
+ this.canVote = capabilities.indexOf('cast-poll-vote') !== -1;
+ this.canQueryVotes = capabilities.indexOf('query-poll-votes') !== -1;
+ }
+ }
+ );
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['pollId']) {
+ if (this.pollId) {
+ this.setupStateStoreSelector();
+ } else {
+ this.pollStateUnsubscribe?.();
+ }
+ this.dismissNotificationFn?.();
+ }
+ }
+
+ ngAfterViewInit(): void {
+ this.isViewInited = true;
+ }
+
+ ngOnDestroy(): void {
+ this.pollStateUnsubscribe?.();
+ this.dismissNotificationFn?.();
+ this.capabilitySubscription?.unsubscribe();
+ }
+
+ protected get poll(): Poll | undefined {
+ return this.chatClientService.chatClient.polls.fromState(this.pollId ?? '');
+ }
+
+ protected setupStateStoreSelector(): void {
+ this.pollStateUnsubscribe?.();
+ const poll = this.chatClientService.chatClient.polls.fromState(
+ this.pollId ?? ''
+ );
+ if (poll) {
+ this.pollStateUnsubscribe = this.stateStoreSelector(poll, () => {
+ this.markForCheck();
+ });
+ }
+ }
+
+ protected addNotification(
+ ...args: Parameters<
+ typeof this.notificationService.addTemporaryNotification
+ >
+ ) {
+ this.dismissNotificationFn?.();
+ this.dismissNotificationFn =
+ this.notificationService.addTemporaryNotification(...args);
+ }
+
+ protected abstract stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void;
+
+ protected get currentUser(): User | undefined {
+ return this.chatClientService.chatClient.user;
+ }
+
+ protected markForCheck(): void {
+ if (this.isViewInited) {
+ this.cdRef.detectChanges();
+ }
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.html b/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.html
new file mode 100644
index 00000000..fc13dfdd
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.html
@@ -0,0 +1,40 @@
+
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.ts b/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.ts
new file mode 100644
index 00000000..19e76944
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/add-option/add-option.component.ts
@@ -0,0 +1,78 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ HostBinding,
+ Input,
+} from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { BasePollComponent } from '../../base-poll.component';
+import { Poll, PollOption } from 'stream-chat';
+import { createUniqueValidator } from '../../unique.validator';
+
+/**
+ *
+ */
+@Component({
+ selector: 'stream-add-option',
+ templateUrl: './add-option.component.html',
+ styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddOptionComponent extends BasePollComponent {
+ @HostBinding('class') class = 'str-chat__dialog';
+ /**
+ * The callback to close the modal the component is displayed in
+ */
+ @Input() closeModal: () => void = () => {};
+ formGroup = new FormGroup({
+ text: new FormControl('', [
+ Validators.required,
+ createUniqueValidator((value) => {
+ return !this.options.some(
+ (option) =>
+ option.text.trim().toLowerCase() === value.trim().toLowerCase()
+ );
+ }),
+ ]),
+ });
+ options: PollOption[] = [];
+
+ async addOption() {
+ if (this.formGroup.invalid || !this.messageId) {
+ return;
+ }
+ try {
+ await this.poll?.createOption({
+ text: this.formGroup.value.text!,
+ });
+ this.closeModal();
+ this.markForCheck();
+ } catch (error) {
+ this.notificationService.addTemporaryNotification(
+ 'streamChat.Failed to add option ({{ message }})',
+ 'error',
+ undefined,
+ { message: error }
+ );
+ this.markForCheck();
+ throw error;
+ }
+ }
+
+ protected stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void {
+ const unsubscribe = poll.state.subscribeWithSelector(
+ (state) => ({
+ options: state.options,
+ }),
+ (state) => {
+ this.options = state.options;
+ markForCheck();
+ }
+ );
+
+ return unsubscribe;
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html
new file mode 100644
index 00000000..ba5bef51
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.html
@@ -0,0 +1,155 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
streamChat.End vote
+
+ streamChat.After a poll is closed, no more votes can be cast
+
+
+
+
+
+
+
+
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.ts b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.ts
new file mode 100644
index 00000000..f1bb9c65
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-actions.component.ts
@@ -0,0 +1,154 @@
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ Input,
+ TemplateRef,
+ ViewChild,
+} from '@angular/core';
+import { BasePollComponent } from '../base-poll.component';
+import { Poll, PollAnswer, PollOption } from 'stream-chat';
+import { ModalContext } from '../../types';
+import { CustomTemplatesService } from '../../custom-templates.service';
+import { ChatClientService } from '../../chat-client.service';
+import { ChannelService } from '../../channel.service';
+import { MessageActionsService } from '../../message-actions.service';
+import { NotificationService } from '../../notification.service';
+
+type Action =
+ | 'allOptions'
+ | 'suggestOption'
+ | 'addAnswer'
+ | 'viewComments'
+ | 'viewResults'
+ | 'endVote';
+
+/**
+ *
+ */
+@Component({
+ selector: 'stream-poll-actions',
+ templateUrl: './poll-actions.component.html',
+ styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PollActionsComponent extends BasePollComponent {
+ /**
+ * If there are more options than this number, the "See all options" button will be displayed
+ */
+ @Input() maxOptionsDisplayed: number | undefined = 10;
+ /**
+ * The maximum number of options allowed for the poll, this is defined by Stream API
+ */
+ @Input() maxPollOptions = 100;
+ name = '';
+ options: PollOption[] = [];
+ isClosed = false;
+ allowUserSuggestions = false;
+ allowAnswers = false;
+ answerCount = 0;
+ isOwnPoll = false;
+ ownAnwer: PollAnswer | undefined;
+ selectedAction: Action | undefined = undefined;
+ isModalOpen = false;
+ @ViewChild('allOptions') allOptions!: TemplateRef
;
+ @ViewChild('suggestOption') suggestOption!: TemplateRef;
+ @ViewChild('addAnswer') addAnswer!: TemplateRef;
+ @ViewChild('viewComments') viewComments!: TemplateRef;
+ @ViewChild('viewResults') viewResults!: TemplateRef;
+ @ViewChild('endVote') endVote!: TemplateRef;
+
+ constructor(
+ customTemplatesService: CustomTemplatesService,
+ chatClientService: ChatClientService,
+ cdRef: ChangeDetectorRef,
+ channelService: ChannelService,
+ notificationService: NotificationService,
+ private messageService: MessageActionsService
+ ) {
+ super(
+ customTemplatesService,
+ chatClientService,
+ cdRef,
+ channelService,
+ notificationService
+ );
+ }
+
+ protected stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void {
+ const unsubscribe = poll.state.subscribeWithSelector(
+ (state) => ({
+ options: state.options,
+ is_closed: state.is_closed,
+ allow_user_suggested_options: state.allow_user_suggested_options,
+ allow_answers: state.allow_answers,
+ answer_count: state.answers_count,
+ created_by: state.created_by,
+ name: state.name,
+ own_answer: state.ownAnswer,
+ max_votes_allowed: state.max_votes_allowed,
+ own_votes_by_option_id: state.ownVotesByOptionId,
+ }),
+ (state) => {
+ this.options = state.options;
+ this.isClosed = state.is_closed ?? false;
+ this.allowUserSuggestions = state.allow_user_suggested_options ?? false;
+ this.allowAnswers = state.allow_answers ?? false;
+ this.answerCount = state.answer_count ?? 0;
+ this.isOwnPoll = state.created_by?.id === this.currentUser?.id;
+ this.name = state.name;
+ this.ownAnwer = state.own_answer ?? undefined;
+ markForCheck();
+ }
+ );
+
+ return unsubscribe;
+ }
+
+ modalOpened = (action: Action) => {
+ this.selectedAction = action;
+ if (!this.isModalOpen) {
+ this.isModalOpen = true;
+ this.messageService.modalOpenedForMessage.next(this.messageId);
+ }
+ };
+
+ modalClosed = () => {
+ this.selectedAction = undefined;
+ if (this.isModalOpen) {
+ this.isModalOpen = false;
+ this.messageService.modalOpenedForMessage.next(undefined);
+ this.markForCheck();
+ }
+ };
+
+ async closePoll() {
+ try {
+ await this.poll?.close();
+ this.modalClosed();
+ this.markForCheck();
+ } catch (error) {
+ this.notificationService.addTemporaryNotification(
+ 'streamChat.Failed to end vote'
+ );
+ throw error;
+ }
+ }
+
+ getModalContext(): ModalContext {
+ return {
+ isOpen: this.isModalOpen,
+ isOpenChangeHandler: (isOpen: boolean) => {
+ if (isOpen) {
+ this.modalOpened(this.selectedAction!);
+ } else {
+ this.modalClosed();
+ }
+ },
+ content: this[this.selectedAction!],
+ };
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-answers-list/poll-answers-list.component.html b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-answers-list/poll-answers-list.component.html
new file mode 100644
index 00000000..3b06069d
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-answers-list/poll-answers-list.component.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+ {{ answer.answer_text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote-results-list/poll-vote-results-list.component.ts b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote-results-list/poll-vote-results-list.component.ts
new file mode 100644
index 00000000..bf7a2340
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote-results-list/poll-vote-results-list.component.ts
@@ -0,0 +1,99 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ OnChanges,
+ SimpleChanges,
+} from '@angular/core';
+import { BasePollComponent } from '../../../base-poll.component';
+import { Poll, PollOption, PollVote } from 'stream-chat';
+
+/**
+ *
+ */
+@Component({
+ selector: 'stream-poll-vote-results-list',
+ templateUrl: './poll-vote-results-list.component.html',
+ styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PollVoteResultsListComponent
+ extends BasePollComponent
+ implements OnChanges
+{
+ /**
+ * The poll option to display the votes for
+ */
+ @Input() option: PollOption | undefined;
+ isWinner = false;
+ voteCount = 0;
+ isLoading = false;
+ next?: string | undefined;
+ votes: PollVote[] = [];
+
+ ngOnChanges(changes: SimpleChanges): void {
+ super.ngOnChanges(changes);
+ if (changes['option']) {
+ this.setupStateStoreSelector();
+ this.next = undefined;
+ this.votes = [];
+ void this.loadVotes();
+ }
+ }
+
+ async loadVotes() {
+ if (!this.poll) {
+ return;
+ }
+ try {
+ this.isLoading = true;
+ const response = await this.poll.queryOptionVotes({
+ filter: {
+ option_id: this.option?.id ?? '',
+ },
+ sort: { created_at: -1 },
+ options: {
+ next: this.next,
+ },
+ });
+
+ this.next = response.next;
+ this.votes = [...this.votes, ...response.votes];
+ this.markForCheck();
+ } catch (error) {
+ this.notificationService.addTemporaryNotification(
+ 'streamChat.Error loading votes'
+ );
+ throw error;
+ this.markForCheck();
+ } finally {
+ this.isLoading = false;
+ this.markForCheck();
+ }
+ }
+
+ trackByVoteId = (_: number, vote: PollVote) => {
+ return vote.id;
+ };
+
+ protected stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void {
+ const subscribe = poll.state.subscribeWithSelector(
+ (state) => ({
+ voteCount: state.vote_counts_by_option[this.option?.id ?? ''],
+ maxVotedOptionIds: state.maxVotedOptionIds,
+ }),
+ (state) => {
+ this.isWinner =
+ state.maxVotedOptionIds?.includes(this.option?.id ?? '') &&
+ state.maxVotedOptionIds.length === 1;
+ this.voteCount = state.voteCount ?? 0;
+ markForCheck();
+ }
+ );
+
+ return subscribe;
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote/poll-vote.component.html b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote/poll-vote.component.html
new file mode 100644
index 00000000..bc9a9c7c
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-actions/poll-results/poll-vote/poll-vote.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+ {{ vote?.user?.name ?? anonymousTranslation }}
+
+
+
+ {{ parseDate(vote!.created_at) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ option?.text }}
+
+
+
+
+
+
+
+ {{ 'streamChat.{{ count }} votes' | translate:{count: voteCount} }}
+
+
+ {{ voteCount }}
+
+
+
+
+
+
+
+
+
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-options-list/poll-options-list.component.ts b/projects/stream-chat-angular/src/lib/polls/poll-options-list/poll-options-list.component.ts
new file mode 100644
index 00000000..055b3f5e
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-options-list/poll-options-list.component.ts
@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { BasePollComponent } from '../base-poll.component';
+import { Poll, PollOption } from 'stream-chat';
+
+/**
+ *
+ */
+@Component({
+ selector: 'stream-poll-options-list',
+ templateUrl: './poll-options-list.component.html',
+ styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PollOptionsListComponent extends BasePollComponent {
+ /**
+ * How many options should be displayed. If there are more options than this number, use the poll actions to display all options
+ */
+ @Input() maxOptionsDisplayed: number | undefined = 10;
+ options: PollOption[] = [];
+
+ protected stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void {
+ const unsubscribe = poll.state.subscribeWithSelector(
+ (state) => ({
+ options: state.options,
+ }),
+ (state) => {
+ this.options = state.options;
+ markForCheck();
+ }
+ );
+
+ return unsubscribe;
+ }
+
+ trackByOptionId(_: number, option: PollOption) {
+ return option.id;
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.html b/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.html
new file mode 100644
index 00000000..1e0b6a82
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.html
@@ -0,0 +1,7 @@
+
diff --git a/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.ts b/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.ts
new file mode 100644
index 00000000..f080eec2
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll-preview/poll-preview.component.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BasePollComponent } from '../base-poll.component';
+import { Poll } from 'stream-chat';
+
+/**
+ *
+ */
+@Component({
+ selector: 'stream-poll-preview',
+ templateUrl: './poll-preview.component.html',
+ styles: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PollPreviewComponent extends BasePollComponent {
+ name = '';
+ isClosed = false;
+
+ protected stateStoreSelector(
+ poll: Poll,
+ markForCheck: () => void
+ ): () => void {
+ const unsubscribe = poll.state.subscribeWithSelector(
+ (state) => ({
+ name: state.name,
+ is_closed: state.is_closed,
+ }),
+ (state) => {
+ this.name = state.name;
+ this.isClosed = state.is_closed ?? false;
+ markForCheck();
+ }
+ );
+
+ return unsubscribe;
+ }
+}
diff --git a/projects/stream-chat-angular/src/lib/polls/poll/poll.component.html b/projects/stream-chat-angular/src/lib/polls/poll/poll.component.html
new file mode 100644
index 00000000..23137ce2
--- /dev/null
+++ b/projects/stream-chat-angular/src/lib/polls/poll/poll.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+