### Install Project Dependencies

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Installs all the necessary npm packages required for the sample application to run. This command should be executed after navigating to the sample-app directory.

```sh
npm install
```

--------------------------------

### Navigate to Sample App Directory

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Changes the current directory to the sample-app folder within the cloned repository. This is necessary to run installation and start commands.

```sh
cd cometchat-uikit-react/sample-app
```

--------------------------------

### Install Latest npm

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Ensures you have the latest version of npm installed globally. This is a prerequisite for the project setup.

```sh
npm install npm@latest -g
```

--------------------------------

### Run the Sample App

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Starts the development server and runs the sample application locally. This allows you to see all CometChat features in action.

```sh
npm start
```

--------------------------------

### CometChat Localization Setup and Usage

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Manage UI text localization globally or access current language settings. Supports over 20 languages.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
// CometChatLocalize is also accessible via CometChatUIKit.Localize

// Set language programmatically (e.g., from user profile settings)
CometChatUIKit.Localize.setCurrentLanguage("fr");

// Get currently active language code
const currentLang = CometChatUIKit.Localize.getCurrentLanguage();
console.log("UI Kit language:", currentLang); // "fr"

// Get a localized string by key
import { getLocalizedString } from "@cometchat/chat-uikit-react";
const label = getLocalizedString("conversation_chat_title");
console.log(label); // "Chats" (or translated equivalent)
```

--------------------------------

### Initialize CometChat SDK with CometChatUIKit.init()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Initialize the CometChat SDK using the configured UIKitSettings. This must be called once before any other UIKit operation. It returns a promise that resolves with the logged-in user or null.

```tsx
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("us")
  .setAuthKey("YOUR_AUTH_KEY")
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)
  ?.then((user) => {
    if (user) {
      console.log("Already logged in:", user.getName());
    } else {
      console.log("SDK initialized, user not logged in");
    }
  })
  .catch((error) => {
    console.error("Initialization failed:", error);
  });
```

--------------------------------

### CometChatUIKit.init()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Initializes the CometChat SDK with the provided UIKitSettings. This method must be called once before any other UIKit operation. It returns a promise that resolves with the currently logged-in user or null.

```APIDOC
## CometChatUIKit.init()

Initializes the CometChat SDK with the provided `UIKitSettings`. Must be called once before any other UIKit operation. Returns a promise that resolves with the currently logged-in user (if any) or `null`.

```tsx
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("us")
  .setAuthKey("YOUR_AUTH_KEY")
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)
  ?.then((user) => {
    if (user) {
      console.log("Already logged in:", user.getName());
    } else {
      console.log("SDK initialized, user not logged in");
    }
  })
  .catch((error) => {
    console.error("Initialization failed:", error);
  });
```
```

--------------------------------

### CometChatUIKit.login()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Logs in a user by UID or with a server-generated auth token. This method initializes event listeners and extensions after a successful login. For production, `loginWithAuthToken` is recommended.

```APIDOC
## CometChatUIKit.login()

Logs in a user by UID using the auth key configured in `UIKitSettings`. Initializes event listeners and extensions after successful login. For production use, prefer `loginWithAuthToken` to avoid exposing the auth key on the client.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

// Login with UID (development / demo use)
CometChatUIKit.login("superhero1")
  .then((user) => {
    console.log("Logged in as:", user.getName(), user.getUid());
    // Now render CometChat components
  })
  .catch((error) => {
    console.error("Login failed:", error.message);
  });

// Login with server-generated auth token (recommended for production)
CometChatUIKit.loginWithAuthToken("USER_AUTH_TOKEN_FROM_YOUR_SERVER")
  .then((user) => {
    console.log("Logged in as:", user.getName());
  })
  .catch((error) => {
    console.error("Token login failed:", error.message);
  });
```
```

--------------------------------

### Initialize and Render Full Chat Layout in React

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

This snippet initializes the CometChat UI Kit with app credentials and logs in a user. It then renders a complete chat interface including a conversations list, message header, message list, and message composer. Ensure you replace 'YOUR_APP_ID' and 'YOUR_AUTH_KEY' with your actual CometChat credentials.

