Basic PoC

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

@@ -54,3 +54,19 @@
 <ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
   <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
 </ng-template>
+
+<ng-template
+  #messageTextWithPole
+  let-message="message"
+  let-shouldTranslate="shouldTranslate"
+  let-isQuoted="isQuoted"
+>
+  <div *ngIf="message?.poll_id">
+    <app-poll [pollId]="message?.poll_id"></app-poll>
+  </div>
+  <stream-message-text
+    [message]="message"
+    [shouldTranslate]="shouldTranslate"
+    [isQuoted]="isQuoted"
+  ></stream-message-text>
+</ng-template>

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

@@ -14,6 +14,7 @@ import {
   CustomTemplatesService,
   ThemeService,
   AvatarContext,
+  MessageTextContext,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 import names from 'starwars-names';
@@ -31,6 +32,8 @@ export class AppComponent implements AfterViewInit {
   emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
   @ViewChild('avatar') avatarTemplate!: TemplateRef<AvatarContext>;
   theme$: Observable<string>;
+  @ViewChild('messageTextWithPole')
+  messageTextWithPole!: TemplateRef<MessageTextContext>;
   counter = 0;
 
   constructor(
@@ -59,6 +62,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 +82,9 @@ export class AppComponent implements AfterViewInit {
     this.customTemplateService.emojiPickerTemplate$.next(
       this.emojiPickerTemplate
     );
+    this.customTemplateService.messageTextTemplate$.next(
+      this.messageTextWithPole
+    );
   }
 
   closeMenu(event: Event) {

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

@@ -11,9 +11,15 @@ import {
 } from 'stream-chat-angular';
 import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
+import { PollComponent } from './poll/poll.component';
 
 @NgModule({
-  declarations: [AppComponent, CustomMessageComponent, EmojiPickerComponent],
+  declarations: [
+    AppComponent,
+    CustomMessageComponent,
+    EmojiPickerComponent,
+    PollComponent,
+  ],
   imports: [
     BrowserModule,
     TranslateModule.forRoot(),

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

@@ -0,0 +1,70 @@
+<div class="poll-container" *ngIf="pollState">
+  <!-- Poll Header -->
+  <div class="poll-header">
+    <h3 class="poll-title">{{ pollState.name }}</h3>
+    <div class="poll-meta" *ngIf="pollState.description">
+      <p class="poll-description">{{ pollState.description }}</p>
+    </div>
+    <div class="poll-stats">
+      <span class="total-votes">Total votes: {{ getTotalVotes() }}</span>
+      <span class="max-votes" *ngIf="pollState.max_votes_allowed > 1">
+        (Max {{ pollState.max_votes_allowed }} votes per user)
+      </span>
+    </div>
+  </div>
+
+  <!-- Poll Options -->
+  <div
+    class="poll-options"
+    *ngIf="pollState.options && pollState.options.length > 0"
+  >
+    <div
+      class="poll-option"
+      *ngFor="let option of pollState.options; trackBy: trackByOptionId"
+      [class.user-voted]="hasUserVotedForOption(option.id)"
+    >
+      <div class="option-content">
+        <div class="option-text">{{ option.text }}</div>
+        <div class="option-votes">
+          <span class="vote-count"
+            >{{ pollState.vote_counts_by_option[option.id] ?? 0 }} vote{{
+              pollState.vote_counts_by_option[option.id] !== 1 ? "s" : ""
+            }}</span
+          >
+          <span
+            class="user-vote-indicator"
+            *ngIf="hasUserVotedForOption(option.id)"
+          >
+            ✓ You voted
+          </span>
+        </div>
+      </div>
+      <div class="vote-bar">
+        <div
+          class="vote-fill"
+          [style.width.%]="
+            getVotePercentage(pollState.vote_counts_by_option[option.id] ?? 0)
+          "
+        ></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- No Options Message -->
+  <div
+    class="no-options"
+    *ngIf="!pollState.options || pollState.options.length === 0"
+  >
+    <p>No options available for this poll.</p>
+  </div>
+
+  <!-- Poll Status -->
+  <div class="poll-status" *ngIf="pollState.is_closed">
+    <span class="closed-indicator">🔒 Poll Closed</span>
+  </div>
+</div>
+
+<!-- Loading State -->
+<div class="poll-loading" *ngIf="!pollState">
+  <p>Loading poll...</p>
+</div>

projects/sample-app/src/app/poll/poll.component.scss

@@ -0,0 +1,206 @@
+.poll-container {
+  background: #ffffff;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 16px 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.poll-header {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #f0f0f0;
+  padding-bottom: 16px;
+}
+
+.poll-title {
+  margin: 0 0 8px 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.poll-description {
+  margin: 0 0 12px 0;
+  color: #6c757d;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.poll-stats {
+  display: flex;
+  gap: 12px;
+  font-size: 0.85rem;
+  color: #6c757d;
+}
+
+.total-votes {
+  font-weight: 500;
+}
+
+.max-votes {
+  color: #adb5bd;
+}
+
+.poll-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.poll-option {
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  padding: 16px;
+  background: #fafbfc;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    border-color: #007bff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
+  }
+
+  &.user-voted {
+    border-color: #28a745;
+    background: #f8fff9;
+
+    .option-text {
+      color: #155724;
+      font-weight: 500;
+    }
+  }
+}
+
+.option-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.option-text {
+  font-size: 1rem;
+  color: #2c3e50;
+  flex: 1;
+  margin-right: 12px;
+}
+
+.option-votes {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.vote-count {
+  font-size: 0.85rem;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.user-vote-indicator {
+  font-size: 0.75rem;
+  color: #28a745;
+  font-weight: 600;
+  background: #d4edda;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.vote-bar {
+  height: 4px;
+  background: #e9ecef;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.vote-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #0056b3);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+  position: relative;
+
+  .poll-option.user-voted & {
+    background: linear-gradient(90deg, #28a745, #1e7e34);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    animation: shimmer 2s infinite;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.no-options {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.poll-status {
+  margin-top: 16px;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.closed-indicator {
+  color: #6c757d;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.poll-loading {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .poll-container {
+    margin: 8px 0;
+    padding: 16px;
+  }
+
+  .option-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .option-votes {
+    align-items: flex-start;
+  }
+
+  .poll-stats {
+    flex-direction: column;
+    gap: 4px;
+  }
+}