> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-in-group-react-v6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

> Use CometChatUIKit methods for initialization, login, logout, users, groups, conversations, messages, calls, and session handling.

## Overview

The UI Kit's core function is to extend the Chat SDK, translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components.

The CometChat UI Kit has encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK.

You can access the methods using the `CometChatUIKit` class. This class provides access to all the public methods exposed by the CometChat UI Kit.

## Init

As a developer, you need to invoke this method every time before you use any other methods provided by the UI Kit.

The `UIKitSettings` is an important parameter of the `init()` function. It functions as a base settings object, housing properties such as `appId`, `region`, and `authKey`.

| Method                        | Type    | Description                                                                                                                              |
| ----------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| appId                         | String  | Sets the unique ID for the app, available on dashboard                                                                                   |
| region                        | String  | Sets the region for the app ('us' or 'eu' or 'in')                                                                                       |
| authKey                       | String  | Sets the auth key for the app, available on dashboard                                                                                    |
| subscriptionType              | String  | Sets subscription type for tracking the presence of all users                                                                            |
| roles                         | String  | Sets subscription type for tracking the presence of users with specified roles                                                           |
| autoEstablishSocketConnection | Boolean | Configures if web socket connections will be established automatically on app initialization or be done manually, set to true by default |

> **V6 Note:** The `extensions` and `aiFeature` parameters from V5 have been removed. Extensions are built-in and handled automatically by `MessageTemplateUtils`. No registration is needed.

```dart theme={null}
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
  ..subscriptionType = CometChatSubscriptionType.allUsers
  ..autoEstablishSocketConnection = true
  ..region = "your_region"
  ..appId = "your_appID"
  ..authKey = "your_authKey"
).build();

CometChatUIKit.init(
  uiKitSettings: uiKitSettings,
  onSuccess: (successMessage) async {
    // Ready to use
  },
  onError: (error) {
    // Handle error
  },
);
```

## Login using Auth Key

Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.

```dart theme={null}
CometChatUIKit.login(uid, onSuccess: (user) {
  // Logged in successfully
}, onError: (e) {
  // Handle error
});
```

## Login using Auth Token

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

1. Create a User via the CometChat API when the user signs up in your app.
2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
3. Load the Auth Token in your client and pass it to the `loginWithAuthToken()` method.

```dart theme={null}
CometChatUIKit.loginWithAuthToken("authToken", onSuccess: (user) {
  // Logged in successfully
}, onError: (e) {
  // Handle error
});
```

## Logout

Before a new user logs in, it is crucial to clean session data to avoid potential conflicts. This can be achieved by invoking the `.logout()` function.

```dart theme={null}
CometChatUIKit.logout(onSuccess: (s) {
  // Logged out successfully
}, onError: (e) {
  // Handle error
});
```

## Create User

You can dynamically create users on CometChat using the `.createUser()` function.

```dart theme={null}
CometChat.createUser(userObject, 'authKey', onSuccess: (user) {
  // User created
}, onError: (e) {
  // Handle error
});
```

## Base Message

### Text Message

Send a text message to a single user or a group using the `sendTextMessage()` function.

```dart theme={null}
CometChatUIKit.sendTextMessage(textMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});
```

### Media Message

Send a media message (image, video, audio, file) using the `sendMediaMessage()` function.

```dart theme={null}
CometChatUIKit.sendMediaMessage(mediaMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});
```

### Custom Message

Send a custom message using the `sendCustomMessage()` function.

```dart theme={null}
CometChatUIKit.sendCustomMessage(customMessageObject, onSuccess: (msg) {
  // Message sent
}, onError: (e) {
  // Handle error
});
```

## Interactive Message

### Form Message

```dart theme={null}
CometChatUIKit.sendFormMessage(formMessageObject, onSuccess: (msg) {
  // Form message sent
}, onError: (e) {
  // Handle error
});
```

### Card Message

```dart theme={null}
CometChatUIKit.sendCardMessage(cardMessageObject, onSuccess: (msg) {
  // Card message sent
}, onError: (e) {
  // Handle error
});
```

### Scheduler Message

```dart theme={null}
CometChatUIKit.sendSchedulerMessage(schedulerMessageObject, onSuccess: (msg) {
  // Scheduler message sent
}, onError: (e) {
  // Handle error
});
```

### Custom Interactive Message

```dart theme={null}
CometChatUIKit.sendCustomInteractiveMessage(interactiveMessageObject, onSuccess: (msg) {
  // Interactive message sent
}, onError: (e) {
  // Handle error
});
```

## DateFormatter

By providing a custom implementation of the `DateTimeFormatterCallback`, you can globally configure how time and date values are displayed across all UI components.

```dart theme={null}
UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
  ..subscriptionType = CometChatSubscriptionType.allUsers
  ..region = CometChatConfig.region
  ..appId = CometChatConfig.appId
  ..authKey = CometChatConfig.authKey
  ..dateTimeFormatterCallback = DateFormatter()
).build();
```

## AI Assistant Events

The UI Kit provides a UI-level event system for AI assistant interactions via `CometChatAIAssistantEvents`. These events mirror the SDK-level `AIAssistantListener` but are scoped to the UI layer for component-level reactions.

### Add Listener

```dart theme={null}
CometChatAIAssistantEvents.addAIAssistantListener(
  "unique_listener_id",
  myListener,
);
```

### Remove Listener

```dart theme={null}
CometChatAIAssistantEvents.removeAIAssistantListener("unique_listener_id");
```

### Listener Interface

Implement `CometChatAIAssistantEventsListener` to receive events:

```dart theme={null}
class MyListener with CometChatAIAssistantEventsListener {
  @override
  void onAIAssistantEventReceived(AIAssistantBaseEvent event) {
    // Handle AI assistant streaming events at the UI layer
  }
}
```

<Note>
  The UIKit's `CometChatMessageList` automatically handles AI events internally. Use `CometChatAIAssistantEvents` only if you need additional custom UI reactions to AI streaming events.
</Note>

## UI Events — Card Actions

When a user interacts with a card button inside an AI agent response or a standalone card message, the UIKit emits a `ccCardActionClicked` event:

```dart theme={null}
CometChatUIEvents.addUiListener("card_listener", myUIListener);

class MyUIListener with CometChatUIEventListener {
  @override
  void ccCardActionClicked(BaseMessage message, dynamic action) {
    if (action is CometChatCardActionEvent) {
      debugPrint("Element ID: ${action.elementId}");
      debugPrint("Action: ${action.action}");
      debugPrint("Card JSON: ${action.cardJson}");
      // Handle navigation, API calls, etc.
    }
  }
}
```