Skip to main content
The CometChatConversationSummary component displays an AI-generated conversation summary in a panel with a localized title, close button, and body area. It fetches the summary via a provided callback on initialization, showing a loading shimmer during the fetch, then transitions to loaded, empty, or error state.

​
Overview

  • AI-Generated Summary: Fetches a conversation summary from the CometChat AI extension
  • State Management: Signal-based state transitions between loading, loaded, empty, and error
  • Localized UI: All text rendered via the translate pipe
  • Keyboard Accessible: Close button is operable via Enter and Space keys
  • OnPush Change Detection: Efficient rendering with ChangeDetectionStrategy.OnPush
Live Preview — default conversation summary preview. Open in Storybook ↗

​
Basic Usage

import { Component } from '@angular/core';
import { CometChatConversationSummaryComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-summary-demo',
  standalone: true,
  imports: [CometChatConversationSummaryComponent],
  template: `
    <cometchat-conversation-summary
      [getConversationSummary]="fetchSummary"
      [closeCallback]="onClose">
    </cometchat-conversation-summary>
  `
})
export class SummaryDemoComponent {
  fetchSummary = async (): Promise<string> => {
    // Replace with actual SDK call
    return 'The conversation covered project deadlines and task assignments.';
  };

  onClose = (): void => {
    console.log('Summary panel closed');
  };
}

​
Properties

PropertyTypeDefaultDescription
getConversationSummary() => Promise<string>undefinedCallback that fetches the conversation summary. Returns a Promise resolving to the summary text.
closeCallback() => voidundefinedCallback invoked when the close button is clicked to dismiss the panel.

​
Events

This component does not emit any @Output() events. Interaction is handled via the closeCallback input.

​
Customization

​
Styling with CSS Variables

The component uses BEM-named CSS classes prefixed with cometchat-conversation-summary and references standard CometChat CSS variables for theming: 
cometchat-conversation-summary {
  --cometchat-background-color-01: #ffffff;
  --cometchat-text-color-primary: #141414;
  --cometchat-text-color-secondary: #727272;
  --cometchat-primary-color: #6852D6;
  --cometchat-spacing-3: 12px;
  --cometchat-spacing-4: 16px;
}

​
Dark Theme

[data-theme="dark"] cometchat-conversation-summary {
  --cometchat-background-color-01: #1a1a1a;
  --cometchat-text-color-primary: #ffffff;
  --cometchat-text-color-secondary: #cccccc;
}