```tsx
import {
  useEffect,
  useState,
} from "react";
import {
  CometChat,
  CometChatUIKit,
  UIKitSettingsBuilder,
  CometChatConversations,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
  CometChatIncomingCall,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

const APP_ID = "YOUR_APP_ID";
const REGION = "us";
const AUTH_KEY = "YOUR_AUTH_KEY";

export default function ChatApp() {
  const [user, setUser] = useState<CometChat.User | null>(null);
  const [activeConversation, setActiveConversation] = useState<CometChat.Conversation | null>(null);

  useEffect(() => {
    const settings = new UIKitSettingsBuilder()
      .setAppId(APP_ID)
      .setRegion(REGION)
      .setAuthKey(AUTH_KEY)
      .subscribePresenceForAllUsers()
      .build();

    CometChatUIKit.init(settings)?.then(() => {
      CometChatUIKit.login("superhero1").then((loggedInUser) => {
        setUser(loggedInUser);
      });
    });
  }, []);

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

  const chatWith = activeConversation?.getConversationWith();
  const chatUser = chatWith instanceof CometChat.User ? chatWith : undefined;
  const chatGroup = chatWith instanceof CometChat.Group ? chatWith : undefined;

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      {/* Global incoming call handler */}
      <CometChatIncomingCall />

      {/* Conversations sidebar */}
      <div style={{ width: 360, borderRight: "1px solid #e0e0e0" }}>
        <CometChatConversations
          activeConversation={activeConversation ?? undefined}
          showSearchBar={true}
          onItemClick={(conv) => setActiveConversation(conv)}
        />
      </div>

      {/* Chat panel */}
      {activeConversation && (
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <CometChatMessageHeader
            user={chatUser}
            group={chatGroup}
            showConversationSummaryButton={true}
            showSearchOption={true}
          />
          <div style={{ flex: 1, overflow: "hidden" }}>
            <CometChatMessageList
              user={chatUser}
              group={chatGroup}
              showConversationStarters={true}
              showSmartReplies={true}
            />
          </div>
          <CometChatMessageComposer
            user={chatUser}
            group={chatGroup}
          />
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Login User with CometChatUIKit.login()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Log in a user by UID or with a server-generated auth token. For production, use `loginWithAuthToken` to avoid exposing the auth key. Successful login initializes event listeners and extensions.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

// Login with UID (development / demo use)
CometChatUIKit.login("superhero1")
  .then((user) => {
    console.log("Logged in as:", user.getName(), user.getUid());
    // Now render CometChat components
  })
  .catch((error) => {
    console.error("Login failed:", error.message);
  });

// Login with server-generated auth token (recommended for production)
CometChatUIKit.loginWithAuthToken("USER_AUTH_TOKEN_FROM_YOUR_SERVER")
  .then((user) => {
    console.log("Logged in as:", user.getName());
  })
  .catch((error) => {
    console.error("Token login failed:", error.message);
  });
```

--------------------------------

### CometChatCallButtons

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders audio and video call initiation buttons for a user or group chat. Handles the full call lifecycle including outgoing call UI.

```APIDOC
## CometChatCallButtons

Renders audio and video call initiation buttons for a user or group chat. Handles the full call lifecycle including outgoing call UI via `CometChatOutgoingCall`.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function CallButtons({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      // group={group}  // for group calls
      hideVoiceCallButton={false}
      hideVideoCallButton={false}
      onError={(error) => console.error("CallButtons error:", error.message)}
    />
  );
}
```
```

--------------------------------

### Clone CometChat React UI Kit Repository

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Clones the official GitHub repository for the CometChat React UI Kit. This is the first step in setting up the sample application.

```sh
git clone https://github.com/cometchat/cometchat-uikit-react.git
```

--------------------------------

### Configure UIKit Settings with UIKitSettingsBuilder

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Use UIKitSettingsBuilder to configure app credentials, region, presence subscriptions, extensions, and calling behavior before initializing the CometChat SDK. Build these settings once at app startup.

```tsx
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")          // From CometChat Dashboard
  .setRegion("us")                   // "us" | "eu" | "in"
  .setAuthKey("YOUR_AUTH_KEY")       // From CometChat Dashboard
  .subscribePresenceForAllUsers()    // Track online/offline for all users
  // Optional: scope presence to friends only
  // .subscribePresenceForFriends()
  // Optional: restrict to specific roles
  // .subscribePresenceForRoles(["admin", "moderator"])
  .setAutoEstablishSocketConnection(true)
  .build();
```

--------------------------------

### Build AI Assistant Chat Interface

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Utilize CometChatAIAssistantChat to render a complete AI agent chat interface. Configure message history, streaming responses, suggested messages, and composer. Supports back and send button callbacks, and error handling.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIChat({ agentUser }: { agentUser: CometChat.User }) {
  return (
    <CometChatAIAssistantChat
      user={agentUser}
      showBackButton={true}
      showCloseButton={false}
      hideChatHistory={false}
      hideNewChat={false}
      streamingSpeed={50}             // characters per second for streaming
      suggestedMessages={[
        "What can you help me with?",
        "Summarize our last conversation",
        "Show me recent orders",
      ]}
      hideSuggestedMessages={false}
      loadLastAgentConversation={true}
      onBackButtonClicked={() => console.log("Back from AI chat")}
      onSendButtonClick={(message) => {
        console.log("Message sent to agent:", (message as CometChat.TextMessage).getText());
      }}
      onError={(error) => console.error("AI chat error:", error.message)}
    />
  );
}
```

