Somereact React Native Chat Library

A comprehensive React Native chat component with AI integration, media support, and real-time streaming capabilities.

Features

• 🤖 AI Chat Integration - Connect with any AI API
• 📱 React Native Compatible - Built specifically for React Native
• 🎤 Audio Recording - Record and send audio messages
• 📷 Image Upload - Pick and send images from gallery or camera
• 🎥 Media Support - YouTube videos, images, and audio playback
• 🎨 Customizable Themes - Fully customizable UI themes
• 📦 Product Cards - Display product information in chat
• 🔗 Link Detection - Automatic URL detection and preview
• ⚡ Real-time Streaming - Support for streaming AI responses
• 🎯 TypeScript Support - Full TypeScript support with type definitions

Installation

npm install @somereact/react-native-chat

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-native

Required Dependencies

For full functionality, install these dependencies:

npm install react-native-vector-icons react-native-linear-gradient react-native-audio-recorder-player react-native-image-crop-picker react-native-fs react-native-sound buffer

Quick Start

import React from 'react';
import { ChatApp } from '@somereact/react-native-chat';

const App = () => {
  const apiConfig = {
    baseUrl: 'https://your-api-endpoint.com',
    apiKey: 'your-api-key',
    headers: {
      'Content-Type': 'application/json',
    },
  };

  return (
    <ChatApp
      apiConfig={apiConfig}
      onMessageSend={(message) => console.log('Message sent:', message)}
      onMessageReceived={(message) => console.log('Message received:', message)}
      onError={(error) => console.error('Error:', error)}
    />
  );
};

export default App;

API Reference

ChatApp Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiConfig | ApiConfig | ✅ | - | API configuration | | theme | ChatTheme | ❌ | Default theme | Custom theme object | | user | User | ❌ | - | Current user information | | onMessageSend | (message: Message) => void | ❌ | - | Callback when user sends message | | onMessageReceived | (message: Message) => void | ❌ | - | Callback when AI responds | | onError | (error: Error) => void | ❌ | - | Error callback | | placeholder | string | ❌ | "Type a message..." | Input placeholder text | | sendButtonText | string | ❌ | "Send" | Send button text | | loadingText | string | ❌ | "AI is thinking..." | Loading indicator text | | emptyStateText | string | ❌ | "Start a conversation" | Empty state text | | enableAudioRecording | boolean | ❌ | true | Enable audio recording | | enableImageUpload | boolean | ❌ | true | Enable image upload | | enableFileUpload | boolean | ❌ | true | Enable file upload | | maxImageSize | number | ❌ | 10MB | Maximum image file size | | allowedImageTypes | string[] | ❌ | ['image/jpeg', 'image/png', 'image/gif'] | Allowed image types |

Types

ApiConfig

interface ApiConfig {
  baseUrl: string;
  apiKey?: string;
  headers?: Record<string, string>;
  timeout?: number;
}

ChatTheme

interface ChatTheme {
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    text: string;
    textSecondary: string;
    border: string;
    error: string;
    success: string;
    warning: string;
  };
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
  };
  borderRadius: {
    sm: number;
    md: number;
    lg: number;
  };
  typography: {
    fontSize: {
      xs: number;
      sm: number;
      md: number;
      lg: number;
      xl: number;
    };
    fontWeight: {
      normal: string;
      medium: string;
      bold: string;
    };
  };
}

Message

interface Message {
  id: string;
  text: string;
  isUser: boolean;
  timestamp: Date;
  media?: MediaItem[];
  localImage?: string;
  localAudio?: string;
  isStreaming?: boolean;
  cards?: ProductCard[];
}

Customization

Custom Theme

const customTheme: ChatTheme = {
  colors: {
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
    background: '#F7F7F7',
    surface: '#FFFFFF',
    text: '#2C3E50',
    textSecondary: '#7F8C8D',
    border: '#BDC3C7',
    error: '#E74C3C',
    success: '#27AE60',
    warning: '#F39C12',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  borderRadius: {
    sm: 4,
    md: 8,
    lg: 12,
  },
  typography: {
    fontSize: {
      xs: 12,
      sm: 14,
      md: 16,
      lg: 18,
      xl: 20,
    },
    fontWeight: {
      normal: '400',
      medium: '500',
      bold: '700',
    },
  },
};

<ChatApp
  apiConfig={apiConfig}
  theme={customTheme}
/>

API Integration

The library expects your API to:

1. Accept POST requests to /chat endpoint
2. Accept form-encoded data with message parameter (base64 encoded)
3. Return JSON responses with the following structure:

{
  "Message": "AI response text",
  "Cards": [
    {
      "id": "card-1",
      "title": "Product Title",
      "description": "Product description",
      "image": "https://example.com/image.jpg",
      "price": "$99.99",
      "url": "https://example.com/product",
      "buttons": [
        {
          "text": "Buy Now",
          "action": "buy",
          "url": "https://example.com/buy"
        }
      ]
    }
  ]
}

Utilities

The library exports several utility functions:

import {
  detectUrls,
  isYoutubeUrl,
  getYoutubeVideoId,
  isImageUrl,
  detectAndParseJSON,
  processMessageMedia,
  encodeToBase64,
} from '@somezing/react-native-chat';

// Detect URLs in text
const urls = detectUrls("Check out https://example.com");

// Check if URL is YouTube
const isYoutube = isYoutubeUrl("https://youtube.com/watch?v=abc123");

// Extract YouTube video ID
const videoId = getYoutubeVideoId("https://youtube.com/watch?v=abc123");

// Check if URL is an image
const isImage = isImageUrl("https://example.com/image.jpg");

// Parse streaming JSON responses
const parsed = detectAndParseJSON(jsonString);

// Process media in message text
const media = processMessageMedia("Check this video: https://youtube.com/watch?v=abc123");

// Encode text to base64
const encoded = encodeToBase64("Hello World");

Components

The library also exports individual components for custom implementations:

import {
  MessageTextWithLinks,
  MediaPreview,
  ProductCards,
  YoutubeVideoModal,
  ImagesGalleryModal,
  FileViewer,
  MarkdownModal,
  TypingAnimation,
} from '@somezing/react-native-chat';

Permissions

Android

Add the following permissions to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />

iOS

Add the following keys to your ios/YourApp/Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to your microphone to record audio messages.</string>
<key>NSCameraUsageDescription</key>
<string>This app needs access to your camera to take photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to your photo library to select images.</string>

Troubleshooting

Common Issues

1. Audio recording not working: Ensure you have the required permissions and dependencies installed.

2. Image picker not working: Make sure react-native-image-crop-picker is properly linked.

3. TypeScript errors: Ensure you have the latest version of TypeScript and React Native types installed.

4. Build errors: Make sure all peer dependencies are installed and properly linked.

Debug Mode

Enable debug logging by setting the environment variable:

export DEBUG=@somezing/react-native-chat:*

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

For support, email [email protected] or create an issue on GitHub.