ChatBubble SDK - React Native CLI App

A comprehensive React Native CLI application with integrated chatbot functionality that can be easily integrated into other React Native apps. Features native Android & iOS SDK bridging, theme customization, and data sharing capabilities.

🚀 Features

• Cross-Platform: Works on both Android and iOS
• Native Bridging: Native Android (Java/Kotlin) and iOS (Objective-C/Swift) modules
• Theme Customization: Fully customizable themes that can be set by integrating apps
• Data Integration: Pass user data and app-specific information to the chatbot
• Easy Integration: Simple API for integration into existing React Native apps
• TypeScript Support: Full TypeScript support with type definitions
• Real-time Chat: Interactive chat interface with typing indicators
• Persistent History: Chat history management with clear functionality

📱 Screenshots

The app demonstrates:

• Main integration screen with theme options
• Chat modal with customizable appearance
• Data sharing between host app and chatbot
• Multiple theme variations

🛠 Installation & Setup

Prerequisites

• Node.js >= 16
• React Native CLI
• Android Studio (for Android development)
• Xcode (for iOS development)

Getting Started

1. Clone the repository

   git clone <repository-url>
   cd ChatBubbleApp

2. Install dependencies

   npm install
   # or
   yarn install

3. iOS Setup

   cd ios && pod install && cd ..

4. Run the app

   # Android
   npx react-native run-android
      
   # iOS
   npx react-native run-ios

🔧 Integration Guide

Basic Integration

import ChatBubbleSDK, { ChatBubbleTheme, UserData } from './src/ChatBubbleSDK';

// 1. Initialize the SDK
const theme: ChatBubbleTheme = {
  primaryColor: '#007AFF',
  backgroundColor: '#FFFFFF',
  textColor: '#000000',
  userBubbleColor: '#007AFF',
  botBubbleColor: '#E5E5EA',
};

const userData: UserData = {
  userId: 'user123',
  userName: 'John Doe',
  userEmail: '[email protected]',
  customData: {
    appName: 'MyApp',
    userPreferences: { language: 'en' }
  }
};

await ChatBubbleSDK.initialize({
  theme,
  botName: 'Assistant',
  welcomeMessage: 'Hello! How can I help you?',
  placeholder: 'Type a message...',
});

// 2. Set user data
await ChatBubbleSDK.setUserData(userData);

// 3. Open the chatbot
await ChatBubbleSDK.openChatBot();

Advanced Usage

// Update theme dynamically
await ChatBubbleSDK.updateTheme({
  primaryColor: '#34C759',
  userBubbleColor: '#34C759',
});

// Send a message programmatically
await ChatBubbleSDK.sendMessage('Hello from the app!');

// Get chat history
const history = await ChatBubbleSDK.getChatHistory();

// Clear chat history
await ChatBubbleSDK.clearChatHistory();

// Set custom data for bot context
await ChatBubbleSDK.setCustomData({
  currentScreen: 'products',
  cartItems: 3,
  userTier: 'premium'
});

🎨 Theme Customization

The ChatBubble SDK supports extensive theme customization:

interface ChatBubbleTheme {
  primaryColor?: string;           // Main brand color
  secondaryColor?: string;         // Secondary accent color
  backgroundColor?: string;        // Chat background
  textColor?: string;             // Default text color
  bubbleColor?: string;           // Bot message bubble color
  userBubbleColor?: string;       // User message bubble color
  botBubbleColor?: string;        // Bot message bubble color
  borderRadius?: number;          // Bubble border radius
  fontSize?: number;              // Text font size
  fontFamily?: string;            // Font family
  headerBackgroundColor?: string; // Header background
  headerTextColor?: string;       // Header text color
  inputBackgroundColor?: string;  // Input field background
  inputTextColor?: string;        // Input text color
  sendButtonColor?: string;       // Send button color
  timestampColor?: string;        // Timestamp text color
}

📊 Data Integration

User Data Structure

interface UserData {
  userId?: string;
  userName?: string;
  userEmail?: string;
  userAvatar?: string;
  customData?: Record<string, any>;
}

Custom Data Examples

// E-commerce app data
await ChatBubbleSDK.setCustomData({
  cartItems: [
    { id: 1, name: 'Product A', price: 29.99 },
    { id: 2, name: 'Product B', price: 19.99 }
  ],
  totalAmount: 49.98,
  currentCategory: 'electronics'
});

// Social media app data
await ChatBubbleSDK.setCustomData({
  followers: 1250,
  following: 890,
  postsCount: 45,
  lastActivity: new Date().toISOString()
});

// Banking app data
await ChatBubbleSDK.setCustomData({
  accountBalance: 2500.00,
  recentTransactions: 5,
  accountType: 'premium',
  lastLogin: new Date().toISOString()
});

🔌 Native Bridge Architecture

Android Implementation

• Language: Java/Kotlin
• Location: android/app/src/main/java/com/chatbubbleapp/
• Key Files:
  • ChatBubbleSDKModule.kt - Main native module
  • ChatBubbleManager.kt - Chat logic manager
  • ChatBubbleActivity.kt - Native chat UI
  • ChatAdapter.kt - Message list adapter

iOS Implementation

• Language: Objective-C/Swift
• Location: ios/ChatBubbleApp/
• Key Files:
  • ChatBubbleSDK.h/m - Main native module
  • ChatBubbleManager.h/m - Chat logic manager
  • ChatViewController.h/m - Native chat UI

📱 API Reference

ChatBubbleSDK Methods

| Method | Description | Parameters | Returns | |--------|-------------|------------|---------| | initialize(config) | Initialize the SDK | ChatBubbleConfig | Promise<void> | | openChatBot() | Open chat interface | None | Promise<void> | | closeChatBot() | Close chat interface | None | Promise<void> | | sendMessage(message) | Send a message | string | Promise<void> | | setUserData(userData) | Set user information | UserData | Promise<void> | | updateTheme(theme) | Update theme | ChatBubbleTheme | Promise<void> | | getChatHistory() | Get message history | None | Promise<ChatMessage[]> | | clearChatHistory() | Clear all messages | None | Promise<void> | | setCustomData(data) | Set custom app data | Record<string, any> | Promise<void> | | isChatBotOpen() | Check if chat is open | None | Promise<boolean> |

Event Listeners

// Listen for chat events
const subscription = ChatBubbleSDK.addEventListener('onMessageReceived', (message) => {
  console.log('New message:', message);
});

// Remove listener
ChatBubbleSDK.removeEventListener(subscription);

Available events:

• onMessageSent
• onMessageReceived
• onChatOpened
• onChatClosed
• onTypingStart
• onTypingEnd
• onError

🧪 Testing

# Run tests
npm test

# Run with coverage
npm run test:coverage

# Run specific test file
npm test -- ChatBubbleSDK.test.ts

📦 Building for Production

Android

cd android
./gradlew assembleRelease

iOS

cd ios
xcodebuild -workspace ChatBubbleApp.xcworkspace -scheme ChatBubbleApp -configuration Release

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue on GitHub
• Email: [email protected]
• Documentation: docs.chatbubble.com

🔄 Changelog

v1.0.0

• Initial release
• Basic chat functionality
• Theme customization
• Native Android & iOS bridges
• Data integration capabilities
• TypeScript support