voicebot-react-native-expo/README.md

This is a voicebot-react-native package of Kipps AI voice bot for React Native Expo

## React Native Voicebot Integration Guide for Expo (Bare/Ejected) 🤖

This guide provides a streamlined walkthrough for integrating the `voicebot-react-native-expo` package into your **bare minimal** or **ejected Expo managed** React Native project. **This guide will not work for projects running solely within the Expo Go app.**

### 🚀 Getting Started

#### Prerequisites:

* An existing React Native project created with Expo, where you have access to the native Android folder (either a bare minimum project or an ejected managed Expo project).
* Fundamental knowledge of React Native and Expo .

### 1. Installation 📦

Install the `voicebot-react-native-expo` package and its dependencies. Navigate to your project's root directory in your terminal and run:

```bash
npm i voicebot-react-native-expo; npx voicebot-install
```

This command takes care of the package installation and automatically sets up the necessary configurations. 

If you have already installed the `voicebot-react-native-expo` package, you can run the following command:

```bash
npx voicebot-install
```

This command will install the package's dependencies. 

### 2. Register kipps-ai Globals 🌎

Import the `registerGlobals` function from `voicebot-react-native-expo/rn` and call it within your application:

**Option 1: `index.js`**

```javascript
import { registerGlobals } from 'voicebot-react-native-expo/rn';

registerGlobals(); 

// ...rest of your index.js code
```

**Option 2: `App.js`**

```javascript
import React, { useEffect } from 'react';
import { registerGlobals } from 'voicebot-react-native-expo/rn'; 

export default function App() {
  useEffect(() => {
    registerGlobals();
  }, []); 

  // ...rest of your App.js code
}
```

### 3.  Android Configuration 🤖

After running the installation, you need to adjust the `minSdkVersion` in your `android/app/build.gradle` file to at least 24.

1. Open your `android/app/build.gradle` file in a text editor. 

2. Locate the `defaultConfig` section. 

3.  Within the `defaultConfig` block,  find the line `minSdkVersion` and make sure it's set to 24 or higher ans targetSdkVersion 31. It should look something like this:

    ```gradle
    defaultConfig {
        // ... other configurations
        minSdkVersion 24 
        targetSdkVersion 31 // ... or greater
        // ... other configurations
    }
    ```

### 4. Integrate the VoiceBotButton Component 📞

1. **Import:** In your React Native component, import the `VoiceBotButton` component:

   ```javascript
   import { VoiceBotButton } from 'voicebot-react-native-expo';
   ```

2. **Render:** Render the `VoiceBotButton` component, providing your **VoiceBot ID**, **Caller ID**, and **Caller Name**:

   ```javascript
   import React from 'react';
   import { StyleSheet, View, SafeAreaView } from 'react-native';
   import { VoiceBotButton } from 'voicebot-react-native-expo';

   export default function App() {
     return (
       <SafeAreaView style={styles.container}>
         <VoiceBotButton 
           voicebot_id="YOUR_KIPPS_VOICEBOT_ID" 
           caller_id="YOUR_KIPPS_CALLER_ID" 
           caller_name="YOUR_KIPPS_CALLER_NAME" 
         />
       </SafeAreaView>
     );
   }

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       backgroundColor: '#fff',
     },
   });
   ```

   **Replace the placeholder values above with your actual VoiceBot credentials.**

### 5. Run Your App! 🎉

You've successfully integrated the `voicebot-react-native-expo` package! Build and run your Expo app to start using the voicebot features.
Let me know if you have any more questions! 


# 🚀 Integrating Google Assistant with your React Native VoiceBot App 🎉

This README provides a comprehensive guide to integrate Google Assistant with your React Native app using the `voicebot-react-native-expo` package. After installing and testing the package, follow these steps to enable Google Assistant integration. ✨

## 1️⃣ Deep Link Setup 🔗

This section outlines how to configure deep links to allow Google Assistant to launch your app and automatically start the VoiceBot. 🤖

### 1.1 Update `AndroidManifest.xml` 📝

Add the following intents and metadata within the `<queries>` tag and your main activity's `<activity>` tag in your `AndroidManifest.xml`.  Replace `yourappname_in_small_letter` with your actual app name in lowercase (e.g., `cookdine`, `meesho`).

