connect-x-reactnative-livechat-sdk 0.2.0 → 1.2.0

package/README.md

@@ -1,34 +1,136 @@
-# connect-x-reactnative-livechat-sdk
+# ConnectX Live Chat SDK
 
-for Live Chat
+An SDK for easily integrating the ConnectX Live Chat into your React Native application for Connect X ticket. You need to config Live Chat connector from [Connect-X](https://app.connect-x.tech/) by navigating to: Organization Settings → Connector → Live Chat.
 
-## Installation
+## ✨ Features
 
-```sh
+* Displays a chat window as a modal over the main screen.
+* Supports sending text messages, images, and document.
+* Displays chat history with date partitions.
+* Customizable styles and colors from from [Connect-X](https://app.connect-x.tech/) by navigating to: Organization Settings → Connector → Live Chat → Style.
+* Supports custom header components.
+* Image preview with zoom capabilities.
+
+## 🔧 Installation
+
+```bash
 npm install connect-x-reactnative-livechat-sdk
+
+#or
+
+yarn add connect-x-reactnative-livechat-sdk
+```
+
+### Additional Peer Dependencies
+
+This library requires some peer dependencies. You need to install these libraries in your project as well:
+
+```bash
+npm install socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info
+
+#or
+
+yarn add socket.io-client @react-native-documents/picker react-native-svg react-native-image-zoom-viewer react-native-device-info
+```
+
+## 🚀 Usage
+
+### 1. Wrap Your App with `ChatProvider`
+
+In your main application file (e.g., `App.tsx` or `index.js`), you must import `ChatProvider` and wrap your root component with it.
+
+```tsx
+// App.tsx
+import React from 'react';
+import { View, Button, StyleSheet } from 'react-native';
+import { ChatProvider, LiveChat } from 'connect-x-reactnative-livechat-sdk';
+
+const AppContent = () => {
+  // ... Your app content
+  return (
+    <View style={styles.container}>
+      <Button
+        title="Open Live Chat"
+        onPress={() => {
+          LiveChat.show({
+            token: 'YOUR_AUTH_TOKEN',
+            orgId: 'YOUR_ORGANIZATION_ID',
+            channelId: 'YOUR_CHANNEL_ID',
+            externalValue: 'YOUR_EXTERNAL_VALUE',
+          });
+        }}
+      />
+    </View>
+  );
+};
+
+const App = () => {
+  return (
+    <ChatProvider>
+      <AppContent />
+    </ChatProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default App;
 ```
 
-## Usage
+### 2. Showing the Chat Window
+
+You can call `LiveChat.show()` from anywhere in your application to open the chat window.
+
+```javascript
+import { LiveChat } from 'connect-x-reactnative-livechat-sdk';
 
+LiveChat.show({
+  token: 'YOUR_AUTH_TOKEN',
+  orgId: 'YOUR_ORGANIZATION_ID',
+  channelId: 'YOUR_CHANNEL_ID',
+  externalValue: 'YOUR_EXTERNAL_VALUE',
+  customHeader: <YourCustomHeaderComponent />, // Optional
+});
+```
+
+### 3. Hiding the Chat Window (If Needed)
 
-```js
-import { multiply } from 'connect-x-reactnative-livechat-sdk';
+You can programmatically call `LiveChat.hide()` to close the chat window (e.g., from a close button in a custom header).
 
-// ...
+```javascript
+import { LiveChat } from 'connect-x-reactnative-livechat-sdk';
 
-const result = multiply(3, 7);
+LiveChat.hide();
 ```
 
+---
+
+## 📖 API Reference
 
-## Contributing
+### `LiveChat.show(config)`
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+A method to open the chat window. It accepts a `config` object with the following properties:
+
+| Prop            | Type              | Required | Description                                                               |
+| --------------- | ----------------- | -------- | ------------------------------------------------------------------------- |
+| `token`         | `string`          | **Yes** | Authorization token for authentication from [Connect-X](https://app.connect-x.tech/) by navigating to: Organization Settings → SDK Tracking.                                    |
+| `orgId`         | `string`          | **Yes** | Your organization's ID.                                                     |
+| `channelId`     | `string`          | **Yes** | The ID of the Live Chat channel.                                            |
+| `externalValue` | `string`          | **Yes** | A value to identify the customer(Should be unique), You can setup external key from [Connect-X](https://app.connect-x.tech/) by navigating to: Organization Settings → Connector → Live Chat → Drop Form → Upsert Key. |
+| `customHeader`  | `React.ReactNode` | No       | A React Component to render as a replacement for the default chat header. |
+
+---
 
-## License
+## 📄 License
 
-MIT
+[![Apache License](https://img.shields.io/badge/License-Apache-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
-# connect-x-reactnative-livechat-sdk
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -26,17 +26,17 @@ def getExtOrIntegerDefault(name) {
 }
 
 android {
-  namespace "com.connectxreactnativelivechatsdk"
+  namespace = "com.connectxreactnativelivechatsdk"
 
-  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+  compileSdkVersion = getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
-    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    minSdkVersion = getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion = getExtOrIntegerDefault("targetSdkVersion")
   }
 
   buildFeatures {
-    buildConfig true
+    buildConfig = true
   }
 
   buildTypes {
@@ -80,4 +80,4 @@ react {
   jsRootDir = file("../src/")
   libraryName = "ConnectXReactnativeLivechatSdk"
   codegenJavaPackageName = "com.connectxreactnativelivechatsdk"
-}
+}

package/android/src/main/AndroidManifest.xml

@@ -1,2 +1,3 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 </manifest>