--------------------------------

### UIKitSettingsBuilder

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Use UIKitSettingsBuilder to configure CometChat app credentials, region, presence subscriptions, extensions, and calling behavior before initializing the SDK.

```APIDOC
## UIKitSettingsBuilder

Fluent builder used to configure the CometChat app credentials, region, presence subscriptions, extensions, and calling behavior before calling `CometChatUIKit.init()`.

```tsx
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")          // From CometChat Dashboard
  .setRegion("us")                   // "us" | "eu" | "in"
  .setAuthKey("YOUR_AUTH_KEY")       // From CometChat Dashboard
  .subscribePresenceForAllUsers()    // Track online/offline for all users
  // Optional: scope presence to friends only
  // .subscribePresenceForFriends()
  // Optional: restrict to specific roles
  // .subscribePresenceForRoles(["admin", "moderator"])
  .setAutoEstablishSocketConnection(true)
  .build();
```
```

--------------------------------

### Initiate CometChat Calls

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders buttons to initiate audio and video calls for a user or group. Handles the outgoing call flow. Requires a `user` object or `group` object as a prop.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function CallButtons({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      // group={group}  // for group calls
      hideVoiceCallButton={false}
      hideVideoCallButton={false}
      onError={(error) => console.error("CallButtons error:", error.message)}
    />
  );
}
```

--------------------------------

### CometChatUIKit.sendMediaMessage()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Sends a media message (image, video, audio, or file) to a user or group. The file is uploaded automatically.

```APIDOC
## CometChatUIKit.sendMediaMessage()

### Description
Sends a media message (image, video, audio, or file) to a user or group. The file is uploaded automatically.

### Method Signature
```typescript
CometChatUIKit.sendMediaMessage(mediaMessage: CometChat.MediaMessage): Promise<CometChat.MediaMessage>
```

### Parameters
*   **mediaMessage** (CometChat.MediaMessage) - The media message object to send.

### Request Example
```typescript
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

// Triggered from a file input's onChange handler
function handleFileUpload(file: File) {
  const mediaMessage = new CometChat.MediaMessage(
    "group_xyz",                           // GUID of the group
    file,                                  // File object from input
    CometChat.MESSAGE_TYPE.IMAGE,          // IMAGE | VIDEO | AUDIO | FILE
    CometChat.RECEIVER_TYPE.GROUP
  );

  CometChatUIKit.sendMediaMessage(mediaMessage)
    .then((sentMessage) => {
      console.log("Media sent:", sentMessage.getId());
    })
    .catch((error) => {
      console.error("Media send failed:", error.message);
    });
}
```

### Response
*   **Success Response**: A Promise that resolves with the sent `CometChat.MediaMessage` object.
*   **Error Response**: A Promise that rejects with an error object containing `message`.
```

--------------------------------

### CometChatIncomingCall

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders an incoming call notification UI with accept/decline controls and optional sound. Place it at the root of your application to handle calls globally.

```APIDOC
## CometChatIncomingCall

Renders an incoming call notification UI with accept/decline controls and optional sound. Place it at the root of your application to handle calls globally.

```tsx
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";

function App() {
  return (
    <div>
      {/* Rendered globally to intercept incoming calls */}
      <CometChatIncomingCall
        disableSoundForCalls={false}
        onAccept={(call) => {
          console.log("Call accepted:", call.getSessionId());
        }}
        onDecline={(call) => {
          console.log("Call declined");
        }}
        onError={(error) => console.error("IncomingCall error:", error.message)}
      />
      {/* rest of app */}
    </div>
  );
}
```
```

--------------------------------

### Checkout v6 Branch

Source: https://github.com/cometchat/cometchat-uikit-react/blob/v6/sample-app/README.md

Switches to the v6 branch of the cloned repository. This branch contains the relevant code for the current version of the UI Kit.

```sh
git checkout v6
```

--------------------------------

### CometChatUsers

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders a searchable, real-time list of users. Supports section headers, selection modes, custom options on hover, and user presence indicators.

```APIDOC
## CometChatUsers

Renders a searchable, real-time list of users. Supports section headers (A–Z), single/multiple selection modes, custom options on hover, and user presence indicators.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react";

function UserList() {
  const usersRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(30)
    .friendsOnly(false);

  const searchRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(30)
    .setSearchKeyword("");

  return (
    <CometChatUsers
      usersRequestBuilder={usersRequestBuilder}
      searchRequestBuilder={searchRequestBuilder}
      hideSearch={false}
      showSectionHeader={true}
      hideUserStatus={false}
      selectionMode={SelectionMode.multiple}
      onItemClick={(user) => console.log("User clicked:", user.getName())}
      onSelect={(user, selected) => {
        console.log(user.getUid(), selected ? "selected" : "deselected");
      }}
      subtitleView={(user) => <span>{user.getStatus()}</span>}
      emptyView={<div>No users found</div>}
      onError={(error) => console.error("Users error:", error.message)}
    />
  );
}
```
```

