ChatWidget API

Installation

yarn add @aloai/alo-chat-react-native

Dependencies

• @react-native-async-storage/async-storage
• @react-native-picker/picker
• react-native-image-picker

Post-install Steps

iOS

Add NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys to your Info.plist.

Import

import { ChatWidget } from 'alo-chat-react-native';
// or
import ChatWidget from 'alo-chat-react-native/ChatWidget';

Props

| Name | Type | Required | Default | Description | | -------------------- | ------ | -------- | ------- | ----------------------------------------------------------------------------- | | appId | string | yes | | The ĀLO provided App ID. | | authToken | string | yes | | The ĀLO generated auth token providing secure access to the ĀLO chat servers. | | sendIcon | node | yes | | The icon to be used for the send button. | | uploadIcon | node | yes | | The icon to be used for the upload button. | | userId | string | yes | | A unique ID that identifies the user who is chatting. | | languageSettingsIcon | node | no | en | The icon to be used for the language settings button |

Auth Token Instructions

POST https://auth.alo.ai/v1/auth
Headers:
- Authorization: Bearer <ApiKey>
Payload:
- ttl
- user

Payload

| Key | Type | Required | Default | Description | | ---- | ------ | -------- | ------- | --------------------------------------------------------------------------- | | user | object | yes | | A collection of custom private claims used to share information with ALO | | ttl | number | no | 1440 | Time in minutes for which granted access is valid. Min is 1, Max is 525600. |

User Schema

| Key | Type | Required | Description | | ----------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | yes | Unique ID for the user to grant access to | | firstName | string | no | First/given name | | lastName | string | no | Last/family name | | email | string | no | Email address | | phoneNumber | string | no | Must start with a plus (+) sign, followed immediately by the country code. A phone number can only contain the + sign and digits. You must remove any other characters from a phone number, such as parentheses, spaces, or dashes (-) before submitting the value to the service. For example, a United States-based phone number must follow this format: +14325551212. |

Example

Request:

POST https://auth.alo.ai/v1/auth
Headers:
- Authorization: Bearer dhPH43dkEJHzMUtlIYSGVt8HE5xOAt2c
Payload:
- user: { id: "9744d434-3216-44f7-b6a3-67ecbbd44aff", firstName: "Michael", lastName: "Jordan", phoneNumber: "+15551234567" }
- ttl: 60

Response:

{ token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" }

Development Instructions

1. Set CHAT_HTTP_ENDPOINT and CHAT_WS_ENDPOINT in src/constants.js
2. Set appId, authToken and userId in example/src/App.js
3. Install dependencies: yarn install; cd example; yarn install
4. Start React Native development server: cd example; yarn start
5. Deploy example app to device: yarn example android or yarn example ios

Release Instructions

1. Set values in src/constants.js to production values
2. Commit all changes
3. If not logged in to npm: npm login
4. Run yarn release
5. Select increment for new version (patch, minor, major)
6. Publish @aloai/alo-chat-react-native to npm? Yes
7. Commit (Release X.X.X)? No (it will fail because of commit checks)
8. Commit the change made to package.json
9. Tag the release with the new version number

Example App Release Instructions (iOS)

1. Open example/ios/alochatreactnative.xcworkspace in XCode
2. Change the version in the Xcode General tab
3. In Menu, select Product > Archive
4. Select the Archive and click Distribute App
5. Deselect Include bitcode for iOS content and complete remaining steps