WotNot ChatBot SDK

A comprehensive React Native chatbot SDK with modern design system and customizable themes.

🚀 Quick Installation

npm install wotnot-chatbot-sdk
# or
yarn add wotnot-chatbot-sdk

📱 Quick Start

import React from 'react';
import { ChatBot } from 'wotnot-chatbot-sdk';

const App = () => {
  return (
    <ChatBot
      onMessageSent={(message) => console.log('Message sent:', message)}
      onMessageReceived={(message) => console.log('Message received:', message)}
      onError={(error) => console.error('Error:', error)}
      onClose={() => console.log('Chat closed')}
    />
  );
};

📚 Full Integration Guide

For complete integration instructions, see INTEGRATION_STEPS.md

Features

• 🎨 Modern Design System - Based on contemporary chat interface patterns
• 🎭 Customizable Themes - Easy theme customization with default fallbacks
• 📱 Responsive Layout - Mobile-first design with desktop variants
• ♿ Accessibility - WCAG compliant with proper ARIA labels
• 🔄 Real-time Updates - Typing indicators and message status
• 🎯 Flexible Components - Modular architecture for easy customization
• 📦 Package Ready - Can be used as a dependency in other React Native apps

Installation

For Use in Other React Native Apps

# Install the package
npm install wotnot-chatbot-sdk

# Install peer dependencies
npm install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-vector-icons

# For iOS, run pod install
cd ios && pod install && cd ..

For Local Development/Testing

# Clone the repository
git clone <repository-url>
cd wotnot-chatbot-sdk

# Install dependencies
npm install

# Run on Android
npm run android

# Run on iOS
npm run ios

Available Components

1. ChatBot

Basic chat interface with essential functionality.

2. IntegratableChatBot (Recommended)

Production-ready chat component with visitor management and theming.

3. FintaSupportChat

Specialized support chat interface.

4. UI Components

Complete set of reusable UI components including:

• Badge, Chip, Button, Input
• MessageBubble, ChatHeader, ChatInput
• Typography, Layout, and Form components

Quick Start Examples

Basic Usage

import { ChatBot } from 'wotnot-chatbot-sdk';

<ChatBot
  onMessageSent={handleMessageSent}
  onMessageReceived={handleMessageReceived}
  onError={handleError}
  onClose={handleClose}
/>

Advanced Integration

import { IntegratableChatBot } from 'wotnot-chatbot-sdk';

<IntegratableChatBot
  visitorAccount={{
    id: 'user-123',
    name: 'John Doe',
    email: '[email protected]'
  }}
  botId="your-bot-id"
  accountKey="your-account-key"
  theme={customTheme}
  onMessageSent={handleMessageSent}
  onMessageReceived={handleMessageReceived}
  onError={handleError}
  onClose={handleClose}
/>

Requirements

• React Native >= 0.70.0
• React >= 18.0.0
• Node.js >= 20.0.0

Documentation

• Integration Steps - Step-by-step integration guide
• Integration Guide - Comprehensive API documentation
• Examples - Working code examples

Contributing

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

License

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

Support

• 📖 Documentation
• 🐛 Report Issues
• 💬 GitHub Discussions