> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversation Summary

> An AI-powered component that displays a conversation summary panel with loading, empty, and error states

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatConversationSummaryComponent` |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Import | `import { CometChatConversationSummaryComponent } from "@cometchat/chat-uikit-angular";` |
  | Selector | `<cometchat-conversation-summary>` — the class name is NOT a valid tag |
  | CSS root class | `.cometchat-conversation-summary` |
  | Standalone | Add `CometChatConversationSummaryComponent` to the consuming component's `imports: []` or it renders **nothing**, silently |
  | Primary output | — (no outputs) |
  | Prerequisites | `CometChatUIKit.initFromSettings()` resolved **and** `login()` complete before render — see [Integration](/ui-kit/angular/integration) |
  | Sizing | Fills its container — an ancestor without a resolved height collapses it to 0px |
  | Full props | See [Properties](#properties) |
  | Events | See [Events](#events) |
  | Customization | See [Customization](#customization) |
  | Related | [Components overview](/ui-kit/angular/components/components-overview) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

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`

<Info>
  **Live Preview** — default conversation summary preview.
  [Open in Storybook ↗](https://storybook.cometchat.io/angular/?path=/story/components-ai-conversation-summary--default)
</Info>

<iframe src="https://storybook.cometchat.io/angular/iframe.html?id=components-ai-conversation-summary--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "150px", border: "1px solid #e0e0e0"}} title="CometChat Conversation Summary — Default" allow="clipboard-write" />

## Basic Usage

```typescript expandable theme={null}
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:

```css theme={null}
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

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.