Skip to content
7 changes: 7 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
.DS_Store

.kiro/

# IDE files
.idea/

# Python caches
__pycache__/
*.pyc
4 changes: 2 additions & 2 deletions ui-kit/android/ai-features.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: "AI"

## Overview

CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Let's understand how the Android UI Kit achieves these features.
CometChat's AI capabilities greatly enhance user interaction and engagement in your application. Here's how the Android UI Kit integrates these features.

<Frame>
<img src="/images/dc468902-AI_Overview-0c7eccf3adcb1327d6a428bb2201419e.png" />
Expand Down Expand Up @@ -40,7 +40,7 @@ The Conversation Summary feature provides concise summaries of long conversation

For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).

Once you have successfully activated the [Smart Replies](/fundamentals/ai-user-copilot/smart-replies) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/message-composer) Component of UI Kits.
Once you have successfully activated the [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary) from your CometChat Dashboard, the feature will automatically be incorporated into the Action sheet of [MessageComposer](/ui-kit/android/message-composer) Component of UI Kits.

<Frame>
<img src="/images/25921821-Conversation_Summary-5b64b3eb0655bc79903ca520d40a1e15.png" />
Expand Down
52 changes: 35 additions & 17 deletions ui-kit/android/android-conversation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ title: "Building A Conversation List + Message View"
sidebarTitle: "Conversation List + Message View"
---

The **Conversation List + Message View** layout offers a seamless **two-panel chat interface**, commonly used in modern messaging applications like **WhatsApp Web, Slack, and Microsoft Teams**.
The **Conversation List + Message View** layout provides a **sequential navigation pattern** for Android messaging applications, similar to **WhatsApp, Slack, and Telegram**.

This design enables users to switch between conversations effortlessly while keeping the chat window open, ensuring a **smooth, real-time messaging experience**.
This design allows users to view their conversation list and tap on any conversation to open a full-screen message view, providing a **familiar mobile real-time messaging experience**.

***

Expand All @@ -17,19 +17,29 @@ This design enables users to switch between conversations effortlessly while kee

### **Key Components**

1. **Chat Header** – Displays user/group name, profile image, and status.
2. **Message List** – Shows chat history and new messages.
3. **Message Composer** – Allows users to send messages, media, and reactions.
1. **Message Header** – Displays user/group name, avatar, and status.
2. **Message List** – Shows chat history with real-time message updates.
3. **Message Composer** – Provides input field for sending text messages, media, and attachments.

***

## **Step-by-Step Guide**

### **Navigation Flow**

This implementation follows Android's standard Activity navigation pattern:

1. **ConversationActivity** displays the list of conversations
2. User taps a conversation item
3. **MessageActivity** launches with the selected user/group data passed via Intent extras

***

### **Step 1: Set Up Conversation Activity**
Create an Activity - `ConversationActivity.kt` to manage and display the chat UI.
Create a new Activity called `ConversationActivity` to display the list of conversations.

#### **Layout**
Define the layout using the `CometChatConversations` component:
Define the layout using the `CometChatConversations` component in `activity_conversations.xml`:

```xml activity_conversations.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
Expand All @@ -54,7 +64,7 @@ Define the layout using the `CometChatConversations` component:

#### **Activity**

Initialize and handle conversation clicks:
Initialize the `CometChatConversations` component and handle conversation item clicks to navigate to the message screen:

<Tabs>
<Tab title="Kotlin">
Expand Down Expand Up @@ -189,10 +199,12 @@ This is necessary to properly manage the **UI Kit's lifecycle events**.
***

### **Step 2: Set Up Message Activity**
Create an Activity - `MessageActivity.kt` to manage and display the chat UI.
Create a new Activity - `MessageActivity` to display the chat interface.

#### **Layout**

Define the layout with `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` in `activity_message.xml`:

```xml activity_message.xml
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
Expand Down Expand Up @@ -236,7 +248,7 @@ Create an Activity - `MessageActivity.kt` to manage and display the chat UI.

#### **Activity**

Use the user/group passed from the conversation click:
Retrieve the user/group ID from the Intent extras and configure the message components:

