Merge pull request #6 from botstar/fix/tu_change-homepage

Added method to boot user into live chat

Author: chative-tu

README.md

@@ -1,12 +1,13 @@
-# Chative Widget for React Native
+# [Chative.IO](https://chative.io/) Widget for React Native
 
-Chative Widget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.
+[Chative.IO](https://chative.io/) Widget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.
 
 ## Features
 
 - Customizable chat interface
 - Easy to show/hide programmatically
 - Supports custom header components
+- Supports filling user information into live chat. (v0.5 or higher)
 - Adjustable insets for different device sizes
 - TypeScript support
 
@@ -44,12 +45,24 @@ export default function App() {
     // widgetRef.current?.hide();
   };
 
+  const user = {
+    user_id: 'UNIQUE_USER_ID',
+     user: {
+        email: '[email protected]', // Your user's email address
+        first_name: 'John',
+        last_name: 'Doe',
+        phone: '+1234567890',
+        custom_field: 'CUSTOMER_FIELD_VALUE' // Replace key and value with your custom field
+    },
+  }
+
   return (
     <View style={{ flex: 1 }}>
       <Button title="Open Chat" onPress={handleOpenChat} />
       <ChativeWidget
         ref={widgetRef}
         channelId="your-channel-id"
+        user={user} // v0.5 or higher
         onClosed={() => console.log('Widget closed')}
         onLoaded={() => console.log('Widget loaded')}
         onNewMessage={(message) => console.log('New message:', message)}
@@ -64,6 +77,7 @@ export default function App() {
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | channelId | string | Yes | The ID of the chat channel |
+| user | ChativeWidgetUser | No | Information about the user, used for booting into live chat.
 | headerComponent | ReactElement | No | Custom header component |
 | containerStyle | ViewStyle | No | Custom style for the container |
 | insetTop | number | No | Top inset (default: 50 for iOS, 20 for Android) |
@@ -98,8 +112,17 @@ You can customize the appearance of the widget by providing a custom header comp
 This module includes TypeScript declarations. You can import types like this:
 
 ```typescript
-import ChativeWidget, { ChativeWidgetRef } from '@chative.io/react-native-widget';
+import ChativeWidget, { ChativeWidgetRef, ChativeWidgetUser } from '@chative.io/react-native-widget';
 ```
+### ChativeWidgetUser Interface
+| Field         | Type     | Required | Description |
+|---------------|----------|----------|-------------|
+| user_id       | string   | Yes      | A unique identifier for the user. This is used to track the user's session in the chat. |
+| user.email    | string   | No       | The user's email address. Optional, but recommended for better user identification. |
+| user.first_name | string   | No       | The user's first name. Optional, useful for personalized interactions. |
+| user.last_name  | string   | No       | The user's last name. Optional, useful for personalized interactions. |
+| user.phone    | string   | No       | The user's phone number. Optional, can be used for follow-up contact. |
+| user.[key: string]: any | any | No | Any additional information about the user, represented as key-value pairs. This can be used for custom data. |
 
 ## License
 

examples/App.js

@@ -22,6 +22,16 @@ export default function App() {
     console.log('onNewMessage');
   }
 
+  const user = {
+    user_id: 'UNIQUE_USER_ID',
+    user: {
+      email: '[email protected]',
+      first_name: 'Chative',
+      last_name: 'User',
+      phone: '1234567890',
+    },
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <View>
@@ -30,6 +40,7 @@ export default function App() {
       <ChativeWidget
         ref={chativeWidgetRef}
         channelId={channelId}
+        user={user}
         onLoaded={onLoaded}
         onClosed={handleCloseModal}
         onNewMessage={onNewMessage}

examples/app.json

@@ -12,7 +12,8 @@
       "backgroundColor": "#ffffff"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.example.examples"
     },
     "android": {
       "adaptiveIcon": {

examples/package.json

@@ -7,16 +7,18 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "livechat": "yarn remove @chative.io/react-native-widget && yarn cache clean && yarn add ../chative.io-react-native-widget-v0.0.1.tgz"
+    "livechat": "yarn remove @chative.io/react-native-widget || true && yarn cache clean && yarn add ../chative.io-react-native-widget-v0.5.0.tgz"
   },
   "dependencies": {
-    "@chative.io/react-native-widget": "../chative.io-react-native-widget-v0.0.1.tgz",
+    "@chative.io/react-native-widget": "../chative.io-react-native-widget-v0.5.0.tgz",
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "@types/react": "~18.2.79",
     "expo": "~51.0.20",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-webview": "13.8.6"
+    "react-native-webview": "13.8.6",
+    "typescript": "~5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

examples/yarn.lock

@@ -796,9 +796,9 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
-"@chative.io/react-native-widget@../chative.io-react-native-widget-v0.0.1.tgz":
-  version "0.0.1"
-  resolved "../chative.io-react-native-widget-v0.0.1.tgz#2a83d779d7f53b04c981b12c1f666ce221e6c532"
+"@chative.io/react-native-widget@../chative.io-react-native-widget-v0.5.0.tgz":
+  version "0.5.0"
+  resolved "../chative.io-react-native-widget-v0.5.0.tgz#b074a980cd915570a5770b8a540949b47b951214"
 
 "@expo/bunyan@^4.0.0":
   version "4.0.0"
@@ -1707,6 +1707,19 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/prop-types@*":
+  version "15.7.12"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
+"@types/react@~18.2.79":
+  version "18.2.79"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
+  integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/stack-utils@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
@@ -2528,6 +2541,11 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 dag-map@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"
@@ -6247,6 +6265,11 @@ typedarray.prototype.slice@^1.0.3:
     typed-array-buffer "^1.0.2"
     typed-array-byte-offset "^1.0.2"
 
+typescript@~5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+
 ua-parser-js@^1.0.35:
   version "1.0.38"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2"

index.d.ts

@@ -4,8 +4,19 @@ import { ReactElement } from 'react';
 import { ViewStyle } from 'react-native';
 
 declare module '@chative.io/react-native-widget' {
+  export interface ChativeWidgetUser {
+    user_id: string;
+    user: {
+      email?: string;
+      first_name?: string;
+      last_name?: string;
+      phone?: string;
+      [key: string]: any;
+    };
+  }
   export interface ChativeWidgetProps {
     channelId: string;
+    user?: ChativeWidgetUser;
     headerComponent?: ReactElement;
     containerStyle?: ViewStyle;
     insetTop?: number;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chative.io/react-native-widget",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "description": "React Native SDK for Chative",
   "main": "index.js",
   "scripts": {
@@ -70,5 +70,5 @@
   "bugs": {
     "url": "https://github.com/botstar/chative-react-native-widget/issues"
   },
-  "homepage": "https://github.com/botstar/chative-react-native-widget#readme"
+  "homepage": "https://chative.io"
 }

src/ChativeWidget.js

@@ -9,6 +9,7 @@ const propTypes = {
   channelId: PropTypes.string.isRequired,
   headerComponent: PropTypes.element,
   containerStyle: PropTypes.object,
+  user: PropTypes.object || undefined,
   insetTop: PropTypes.number,
   insetBottom: PropTypes.number,
   onClosed: PropTypes.func,
@@ -18,6 +19,7 @@ const propTypes = {
 
 const ChativeWidget = forwardRef(({
   channelId,
+  user,
   headerComponent,
   containerStyle,
   insetTop = Platform.OS === 'ios' ? 50 : 20,
@@ -68,6 +70,7 @@ const ChativeWidget = forwardRef(({
         <WebViewComponent
           ref={webViewRef}
           channelId={channelId}
+          user={user}
           onLoaded={onLoaded}
           onNewMessage={onNewMessage}
           onClosedWidget={handleClose}
@@ -93,4 +96,4 @@ const styles = StyleSheet.create({
 
 ChativeWidget.propTypes = propTypes;
 
-export default ChativeWidget;
+export default React.memo(ChativeWidget);

src/WebView.js

@@ -7,15 +7,15 @@ import { generateScript, safeParse } from './utils';
 
 const propTypes = {
   channelId: PropTypes.string.isRequired,
+  user: PropTypes.object,
   onLoaded: PropTypes.func,
   onClosedWidget: PropTypes.func,
   onNewMessage: PropTypes.func,
 };
 
-const WebViewComponent = forwardRef(({ channelId, onLoaded, onClosedWidget, onNewMessage }, ref) => {
+const WebViewComponent = forwardRef(({ channelId, user, onLoaded, onClosedWidget, onNewMessage }, ref) => {
   const webViewRef = useRef(null);
-
-  const javascript = generateScript();
+  const javascriptInit = React.useMemo(() => generateScript(user), [user]);
 
   useImperativeHandle(ref, () => ({
     injectJavaScript: (script) => {
@@ -31,10 +31,10 @@ const WebViewComponent = forwardRef(({ channelId, onLoaded, onClosedWidget, onNe
       ref={webViewRef}
       style={styles.webViewContainer}
       source={{
-        uri: `${WIDGET_URL}/${channelId}?mode=livechat`,
+        uri: `${WIDGET_URL}/${channelId}?mode=livechat&state=${user ? 'off' : 'on'}`,
       }}
       onLoadEnd={() => {
-        webViewRef.current?.injectJavaScript(javascript);
+        webViewRef.current?.injectJavaScript(javascriptInit);
         onLoaded && onLoaded();
       }}
       onMessage={(event) => {

src/utils.js

@@ -1,4 +1,5 @@
-export const generateScript = () => {
+export const generateScript = (user = {}) => {
+  const userString = safeStringify(user);
   return `
     window.cti_api = function (action, data) {
       if (window.ChativeApi) {
@@ -7,7 +8,14 @@ export const generateScript = () => {
     
       window.ChativeEvents ||= [];
       window.ChativeEvents.push([action, data]);
+    };
+
+    const user = ${userString};
+
+    if (user.user_id) {
+      window.cti_api('boot', JSON.parse('${userString}'));
     }
+
     window.cti_api('openChatWindow');
     window.cti_api('addEventListener', { event: 'closed', callback: () => { 
       window.cti_api('hide'); 
@@ -22,7 +30,7 @@ export const generateScript = () => {
 
 export const WidgetApi = (event, data) => {
   return `
-    window.cti_api('${event}', ${JSON.stringify(data)});
+    window.cti_api('${event}', ${data});
   `;
 };
 
@@ -33,3 +41,11 @@ export const safeParse = (jsonString) => {
     return {};
   }
 };
+
+export const safeStringify = (data) => {
+  try {
+    return JSON.stringify(data);
+  } catch (e) {
+    return '{}';
+  }
+}