@satek-team-intern/chatbot-widget 0.8.10 → 0.10.0

package/README.md

@@ -1,6 +1,35 @@
-# Chatbot Widget
+# @satek-vn/chatbot-widget
 
-A chatbot widget that can be integrated into any website, providing a seamless and interactive user experience. It is designed to be easily embedded and customizable, allowing businesses to engage with their customers effectively.
+A powerful chatbot widget package that can be integrated into any website, providing a seamless and interactive user experience. It is designed to be easily embedded and customizable, allowing businesses to engage with their customers effectively.
+
+## 📋 Table of Contents
+
+### Widget Section (English)
+
+1. [Features](#features)
+2. [Installation](#installation)
+3. [Widget Usage](#widget-usage)
+4. [Configuration](#configuration)
+5. [Customization](#customization)
+6. [Troubleshooting](#troubleshooting)
+
+### SDK Section (Advanced)
+
+7. [SDK Guide](#sdk-guide-english)
+8. [SDK Initialization](#sdk-initialization)
+9. [Authentication Management](#authentication-management)
+10. [Receiver Management](#receiver-management)
+11. [Member Management](#member-management)
+12. [Chat Management](#chat-management)
+13. [Message Management](#message-management)
+14. [Event System](#event-system)
+
+### Support & License
+
+15. [Support](#support)
+16. [License](#license)
+
+---
 
 ## Features
 
@@ -10,6 +39,8 @@ A chatbot widget that can be integrated into any website, providing a seamless a
 - 🔧 Easy to integrate into any website
 - 💬 Support for advanced chat features
 
+---
+
 ## Installation
 
 ### 1. React Component (npm)
@@ -17,19 +48,20 @@ A chatbot widget that can be integrated into any website, providing a seamless a
 #### Step 1: Install package
 
 ```bash
-npm install @satek-team-intern/chatbot-widget
+npm install @satek-vn/chatbot-widget
 ```
 
 #### Step 2: Import and use
 
 ```jsx
 import React from 'react';
-import { ChatWidget } from '@satek-team-intern/chatbot-widget';
+import { ChatWidget } from '@satek-vn/chatbot-widget';
 
 export default function App() {
   return (
     <ChatWidget
       title="Hỗ trợ"
+      logoUrl="https://example.com/logo.png"
       primaryColor="#6366f1"
       auth={{
         code: 'user_1002',
@@ -39,14 +71,13 @@ export default function App() {
         email: 'user@example.com',
       }}
       chatKey="your_chat_key_here"
-      features={[
-        'group-chat',
-        'voice',
-        'attachment:image',
-        'change-color',
-        'language:english',
-        'language:vietnamese',
-      ]}
+      features={{
+        attachments: ['image', 'video', 'file'],
+        languages: ['english', 'vietnamese'],
+        communication: ['voice'],
+        chatModes: ['single', 'group'],
+        customizations: ['change-color', 'change-theme'],
+      }}
     />
   );
 }
@@ -65,7 +96,7 @@ export default function App() {
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ChatWidget } from '@satek-team-intern/chatbot-widget';
+import { ChatWidget } from '@satek-vn/chatbot-widget';
 
 const container = document.getElementById('root');
 if (container) {
@@ -73,6 +104,7 @@ if (container) {
     <React.StrictMode>
       <ChatWidget
         title="Hỗ trợ khách hàng"
+        logoUrl="https://example.com/logo.png"
         primaryColor="#6366f1"
         auth={{
           code: 'user_1002',
@@ -82,15 +114,13 @@ if (container) {
           email: 'user@example.com',
         }}
         chatKey="your_chat_key_here"
-        features={[
-          'group-chat',
-          'voice',
-          'attachment:image',
-          'attachment:multiple',
-          'change-color',
-          'language:english',
-          'language:vietnamese',
-        ]}
+        features={{
+          attachments: ['image', 'video', 'audio', 'file', 'multiple'],
+          languages: ['english', 'vietnamese'],
+          communication: ['voice'],
+          chatModes: ['single', 'group'],
+          customizations: ['change-color', 'change-theme'],
+        }}
       />
     </React.StrictMode>,
   );
@@ -102,13 +132,13 @@ if (container) {
 #### Step 1: Add script tag
 
 ```html
-<script src="https://unpkg.com/@satek-team-intern/chatbot-widget/dist/chatbot-widget.umd.js"></script>
+<script src="https://unpkg.com/@satek-vn/chatbot-widget/dist/chatbot-widget.umd.js"></script>
 ```
 
 Or use jsdelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@satek-team-intern/chatbot-widget/dist/chatbot-widget.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@satek-vn/chatbot-widget/dist/chatbot-widget.umd.js"></script>
 ```
 
 #### Step 2: Initialize widget
@@ -124,10 +154,11 @@ Or use jsdelivr CDN:
   <body>
     <h1>Welcome to our website</h1>
 
-    <script src="https://unpkg.com/@satek-team-intern/chatbot-widget/dist/chatbot-widget.umd.js"></script>
+    <script src="https://unpkg.com/@satek-vn/chatbot-widget/dist/chatbot-widget.umd.js"></script>
     <script>
       ChatbotWidget.init({
         title: 'Customer Support',
+        logoUrl: 'https://example.com/logo.png',
         primaryColor: '#6366f1',
         auth: {
           code: 'user_1001',
@@ -137,43 +168,50 @@ Or use jsdelivr CDN:
           email: 'user@example.com',
         },
         chatKey: 'your_chat_key_here',
-        features: [
-          'group-chat',
-          'voice',
-          'attachment:image',
-          'attachment:multiple',
-          'change-color',
-          'language:english',
-          'language:vietnamese',
-        ],
+        features: {
+          attachments: ['image', 'video', 'audio', 'file', 'multiple'],
+          languages: ['english', 'vietnamese'],
+          communication: ['voice'],
+          chatModes: ['single', 'group'],
+          customizations: ['change-color', 'change-theme'],
+        },
       });
     </script>
   </body>
 </html>
 ```
 
-## Configuration
+---
+
+## Widget Usage
 
 ### Props / Options
 
-| Name           | Type   | Required | Description                                                                                                                                                                                                                           |
-| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`        | string | ✅       | Title of the chat widget                                                                                                                                                                                                              |
-| `primaryColor` | string | ❌       | Primary color (hex format). Default: #6366f1                                                                                                                                                                                          |
-| `chatKey`      | string | ✅       | Authentication key to connect to backend                                                                                                                                                                                              |
-| `auth`         | object | ✅       | User authentication information                                                                                                                                                                                                       |
-| `auth.code`    | string | ✅       | Unique user identifier                                                                                                                                                                                                                |
-| `auth.name`    | string | ✅       | User name                                                                                                                                                                                                                             |
-| `auth.avatar`  | string | ✅       | URL of user avatar image                                                                                                                                                                                                              |
-| `auth.phone`   | string | ❌       | User phone number                                                                                                                                                                                                                     |
-| `auth.email`   | string | ✅       | User email address                                                                                                                                                                                                                    |
-| `features`     | array  | ❌       | Array of enabled features: `'group-chat'`, `'voice'`, `'attachment:image'`, `'attachment:video'`, `'attachment:audio'`, `'attachment:file'`, `'attachment:multiple'`, `'change-color'`, `'language:english'`, `'language:vietnamese'` |
+| Name                      | Type   | Required | Description                                                                                                                                              |
+| ------------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`                   | string | ✅       | Title of the chat widget                                                                                                                                 |
+| `logoUrl`                 | string | ❌       | URL of the logo image to display in the widget header                                                                                                    |
+| `primaryColor`            | string | ❌       | Primary color (hex format). Default: #6366f1                                                                                                             |
+| `chatKey`                 | string | ✅       | Authentication key to connect to backend                                                                                                                 |
+| `auth`                    | object | ✅       | User authentication information                                                                                                                          |
+| `auth.code`               | string | ✅       | Unique user identifier                                                                                                                                   |
+| `auth.name`               | string | ✅       | User name                                                                                                                                                |
+| `auth.avatar`             | string | ✅       | URL of user avatar image                                                                                                                                 |
+| `auth.phone`              | string | ❌       | User phone number                                                                                                                                        |
+| `auth.email`              | string | ✅       | User email address                                                                                                                                       |
+| `features`                | object | ❌       | Feature configuration object with properties: `attachments`, `languages`, `communication`, `chatModes`, `customizations`                                 |
+| `features.attachments`    | array  | ❌       | Allowed file types for upload: `'image'`, `'video'`, `'audio'`, `'file'`, `'multiple'`. If not provided, no file upload allowed                          |
+| `features.languages`      | array  | ❌       | Supported languages: `'english'`, `'vietnamese'`. When multiple languages are enabled, a language switcher appears in the widget. Default: `['english']` |
+| `features.communication`  | array  | ❌       | Communication features: `'voice'` for voice recording and audio messages. Default: `[]`                                                                  |
+| `features.chatModes`      | array  | ❌       | Supported chat modes: `'single'` for one-to-one chat, `'group'` for group chat. Default: `['single']`                                                    |
+| `features.customizations` | array  | ❌       | User customization options: `'change-color'` to allow color customization, `'change-theme'` to allow theme switching. Default: `[]`                      |
 
 ### Configuration example
 
 ```javascript
 {
   title: 'Customer Support',
+  logoUrl: 'https://example.com/logo.png',
   primaryColor: '#FF6B6B',
   auth: {
     code: 'customer_123',
@@ -183,13 +221,25 @@ Or use jsdelivr CDN:
     email: 'john@example.com',
   },
   chatKey: 'secure_key_abc123xyz',
-  features: ['group-chat', 'voice', 'attachment:image', 'attachment:multiple', 'change-color', 'language:english', 'language:vietnamese'],
+  features: {
+    attachments: ['image', 'video', 'file', 'multiple'],
+    languages: ['english', 'vietnamese'],
+    communication: ['voice'],
+    chatModes: ['single', 'group'],
+    customizations: ['change-color', 'change-theme'],
+  },
 }
 ```
 
+---
+
+## Configuration
+
+---
+
 ## Customization
 
-### Change color
+### Change primary color
 
 You can customize the primary color of the widget using the `primaryColor` prop:
 
@@ -213,6 +263,8 @@ ChatbotWidget.init({
 
 ### Change title
 
+**React:**
+
 ```jsx
 <ChatWidget
   title="Customer Service"
@@ -220,6 +272,8 @@ ChatbotWidget.init({
 />
 ```
 
+**UMD:**
+
 ```javascript
 ChatbotWidget.init({
   title: 'Customer Service',
@@ -227,13 +281,40 @@ ChatbotWidget.init({
 });
 ```
 
+### Change logo
+
+You can customize the logo displayed in the widget header using the `logoUrl` prop:
+
+**React:**
+
+```jsx
+<ChatWidget
+  logoUrl="https://example.com/logo.png"
+  // ... other props
+/>
+```
+
+**UMD:**
+
+```javascript
+ChatbotWidget.init({
+  logoUrl: 'https://example.com/logo.png',
+  // ... other options
+});
+```
+
 ### Configure features
 
 **React:**
 
 ```jsx
 <ChatWidget
-  features={['group-chat', 'voice', 'attachment:image']}
+  features={{
+    attachments: ['image', 'video', 'file'],
+    languages: ['english', 'vietnamese'],
+    communication: ['voice'],
+    chatModes: ['single', 'group'],
+  }}
   // ... other props
 />
 ```
@@ -242,20 +323,122 @@ ChatbotWidget.init({
 
 ```javascript
 ChatbotWidget.init({
-  features: ['group-chat', 'voice', 'attachment:image'],
+  features: {
+    attachments: ['image', 'video', 'file'],
+    languages: ['english', 'vietnamese'],
+    communication: ['voice'],
+    chatModes: ['single', 'group'],
+  },
+  // ... other options
+});
+```
+
+### Configure supported attachments
+
+Specify which file types users can upload:
+
+**React:**
+
+```jsx
+<ChatWidget
+  features={{
+    attachments: ['image', 'video', 'audio', 'file', 'multiple'],
+  }}
+  // ... other props
+/>
+```
+
+**UMD:**
+
+```javascript
+ChatbotWidget.init({
+  features: {
+    attachments: ['image', 'video', 'audio', 'file', 'multiple'],
+  },
+  // ... other options
+});
+```
+
+Supported attachment types:
+
+- `'image'` - Image files (jpg, png, etc.)
+- `'video'` - Video files
+- `'audio'` - Audio files
+- `'file'` - General documents
+- `'multiple'` - Allow selecting multiple files at once
+
+### Configure communication features
+
+Enable audio and video communication capabilities:
+
+**React:**
+
+```jsx
+<ChatWidget
+  features={{
+    communication: ['voice'],
+  }}
+  // ... other props
+/>
+```
+
+**UMD:**
+
+```javascript
+ChatbotWidget.init({
+  features: {
+    communication: ['voice'],
+  },
+  // ... other options
+});
+```
+
+Supported communication features:
+
+- `'voice'` - Voice recording and sending audio messages
+
+### Configure chat modes
+
+Enable single-to-single or group chat capabilities:
+
+**React:**
+
+```jsx
+<ChatWidget
+  features={{
+    chatModes: ['single', 'group'],
+  }}
+  // ... other props
+/>
+```
+
+**UMD:**
+
+```javascript
+ChatbotWidget.init({
+  features: {
+    chatModes: ['single', 'group'],
+  },
   // ... other options
 });
 ```
 
+Supported chat modes:
+
+- `'single'` - One-to-one direct messaging
+- `'group'` - Group chat with multiple participants
+
 ### Allow color change
 
-Enable users to change the widget's color using the `'change-color'` feature:
+Enable users to change the widget's color and theme using customization features:
 
 **React:**
 
 ```jsx
 <ChatWidget
-  features={['change-color']}
+  features={{
+    customizations: ['change-color', 'change-theme'],
+  }}
   // ... other props
 />
 ```
@@ -264,20 +447,24 @@ Enable users to change the widget's color using the `'change-color'` feature:
 
 ```javascript
 ChatbotWidget.init({
-  features: ['change-color'],
+  features: {
+    customizations: ['change-color', 'change-theme'],
+  },
   // ... other options
 });
 ```
 
 ### Configure language support
 
-Enable language switching by adding language options to the features array:
+Enable language switching by adding language options to the `languages` array in features:
 
 **React:**
 
 ```jsx
 <ChatWidget
-  features={['language:english', 'language:vietnamese']}
+  features={{
+    languages: ['english', 'vietnamese'],
+  }}
   // ... other props
 />
 ```
@@ -286,18 +473,22 @@ Enable language switching by adding language options to the features array:
 
 ```javascript
 ChatbotWidget.init({
-  features: ['language:english', 'language:vietnamese'],
+  features: {
+    languages: ['english', 'vietnamese'],
+  },
   // ... other options
 });
 ```
 
 Supported languages:
 
-- `'language:english'` - English
-- `'language:vietnamese'` - Tiếng Việt
+- `'english'` - English
+- `'vietnamese'` - Tiếng Việt
 
 **Note:** When multiple language options are enabled, users will see a language switcher in the widget interface.
 
+---
+
 ## Troubleshooting
 
 ### Widget not displaying
@@ -319,14 +510,690 @@ npm install @reduxjs/toolkit react-redux wasm-media-encoders
 - Check `chatKey` and backend configuration
 - Make sure CORS is properly configured on the server
 
+---
+
+## 🔌 Advanced: Core SDK API (SDK Documentation)
+
+> **Bridge Note:** The Chatbot Widget is a pre-built, user-friendly interface built on top of the Core SDK. If you're using the Widget component, you don't need to interact with the SDK directly. This section is for **advanced users** who want to build a **custom UI** or integrate chat functionality into their own applications using the SDK's lower-level API.
+
+---
+
+### SDK Usage Guide
+
+This documentation provides detailed instructions on how to use the Chat SDK functions for real-time chat applications.
+
+#### SDK Table of Contents
+
+1. [SDK Initialization](#sdk-initialization)
+2. [Authentication Management](#authentication-management)
+3. [Receiver Management](#receiver-management)
+4. [Member Management](#member-management)
+5. [Chat Management](#chat-management)
+6. [Message Management](#message-management)
+7. [Event System](#event-system)
+
+---
+
+#### SDK Initialization
+
+##### Step 1: Import SDK
+
+```html
+<script src="https://chat.satek.vn/sdk/1.0.js?key=[API KEY]"></script>
+```
+
+##### Step 2: Create instance and configure
+
+```javascript
+// Create SDK instance
+const chatSDK = new initSChat();
+
+// Create SDK instance with a workspace
+const chatSDK = new initSChat('dev');
+
+// Configure if needed
+chatSDK.setConfig({
+  // Custom configuration
+});
+```
+
+---
+
+#### Authentication Management
+
+#### `setAuth(data)` - Login/Create Account
+
+Create or login a member account.
+
+**Parameters:**
+
+- `data` (Object): Member information
+  - `code` (String, required): Unique identifier code
+  - `name` (String, required): Member name
+  - `avatar` (String, optional): Avatar image URL
+  - `phone` (String, optional): Phone number
+  - `email` (String, optional): Email address
+
+**Returns:** Promise returning member object
+
+**Example:**
+
+```javascript
+await chatSDK.setAuth({
+  code: 'user_1001',
+  name: 'John Doe',
+  avatar: 'https://example.com/avatar.jpg',
+  phone: '0123456789',
+  email: 'user@example.com',
+});
+```
+
+**Note:**
+
+- This function also automatically connects to the realtime server
+- Loads unread message count from server
+- Calling this function initializes the realtime connection
+
+---
+
+#### `getAuth()` - Get Current Account Information
+
+Get logged-in member information.
+
+**Returns:** Member object or null
+
+**Example:**
+
+```javascript
+const currentUser = chatSDK.getAuth();
+console.log(currentUser);
+```
+
+---
+
+#### `clearAuth()` - Logout
+
+Clear current authentication information.
+
+**Example:**
+
+```javascript
+chatSDK.clearAuth();
+```
+
+---
+
+#### Receiver Management
+
+#### `setReceiver(data)` - Set Receiver
+
+Create receiver account (typically used for 1-1 chat).
+
+**Parameters:**
+
+- `data` (Object): Receiver information (same as `setAuth`)
+
+**Returns:** Promise returning receiver object
+
+**Example:**
+
+```javascript
+await chatSDK.setReceiver({
+  code: 'user_1002',
+  name: 'Jane Doe',
+  avatar: 'https://example.com/avatar2.jpg',
+});
+```
+
+---
+
+#### `getReceiver()` - Get Receiver Information
+
+**Returns:** Receiver object or null
+
+**Example:**
+
+```javascript
+const receiver = chatSDK.getReceiver();
+console.log(receiver);
+```
+
+---
+
+#### `clearReceiver()` - Clear Receiver Information
+
+**Example:**
+
+```javascript
+chatSDK.clearReceiver();
+```
+
+---
+
+#### Member Management
+
+#### `getMembers(chatId, limit, page, include)` - Get Member List
+
+Get list of members in a chat or all members.
+
+**Parameters:**
+
+- `chatId` (Number, optional): Chat ID. If null, get all members
+- `limit` (Number, optional): Number of records (default: 0 = all)
+- `page` (Number, optional): Page number (default: 1)
+- `include` (String, optional): Additional fields to retrieve
+
+**Returns:** Promise returning member list
+
+**Example:**
+
+```javascript
+// Get all members
+const allMembers = await chatSDK.getMembers();
+
+// Get members of a chat
+const chatMembers = await chatSDK.getMembers(123, 50, 1);
+
+// Pagination
+const page1Members = await chatSDK.getMembers(123, 10, 1);
+const page2Members = await chatSDK.getMembers(123, 10, 2);
+```
+
+---
+
+#### `addMember(chatId, memberId)` - Add Member to Group
+
+Invite another member to the group chat.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+- `memberId` (Number, required): Member ID to add
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+await chatSDK.addMember(123, 456);
+```
+
+---
+
+#### `removeMember(chatId, memberId)` - Remove Member from Group
+
+Remove a member from the group or member leaves the group.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+- `memberId` (Number, required): Member ID to remove
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+await chatSDK.removeMember(123, 456);
+```
+
+**Note:** If you remove yourself from the group, the group will be completely deleted
+
+---
+
+#### Chat Management
+
+#### `getChats(limit, page)` - Get Chat List
+
+Get list of chats for the current member.
+
+**Parameters:**
+
+- `limit` (Number, optional): Number of items (default: 0 = all)
+- `page` (Number, optional): Page number (default: 1)
+
+**Returns:** Promise returning chat list
+
+**Example:**
+
+```javascript
+// Get all chats
+const chats = await chatSDK.getChats();
+
+// Pagination: 20 chats per page
+const page1 = await chatSDK.getChats(20, 1);
+const page2 = await chatSDK.getChats(20, 2);
+```
+
+---
+
+#### `findChatByReceiver(receiverId)` - Find Chat with Receiver
+
+Find 1-1 chat with a specific person.
+
+**Parameters:**
+
+- `receiverId` (Number, required): Receiver ID
+
+**Returns:** Promise returning chat object or null
+
+**Example:**
+
+```javascript
+const existChat = await chatSDK.findChatByReceiver(456);
+
+if (existChat) {
+  console.log('Chat already exists');
+} else {
+  console.log('No chat with this person yet');
+}
+```
+
+---
+
+#### `addChat(receiverId, content)` - Create 1-1 Chat
+
+Create a new chat with someone (or get existing chat if already exists).
+
+**Parameters:**
+
+- `receiverId` (Number, required): Receiver ID
+- `content` (String, optional): First message (if needed)
+
+**Returns:** Promise returning chat object
+
+**Example:**
+
+```javascript
+// Create new chat
+const chat1 = await chatSDK.addChat(456);
+
+// Create chat with first message
+const chat2 = await chatSDK.addChat(456, 'Hello!');
+```
+
+---
+
+#### `addGroup(memberIds, name, avatar)` - Create Group Chat
+
+Create a new group chat.
+
+**Parameters:**
+
+- `memberIds` (Array, required): List of member IDs (at least 2 other members)
+- `name` (String, required): Group name
+- `avatar` (String|File, optional): New avatar URL or File
+
+**Returns:** Promise returning group object
+
+**Example:**
+
+```javascript
+// Create simple group
+const group = await chatSDK.addGroup([456, 789], 'Project A Group');
+
+// Create group with avatar
+const groupWithAvatar = await chatSDK.addGroup(
+  [456, 789],
+  'Project B Group',
+  'https://example.com/group.jpg',
+);
+```
+
+---
+
+#### `updateGroup(chatId, name, avatar)` - Update Group Information
+
+Update group name and avatar.
+
+**Parameters:**
+
+- `chatId` (Number, required): Group ID
+- `name` (String, required): New group name
+- `avatar` (String|File, optional): New avatar URL or File
+
+**Returns:** Promise returning updated group object
+
+**Example:**
+
+```javascript
+// Update name only
+await chatSDK.updateGroup(123, 'New Group Name');
+
+// Update both name and avatar
+await chatSDK.updateGroup(
+  123,
+  'New Group Name',
+  'https://example.com/new-avatar.jpg',
+);
+```
+
+---
+
+#### `removeChat(chatId)` - Delete Chat
+
+Delete a chat (1-1 chat or group).
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+await chatSDK.removeChat(123);
+```
+
+---
+
+#### `readChat(chatId)` - Mark Chat as Read
+
+Mark a chat as read.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+await chatSDK.readChat(123);
+```
+
+---
+
+#### `unreadChat(chatId)` - Mark Chat as Unread
+
+Mark a chat as unread.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+await chatSDK.unreadChat(123);
+```
+
+---
+
+#### Message Management
+
+#### `getMessages(chatId, limit, page)` - Get Message List
+
+Get list of messages in a chat (supports pagination for loading history).
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+- `limit` (Number, optional): Number of messages (default: 20)
+- `page` (Number, optional): Page number (default: 1)
+
+**Returns:** Promise returning message list
+
+**Example:**
+
+```javascript
+// Get last 20 messages
+const messages = await chatSDK.getMessages(123);
+
+// Get 50 messages
+const moreMessages = await chatSDK.getMessages(123, 50);
+
+// Load history: page 2
+const oldMessages = await chatSDK.getMessages(123, 20, 2);
+```
+
+---
+
+#### `addMessage(chatId, content, files, replyId)` - Send Message
+
+Send a message with content, files, or reply to another message.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+- `content` (String, optional): Message content (required if no files)
+- `files` (FileList|File[], optional): List of files to send
+- `replyId` (Number, optional): Message ID to reply to
+
+**Returns:** Promise returning sent message object
+
+**Example:**
+
+```javascript
+// Send text message
+await chatSDK.addMessage(123, 'Hello!');
+
+// Send message with file
+const fileInput = document.querySelector('input[type=file]');
+const files = fileInput.files;
+await chatSDK.addMessage(123, 'Check this file', files);
+
+// Reply to another message
+await chatSDK.addMessage(123, 'Agreed!', null, 456);
+
+// Send file only (no content)
+await chatSDK.addMessage(123, null, files);
+```
+
+---
+
+#### `actionMessage(chatId, messageId, action)` - Interact with Message
+
+Perform interactions with messages like like, love, revoke, remove.
+
+**Parameters:**
+
+- `chatId` (Number, required): Chat ID
+- `messageId` (Number, required): Message ID
+- `action` (String, required): Interaction type
+  - `like`: Like message
+  - `love`: Love message
+  - `revoke`: Revoke message (delete for everyone)
+  - `remove`: Remove message (disable only on your device)
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+// Like message
+await chatSDK.actionMessage(123, 456, 'like');
+
+// Love message
+await chatSDK.actionMessage(123, 456, 'love');
+
+// Revoke message
+await chatSDK.actionMessage(123, 456, 'revoke');
+
+// Remove message
+await chatSDK.actionMessage(123, 456, 'remove');
+```
+
+---
+
+## Event System
+
+SDK uses an event system to notify real-time changes.
+
+### List of Events
+
+```javascript
+chatSDK.EVENTS = {
+  chats_created: 'chats.created', // New chat created
+  chats_updated: 'chats.updated', // Chat updated
+  chats_deleted: 'chats.deleted', // Chat deleted
+  chats_member: 'chats.member', // Member joined/left group
+  chats_action: 'chats.action', // Mark read/unread
+  chats_message: 'chats.message', // New message or action
+  members_connect: 'members.connect', // Member connected (online)
+  members_disconnect: 'members.disconnect', // Member disconnected (offline)
+  new_message: 'new_message', // Unread message count updated
+};
+```
+
+---
+
+### `addEventListener(event, listener)` - Register Event
+
+Listen to a real-time event.
+
+**Parameters:**
+
+- `event` (String, required): Event name (from `EVENTS`)
+- `listener` (Function, required): Callback function executed when event occurs
+
+**Example:**
+
+```javascript
+// Listen for new messages
+chatSDK.addEventListener(chatSDK.EVENTS.chats_message, (data) => {
+  console.log('New message:', data.message);
+  console.log('Chat:', data.chat);
+  console.log('Type:', data.type);
+});
+
+// Listen for new chats
+chatSDK.addEventListener(chatSDK.EVENTS.chats_created, (data) => {
+  console.log('New chat:', data.chat);
+});
+
+// Listen for chat updates
+chatSDK.addEventListener(chatSDK.EVENTS.chats_updated, (data) => {
+  console.log('Updated chat:', data.chat);
+});
+
+// Listen for chat deletion
+chatSDK.addEventListener(chatSDK.EVENTS.chats_deleted, (data) => {
+  console.log('Deleted chat ID:', data.chat_id);
+});
+
+// Listen for member join/leave
+chatSDK.addEventListener(chatSDK.EVENTS.chats_member, (data) => {
+  if (data.type === 'join') {
+    console.log('New member:', data.member);
+  } else if (data.type === 'leave') {
+    console.log('Member left: ID', data.member_id);
+  }
+});
+
+// Listen for read/unread actions
+chatSDK.addEventListener(chatSDK.EVENTS.chats_action, (data) => {
+  console.log('Action type:', data.type);
+  console.log('Chat:', data.chat);
+});
+
+// Listen for member online/offline status
+chatSDK.addEventListener(chatSDK.EVENTS.members_connect, (data) => {
+  console.log('Member connected - Socket ID:', data.socketId);
+  console.log('Timestamp:', data.timestamp);
+});
+
+chatSDK.addEventListener(chatSDK.EVENTS.members_disconnect, (data) => {
+  console.log('Member disconnected - Socket ID:', data.socketId);
+});
+
+// Listen for unread message count
+chatSDK.addEventListener(chatSDK.EVENTS.new_message, (data) => {
+  console.log('Unread messages:', data.new);
+});
+```
+
+---
+
+### `removeEventListener(event, listener)` - Unregister Event
+
+Stop listening to an event.
+
+**Parameters:**
+
+- `event` (String, required): Event name
+- `listener` (Function, optional): Callback function to remove. If null, remove all listeners
+
+**Example:**
+
+```javascript
+// Define listener function
+const messageListener = (data) => {
+  console.log('Message:', data.message);
+};
+
+// Register
+chatSDK.addEventListener(chatSDK.EVENTS.chats_message, messageListener);
+
+// Unregister specific function
+chatSDK.removeEventListener(chatSDK.EVENTS.chats_message, messageListener);
+
+// Remove all listeners for the event
+chatSDK.removeEventListener(chatSDK.EVENTS.chats_message);
+```
+
+---
+
+### `setConfig(config)` - Set Configuration
+
+Set custom configuration options for SDK.
+
+**Parameters:**
+
+- `config` (Object): Configuration options
+
+**Example:**
+
+```javascript
+chatSDK.setConfig({
+  debugMode: true,
+  maxRetries: 3,
+});
+```
+
+---
+
+### `runEvent(name, data)` - Push Custom Event
+
+Push an event to all listeners (usually used for debugging or custom logic).
+
+**Parameters:**
+
+- `name` (String, required): Event name
+- `data` (Object): Event data
+
+**Example:**
+
+```javascript
+chatSDK.runEvent(chatSDK.EVENTS.new_message, { new: 5 });
+```
+
+---
+
+## Important Notes
+
+1. **Realtime Connection**: The `setAuth()` function automatically connects realtime, no additional call needed
+2. **Promise-based**: All API functions (except events) return Promise, use `async/await`
+3. **Event Listeners**: Multiple listeners can be registered for a single event
+
+---
+
 ## Support
 
-To report bugs or request new features, please create an issue on the repository.
+For any feedback or support, please contact us via email: info@satek.vn or phone: 024.66.88.33.55.
+
+---
 
 ## License
 
 MIT
 
+---
+
 ## Author
 
-Satek Team Intern
+Satek Team