Smart Replies - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatSmartReplies",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatSmartReplies } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Displays AI-powered reply suggestions as clickable buttons with loading, error, and empty states.",
  "cssRootClass": ".cometchat-smart-replies",
  "subComponents": ["Root", "Header", "Item", "Loading", "Error", "Empty"],
  "primaryOutput": {
    "prop": "onSuggestionClick",
    "type": "(reply: string) => void"
  },
  "props": {
    "Root": {
      "getSmartReplies": { "type": "() => Promise<string[]>", "note": "Required." },
      "onSuggestionClick": { "type": "(reply: string) => void", "default": "undefined" },
      "onClose": { "type": "() => void", "default": "undefined" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Header": {
      "title": { "type": "string", "default": "\"Suggest a reply\"" },
      "showCloseButton": { "type": "boolean", "default": "true" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    },
    "Item": {
      "reply": { "type": "string", "note": "Required." },
      "className": { "type": "string", "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 Suggestions Available\"" },
      "className": { "type": "string", "default": "undefined" },
      "children": { "type": "ReactNode", "default": "undefined" }
    }
  },
  "types": {
    "CometChatSmartRepliesState": "'loading' | 'loaded' | 'error' | 'empty'",
    "CometChatSmartRepliesContextValue": {
      "state": "CometChatSmartRepliesState",
      "replies": "string[]",
      "error": "Error | null",
      "onSuggestionClick": "((reply: string) => void) | undefined",
      "onClose": "(() => void) | undefined",
      "retry": "() => void"
    }
  }
}

Where It Fits

CometChatSmartReplies is a base component that displays AI-powered reply suggestions as clickable buttons. It is typically rendered above the message composer input, triggered by an AI action button or automatically when the AI plugin detects a suitable context. The consumer provides a getSmartReplies function (usually from an AI plugin or custom service), and the component handles loading, error, and empty states automatically. When the user clicks a suggestion, the onSuggestionClick callback fires so the parent can send or insert the reply.

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

function MessageComposerPanel() {
  const fetchReplies = () =>
    fetch("/api/ai/smart-replies").then((r) => r.json());

  return (
    <div style={{ maxWidth: 500 }}>
      <CometChatSmartReplies.Root
        getSmartReplies={fetchReplies}
        onSuggestionClick={(reply) => console.log("Send:", reply)}
        onClose={() => console.log("Closed")}
      >
        <CometChatSmartReplies.Header />
        <CometChatSmartReplies.Loading />
        <CometChatSmartReplies.Error />
        <CometChatSmartReplies.Empty />
      </CometChatSmartReplies.Root>
    </div>
  );
}

Minimal Render

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

function Demo() {
  return (
    <CometChatSmartReplies.Root
      getSmartReplies={() => Promise.resolve(["Sounds good!", "Let me check.", "Thanks!"])}
      onSuggestionClick={(reply) => console.log(reply)}
    />
  );
}

Root CSS class: .cometchat-smart-replies

Actions and Events

Callback Props

onSuggestionClick

Called when the user clicks a reply suggestion button. Receives the reply string.

<CometChatSmartReplies.Root
  getSmartReplies={fetchReplies}
  onSuggestionClick={(reply) => sendMessage(reply)}
>
  <CometChatSmartReplies.Header />
  <CometChatSmartReplies.Loading />
  <CometChatSmartReplies.Error />
  <CometChatSmartReplies.Empty />
</CometChatSmartReplies.Root>

onClose

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

<CometChatSmartReplies.Root
  getSmartReplies={fetchReplies}
  onSuggestionClick={handleReply}
  onClose={() => setShowReplies(false)}
>
  <CometChatSmartReplies.Header />
  <CometChatSmartReplies.Loading />
</CometChatSmartReplies.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.

<CometChatSmartReplies.Error
  message="Failed to load suggestions"
  onRetry={() => refetchReplies()}
/>

Custom View Slots

Slot	Sub-component	Replaces
Header	`<CometChatSmartReplies.Header>`	Default header with title and close button
Loading	`<CometChatSmartReplies.Loading>`	Default shimmer bars
Error	`<CometChatSmartReplies.Error>`	Default error message with retry
Empty	`<CometChatSmartReplies.Empty>`	Default empty message

Custom Header

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

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

Custom Error with Retry

Pass children to Error to fully replace the error view.

<CometChatSmartReplies.Error>
  <div style={{ textAlign: "center", padding: 16 }}>
    <p>Could not load suggestions</p>
    <button onClick={() => window.location.reload()}>Try again</button>
  </div>
</CometChatSmartReplies.Error>

Custom Loading

Pass children to Loading to replace the default shimmer bars.

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

Common Patterns

Simple Usage (No Children — Default Layout)

When no children are provided, the Root renders the default layout automatically.

<CometChatSmartReplies.Root
  getSmartReplies={fetchReplies}
  onSuggestionClick={(reply) => sendMessage(reply)}
  onClose={handleClose}
/>

Custom Header Title

<CometChatSmartReplies.Root
  getSmartReplies={fetchReplies}
  onSuggestionClick={handleReply}
  onClose={handleClose}
>
  <CometChatSmartReplies.Header title="AI Suggestions" />
  <CometChatSmartReplies.Loading />
  <CometChatSmartReplies.Error />
  <CometChatSmartReplies.Empty />
</CometChatSmartReplies.Root>

Without Close Button

<CometChatSmartReplies.Root
  getSmartReplies={fetchReplies}
  onSuggestionClick={handleReply}
>
  <CometChatSmartReplies.Header showCloseButton={false} />
  <CometChatSmartReplies.Loading />
  <CometChatSmartReplies.Error />
  <CometChatSmartReplies.Empty />
</CometChatSmartReplies.Root>

CSS Architecture

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

Global tokens set on the .cometchat root wrapper.
Component CSS (.cometchat-smart-replies) consumes these tokens via var().
Overrides target .cometchat-smart-replies descendant selectors.

Key Selectors

Target	Selector
Root card	`.cometchat-smart-replies`
Header row	`.cometchat-smart-replies__header`
Header title	`.cometchat-smart-replies__header-title`
Close button	`.cometchat-smart-replies__header-close-button`
Items container	`.cometchat-smart-replies__items-container`
Reply item	`.cometchat-smart-replies__item`
Shimmer container	`.cometchat-smart-replies__shimmer-container`
Shimmer bar	`.cometchat-smart-replies__shimmer-item`
Error view	`.cometchat-smart-replies__error-view`
Retry button	`.cometchat-smart-replies__error-retry`
Empty view	`.cometchat-smart-replies__empty-view`

Example: Brand-themed smart replies

App.css

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

.cometchat-smart-replies__header-title {
  color: #6851ff;
}

.cometchat-smart-replies__item:hover {
  background: rgba(104, 81, 255, 0.08);
}

.cometchat-smart-replies__error-retry {
  color: #6851ff;
  border-color: #6851ff;
}

Customization Matrix

What to change	Where	Property/API	Example
Handle reply selection	Root props	`onSuggestionClick` callback	`onSuggestionClick={(r) => send(r)}`
Close behavior	Root props	`onClose` callback	`onClose={() => hide()}`
Header text	Header props	`title`	`title="AI Suggestions"`
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-smart-replies` selectors	See CSS Selectors

Props

All props are optional unless noted otherwise.

getSmartReplies (Root)

Async function that returns an array of reply suggestion strings. Required.


Type	`() => Promise<string[]>`
Default	—

onSuggestionClick (Root)

Callback when a reply suggestion is clicked. Receives the reply string.


Type	`(reply: string) => void`
Default	`undefined`

onClose (Root)

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


Type	`() => void`
Default	`undefined`

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

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


Type	`string`
Default	`undefined`

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

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


Type	`ReactNode`
Default	`undefined`

reply (Item)

The reply text to display. Required.


Type	`string`
Default	—

title (Header)

Custom title text displayed in the header.


Type	`string`
Default	`"Suggest a reply"`

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 replies. 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 Suggestions Available"`

CSS Selectors

Target	Selector
Root card	`.cometchat-smart-replies`
Header row	`.cometchat-smart-replies__header`
Header title	`.cometchat-smart-replies__header-title`
Close button	`.cometchat-smart-replies__header-close-button`
Items container	`.cometchat-smart-replies__items-container`
Reply item button	`.cometchat-smart-replies__item`
Reply item hover	`.cometchat-smart-replies__item:hover`
Reply item focus	`.cometchat-smart-replies__item:focus-visible`
Shimmer container	`.cometchat-smart-replies__shimmer-container`
Shimmer bar	`.cometchat-smart-replies__shimmer-item`
Error view	`.cometchat-smart-replies__error-view`
Retry button	`.cometchat-smart-replies__error-retry`
Empty view	`.cometchat-smart-replies__empty-view`

Documentation Index

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onSuggestionClick

​onClose

​onRetry (Error sub-component)

​Custom View Slots

​Custom Header

​Custom Error with Retry

​Custom Loading

​Common Patterns

​Simple Usage (No Children — Default Layout)

​Custom Header Title

​Without Close Button

​CSS Architecture

​Key Selectors

​Example: Brand-themed smart replies

​Customization Matrix

​Props

​getSmartReplies (Root)

​onSuggestionClick (Root)

​onClose (Root)

​className (Root, Header, Item, Loading, Error, Empty)

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

​reply (Item)

​title (Header)

​showCloseButton (Header)

​count (Loading)

​message (Error)

​onRetry (Error)

​message (Empty)

​CSS Selectors