> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-multi-attachment-js-sdk.mintlify.site/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.

<Note>
  **1:1 and group conversations.** AI Agents work in both one-on-one and group conversations. In a 1:1 chat, the end user talks directly with the agent user. In a group, the agent participates as a member — its messages (including cards) are delivered and attributed like any other member's message. If the group contains only one user and one agent, the agent responds automatically. In groups with more than two members, the agent only responds when @mentioned.
</Note>

```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-docs-multi-attachment-js-sdk/u8at-TnrSgbFs33o/images/react-uikit_ai-assistant-chat-overview.png?fit=max&auto=format&n=u8at-TnrSgbFs33o&q=85&s=48da04c726fd14880930ca354bc2f5a3" 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-docs-multi-attachment-js-sdk/u8at-TnrSgbFs33o/images/react-uikit_ai-assistant-chat-empty_chat_image_view.png?fit=max&auto=format&n=u8at-TnrSgbFs33o&q=85&s=338d6c1909a5e37bf3932073bb53b2a7" 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-docs-multi-attachment-js-sdk/u8at-TnrSgbFs33o/images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png?fit=max&auto=format&n=u8at-TnrSgbFs33o&q=85&s=57e739c8d82322b41ae6a6e4d77fd448" 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-docs-multi-attachment-js-sdk/u8at-TnrSgbFs33o/images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png?fit=max&auto=format&n=u8at-TnrSgbFs33o&q=85&s=1a7b30c2114c2b41cdbfae80b53a3e45" 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/v6/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-docs-multi-attachment-js-sdk/u8at-TnrSgbFs33o/images/react-uikit_ai-assistant-chat-style.png?fit=max&auto=format&n=u8at-TnrSgbFs33o&q=85&s=058a45bb8dbc73598f2b3ad1ecb91618" 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/v6/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`                 |