@satek-team-intern/chatbot-widget 0.10.5 → 0.10.7

package/README.md

@@ -76,7 +76,12 @@ export default function App() {
         attachments: ['image', 'video', 'file'],
         communication: ['voice'],
         chatModes: ['single', 'group'],
-        customizations: ['change-color', 'change-theme', 'multi-language'],
+        customizations: ['change-color', 'change-theme'],
+      }}
+      language="english"
+      initPosition={{
+        x: 20,
+        y: 20,
       }}
     />
   );
@@ -119,7 +124,12 @@ if (container) {
           attachments: ['image', 'video', 'audio', 'file', 'multiple'],
           communication: ['voice'],
           chatModes: ['single', 'group'],
-          customizations: ['change-color', 'change-theme', 'multi-language'],
+          customizations: ['change-color', 'change-theme'],
+        }}
+        language="english"
+        initPosition={{
+          x: 20,
+          y: 20,
         }}
       />
     </React.StrictMode>,
@@ -173,7 +183,12 @@ Or use jsdelivr CDN:
           attachments: ['image', 'video', 'audio', 'file', 'multiple'],
           communication: ['voice'],
           chatModes: ['single', 'group'],
-          customizations: ['change-color', 'change-theme', 'multi-language'],
+          customizations: ['change-color', 'change-theme'],
+        },
+        language: 'english',
+        initPosition: {
+          x: 20,
+          y: 20,
         },
       });
     </script>
@@ -187,24 +202,26 @@ 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: `[]` |
+| 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                  |
 
 ### Configuration example
 
@@ -226,7 +243,12 @@ Or use jsdelivr CDN:
     attachments: ['image', 'video', 'file', 'multiple'],
     communication: ['voice'],
     chatModes: ['single', 'group'],
-    customizations: ['change-color', 'change-theme', 'multi-language'],
+    customizations: ['change-color', 'change-theme'],
+  },
+  language: 'english',
+  initPosition: {
+    x: 20,
+    y: 20,
   },
 }
 ```
@@ -303,36 +325,6 @@ ChatbotWidget.init({
 });
 ```
 
-### Configure features
-
-**React:**
-
-```jsx
-<ChatWidget
-  features={{
-    attachments: ['image', 'video', 'file'],
-    communication: ['voice'],
-    chatModes: ['single', 'group'],
-    customizations: ['multi-language'],
-  }}
-  // ... other props
-/>
-```
-
-**UMD:**
-
-```javascript
-ChatbotWidget.init({
-  features: {
-    attachments: ['image', 'video', 'file'],
-    communication: ['voice'],
-    chatModes: ['single', 'group'],
-    customizations: ['multi-language'],
-  },
-  // ... other options
-});
-```
-
 ### Configure supported attachments
 
 Specify which file types users can upload:
@@ -454,17 +446,15 @@ ChatbotWidget.init({
 });
 ```
 
-### Configure multi-language support
+### Configure language support
 
-Enable multi-language support by adding `'multi-language'` to the customizations array:
+You can set the initial language for the widget using the `language` prop:
 
 **React:**
 
 ```jsx
 <ChatWidget
-  features={{
-    customizations: ['multi-language'],
-  }}
+  language="vietnamese"
   // ... other props
 />
 ```
@@ -473,14 +463,20 @@ Enable multi-language support by adding `'multi-language'` to the customizations
 
 ```javascript
 ChatbotWidget.init({
-  features: {
-    customizations: ['multi-language'],
-  },
+  language: 'vietnamese',
   // ... other options
 });
 ```
 
-When `'multi-language'` is enabled, users will see a language switcher in the widget interface to switch between available languages (English and Vietnamese).
+**Language behavior:**
+
+- **When `language` is provided**: The widget will use the specified language (either `'english'` or `'vietnamese'`) and the user can toggle to another language via the UI button
+- **When `language` is not provided**: The widget defaults to Vietnamese, and users can toggle between English and Vietnamese using the language switcher button in the interface
+
+Supported languages:
+
+- `'english'` - English interface
+- `'vietnamese'` - Vietnamese interface
 
 ---