<Tabs>
<Tab title="Kotlin">
Expand Down Expand Up @@ -458,7 +470,7 @@ public class MessageActivity extends AppCompatActivity {

### **Step 3: Update MainActivity**

Update the `MainActivity` to navigate to the `MessageActivity`:
Update your `MainActivity` to launch `ConversationActivity` after successful login:

<Tabs>
<Tab title="Kotlin">
Expand Down Expand Up @@ -595,15 +607,21 @@ public class MainActivity extends ComponentActivity {

***

## **Running the Project**
## **Running the Application**

Once the components are configured, build and run the app:
Once you've completed the setup, build and run your Android application:

```sh
gradle build
```

Ensure you've added the necessary permissions and initialized CometChat in your `Application` class.
<Note>
**Required Permissions**

Ensure you've added the necessary permissions in your `AndroidManifest.xml`:

```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```
</Note>

***

Expand Down
54 changes: 44 additions & 10 deletions ui-kit/android/android-one-to-one-chat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: "Building A One To One/Group Chat Experience"
sidebarTitle: "One To One/Group Chat"
---

The **One-to-One Chat** feature provides a streamlined **direct messaging interface**, making it ideal for **support chats, dating apps, and private messaging platforms**. This setup eliminates distractions by focusing solely on a **dedicated chat window**.
The **One-to-One Chat** feature provides a **direct messaging interface** for Android applications, ideal for **support chats, dating apps, and private messaging **. This implementation launches directly into a specific chat conversation without showing a conversation list, providing a **focused messaging experience**.

***

Expand All @@ -15,20 +15,32 @@ The **One-to-One Chat** feature provides a streamlined **direct messaging interf

### **Key Components**

1. **Chat Header** – Displays user/group name, profile image, and status.
2. **Message List** – Shows chat history and new messages.
3. **Message Composer** – Allows users to send messages, media, and reactions.
1. **Message Header** – Displays user/group name, avatar, and status.
2. **Message List** – Shows chat history with real-time message updates.
3. **Message Composer** – Provides input field for sending text messages, media, and attachments.

***

## **Step-by-Step Guide**

### **Use Case**

This pattern is ideal when you want to:
- Launch a chat directly from a user profile or contact card
- Open a support chat from a help button
- Start a conversation from a notification
- Navigate to a specific chat without showing the conversation list

The user or group ID is passed via Intent extras when launching the Activity.

***

### **Step 1: Set Up Message Activity**
Create an Activity - `MessageActivity.kt` to manage and display the chat UI.
Create an Activity - `MessageActivity` to display the full-screen chat interface.

#### **Layout**

Define the layout using CometChat UI Kit components:
Define the layout with `CometChatMessageHeader`, `CometChatMessageList`, and `CometChatMessageComposer` in `activity_message.xml`:

```xml activity_message.xml
<androidx.constraintlayout.widget.ConstraintLayout
Expand Down Expand Up @@ -73,6 +85,8 @@ Define the layout using CometChat UI Kit components:

#### **Activity**

Retrieve the user or group ID from the Intent extras and configure the message components:

<Tabs>
<Tab title="Kotlin">
```kotlin MessageActivity.kt
Expand Down Expand Up @@ -303,9 +317,19 @@ This is necessary to properly manage the **UI Kit's lifecycle events**.

***

### **Step 2: Update MainActivity**
### **Step 2: Launch MessageActivity from Your App**

Update the `MainActivity` to navigate to the `MessageActivity`:
Update your `MainActivity` (or any other Activity) to launch `MessageActivity` with the appropriate user or group ID:

<Info>
**Passing Data via Intent**

You can pass either:
- `uid` (String) - for one-to-one chats
- `guid` (String) - for group chats

The `MessageActivity` will automatically detect which type of chat to display based on the Intent extras.
</Info>

<Tabs>
<Tab title="Kotlin">
Expand Down Expand Up @@ -447,13 +471,23 @@ public class MainActivity extends ComponentActivity {

## **Running the Project**

Once the components are configured, build and run the app:
Once you've completed the setup, build and run the app:

```sh
gradle build
```

Ensure you've added the necessary permissions and initialized CometChat in your `Application` class.
<Note>
**Required Permissions**

Ensure you've added the necessary permissions in your `AndroidManifest.xml` and initialized CometChat in your `Application` class.
:

```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```
</Note>

***

Expand Down
Loading