Generate Conversation Summaries

AI Agent Component Spec

{
  "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 AI-generated summaries of conversation history, helping users quickly catch up on long discussions.",
  "cssRootClass": ".cometchat-conversation-summary",
  "dashboardSetup": "Enable Conversation Summary in CometChat Dashboard > Extensions > Smart Chat Features",
  "autoIntegration": "Available in CometChatMessageList header when enabled"
}

Overview

This guide shows you how to add AI-powered conversation summaries to your chat. Summaries help users quickly understand the context of long conversations without reading every message. Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

React.js setup complete
Messaging configured
CometChat Pro or Enterprise plan (AI features)

Steps

Step 1: Enable Conversation Summary in Dashboard

Go to your CometChat Dashboard
Navigate to Extensions → Smart Chat Features
Enable Conversation Summary

Step 2: Auto-Integration

Once enabled, conversation summaries are available in the message list:

import {
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithSummary({ user }: { user: CometChat.User }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}

export default ChatWithSummary;

Users can access the summary through the message list header or context menu.

Step 3: Display Summary on Demand

Show summaries when users need to catch up:

import { useState } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithSummaryButton({ user }: { user: CometChat.User }) {
  const [showSummary, setShowSummary] = useState(false);
  const [summary, setSummary] = useState<string | null>(null);

  const fetchSummary = async () => {
    try {
      const response = await CometChat.callExtension(
        "conversation-summary",
        "POST",
        "v1/summarize",
        {
          receiverId: user.getUid(),
          receiverType: CometChat.RECEIVER_TYPE.USER,
        }
      );
      setSummary(response.data?.summary || "No summary available");
      setShowSummary(true);
    } catch (error) {
      console.error("Error fetching summary:", error);
    }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <div className="chat-header">
        <button onClick={fetchSummary}>Get Summary</button>
      </div>

      {showSummary && summary && (
        <div className="summary-panel">
          <h4>Conversation Summary</h4>
          <p>{summary}</p>
          <button onClick={() => setShowSummary(false)}>Close</button>
        </div>
      )}

      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}

Complete Example

Full implementation with summary panel:

import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function ConversationSummaryChat() {
  const [user, setUser] = useState<CometChat.User | null>(null);
  const [summary, setSummary] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [showSummary, setShowSummary] = useState(false);

  useEffect(() => {
    CometChat.getUser("USER_ID").then(setUser);
  }, []);

  const fetchSummary = async () => {
    if (!user) return;
    
    setLoading(true);
    try {
      const response = await CometChat.callExtension(
        "conversation-summary",
        "POST",
        "v1/summarize",
        {
          receiverId: user.getUid(),
          receiverType: CometChat.RECEIVER_TYPE.USER,
        }
      );
      setSummary(response.data?.summary || "No summary available");
      setShowSummary(true);
    } catch (error) {
      console.error("Error:", error);
      setSummary("Unable to generate summary");
    } finally {
      setLoading(false);
    }
  };

  if (!user) return <div>Loading...</div>;

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <div className="header-with-summary">
        <CometChatMessageHeader user={user} />
        <button 
          onClick={fetchSummary} 
          disabled={loading}
          className="summary-button"
        >
          {loading ? "Generating..." : "📝 Summary"}
        </button>
      </div>

      {showSummary && (
        <div className="summary-overlay">
          <div className="summary-card">
            <div className="summary-header">
              <h3>Conversation Summary</h3>
              <button onClick={() => setShowSummary(false)}>×</button>
            </div>
            <div className="summary-content">
              <p>{summary}</p>
            </div>
          </div>
        </div>
      )}

      <div style={{ flex: 1, overflow: "hidden" }}>
        <CometChatMessageList user={user} />
      </div>
      
      <CometChatMessageComposer user={user} />
    </div>
  );
}

export default ConversationSummaryChat;

Advanced Configuration

Fetch Summary for Groups

Get summaries for group conversations:

import { CometChat } from "@cometchat/chat-sdk-javascript";

async function getGroupSummary(groupId: string): Promise<string> {
  try {
    const response = await CometChat.callExtension(
      "conversation-summary",
      "POST",
      "v1/summarize",
      {
        receiverId: groupId,
        receiverType: CometChat.RECEIVER_TYPE.GROUP,
      }
    );
    return response.data?.summary || "No summary available";
  } catch (error) {
    console.error("Error fetching group summary:", error);
    throw error;
  }
}

Summary with Time Range

Get summaries for specific time periods:

import { CometChat } from "@cometchat/chat-sdk-javascript";

async function getSummaryForPeriod(
  receiverId: string,
  receiverType: string,
  fromTimestamp: number,
  toTimestamp: number
): Promise<string> {
  try {
    const response = await CometChat.callExtension(
      "conversation-summary",
      "POST",
      "v1/summarize",
      {
        receiverId,
        receiverType,
        fromTimestamp,
        toTimestamp,
      }
    );
    return response.data?.summary || "No summary available";
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

// Get summary for last 24 hours
const now = Math.floor(Date.now() / 1000);
const yesterday = now - 86400;
getSummaryForPeriod("user_123", "user", yesterday, now);

Custom Summary Component

Build a reusable summary component:

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

interface SummaryPanelProps {
  receiverId: string;
  receiverType: string;
  onClose: () => void;
}

function SummaryPanel({ receiverId, receiverType, onClose }: SummaryPanelProps) {
  const [summary, setSummary] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useState(() => {
    CometChat.callExtension(
      "conversation-summary",
      "POST",
      "v1/summarize",
      { receiverId, receiverType }
    )
      .then((response) => {
        setSummary(response.data?.summary || "No summary available");
      })
      .catch((err) => {
        setError("Failed to generate summary");
        console.error(err);
      })
      .finally(() => setLoading(false));
  });

  return (
    <div className="summary-panel">
      <div className="summary-panel__header">
        <h3>Conversation Summary</h3>
        <button onClick={onClose} aria-label="Close">×</button>
      </div>
      
      <div className="summary-panel__content">
        {loading && <div className="loading">Generating summary...</div>}
        {error && <div className="error">{error}</div>}
        {summary && <p>{summary}</p>}
      </div>
    </div>
  );
}

Styling

Customize summary appearance:

.summary-button {
  padding: 8px 16px;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.summary-button:hover {
  background: #6852d6;
  color: #ffffff;
  border-color: #6852d6;
}

.summary-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.summary-card {
  background: #ffffff;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.summary-header h3 {
  margin: 0;
  font-size: 18px;
}

.summary-content {
  padding: 20px;
  line-height: 1.6;
  color: #333;
}

Common Issues

Conversation Summary requires sufficient message history. New conversations may not have enough context for meaningful summaries.

Issue	Solution
Summary not available	Ensure extension is enabled in Dashboard
Empty or generic summary	Need more messages for context (10+ recommended)
Slow generation	AI processing takes 2-5 seconds for long conversations
Feature unavailable	Upgrade to Pro or Enterprise plan

Generate Conversation Summaries

Overview

Prerequisites

Steps

Step 1: Enable Conversation Summary in Dashboard

Step 2: Auto-Integration

Step 3: Display Summary on Demand

Complete Example

Fetch Summary for Groups

Summary with Time Range

Custom Summary Component

Styling

Common Issues

Next Steps

Smart Replies

Conversation Starters

AI Assistant

AI Assistant Chat

Messaging

​Overview

​Prerequisites

​Steps

​Step 1: Enable Conversation Summary in Dashboard

​Step 2: Auto-Integration

​Step 3: Display Summary on Demand

​Complete Example

​Fetch Summary for Groups

​Summary with Time Range

​Custom Summary Component

​Styling

​Common Issues

​Next Steps

Smart Replies

Conversation Starters

​Related Guides

AI Assistant

AI Assistant Chat

Messaging

Overview

Prerequisites

Steps

Step 1: Enable Conversation Summary in Dashboard

Step 2: Auto-Integration

Step 3: Display Summary on Demand

Complete Example

Fetch Summary for Groups

Summary with Time Range

Custom Summary Component

Styling

Common Issues

Next Steps

Related Guides