AI Assistant Chat

Composite AI agent chat with streaming responses, quick suggestions, new-chat reset, and chat history sidebar.

AI Agent Component Spec

{
  "component": "CometChatAIAssistantChat",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";",
  "description": "Composite AI agent chat with streaming responses, quick suggestions, new-chat reset, and chat history sidebar.",
  "cssRootClass": ".cometchat-ai-assistant-chat",
  "requiredProps": {
    "user": "CometChat.User — the AI agent user object"
  },
  "optionalProps": {
    "streamingSpeed": "number",
    "suggestedMessages": "string[]",
    "hideSuggestedMessages": "boolean",
    "hideNewChat": "boolean",
    "hideChatHistory": "boolean",
    "showBackButton": "boolean",
    "showCloseButton": "boolean",
    "loadLastAgentConversation": "boolean",
    "parentMessageId": "number",
    "aiAssistantTools": "CometChatAIAssistantTools",
    "templates": "CometChatMessageTemplate[]",
    "headerItemView": "JSX.Element",
    "headerTitleView": "JSX.Element",
    "headerSubtitleView": "JSX.Element",
    "headerLeadingView": "JSX.Element",
    "headerTrailingView": "JSX.Element",
    "headerAuxiliaryButtonView": "JSX.Element",
    "emptyChatImageView": "JSX.Element",
    "emptyChatGreetingView": "JSX.Element",
    "emptyChatIntroMessageView": "JSX.Element",
    "emptyView": "JSX.Element",
    "loadingView": "JSX.Element",
    "errorView": "JSX.Element"
  },
  "callbacks": {
    "onBackButtonClicked": "() => void",
    "onCloseButtonClicked": "() => void",
    "onSendButtonClick": "(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void",
    "onError": "(e: CometChat.CometChatException) => void"
  },
  "events": null,
  "minimalExample": "<CometChatAIAssistantChat user={agentUser} />"
}

Where It Fits

CometChatAIAssistantChat is a standalone AI chat panel. It composes an internal message header, message list, and message composer into a self-contained AI conversation experience. It requires a CometChat.User representing the AI agent.

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

function AIAssistantPanel() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <div style={{ height: "100vh", width: 480 }}>
      <CometChatAIAssistantChat user={agent} />
    </div>
  );
}

---

Minimal Render

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

function AIAssistantDemo() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} />;
}

Root CSS class: .cometchat-ai-assistant-chat

---

Actions and Events

Callback Props

onBackButtonClicked

Fires when the header back button is clicked. Requires showBackButton={true}.

Detail	Value
When it fires	User clicks the back button
Payload type	() => void

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

function AIAssistantWithBack() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      showBackButton={true}
      onBackButtonClicked={() => console.log("Back clicked")}
    />
  );
}

onCloseButtonClicked

Fires when the header close button is clicked. Requires showCloseButton={true}.

Detail	Value
When it fires	User clicks the close button
Payload type	() => void

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

function AIAssistantWithClose() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      showCloseButton={true}
      onCloseButtonClicked={() => console.log("Close clicked")}
    />
  );
}

onSendButtonClick

Fires when the composer send button is clicked.

Detail	Value
When it fires	User clicks the send button
Payload type	(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void

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

function AIAssistantWithSend() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      onSendButtonClick={(message) => console.log("Sent:", message)}
    />
  );
}

onError

Fires when the component encounters an internal error.

Detail	Value
When it fires	Any internal error during rendering or data fetching
Payload type	(error: CometChat.CometChatException) => void

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

function AIAssistantWithError() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      onError={(error) => console.error("AI chat error:", error)}
    />
  );
}

Global UI Events

The AI Assistant Chat component does not emit global UI events. Interaction handling uses the callback props above.

SDK Events (Real-Time, Automatic)

The component internally manages SDK communication for AI streaming. No manual listener attachment needed.

---

Custom View Slots

Slot	Type	Replaces
headerItemView	JSX.Element	Entire header list item
headerTitleView	JSX.Element	Header title text
headerSubtitleView	JSX.Element	Header subtitle text
headerLeadingView	JSX.Element	Header avatar / left section
headerTrailingView	JSX.Element	Header right section
headerAuxiliaryButtonView	JSX.Element	Header auxiliary buttons (New Chat, History)
emptyChatImageView	JSX.Element	Empty state image
emptyChatGreetingView	JSX.Element	Empty state greeting title
emptyChatIntroMessageView	JSX.Element	Empty state intro subtitle
emptyView	JSX.Element	Message list empty state
loadingView	JSX.Element	Loading state
errorView	JSX.Element	Error state
aiAssistantTools	CometChatAIAssistantTools	Tool/function call handlers
templates	CometChatMessageTemplate[]	Message bubble templates

emptyChatImageView

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

function AIAssistantCustomImage() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatImageView={<img src={"ICON_URL"} height={60} width={60} alt="" />}
    />
  );
}

emptyChatGreetingView

TypeScript

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

function AIAssistantCustomGreeting() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatGreetingView={
        <div className="cometchat-ai-assistant-chat__empty-chat-greeting">
          <span className="plan-name">Free Plan</span> .
          <span className="upgrade-button">Upgrade</span>
        </div>
      }
    />
  );
}

