Conversation Summary - CometChat Docs

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

Property	Type	Default	Description
`getConversationSummary`	`() => Promise<string>`	`undefined`	Callback that fetches the conversation summary. Returns a Promise resolving to the summary text.
`closeCallback`	`() => void`	`undefined`	Callback 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;
}

​Overview

​Basic Usage

​Properties

​Events

​Customization

​Styling with CSS Variables

​Dark Theme

Overview

Basic Usage

Properties

Events

Customization

Styling with CSS Variables

Dark Theme