SmartAssistantRN
is a React Native library that integrates an OpenAI-powered chatbot assistant into your application. It enhances app usability by providing features such as navigation guidance, user attribute access, and dynamic button generation.
- OpenAI-Powered Chatbot: Leverage advanced AI capabilities to provide intelligent responses and interactions within your app.
- Navigation Guidance: Assist users in navigating through different sections of your application seamlessly.
- User Attribute Access: Access and utilize user-specific attributes to personalize interactions.
- Dynamic Button Generation: Create and display buttons dynamically based on the context of the conversation.
- Install the
react-native-smart-assistant
package:
npm install react-native-smart-assistant
- Import the necessary components:
import {Assistant, AiHelperProvider} from 'react-native-smart-assistant';
- Initialize the assistant with the required information:
const assistant = new Assistant({
name: '<Assistant name>',
avatar: require('<Assistant avatar>'),
apiKey: '<Open ai key>',
language: '<Language for the ai>' // Default is English
});
- Set up the route helper to provide context about different routes in your application:
assistant.setRouteHelper([
{
route_name: "myapp://(app)",
description: "This is a route description, here you can do this, this and that",
},
{
route_name: "myapp://register",
description: "You can register to access the app",
},
// Add more routes as needed
]);
- Wrap your application in the AiHelperProvider to provide the assistant context:
export default function RootLayout() {
return (
<AiHelperProvider assistant={assistant}>
<App />
</AiHelperProvider>
);
}
The following table describes the configuration options for the assistant:
Property | Description | Type | Required | Default |
---|---|---|---|---|
name |
The name of the assistant displayed in the chat UI | string |
Yes | undefined |
apiKey |
Your OpenAI API key for enabling AI functionality | string |
Yes | undefined |
firstMessage |
The first message displayed to the user in the chat | string |
No | undefined |
language |
The default language for the assistant responses | string |
No | "English" |
theme |
Custom theme object to style the chat UI | Theme |
No | Default theme |
avatar |
Path to the assistant's avatar image | string |
No | undefined |
- The
name
andapiKey
properties are required for the assistant to function properly. - The
theme
should follow the structure defined in the Theme section. - The
avatar
can be a local image file or a URL to an image resource. - If
firstMessage
is not provided, the chat will start empty until the user interacts.
The following table describes the properties for configuring the AI model:
Property | Description | Type | Required | Default Value |
---|---|---|---|---|
model |
The specific model to use for the AI. E.g., gpt-4o
|
string |
Yes | "gpt-4o" |
temperature |
Controls the randomness of the AI's responses. Lower is more focused, higher is more random | number |
No | 0.7 |
maxTokens |
The maximum number of tokens (words) the AI will generate | number |
No | 1000 |
topP |
Controls the diversity of the AI's responses. Higher is more diverse | number |
No | 1 |
frequencyPenalty |
Penalizes the AI for using common words or phrases too often | number |
No | 0 |
presencePenalty |
Penalizes the AI for repeating the same content | number |
No | 0 |
- The
model
property specifies which OpenAI model to use. For example,gpt-4o
. -
temperature
andtopP
control the creativity and randomness of the model's output. A value closer to1
increases randomness, while a value closer to0
makes the AI's responses more deterministic. -
maxTokens
controls how long the model's responses can be, measured in tokens (which roughly equate to words).
const assistant = new Assistant({
modelSettings: {
model: "gpt-3.5-turbo", // Specify your desired model
},
name: "Sowe", // Name of the assistant
// Other settings...
});
The useAssistant
hook is designed to provide advanced control and interaction with the Smart Assistant in your application. It allows you to manage and send messages, handle user interactions, and execute custom assistant functions based on the user's actions.
-
handleMessage(message: string)
: This function sends a message to the assistant and handles the response. If the assistant needs to execute any actions (such as navigating to a route or calling a tool), it processes them and generates the necessary feedback for the user.- Inputs: A string message from the user.
- Outputs: The assistant’s response message.
-
handleActions(userMessage: string, tool_calls: ChatCompletionMessageToolCall[])
: This function is responsible for handling actions triggered by the assistant based on the user's message. For example, it can handle navigation or execute additional tools.- Inputs: The user's message and a list of tool calls that specify the assistant's actions.
- Outputs: Sends appropriate actions like navigating to routes or executing functions, and generates dynamic buttons for the user to interact with.
-
handleOpenChat()
: Opens the chat interface of the assistant.- Outputs: Updates the state to indicate the chat should be opened.
-
hideChatBubble()
: Hides the chat bubble when the assistant's chat is not needed.- Outputs: Updates the state to hide the chat bubble.
-
showChatBubble()
: Shows the chat bubble to indicate the assistant is ready to assist.- Outputs: Updates the state to show the chat bubble.
- Message Handling: The hook processes messages sent by the user, queries the assistant (via OpenAI API), and handles any necessary actions such as navigation or calling functions.
- Button Generation: If certain actions require user interaction (e.g., navigating to a deep link), buttons are dynamically generated. These buttons are then displayed for the user to click.
-
Assistant Integration: The hook interacts with the
AiHelperContext
, which stores the assistant instance, messages, buttons, and other states. This allows the assistant to dynamically respond to user input and perform tasks like navigation.
const { handleMessage, handleOpenChat, hideChatBubble, showChatBubble } = useAssistant();
// Send a message to the assistant
handleMessage("What can I do today?");
// Open the chat interface
handleOpenChat();
// Show or hide the chat bubble
showChatBubble();
hideChatBubble();
The AI assistant can identify when a user needs to execute a predefined function, such as contacting support or logging out, and creates a button for the user.
assistant.addHelper(
"contactSupport", // unique name of the function
() => {
// Logic to contact support
Alert.alert(
"Hello"
);
},
"Function contact a human", // description of the function
);
The assitant also alows handling multiple functions at once!
The AI assistant can identify when a user needs to access personal details and uses them to create an answer.
assistant.addAttribute(
"personalDetails",
{
name: "Corrado",
age: 23,
gender: "male",
email: "hello@sowe.tech",
},
"User personal details, name, age, gender and email"
);
Easily customize the chat's appearance to match your app's branding by defining a theme. You can modify various aspects, such as colors, text styles, and layouts.
const chatTheme = {
chat: {
header: "#1E1E1E", // Header background color
headerText: "#FFFFFF", // Header text color
background: "#F5F5F5", // Chat background color
textLeft: "#333333", // Text color for messages from others
textRight: "#FFFFFF", // Text color for your messages
messageBubbleLeft: "#E0E0E0", // Bubble color for messages from others
messageBubbleRight: "#007BFF", // Bubble color for your messages
messageActionWrapper: "#FFFFFF", // Background for action wrapper
messageActionText: "#007BFF", // Text color for actions
textFieldBackground: "#FFFFFF", // Background of the input field
textFieldColor: "#333333", // Input text color
bottomWrapper: "#E0E0E0", // Background for the bottom wrapper
},
};
const assistant = new Assistant({
name: '<Assistant name>',
avatar: require('<Assistant avatar>'),
apiKey: '<Open ai key>',
language: '<Language for the ai>', // Default is English
theme: chatTheme
});
The following table describes the customizable properties for the chat UI theme:
Property | Location | Description | Type |
---|---|---|---|
chat.header |
Header | Background color of the chat header | string |
chat.headerText |
Header | Text color of the chat header | string |
chat.background |
Chat Background | Background color of the entire chat screen | string |
chat.textLeft |
Messages (Incoming) | Text color for messages received | string |
chat.textRight |
Messages (Outgoing) | Text color for messages sent | string |
chat.messageBubbleLeft |
Message Bubbles (Incoming) | Background color for received message bubbles | string |
chat.messageBubbleRight |
Message Bubbles (Outgoing) | Background color for sent message bubbles | string |
chat.messageActionWrapper |
Action Buttons | Background color for action button wrappers | string |
chat.messageActionText |
Action Buttons | Text color for action buttons | string |
chat.textFieldBackground |
Input Field | Background color of the message input field | string |
chat.textFieldColor |
Input Field | Text color of the input field | string |
chat.bottomWrapper |
Bottom Wrapper | Background color of the bottom wrapper | string |
bubble.background |
Quick Reply Bubble | Background color for quick reply bubbles | string |
bubble.icon |
Quick Reply Icon | Icon color inside quick reply bubbles | string |
- All colors should be provided as valid CSS color values, such as
"#FFFFFF"
,"rgba(0, 0, 0, 0.5)"
, or"blue"
. - Optional properties can be omitted if default styling is sufficient.