--------------------------------

### CometChatUIKit.logout()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Logs out the currently authenticated user and cleans up all associated listeners. This method returns a promise.

```APIDOC
## CometChatUIKit.logout()

Logs out the currently authenticated user, cleans up listeners, and returns a promise.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

CometChatUIKit.logout()
  .then(() => {
    console.log("User logged out successfully");
    // Redirect to login screen
  })
  .catch((error) => {
    console.error("Logout error:", error.message);
  });
```
```

--------------------------------

### Display Real-time Messages with CometChatMessageList

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Use CometChatMessageList to display a paginated, real-time message list. Configure options for AI features, receipts, reactions, and more. Ensure the CometChat SDK is imported and a messagesRequestBuilder is properly configured.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageList } from "@cometchat/chat-uikit-react";

function MessageList({ user }: { user: CometChat.User }) {
  const messagesRequestBuilder = new CometChat.MessagesRequestBuilder()
    .setLimit(30)
    .setUID(user.getUid());

  return (
    <CometChatMessageList
      user={user}
      // group={group}  // use for group chats instead
      showConversationStarters={true}   // AI conversation starters for new chats
      showSmartReplies={true}           // AI-suggested reply chips
      hideDateSeparator={false}
      hideStickyDate={false}
      hideReceipts={false}
      hideReplyInThreadOption={false}
      hideReactionOption={false}
      hideDeleteMessageOption={false}
      hideEditMessageOption={false}
      hideGroupActionMessages={false}
      startFromUnreadMessages={true}
      // Navigate to specific message by ID (from search results)
      // goToMessageId={targetMessageId}
      messagesRequestBuilder={messagesRequestBuilder}
      onError={(error) => console.error("MessageList error:", error.message)}
    />
  );
}
```

--------------------------------

### Display Chat Header with CometChatMessageHeader

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Implement CometChatMessageHeader to show user/group information, presence status, and call buttons. Customize with back buttons, search options, and AI summary features. Define custom views for subtitles and trailing elements.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader } from "@cometchat/chat-uikit-react";

function ChatHeader({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      // group={group}  // for group chats
      showBackButton={true}          // show back arrow on mobile
      hideVideoCallButton={false}
      hideVoiceCallButton={false}
      hideUserStatus={false}
      showConversationSummaryButton={true}  // AI summary button
      showSearchOption={true}
      onSearchOptionClicked={() => {
        // open CometChatSearch component
        console.log("Search clicked");
      }}
      onBack={() => {
        console.log("Back button clicked");
      }}
      subtitleView={<span>Custom subtitle</span>}
      trailingView={<button>More</button>}
    />
  );
}
```

--------------------------------

### Send Media Message with CometChatUIKit

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Sends a media message (image, video, audio, or file) to a user or group. The file is uploaded automatically. Triggered from a file input's onChange handler.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

// Triggered from a file input's onChange handler
function handleFileUpload(file: File) {
  const mediaMessage = new CometChat.MediaMessage(
    "group_xyz",                           // GUID of the group
    file,                                  // File object from input
    CometChat.MESSAGE_TYPE.IMAGE,          // IMAGE | VIDEO | AUDIO | FILE
    CometChat.RECEIVER_TYPE.GROUP
  );

  CometChatUIKit.sendMediaMessage(mediaMessage)
    .then((sentMessage) => {
      console.log("Media sent:", sentMessage.getId());
    })
    .catch((error) => {
      console.error("Media send failed:", error.message);
    });
}
```

--------------------------------

### Render CometChat Users List

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Displays a searchable list of users with support for section headers, selection modes, and custom user presence. Configure request builders for fetching users and searching.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUsers, SelectionMode } from "@cometchat/chat-uikit-react";

function UserList() {
  const usersRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(30)
    .friendsOnly(false);

  const searchRequestBuilder = new CometChat.UsersRequestBuilder()
    .setLimit(30)
    .setSearchKeyword("");

  return (
    <CometChatUsers
      usersRequestBuilder={usersRequestBuilder}
      searchRequestBuilder={searchRequestBuilder}
      hideSearch={false}
      showSectionHeader={true}
      hideUserStatus={false}
      selectionMode={SelectionMode.multiple}
      onItemClick={(user) => console.log("User clicked:", user.getName())}
      onSelect={(user, selected) => {
        console.log(user.getUid(), selected ? "selected" : "deselected");
      }}
      subtitleView={(user) => <span>{user.getStatus()}</span>}
      emptyView={<div>No users found</div>}
      onError={(error) => console.error("Users error:", error.message)}
    />
  );
}
```

--------------------------------

### Logout User with CometChatUIKit.logout()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Log out the currently authenticated user and clean up listeners. This method returns a promise that resolves upon successful logout.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

CometChatUIKit.logout()
  .then(() => {
    console.log("User logged out successfully");
    // Redirect to login screen
  })
  .catch((error) => {
    console.error("Logout error:", error.message);
  });
```

