> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Assistant Chat

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

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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} />"
  }
  ```
</Accordion>

## 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.

```tsx lines theme={null}
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>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/5LHnV4qjM_q6Hr4t/images/react-uikit_ai-assistant-chat-overview.png?fit=max&auto=format&n=5LHnV4qjM_q6Hr4t&q=85&s=bcf6bc341cdcfa657dcac53b84734f2a" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-overview.png" />
</Frame>

***

## Minimal Render

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

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

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

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

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/5LHnV4qjM_q6Hr4t/images/react-uikit_ai-assistant-chat-empty_chat_image_view.png?fit=max&auto=format&n=5LHnV4qjM_q6Hr4t&q=85&s=8238cd4c3ba00a6e4409cf582ccd5f61" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_image_view.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/5LHnV4qjM_q6Hr4t/images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png?fit=max&auto=format&n=5LHnV4qjM_q6Hr4t&q=85&s=0b1bd067b2a8bc3813093b06c577ef7a" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### emptyChatIntroMessageView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/5LHnV4qjM_q6Hr4t/images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png?fit=max&auto=format&n=5LHnV4qjM_q6Hr4t&q=85&s=5eb7232f58d1c2507406e7004425d3e7" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    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>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .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;
    }
    ```
  </Tab>
</Tabs>

### aiAssistantTools

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

```tsx lines theme={null}
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](/ui-kit/react/message-template).

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

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

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/5LHnV4qjM_q6Hr4t/images/react-uikit_ai-assistant-chat-style.png?fit=max&auto=format&n=5LHnV4qjM_q6Hr4t&q=85&s=e797e21aff76e4e2ecf4698ab5dc9597" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-style.png" />
</Frame>

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

***

## 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](/ui-kit/react/message-template).

***

### 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`                 |