Reactions

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reactions-demo',
  standalone: true,
  imports: [CometChatReactionsComponent],
  template: `
    <cometchat-reactions
      [message]="message"
      [alignment]="'left'"
      (reactionClick)="onReactionClick($event)">
    </cometchat-reactions>
  `
})
export class ReactionsDemoComponent {
  message!: CometChat.BaseMessage;

  onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void {
    const emoji = event.reaction.getReaction();
    const isReactedByMe = event.reaction.getReactedByMe();
    console.log(`${isReactedByMe ? 'Removing' : 'Adding'} reaction: ${emoji}`);
  }
}

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatReactionsComponent } from '@cometchat/chat-uikit-angular';
import { MessageBubbleAlignment } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-reactions-custom',
  standalone: true,
  imports: [CometChatReactionsComponent],
  template: `
    <cometchat-reactions
      [message]="message"
      [alignment]="alignment"
      [reactionsRequestBuilder]="requestBuilder"
      [hoverDebounceTime]="300"
      (reactionClick)="onReactionClick($event)"
      (reactionListItemClick)="onListItemClick($event)">
    </cometchat-reactions>
  `
})
export class ReactionsCustomComponent {
  message!: CometChat.BaseMessage;
  alignment = MessageBubbleAlignment.right;
  requestBuilder!: CometChat.ReactionsRequestBuilder;

  ngOnInit(): void {
    this.requestBuilder = new CometChat.ReactionsRequestBuilder()
      .setMessageId(this.message.getId())
      .setLimit(20);
  }

  onReactionClick(event: { reaction: CometChat.ReactionCount; message: CometChat.BaseMessage }): void {
    console.log('Reaction pill clicked:', event.reaction.getReaction());
  }

  onListItemClick(event: { reaction: CometChat.Reaction; message: CometChat.BaseMessage }): void {
    console.log('Reaction list item clicked:', event.reaction.getReaction());
  }
}

/* Reaction pills container */
.cometchat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cometchat-spacing-1);
}

/* Individual reaction pill */
.cometchat-reactions__pill {
  padding: var(--cometchat-spacing-1) var(--cometchat-spacing-2);
  border-radius: var(--cometchat-radius-max);
  border: 1px solid var(--cometchat-border-color-light);
  background: var(--cometchat-background-color-01);
  cursor: pointer;
}

/* Pill reacted by current user */
.cometchat-reactions__pill--reacted {
  border-color: var(--cometchat-primary-color);
  background: var(--cometchat-extended-primary-color-50);
}

/* Pill hover state */
.cometchat-reactions__pill:hover {
  background: var(--cometchat-background-color-02);
}

/* More reactions button */
.cometchat-reactions__more-button {
  font: var(--cometchat-font-caption1-medium);
  color: var(--cometchat-text-color-secondary);
}

/* Light theme (default) */
:root {
  --cometchat-primary-color: #6852D6;
  --cometchat-background-color-01: #FFFFFF;
  --cometchat-border-color-light: #E8E8E8;
  --cometchat-extended-primary-color-50: #F5F3FD;
}

/* Dark theme */
[data-theme="dark"] {
  --cometchat-primary-color: #8B7BE8;
  --cometchat-background-color-01: #1A1A1A;
  --cometchat-border-color-light: #3A3A3A;
  --cometchat-extended-primary-color-50: #2D2840;
}