--------------------------------

### Implement CometChat Search

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Integrate CometChatSearch for unified searching of conversations and messages. It includes filter chips for various content types and provides callbacks for search closure, conversation clicks, message clicks, and errors.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatSearch } from "@cometchat/chat-uikit-react";

function SearchPanel() {
  return (
    <CometChatSearch
      onClose={() => console.log("Search closed")}
      onConversationClicked={(conversation) => {
        console.log("Open conversation:", conversation.getConversationWith().getName());
      }}
      onMessageClicked={(message, conversation) => {
        console.log("Jump to message:", message.getId(), "in", conversation.getConversationId());
      }}
      onError={(error) => console.error("Search error:", error.message)}
    />
  );
}
```

--------------------------------

### Render CometChat Groups List

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Displays a searchable list of joined groups with options for selection modes and custom group item actions. Configure the request builder to fetch joined groups.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";

function GroupList() {
  const groupsRequestBuilder = new CometChat.GroupsRequestBuilder()
    .setLimit(30)
    .joinedOnly(true);

  return (
    <CometChatGroups
      groupsRequestBuilder={groupsRequestBuilder}
      hideSearch={false}
      hideGroupType={false}
      selectionMode={SelectionMode.none}
      onItemClick={(group) => console.log("Group clicked:", group.getName())}
      onSelect={(group, selected) => {
        console.log(group.getGuid(), selected ? "selected" : "deselected");
      }}
      options={(group) => [
        {
          id: "info",
          title: "View Info",
          onClick: () => console.log("Info for", group.getName()),
        },
      ]}
      emptyView={<div>No groups joined</div>}
      onError={(error) => console.error("Groups error:", error.message)}
    />
  );
}
```

--------------------------------

### Handle CometChat Incoming Calls

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Displays an incoming call notification UI with accept/decline controls and optional sound. Should be rendered globally to intercept all incoming calls. Configure sound and event handlers.

```tsx
import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";

function App() {
  return (
    <div>
      {/* Rendered globally to intercept incoming calls */}
      <CometChatIncomingCall
        disableSoundForCalls={false}
        onAccept={(call) => {
          console.log("Call accepted:", call.getSessionId());
        }}
        onDecline={(call) => {
          console.log("Call declined");
        }}
        onError={(error) => console.error("IncomingCall error:", error.message)}
      />
      {/* rest of app */}
    </div>
  );
}
```

--------------------------------

### CometChatUIKit.sendCustomMessage()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Sends a custom message with an arbitrary data payload to a user or group. Custom messages can be used for reactions, location sharing, or any app-specific data.

```APIDOC
## CometChatUIKit.sendCustomMessage()

### Description
Sends a custom message with an arbitrary data payload to a user or group. Custom messages can be used for reactions, location sharing, or any app-specific data.

### Method Signature
```typescript
CometChatUIKit.sendCustomMessage(customMessage: CometChat.CustomMessage): Promise<CometChat.CustomMessage>
```

### Parameters
*   **customMessage** (CometChat.CustomMessage) - The custom message object to send.

### Request Example
```typescript
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const customData = {
  latitude: 37.7749,
  longitude: -122.4194,
  address: "San Francisco, CA"
};

const customMessage = new CometChat.CustomMessage(
  "receiver_uid",                    // receiver UID
  CometChat.RECEIVER_TYPE.USER,
  "location",                      // custom type identifier
  customData                       // arbitrary payload
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((sentMessage) => {
    console.log("Custom message sent:", sentMessage.getId());
  })
  .catch((error) => {
    console.error("Custom send error:", error.message);
  });
```

### Response
*   **Success Response**: A Promise that resolves with the sent `CometChat.CustomMessage` object.
*   **Error Response**: A Promise that rejects with an error object containing `message`.
```

--------------------------------

### Render Conversations List with CometChatConversations

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders a scrollable, real-time list of conversations for the logged-in user. Automatically handles typing indicators, message receipts, unread counts, and last-message updates. Supports various customization options.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations, SelectionMode } from "@cometchat/chat-uikit-react";
import { useState } from "react";