CSS

.cometchat-ai-assistant-chat__empty-chat-greeting {
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #f5f5f5;
  width: fit-content;
  align-self: center;
}

.cometchat-ai-assistant-chat__empty-chat-greeting .upgrade-button {
  color: #6852d6;
}

emptyChatIntroMessageView

TypeScript

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

function AIAssistantCustomIntro() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatIntroMessageView={
        <div className="cometchat-ai-assistant-chat__empty-chat-intro">
          Hey, nice to see you What's new?
        </div>
      }
    />
  );
}

CSS

.cometchat-ai-assistant-chat__empty-chat-intro {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: #f9f8fd;
  width: 172px;
  color: #141414;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 10px 0;
}

aiAssistantTools

Pass a CometChatAIAssistantTools instance to enable tool/function calls during assistant replies.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAIAssistantChat,
  CometChatAIAssistantTools,
} from "@cometchat/chat-uikit-react";

function AIAssistantWithTools() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  const tools = new CometChatAIAssistantTools({
    getCurrentWeather: ({ location }: { location: string }) => {
      console.log("Fetching weather for", location);
    },
    createTicket: ({ title }: { title: string }) => {
      console.log("Create ticket:", title);
    },
  });

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} aiAssistantTools={tools} />;
}

templates

Custom message templates to control message bubble rendering. See CometChatMessageTemplate.

import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatAIAssistantChat,
  ChatConfigurator,
} from "@cometchat/chat-uikit-react";

function AIAssistantWithTemplates() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  const getTemplates = () => {
    const templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
    templates.map((data) => {
      data.footerView = (message) => null;
    });
    return templates;
  };

  if (!agent) return null;

  return <CometChatAIAssistantChat user={agent} templates={getTemplates()} />;
}

---

Common Patterns

AI assistant with suggestions and history

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

function FullFeaturedAssistant() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      suggestedMessages={["What can you help with?", "Summarize my tasks", "Draft an email"]}
      loadLastAgentConversation={true}
      showBackButton={true}
      onBackButtonClicked={() => console.log("Navigate back")}
    />
  );
}

Minimal assistant — no chrome

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

function MinimalAssistant() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      hideNewChat={true}
      hideChatHistory={true}
      hideSuggestedMessages={true}
    />
  );
}

---

CSS Architecture

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

1. Global tokens (e.g., --cometchat-primary-color, --cometchat-background-color-01) set on the .cometchat root wrapper.
2. Component CSS (.cometchat-ai-assistant-chat) consumes these tokens via var().
3. Overrides target .cometchat-ai-assistant-chat descendant selectors.

Key Selectors

Target	Selector
Root	.cometchat-ai-assistant-chat
Wrapper	.cometchat-ai-assistant-chat__wrapper
Header wrapper	.cometchat-ai-assistant-chat__header-wrapper
Header auxiliary view	.cometchat-ai-assistant-chat__header-auxiliary-view
Message list wrapper	.cometchat-ai-assistant-chat__message-list-wrapper
Composer wrapper	.cometchat-ai-assistant-chat__composer-wrapper
Send button	.cometchat-ai-assistant-chat__send-button-view
Send button (active)	.cometchat-ai-assistant-chat__send-button-view--active
Send button (streaming)	.cometchat-ai-assistant-chat__send-button-view--streaming
Empty state	.cometchat-ai-assistant-chat__empty-state
Empty state content	.cometchat-ai-assistant-chat__empty-state-content
Empty state icon	.cometchat-ai-assistant-chat__empty-state-icon
Greeting message	.cometchat-ai-assistant-chat__empty-state-greeting-message
Intro message	.cometchat-ai-assistant-chat__empty-state-intro-message
Suggested messages	.cometchat-ai-assistant-chat__empty-state-suggested-messages
Suggestion pill	.cometchat-ai-assistant-chat__suggested-message-pill
Suggestion icon	.cometchat-ai-assistant-chat__suggested-message-icon
Chat history sidebar	.cometchat-ai-assistant-chat__sidebar
Sidebar open	.cometchat-ai-assistant-chat__sidebar--open
Sidebar overlay	.cometchat-ai-assistant-chat__sidebar-overlay
Copy button	.cometchat-ai-assistant-message-bubble__copy

Example: Brand-themed AI assistant

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__suggested-message-pill {
  background: #30a46c;
  color: #ffffff;
  font-size: 9px;
}

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__suggested-message-pill
  .cometchat-ai-assistant-chat__suggested-message-icon {
  background: #ffffff;
  width: 9.55px;
  height: 9.55px;
}

.cometchat-ai-assistant-chat
  .cometchat-ai-assistant-chat__header-auxiliary-view
  .cometchat-button
  .cometchat-button__icon-default {
  background: #30a46c;
}

Customization Matrix

