@sahanabn/rn-chatbot v1.5.136

React Native Chat

A simple and customizable chatbot component for React Native applications, allowing seamless integration with your AI backend for text and media interactions.

Installation

To use @sahanabn/rn-chatbot in your React Native project, install it using npm or yarn:

npm install @sahanabn/rn-chatbot
yarn add @sahanabn/rn-chatbot 

The @sahanabn/rn-chatbot component supports image and video selection by attempting to use expo-image-picker first, and then falling back to react-native-image-picker. To ensure compatibility across both Expo and React Native CLI projects with image and video functionality, it is recommended to install both libraries:

• For Expo Projects:

  npm install expo-image-picker
  # or
  yarn add expo-image-picker

  Ensure you are using a version of expo-image-picker that is >=16.0.0.

• For React Native CLI Projects:

  npm install react-native-image-picker --save
  # or
  yarn add react-native-image-picker

  Ensure you are using a version of react-native-image-picker that is >=8.0.0. You will also need to link this library in your project (usually done automatically with autolinking in newer versions of React Native, but refer to the library's documentation if needed). Additionally, you'll need to configure permissions for accessing the camera and media library in your project's Info.plist (iOS) and AndroidManifest.xml (Android) files as required by react-native-image-picker.

Usage

1. Import the Component:

   import React from 'react';
   import { View } from 'react-native';
   import {ChatAssistant} from '@sahanabn/rn-chatbot';
   
   const MyChatScreen = () => {
     return (
       <View style={{ flex: 1 }}>
         {/* Your other components */}
         <ChatAssistant
           textApiBaseUrl="YOUR_TEXT_API_BASE_URL"
           textApiEndpoint="YOUR_TEXT_API_ENDPOINT"
           appName="YOUR_APP_NAME"
           // Optional props (see below)
         />
         {/* More of your components */}
       </View>
     );
   };
   
   export default MyChatScreen;

2. Required Props:

   • textApiBaseUrl: (String, Required) The base URL of your backend API that handles communication with the AI. This is where the ChatAssistant will send text queries and media uploads. You MUST provide this prop.

   • appName: (String, Required) The name of your application. This is sent to the backend API with each request to identify the source of the request.

   • textApiEndpoint: (String, Optional) The specific endpoint on your backend API to send text-based questions. If your API expects requests at a path other than the root of textApiBaseUrl (e.g., /chat, /ask), provide that path here. Defaults to /.

3. Optional Props:

   • customLogo: (ImageSourcePropType, Optional) An image source to override the default logo used in the Floating Action Button (FAB) that opens the chat. This can be a local image (using require('./assets/my_logo.png')) or a remote URI.
   • onCompressImage: ((imageUri: string) => Promise, Optional) An asynchronous function that allows you to provide custom image compression logic before an image is uploaded. This function receives the local URI of the selected image and should return a Promise that resolves with the URI of the compressed image. If not provided, the original image will be uploaded.
   • appContext: (Record<string, any>, Optional) An object to pass additional application-specific context to your backend API. This can be useful for sending user preferences, location data, or any other relevant information to your AI. Defaults to {}.
   • voiceInput: (VoiceInputConfig, Optional) An object configuring voice input capabilities. This prop allows you to integrate with an external voice recognition service.
     • onStartRecording: (() => Promise | void, Optional) A callback function that is triggered when the user starts recording voice input.
     • onStopRecording: (() => Promise | void, Optional) A callback function that is triggered when the user stops recording voice input.
     • isRecording: (boolean, Optional) A boolean indicating whether voice recording is currently active.
     • recognizedText: (string, Optional) The text recognized from the voice input. The ChatAssistant component will display this text in the input field.

Backend API Requirements

To use the @sahanabn/rn-chatbot component effectively, you need to have a backend API that meets the following specifications:

1. Text Query Endpoint (${textApiBaseUrl}${textApiEndpoint || '/'}):

   • Method: POST
   • Headers: Expects Accept: application/json.
   • Body: Should be sent as FormData containing the following fields:
     • question: (String) The user's text message.
     • session_id: (String) A unique identifier for the current chat session. The ChatAssistant component generates and manages this.
   • Response: Should be a JSON object with at least the following field:
     • answer: (String) The AI's response to the user's question.
     • Optional:
       • references: (Array of Objects) An array where each object has a title property (String) representing a reference or source for the answer. These will be displayed as a numbered list in the chat.

2. Media Upload Endpoint (${textApiBaseUrl}/upload):

   • Method: POST
   • Body: Should be sent as FormData containing the following fields:
     • file: (File) The image or video file to be uploaded.
     • session_id: (String) The same session ID used for text queries.
   • Response: Should be a JSON object containing a way to identify the uploaded file. Look for one of the following fields:
     • file_id: (String) The ID of the uploaded file.
     • id: (String) An alternative ID for the uploaded file.

3. Question with File ID Endpoint (${textApiBaseUrl}${textApiEndpoint || '/'}):

   • Method: POST
   • Headers: Should include Content-Type: application/json.
   • Body: Should be a JSON object containing the following fields:
     • question: (String) The user's text message accompanying the media (or a default message like "Please analyze this image/video.").
     • session_id: (String) The unique session identifier.
     • file_id: (String) The ID of the uploaded file (received from the /upload endpoint).
     • action: (String, Optional) A specific action to instruct the AI on how to process the media (e.g., "visualinsp" for visual inspection). Defaults to "visualinsp".
   • Response: Should be a JSON object with at least the answer field (String) containing the AI's response.

Customization (Styling)

The @sahanabn/rn-chatbot component includes a default set of styles defined within its source code. To customize the appearance, you would typically need to:

1. Access the Source Code: Obtain the source code of the @sahanabn/rn-chatbot component from the node_modules/@sahanabn/rn-chatbot directory in your project.
2. Modify the styles Object: Locate the StyleSheet.create object within the component's code (ChatAssistant.tsx or similar) and modify the style properties as needed.
3. Rebuild Your Application: After making changes, rebuild your React Native application to see the updated styles.

Note: Directly modifying the library's source code can make updates more challenging. Consider forking the library if you require extensive styling changes and want to maintain upgradability. In future versions, the library might expose style props for easier customization.

Example

import React from 'react';
import { View } from 'react-native';
import ChatAssistant from '@sahanabn/rn-chatbot';

const MySmartChat = () => {
  return (
    <View style={{ flex: 1 }}>
      <ChatAssistant
        textApiBaseUrl="[https://my-ai-backend.com]"
        textApiEndpoint="/chat"
        customLogo={require('./assets/robot_icon.png')}
        appContext={{ userPreference: 'dark' }}
        voiceInput={{
          onStartRecording: () => console.log('Recording started'),
          onStopRecording: () => console.log('Recording stopped'),
          isRecording: false,
          recognizedText: 'Hello, how can I assist you?',
        }}
        // You can optionally implement onCompressImage here
      />
    </View>
  );
};

export default MySmartChat;