function ConversationList() {
  const [activeConversation, setActiveConversation] = useState<CometChat.Conversation | null>(null);

  // Optional: filter to only group conversations
  const requestBuilder = new CometChat.ConversationsRequestBuilder()
    .setLimit(30)
    .setConversationType("group");  // "user" | "group"

  return (
    <CometChatConversations
      activeConversation={activeConversation ?? undefined}
      conversationsRequestBuilder={requestBuilder}
      hideReceipts={false}
      hideUserStatus={false}
      hideGroupType={false}
      hideDeleteConversation={false}
      showSearchBar={true}
      disableSoundForMessages={false}
      onItemClick={(conversation) => {
        setActiveConversation(conversation);
        console.log("Selected:", conversation.getConversationWith().getName());
      }}
      onSelect={(conversation, selected) => {
        console.log("Multi-select:", conversation.getConversationId(), selected);
      }}
      selectionMode={SelectionMode.none}   // none | single | multiple
      subtitleView={(conversation) => (
        <span style={{ color: "gray", fontSize: 12 }}>
          Custom subtitle for {conversation.getConversationWith().getName()}
        </span>
      )}
      trailingView={(conversation) => (
        <span className="badge">
          {conversation.getUnreadMessageCount() > 0 ? conversation.getUnreadMessageCount() : ""}
        </span>
      )}
      emptyView={<div>No conversations yet</div>}
      onError={(error) => console.error("Conversations error:", error.message)}
    />
  );
}
```

--------------------------------

### Display CometChat Call Logs

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Use CometChatCallLogs to display a paginated list of past call logs. It supports re-initiating calls and provides callbacks for item clicks, button clicks, and errors. Customize loading and empty states.

```tsx
import { CometChatCallLogs } from "@cometchat/chat-uikit-react";

function CallHistory() {
  return (
    <CometChatCallLogs
      onItemClick={(call) => {
        console.log("Call log clicked:", call.getSessionId());
      }}
      onCallButtonClicked={(call) => {
        console.log("Re-call:", call.getInitiator().getName());
      }}
      onError={(error) => console.error("CallLogs error:", error.message)}
      loadingView={<div>Loading call logs...</div>}
      emptyView={<div>No calls yet</div>}
    />
  );
}
```

--------------------------------

### Compose and Send Messages with CometChatMessageComposer

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Utilize CometChatMessageComposer for a rich text input experience. It supports text, attachments, mentions, and more. Configure enter key behavior and disable various features as needed.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageComposer, EnterKeyBehavior } from "@cometchat/chat-uikit-react";

function MessageComposer({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageComposer
      user={user}
      // group={group}  // use for group chats
      initialComposerText=""
      disableTypingEvents={false}
      disableMentions={false}
      hideEmojiKeyboardButton={false}
      hideAttachmentButton={false}
      hideVoiceRecordingButton={false}
      hideStickersButton={false}
      hideSendButton={false}
      hideImageAttachmentOption={false}
      hideVideoAttachmentOption={false}
      hideAudioAttachmentOption={false}
      hideFileAttachmentOption={false}
      hidePollsOption={false}
      hideCollaborativeDocumentOption={false}
      hideCollaborativeWhiteboardOption={false}
      enterKeyBehavior={EnterKeyBehavior.SendMessage}  // SendMessage | NewLine
      disableSoundForMessage={false}
      onError={(error) => console.error("Composer error:", error.message)}
    />
  );
}
```

--------------------------------

### CometChatGroups

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders a searchable list of joined groups. Supports single/multiple selection, custom options per group item, group type icons, and real-time group updates.

```APIDOC
## CometChatGroups

Renders a searchable list of joined groups. Supports single/multiple selection, custom options per group item, group type icons, and real-time group updates.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroups, SelectionMode } from "@cometchat/chat-uikit-react";

function GroupList() {
  const groupsRequestBuilder = new CometChat.GroupsRequestBuilder()
    .setLimit(30)
    .joinedOnly(true);

  return (
    <CometChatGroups
      groupsRequestBuilder={groupsRequestBuilder}
      hideSearch={false}
      hideGroupType={false}
      selectionMode={SelectionMode.none}
      onItemClick={(group) => console.log("Group clicked:", group.getName())}
      onSelect={(group, selected) => {
        console.log(group.getGuid(), selected ? "selected" : "deselected");
      }}
      options={(group) => [
        {
          id: "info",
          title: "View Info",
          onClick: () => console.log("Info for", group.getName()),
        },
      ]}
      emptyView={<div>No groups joined</div>}
      onError={(error) => console.error("Groups error:", error.message)}
    />
  );
}
```
```

--------------------------------

### CometChatConversations

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Renders a scrollable, real-time list of conversations for the logged-in user. Automatically handles typing indicators, message receipts, unread counts, last-message updates, and conversation deletion. Supports single/multiple selection modes and fully customizable item views.

```APIDOC
## CometChatConversations

