Conversation Summary

Displays an AI-generated conversation summary inside a card with a header, close button, and body, managing loading, loaded, error, and empty states.

AI Integration Quick Reference

{
  "component": "CometChatConversationSummary",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatConversationSummary } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays an AI-generated conversation summary inside a card with a header, close button, and body.",
  "cssRootClass": ".cometchat-conversation-summary",
  "subComponents": ["Root", "Header", "Body", "Loading", "Error", "Empty"],
  "primaryOutput": {
    "prop": "onClose",
    "type": "() => void"
  },
  "props": {
    "Root": {
      "getConversationSummary": { "type": "() => Promise<string>", "note": "Required." },
      "onClose": { "type": "() => void", "default": "undefined" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Header": {
      "title": { "type": "string", "default": "\"Conversation summary\"" },
      "showCloseButton": { "type": "boolean", "default": "true" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Body": {
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Loading": {
      "count": { "type": "number", "default": "3" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Error": {
      "message": { "type": "string", "default": "\"Looks like something went wrong\"" },
      "onRetry": { "type": "() => void", "default": "undefined" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Empty": {
      "message": { "type": "string", "default": "\"No Summary Available\"" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    }
  },
  "types": {
    "CometChatConversationSummaryState": "'loading' | 'loaded' | 'error' | 'empty'",
    "CometChatConversationSummaryContextValue": {
      "state": "CometChatConversationSummaryState",
      "summary": "string",
      "error": "Error | null",
      "onClose": "(() => void) | undefined",
      "retry": "() => void"
    }
  }
}

Where It Fits

CometChatConversationSummary is a base component that displays an AI-generated summary of a conversation inside a card. It is typically rendered inside a message list panel or a sidebar to give users a quick overview of the conversation. The consumer provides a getConversationSummary function (usually from an AI plugin or custom service), and the component handles loading, error, and empty states automatically.

import { CometChatConversationSummary } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatPanel() {
  const fetchSummary = () =>
    fetch("/api/ai/summary").then((r) => r.text());

  return (
    <div style={{ maxWidth: 500 }}>
      <CometChatConversationSummary.Root
        getConversationSummary={fetchSummary}
        onClose={() => console.log("Closed")}
      >
        <CometChatConversationSummary.Header />
        <CometChatConversationSummary.Loading />
        <CometChatConversationSummary.Error />
        <CometChatConversationSummary.Empty />
        <CometChatConversationSummary.Body />
      </CometChatConversationSummary.Root>
    </div>
  );
}

Minimal Render

import { CometChatConversationSummary } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return (
    <CometChatConversationSummary.Root
      getConversationSummary={() => Promise.resolve("Meeting discussed Q2 goals.")}
    >
      <CometChatConversationSummary.Header />
      <CometChatConversationSummary.Body />
    </CometChatConversationSummary.Root>
  );
}

Root CSS class: .cometchat-conversation-summary

Actions and Events

Callback Props

onClose

Called when the user clicks the close button or presses the Escape key while the component is focused.

<CometChatConversationSummary.Root
  getConversationSummary={fetchSummary}
  onClose={() => setShowSummary(false)}
>
  <CometChatConversationSummary.Header />
  <CometChatConversationSummary.Body />
</CometChatConversationSummary.Root>

onRetry (Error sub-component)

Called when the user clicks the retry button in the error state. Falls back to the internal retry() method if not provided.

<CometChatConversationSummary.Error
  message="Failed to load"
  onRetry={() => refetchSummary()}
/>

Custom View Slots

Slot	Sub-component	Replaces
Header	<CometChatConversationSummary.Header>	Default header with title and close button
Body	<CometChatConversationSummary.Body>	Default summary text rendering
Loading	<CometChatConversationSummary.Loading>	Default shimmer bars
Error	<CometChatConversationSummary.Error>	Default error message with retry
Empty	<CometChatConversationSummary.Empty>	Default empty message

Custom Header

Pass children to Header to replace the default title and close button.

<CometChatConversationSummary.Header>
  <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
    <span>My Custom Title</span>
    <button onClick={() => setOpen(false)}>X</button>
  </div>
</CometChatConversationSummary.Header>

Custom Error with Retry

Pass children to Error to fully replace the error view.

<CometChatConversationSummary.Error>
  <div style={{ textAlign: "center", padding: 16 }}>
    <p>Something went wrong</p>
    <button onClick={() => window.location.reload()}>Try again</button>
  </div>
</CometChatConversationSummary.Error>

Custom Loading

Pass children to Loading to replace the default shimmer bars.

<CometChatConversationSummary.Loading>
  <div style={{ padding: 16, textAlign: "center" }}>Loading summary...</div>
</CometChatConversationSummary.Loading>

Common Patterns

Without Header (Headless Usage)

Omit the Header sub-component to render just the body content.

<CometChatConversationSummary.Root getConversationSummary={fetchSummary}>
  <CometChatConversationSummary.Loading />
  <CometChatConversationSummary.Body />
</CometChatConversationSummary.Root>

Custom Header Title

<CometChatConversationSummary.Root
  getConversationSummary={fetchSummary}
  onClose={handleClose}
>
  <CometChatConversationSummary.Header title="Chat Summary" />
  <CometChatConversationSummary.Loading />
  <CometChatConversationSummary.Body />
</CometChatConversationSummary.Root>

Without Close Button

<CometChatConversationSummary.Root getConversationSummary={fetchSummary}>
  <CometChatConversationSummary.Header showCloseButton={false} />
  <CometChatConversationSummary.Loading />
  <CometChatConversationSummary.Body />
</CometChatConversationSummary.Root>

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens set on the .cometchat root wrapper.
2. Component CSS (.cometchat-conversation-summary) consumes these tokens via var().
3. Overrides target .cometchat-conversation-summary descendant selectors.

Key Selectors

Target	Selector
Root card	.cometchat-conversation-summary
Header row	.cometchat-conversation-summary__header
Header title	.cometchat-conversation-summary__header-title
Close button	.cometchat-conversation-summary__header-close-button
Body	.cometchat-conversation-summary__body
Shimmer container	.cometchat-conversation-summary__shimmer-container
Shimmer bar	.cometchat-conversation-summary__shimmer-item
Error view	.cometchat-conversation-summary__error-view
Retry button	.cometchat-conversation-summary__error-retry
Empty view	.cometchat-conversation-summary__empty-view

Example: Brand-themed summary card

App.css

.cometchat-conversation-summary {
  border-color: #6851ff;
  box-shadow: 0 4px 12px rgba(104, 81, 255, 0.15);
}

.cometchat-conversation-summary__header-title {
  color: #6851ff;
}

.cometchat-conversation-summary__error-retry {
  color: #6851ff;
  border-color: #6851ff;
}

Customization Matrix

What to change	Where	Property/API	Example
Close behavior	Root props	onClose callback	onClose={() => hide()}
Header text	Header props	title	title="Chat Summary"
Hide close button	Header props	showCloseButton	showCloseButton={false}
Error message	Error props	message	message="Failed"
Retry behavior	Error props	onRetry	onRetry={() => refetch()}
Empty message	Empty props	message	message="Nothing here"
Shimmer count	Loading props	count	count={5}
Replace any section	Sub-component	children	Pass custom JSX
Change visual styling	Global CSS	.cometchat-conversation-summary selectors	See CSS Selectors

Props

All props are optional unless noted otherwise.

---

getConversationSummary (Root)

Async function that returns a summary string. Required.

Type	() => Promise<string>
Default	—

---

onClose (Root)

Callback when the close button is clicked or Escape is pressed.

Type	() => void
Default	undefined

---

className (Root, Header, Body, Loading, Error, Empty)

Optional custom CSS class name appended to the component’s root element.

Type	string
Default	undefined

---

children (Root, Header, Body, Loading, Error, Empty)

Custom content that replaces the default rendering of the sub-component.

Type	ReactNode
Default	undefined

---

title (Header)

Custom title text displayed in the header.

Type	string
Default	"Conversation summary"

---

showCloseButton (Header)

Whether to show the close button in the header.

Type	boolean
Default	true

---

count (Loading)

Number of shimmer bars to display during loading.

Type	number
Default	3

---

message (Error)

Custom error message text.

Type	string
Default	"Looks like something went wrong"

---

onRetry (Error)

Callback to retry fetching the summary. Falls back to the internal retry mechanism if not provided.

Type	() => void
Default	undefined

---

message (Empty)

Custom empty state message text.

Type	string
Default	"No Summary Available"

---

CSS Selectors

Target	Selector
Root card	.cometchat-conversation-summary
Header row	.cometchat-conversation-summary__header
Header title	.cometchat-conversation-summary__header-title
Close button	.cometchat-conversation-summary__header-close-button
Body content	.cometchat-conversation-summary__body
Shimmer container	.cometchat-conversation-summary__shimmer-container
Shimmer bar	.cometchat-conversation-summary__shimmer-item
Error view	.cometchat-conversation-summary__error-view
Retry button	.cometchat-conversation-summary__error-retry
Empty view	.cometchat-conversation-summary__empty-view