```xml
<queries>
  <!-- ... other queries intents ... -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" />
    </intent>
</queries>

<activity ... >

    <!-- ... other activity settings ... -->

    <!-- Intent filter for https deep links -->
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" android:host="start" />
    </intent-filter>

    <!-- Intent filter for your app scheme -->
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="yourappname_in_small_letter" android:host="expo-development-client" android:pathPattern=".*" />
    </intent-filter>

    <meta-data
        android:name="android.app.shortcuts"
        android:resource="@xml/shortcuts" />
</activity>
```

### 1.2 Create `shortcuts.xml` 📄

Create a file named `shortcuts.xml` in `main/res/xml/` and paste the following code, replacing `yourappname_in_small_letter` with your app's name in lowercase.

```xml
<?xml version="1.0" encoding="utf-8"?>
<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
    <shortcut
        android:shortcutId="valet"
        android:shortcutShortLabel="@string/activity_valet">
        <capability-binding android:key="actions.intent.START_EXERCISE">
            <parameter-binding
                android:key="exercise.name"
                android:value="@array/valetSynonyms"/>
        </capability-binding>
    </shortcut>
    <capability android:name="actions.intent.START_EXERCISE">
        <intent>
            <url-template android:value="yourappname_in_small_letter://start/{?exercise}" />
            <parameter android:name="exercise.name" android:key="exercise" />
        </intent>
    </capability>
</shortcuts>
```

### 1.3 Create `arrays.xml` 🗄️

Create `arrays.xml` in `res/values/` with the following content:

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="valetSynonyms">
        <item>my valet</item>
        <item>valet</item>
        <item>voicebot</item>
        <item>voice bot</item>
        <item>book valet</item>
        <item>kipps</item>
        <item>kipps ai</item>
    </array>
</resources>
```

### 1.4 Update `strings.xml` 🔤

Add the following string resource to your `res/values/strings.xml`:

```xml
<string name="activity_valet">my valet</string>
```

### 1.5 Test Deep Link 🧪

Connect your device in USB debugging mode with your app installed. Use this ADB command (replace `yourappname`):

```bash
adb shell am start -a android.intent.action.VIEW -d "yourappname://start"
```

This should open your app and start the VoiceBot! ✅


## 2️⃣ Google Assistant Testing 🗣️

### 2.1 Prerequisites ✔️

* **Google Play Console Account:** 🎮
* **Android Studio (Hedgehog | 2023.1.1):** 🦔
* **App Actions Test Tool Plugin:** 🔌
* **React Native App (0.73.3 or lower, Gradle 8.3 or lower):** Create a *separate* test app. ⏪
* **Consistent Google Account:** 🔄


### 2.2 Setup and Testing ⚙️

1. **Create Test App:**
   ```bash
   npx @react-native-community/cli@latest init YourAppName --version 0.73.3
   ```

2. **Copy Resources:** Copy the `res` folder and the deep link intent filters/metadata from your main app's `AndroidManifest.xml` into the test app's  `AndroidManifest.xml`. 📂

3. **Open in Android Studio:** Open the *test* app in Android Studio Hedgehog | 2023.1.1.  💻

4. **App Actions Test Tool:** Launch the plugin. 🚀

5. **Create Preview:** Click "Create Preview" (original app installed on connected device). 📱

6. **Run App Action:** Click "Run App Action" to trigger Assistant and start the VoiceBot! ✨

7. **Test Voice Commands:**  Try commands like "Start kipps," "Start valet," "Start voicebot," etc. 🗣️

8. **Testing and Release:** Test thoroughly before production release. 🧪


🎉 Congratulations! You've integrated Google Assistant! Users can now launch your app with voice commands. 🥳

## 3️⃣ Resources 📚
**Here is Example App:** [GitHub_Link](https://github.com/KIPPS-AI/-kipps-assistant-working-exampleapp-expo)

**Here is DOC file for assistant integration :** [Google_Docs](https://docs.google.com/document/d/1ZcNN3EZmP9AIIWbkpgj4vRc40YRyj0PIAm2H4qj2-jE/edit?usp=sharing)