### Description
Renders a scrollable, real-time list of conversations for the logged-in user. Automatically handles typing indicators, message receipts, unread counts, last-message updates, and conversation deletion. Supports single/multiple selection modes and fully customizable item views.

### Props
*   **activeConversation** (CometChat.Conversation | null | undefined) - The currently active conversation.
*   **conversationsRequestBuilder** (CometChat.ConversationsRequestBuilder) - A builder to configure the conversation list query.
*   **hideReceipts** (boolean) - Whether to hide message receipts.
*   **hideUserStatus** (boolean) - Whether to hide user online status.
*   **hideGroupType** (boolean) - Whether to hide the group type indicator.
*   **hideDeleteConversation** (boolean) - Whether to hide the delete conversation option.
*   **showSearchBar** (boolean) - Whether to display a search bar.
*   **disableSoundForMessages** (boolean) - Whether to disable sound for incoming messages.
*   **onItemClick** (function) - Callback function when a conversation item is clicked. Receives the `conversation` object.
*   **onSelect** (function) - Callback function for multi-selection mode. Receives `conversation` and `selected` boolean.
*   **selectionMode** (SelectionMode) - The selection mode for conversation items (`none`, `single`, `multiple`).
*   **subtitleView** (function) - A custom render function for the conversation subtitle. Receives the `conversation` object.
*   **trailingView** (function) - A custom render function for the trailing view of a conversation item. Receives the `conversation` object.
*   **emptyView** (React.ReactNode) - Content to display when there are no conversations.
*   **onError** (function) - Callback function for handling errors. Receives an `error` object.

### Request Example
```typescript
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatConversations, SelectionMode } from "@cometchat/chat-uikit-react";
import { useState } from "react";

function ConversationList() {
  const [activeConversation, setActiveConversation] = useState<CometChat.Conversation | null>(null);

  // Optional: filter to only group conversations
  const requestBuilder = new CometChat.ConversationsRequestBuilder()
    .setLimit(30)
    .setConversationType("group");  // "user" | "group"

  return (
    <CometChatConversations
      activeConversation={activeConversation ?? undefined}
      conversationsRequestBuilder={requestBuilder}
      hideReceipts={false}
      hideUserStatus={false}
      hideGroupType={false}
      hideDeleteConversation={false}
      showSearchBar={true}
      disableSoundForMessages={false}
      onItemClick={(conversation) => {
        setActiveConversation(conversation);
        console.log("Selected:", conversation.getConversationWith().getName());
      }}
      onSelect={(conversation, selected) => {
        console.log("Multi-select:", conversation.getConversationId(), selected);
      }}
      selectionMode={SelectionMode.none}   // none | single | multiple
      subtitleView={(conversation) => (
        <span style={{ color: "gray", fontSize: 12 }}>
          Custom subtitle for {conversation.getConversationWith().getName()}
        </span>
      )}
      trailingView={(conversation) => (
        <span className="badge">
          {conversation.getUnreadMessageCount() > 0 ? conversation.getUnreadMessageCount() : ""}
        </span>
      )}
      emptyView={<div>No conversations yet</div>}
      onError={(error) => console.error("Conversations error:", error.message)}
    />
  );
}
```
```

--------------------------------

### CometChatUIKit.sendTextMessage()

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Programmatically sends a text message to a user or group. Fires `CometChatMessageEvents.ccMessageSent` and returns the sent message. Useful for sending messages outside of the `CometChatMessageComposer` UI.

```APIDOC
## CometChatUIKit.sendTextMessage()

### Description
Programmatically sends a text message to a user or group, fires `CometChatMessageEvents.ccMessageSent`, and returns the sent message. Useful for sending messages outside of the `CometChatMessageComposer` UI.

### Method Signature
```typescript
CometChatUIKit.sendTextMessage(textMessage: CometChat.TextMessage): Promise<CometChat.TextMessage>
```

### Parameters
*   **textMessage** (CometChat.TextMessage) - The text message object to send.

### Request Example
```typescript
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const textMessage = new CometChat.TextMessage(
  "receiver_uid_or_guid",           // receiver UID or GUID
  "Hello from the UI Kit!",         // message text
  CometChat.RECEIVER_TYPE.USER      // or CometChat.RECEIVER_TYPE.GROUP
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((sentMessage) => {
    console.log("Message sent, ID:", (sentMessage as CometChat.TextMessage).getId());
  })
  .catch((error) => {
    console.error("Send failed:", error.code, error.message);
  });
```