What to change	Where	Property/API	Example
Override behavior on user interaction	Component props	on<Event> callbacks	onBackButtonClicked={() => navigate(-1)}
Toggle visibility of UI elements	Component props	hide<Feature> / show<Feature> boolean props	hideNewChat={true}
Replace a section of the UI	Component props	View slot props	emptyChatGreetingView={<div>Hello</div>}
Change colors, fonts, spacing	Global CSS	Target .cometchat-ai-assistant-chat class	.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__suggested-message-pill { background: #30a46c; }

---

Accessibility

The component composes CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer internally. Keyboard navigation, focus management, and ARIA attributes are inherited from those components. Suggested message pills are keyboard-focusable and activate on Enter/Space. The chat history sidebar uses a backdrop overlay and traps focus when open.

---

---

Props

aiAssistantTools

Key	Value
Type	CometChatAIAssistantTools
Default	undefined

Tool/function call handlers for the AI assistant.

---

emptyView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom empty state for the message list.

---

emptyChatGreetingView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom greeting title in the empty chat state. Default uses agent metadata greetingMessage or user name.

---

emptyChatImageView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom image in the empty chat state.

---

emptyChatIntroMessageView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom intro subtitle in the empty chat state. Default uses agent metadata introductoryMessage.

---

errorView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom error state view.

---

headerAuxiliaryButtonView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the header auxiliary buttons (New Chat, History).

---

headerItemView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the entire header list item.

---

headerLeadingView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the header avatar / left section.

---

headerSubtitleView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the header subtitle text.

---

headerTitleView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the header title text.

---

headerTrailingView

Key	Value
Type	React.JSX.Element
Default	undefined

Replaces the header right section.

---

hideChatHistory

Key	Value
Type	boolean
Default	undefined

Hides the History button/sidebar.

---

hideNewChat

Key	Value
Type	boolean
Default	undefined

Hides the New Chat button in header.

---

hideSuggestedMessages

Key	Value
Type	boolean
Default	undefined

Hides the suggested messages section in the empty state.

---

loadLastAgentConversation

Key	Value
Type	boolean
Default	false

Loads the most recent existing agent conversation on mount.

---

loadingView

Key	Value
Type	React.JSX.Element
Default	undefined

Custom loading state view.

---

onBackButtonClicked

Key	Value
Type	() => void
Default	undefined

Fires when the header back button is clicked. Requires showBackButton={true}.

---

onCloseButtonClicked

Key	Value
Type	() => void
Default	undefined

Fires when the header close button is clicked. Requires showCloseButton={true}.

---

onError

Key	Value
Type	(e: CometChat.CometChatException) => void
Default	undefined

Fires on internal errors.

---

onSendButtonClick

Key	Value
Type	(message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void
Default	undefined

Fires when the composer send button is clicked.

---

parentMessageId

Key	Value
Type	number
Default	undefined

Loads a specific agent conversation. Takes priority over loadLastAgentConversation.

---

showBackButton

Key	Value
Type	boolean
Default	undefined

Shows back button in header.

---

showCloseButton

Key	Value
Type	boolean
Default	undefined

Shows close button in header.

---

streamingSpeed

Key	Value
Type	number
Default	undefined

Characters-per-second speed for streaming replies.

---

suggestedMessages

Key	Value
Type	string[]
Default	undefined

Quick prompt suggestions displayed in the empty state.

---

templates

Key	Value
Type	CometChatMessageTemplate[]
Default	undefined

Custom message bubble templates. See CometChatMessageTemplate.

---

user

Key	Value
Type	CometChat.User
Default	— (required)

The AI agent user object. Must be fetched via CometChat.getUser() before passing.

---

CSS Selectors

Target	Selector
Root	.cometchat-ai-assistant-chat
Wrapper	.cometchat-ai-assistant-chat__wrapper
Header wrapper	.cometchat-ai-assistant-chat__header-wrapper
Header auxiliary view	.cometchat-ai-assistant-chat__header-auxiliary-view
Message list wrapper	.cometchat-ai-assistant-chat__message-list-wrapper
Composer wrapper	.cometchat-ai-assistant-chat__composer-wrapper
Send button	.cometchat-ai-assistant-chat__send-button-view
Send button (active)	.cometchat-ai-assistant-chat__send-button-view--active
Send button (streaming)	.cometchat-ai-assistant-chat__send-button-view--streaming
Empty state	.cometchat-ai-assistant-chat__empty-state
Empty state content	.cometchat-ai-assistant-chat__empty-state-content
Empty state icon	.cometchat-ai-assistant-chat__empty-state-icon
Greeting message	.cometchat-ai-assistant-chat__empty-state-greeting-message
Intro message	.cometchat-ai-assistant-chat__empty-state-intro-message
Suggested messages	.cometchat-ai-assistant-chat__empty-state-suggested-messages
Suggestion pill	.cometchat-ai-assistant-chat__suggested-message-pill
Suggestion icon	.cometchat-ai-assistant-chat__suggested-message-icon
Chat history sidebar	.cometchat-ai-assistant-chat__sidebar
Sidebar open	.cometchat-ai-assistant-chat__sidebar--open
Sidebar overlay	.cometchat-ai-assistant-chat__sidebar-overlay
Copy button	.cometchat-ai-assistant-message-bubble__copy