@satek-team-intern/chatbot-widget 0.10.8 → 0.11.0

package/README.md

@@ -60,6 +60,7 @@ import { ChatWidget } from '@satek-vn/chatbot-widget';
 export default function App() {
   return (
     <ChatWidget
+      scope="internal"
       title="Hỗ trợ"
       workspace="dev"
       logoUrl="https://example.com/logo.png"
@@ -80,8 +81,8 @@ export default function App() {
       }}
       language="english"
       initPosition={{
-        x: 20,
-        y: 20,
+        right: 20,
+        bottom: 20,
       }}
     />
   );
@@ -108,6 +109,7 @@ if (container) {
   ReactDOM.createRoot(container).render(
     <React.StrictMode>
       <ChatWidget
+        scope="internal"
         title="Hỗ trợ khách hàng"
         workspace="production"
         logoUrl="https://example.com/logo.png"
@@ -128,8 +130,8 @@ if (container) {
         }}
         language="english"
         initPosition={{
-          x: 20,
-          y: 20,
+          right: 20,
+          bottom: 20,
         }}
       />
     </React.StrictMode>,
@@ -167,6 +169,7 @@ Or use jsdelivr CDN:
     <script src="https://unpkg.com/@satek-vn/chatbot-widget/dist/chatbot-widget.umd.js"></script>
     <script>
       ChatbotWidget.init({
+        scope: 'internal',
         title: 'Customer Support',
         workspace: 'production',
         logoUrl: 'https://example.com/logo.png',
@@ -187,8 +190,8 @@ Or use jsdelivr CDN:
         },
         language: 'english',
         initPosition: {
-          x: 20,
-          y: 20,
+          right: 20,
+          bottom: 20,
         },
       });
     </script>
@@ -202,31 +205,34 @@ Or use jsdelivr CDN:
 
 ### Props / Options
 
-| Name                      | Type   | Required | Description                                                                                                                               |
-| ------------------------- | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`                   | string | ✅       | Title of the chat widget                                                                                                                  |
-| `workspace`               | string | ✅       | Workspace identifier for multi-workspace support. Max 50 chars, supports lowercase, numbers, symbols (\_), (-), (.)                       |
-| `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`, `communication`, `chatModes`, `customizations`                               |
-| `features.attachments`    | array  | ❌       | Allowed file types for upload: `'image'`, `'video'`, `'audio'`, `'file'`, `'multiple'`. If not provided, no file upload allowed           |
-| `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: `[]`       |
-| `language`                | string | ❌       | Initial language setting: `'english'` or `'vietnamese'`. If not provided, user can toggle language via UI button. Default: `'vietnamese'` |
-| `initPosition`            | object | ❌       | Initial position of the widget. Object with `x` (distance from right edge) and `y` (distance from bottom edge) in pixels                  |
+| Name                      | Type   | Required | Description                                                                                                                                                                                                                                |
+| ------------------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `scope`                   | string | ❌       | Widget scope: `'external'` for external websites, `'internal'` for internal systems. Default: `'external'`                                                                                                                                 |
+| `title`                   | string | ✅       | Title of the chat widget                                                                                                                                                                                                                   |
+| `workspace`               | string | ✅       | Workspace identifier for multi-workspace support. Max 50 chars, supports lowercase, numbers, symbols (\_), (-), (.)                                                                                                                        |
+| `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`, `communication`, `chatModes`, `customizations`                                                                                                                                |
+| `features.attachments`    | array  | ❌       | Allowed file types for upload: `'image'`, `'video'`, `'audio'`, `'file'`, `'multiple'`. If not provided, no file upload allowed                                                                                                            |
+| `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, `'drag-and-drop'` to enable widget repositioning, `'resize-window'` to allow resizing the chat window. Default: `[]` |
+| `language`                | string | ❌       | Initial language setting: `'english'` or `'vietnamese'`. If not provided, user can toggle language via UI button. Default: `'vietnamese'`                                                                                                  |
+| `initPosition`            | object | ❌       | Initial position of the widget. Object with `right` (distance from right edge) and `bottom` (distance from bottom edge) in pixels                                                                                                          |
+| `disabledMembers`         | array  | ❌       | List of member IDs (codes) to hide from the member list in group chat. Only applies when `scope` is `'internal'`                                                                                                                           |
 
 ### Configuration example
 
 ```javascript
 {
+  scope: 'internal',
   title: 'Customer Support',
   workspace: 'production',
   logoUrl: 'https://example.com/logo.png',
@@ -247,9 +253,10 @@ Or use jsdelivr CDN:
   },
   language: 'english',
   initPosition: {
-    x: 20,
-    y: 20,
+    right: 20,
+    bottom: 20,
   },
+  disabledMembers: ['user_1008', 'user_1002'],
 }
 ```
 
@@ -420,16 +427,21 @@ Supported chat modes:
 - `'single'` - One-to-one direct messaging
 - `'group'` - Group chat with multiple participants
 
-### Allow color change
+### Configure widget customizations
 
-Enable users to change the widget's color and theme using customization features:
+Enable users to customize the widget interface and behavior:
 
 **React:**
 
 ```jsx
 <ChatWidget
   features={{
-    customizations: ['change-color', 'change-theme'],
+    customizations: [
+      'change-color',
+      'change-theme',
+      'drag-and-drop',
+      'resize-window',
+    ],
   }}
   // ... other props
 />
@@ -440,12 +452,24 @@ Enable users to change the widget's color and theme using customization features
 ```javascript
 ChatbotWidget.init({
   features: {
-    customizations: ['change-color', 'change-theme'],
+    customizations: [
+      'change-color',
+      'change-theme',
+      'drag-and-drop',
+      'resize-window',
+    ],
   },
   // ... other options
 });
 ```
 
+Supported customization options:
+
+- `'change-color'` - Allow users to change the primary color of the widget
+- `'change-theme'` - Allow users to toggle between light and dark themes
+- `'drag-and-drop'` - Allow users to reposition the widget on the screen by dragging it
+- `'resize-window'` - Allow users to resize the chat window by dragging its edges
+
 ### Configure language support
 
 You can set the initial language for the widget using the `language` prop:
@@ -1011,6 +1035,31 @@ await chatSDK.actionMessage(123, 456, 'remove');
 
 ---
 
+### `getSystemMessages(limit, page)` - Get list of system messages
+
+Retrieve a list of system messages for the current member.
+
+**Parameters:**
+- `limit` (Number, optional): Per page (default: 20)
+- `page` (Number, optional): Page (default: 1)
+
+**Returns:** Promise returning result
+
+**Example:**
+
+```javascript
+// Get last 20 messages
+const messages = await chatSDK.getSystemMessages();
+
+// Get 50 messages
+const moreMessages = await chatSDK.getSystemMessages(50);
+
+// Load history: page 2
+const oldMessages = await chatSDK.getSystemMessages(20, 2);
+```
+
+---
+
 ## Event System
 
 SDK uses an event system to notify real-time changes.
@@ -1019,6 +1068,7 @@ SDK uses an event system to notify real-time changes.
 
 ```javascript
 chatSDK.EVENTS = {
+  system_message: 'system.messages', // System message
   chats_created: 'chats.created', // New chat created
   chats_updated: 'chats.updated', // Chat updated
   chats_deleted: 'chats.deleted', // Chat deleted