### Response
*   **Success Response**: A Promise that resolves with the sent `CometChat.TextMessage` object.
*   **Error Response**: A Promise that rejects with an error object containing `code` and `message`.
```

--------------------------------

### Send Custom Message with CometChatUIKit

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Sends a custom message with an arbitrary data payload to a user or group. Custom messages can be used for reactions, location sharing, or any app-specific data.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const customData = {
  latitude: 37.7749,
  longitude: -122.4194,
  address: "San Francisco, CA"
};

const customMessage = new CometChat.CustomMessage(
  "superhero3",                    // receiver UID
  CometChat.RECEIVER_TYPE.USER,
  "location",                      // custom type identifier
  customData                       // arbitrary payload
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((sentMessage) => {
    console.log("Custom message sent:", sentMessage.getId());
  })
  .catch((error) => {
    console.error("Custom send error:", error.message);
  });
```

--------------------------------

### Send Text Message with CometChatUIKit

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Programmatically sends a text message to a user or group. Fires CometChatMessageEvents.ccMessageSent and returns the sent message. Useful for sending messages outside of the CometChatMessageComposer UI.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const textMessage = new CometChat.TextMessage(
  "superhero2",                           // receiver UID or GUID
  "Hello from the UI Kit!",              // message text
  CometChat.RECEIVER_TYPE.USER           // or CometChat.RECEIVER_TYPE.GROUP
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((sentMessage) => {
    console.log("Message sent, ID:", (sentMessage as CometChat.TextMessage).getId());
  })
  .catch((error) => {
    console.error("Send failed:", error.code, error.message);
  });
```

--------------------------------

### CometChatGroupMembers

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Displays members of a specific group with options to kick, ban, or change member scope. Supports search, selection modes, and custom options per member.

```APIDOC
## CometChatGroupMembers

Displays members of a specific group with options to kick, ban, or change member scope (admin/moderator/participant). Supports search, selection modes, and custom options per member.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

function GroupMembersList({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      hideSearch={false}
      hideKickMemberOption={false}
      hideBanMemberOption={false}
      hideScopeChangeOption={false}
      onItemClick={(groupMember) => {
        console.log("Member clicked:", groupMember.getName());
      }}
      onSelect={(groupMember, selected) => {
        console.log(groupMember.getUid(), selected);
      }}
      onError={(error) => console.error("GroupMembers error:", error.message)}
    />
  );
}
```
```

--------------------------------

### Display CometChat Group Members

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Shows members of a specific group with options to manage them (kick, ban, change scope). Supports search and selection modes. Requires a `group` object as a prop.

```tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

function GroupMembersList({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      hideSearch={false}
      hideKickMemberOption={false}
      hideBanMemberOption={false}
      hideScopeChangeOption={false}
      onItemClick={(groupMember) => {
        console.log("Member clicked:", groupMember.getName());
      }}
      onSelect={(groupMember, selected) => {
        console.log(groupMember.getUid(), selected);
      }}
      onError={(error) => console.error("GroupMembers error:", error.message)}
    />
  );
}
```

--------------------------------

### CometChat Sound Manager for Notifications

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Control notification sounds for messages and calls. Play default or custom sounds, or disable them.

```tsx
import { CometChatUIKit } from "@cometchat/chat-uikit-react";
// CometChatSoundManager is accessible via CometChatUIKit.SoundManager

// Play a built-in sound
CometChatUIKit.SoundManager.play(
  CometChatUIKit.SoundManager.Sound.incomingMessageFromOther
);

// Play a custom sound from a URL
CometChatUIKit.SoundManager.play(
  CometChatUIKit.SoundManager.Sound.incomingMessageFromOther,
  "https://example.com/custom-notification.mp3"
);

// Stop any currently playing sound
CometChatUIKit.SoundManager.stop();
```

--------------------------------

### Subscribe to CometChat Message Events

Source: https://context7.com/cometchat/cometchat-uikit-react/llms.txt

Use CometChatMessageEvents to subscribe to real-time message lifecycle events via RxJS Subjects. This is useful for implementing custom analytics, notifications, or side effects. Unsubscribe from events when the component unmounts.

```tsx
import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";
import { useEffect } from "react";

function MessageEventListener() {
  useEffect(() => {
    // Subscribe to all sent messages (includes inprogress, success, error statuses)
    const sentSub = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
      console.log("Message sent event:", message.getId(), "status:", status);
    });

    // Subscribe to real-time incoming text messages
    const receivedSub = CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
      console.log("New message from:", message.getSender().getName(), "→", message.getText());
    });

    // Subscribe to typing indicators
    const typingSub = CometChatMessageEvents.onTypingStarted.subscribe((indicator) => {
      console.log(indicator.getSender().getName(), "is typing...");
    });

    // Subscribe to read receipts
    const readSub = CometChatMessageEvents.onMessagesRead.subscribe((receipt) => {
      console.log("Message", receipt.getMessageId(), "read at", receipt.getReadAt());
    });

    return () => {
      sentSub.unsubscribe();
      receivedSub.unsubscribe();
      typingSub.unsubscribe();
      readSub.unsubscribe();
    };
  }, []);

  return null;
}
```