Kore.ai React Native Bot Socket Library

A powerful and feature-rich React Native library for integrating Kore.ai bot conversations with real-time WebSocket communication, comprehensive logging, and theme customization.

✨ Features

• 🚀 Real-time Messaging: WebSocket-based bot communication
• 🔐 JWT Authentication: Secure token-based authentication
• 🔄 Auto Reconnection: Intelligent reconnection with exponential backoff
• 📝 Comprehensive Logging: Structured logging for debugging and monitoring
• 🎨 Theme Support: Dynamic theme retrieval and customization
• 📱 React Native Ready: Optimized for React Native applications
• 🛡️ Type Safe: Full TypeScript support with detailed type definitions
• 🔧 Configurable: Extensive configuration options
• 📊 Connection Status: Real-time connection state monitoring

📦 Installation

npm install rn-kore-bot-socket-lib-v79

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react@>=18.0.0 react-native@>=0.70.0

🚀 Quick Start

Basic Setup

import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import KoreBotClient, {
  RTM_EVENT,
  ConnectionState,
  Logger,
  LogLevel,
} from 'rn-kore-bot-socket-lib-v79';
import type {BotConfigModel} from 'rn-kore-bot-socket-lib-v79';

// Configure logging (optional)
Logger.getInstance().setLogLevel(LogLevel.INFO);

class BotExample extends Component {
  componentDidMount() {
    this.setupBotClient();
  }

  setupBotClient = () => {
    const botConfig: BotConfigModel = {
      botName: 'MyAssistant',
      botId: 'your-bot-id',
      clientId: 'your-client-id',
      clientSecret: 'your-client-secret',
      botUrl: 'https://your-bot-url.com',
      identity: '[email protected]',
      jwtServerUrl: 'https://your-jwt-server.com/',
      isWebHook: false,
      value_aud: 'your-audience-value',
      isHeaderVisible: true,
      isFooterVisible: true,
    };

    const botClient = KoreBotClient.getInstance();

    // Set up event listeners
    botClient.on(RTM_EVENT.ON_OPEN, () => {
      console.log('Bot connected successfully');
    });

    botClient.on(RTM_EVENT.ON_MESSAGE, data => {
      console.log('Received message:', data);
    });

    botClient.on(RTM_EVENT.ON_ERROR, error => {
      console.error('Bot connection error:', error);
    });

    // Initialize the bot client
    botClient.initializeBotClient(botConfig,false);
  };

  sendMessage = () => {
    const botClient = KoreBotClient.getInstance();
    botClient.sendMessage('Hello, how can you help me?');
  };

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity onPress={this.sendMessage}>
          <Text>Send Message</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default BotExample;

🔧 Configuration

BotConfigModel

interface BotConfigModel {
  botName: string; // Display name of the bot
  botId: string; // Unique bot identifier
  clientId: string; // OAuth client ID
  clientSecret: string; // OAuth client secret
  botUrl: string; // Base URL of the bot server
  identity: string; // User identity (email/username)
  jwtServerUrl: string; // JWT token server URL
  isWebHook: boolean; // Enable webhook mode
  value_aud: string; // JWT audience value
  isHeaderVisible: boolean; // Show/hide header
  isFooterVisible: boolean; // Show/hide footer
}

📡 Events

The library emits various events that you can listen to:

Connection Events

import {RTM_EVENT} from 'rn-kore-bot-socket-lib-v79';

const botClient = KoreBotClient.getInstance();

// Connection lifecycle
botClient.on(RTM_EVENT.CONNECTING, () => {
  console.log('Connecting to bot...');
});

botClient.on(RTM_EVENT.ON_OPEN, () => {
  console.log('Connected to bot');
});

botClient.on(RTM_EVENT.ON_CLOSE, () => {
  console.log('Connection closed');
});

botClient.on(RTM_EVENT.ON_ERROR, error => {
  console.error('Connection error:', error);
});

botClient.on(RTM_EVENT.RECONNECTING, () => {
  console.log('Attempting to reconnect...');
});

Message Events

// Incoming messages from bot
botClient.on(RTM_EVENT.ON_MESSAGE, data => {
  console.log('Bot message:', data);
  // Handle bot response
});

// Message acknowledgment
botClient.on(RTM_EVENT.ON_ACK, data => {
  console.log('Message acknowledged:', data);
});

// JWT token authorization
botClient.on(RTM_EVENT.ON_JWT_TOKEN_AUTHORIZED, () => {
  console.log('JWT token authorized');
});

🎨 Theme API

Retrieve and apply bot themes dynamically:

import {ActiveThemeAPI} from 'rn-kore-bot-socket-lib-v79';

const themeAPI = new ActiveThemeAPI();

themeAPI.getThemeAPI(botConfig, themeData => {
  if (themeData) {
    console.log('Theme retrieved:', themeData);
    // Apply theme to your UI
  } else {
    console.log('Failed to retrieve theme');
  }
});

📝 Logging

Configure Logging

import {Logger, LogLevel} from 'rn-kore-bot-socket-lib-v79';

// Set log level
Logger.getInstance().setLogLevel(LogLevel.DEBUG); // Show all logs
Logger.getInstance().setLogLevel(LogLevel.INFO); // Default level
Logger.getInstance().setLogLevel(LogLevel.WARN); // Warnings and errors only
Logger.getInstance().setLogLevel(LogLevel.ERROR); // Errors only

Access Logs Programmatically

// Get all logs
const allLogs = Logger.getLogs();

// Get logs by level
const errorLogs = Logger.getLogs(LogLevel.ERROR);

// Clear logs
Logger.clearLogs();

// Custom logging
Logger.info('Custom message', {data: 'example'});
Logger.error('Error occurred', {error: 'details'}, errorObject);

Log Categories

• API_REQUEST/API_SUCCESS/API_ERROR: HTTP API calls
• WEBSOCKET: WebSocket events and messages
• CONNECTION: Connection state changes
• DEBUG/INFO/WARN/ERROR: General application logs

🔄 Connection Management

Manual Connection Control

const botClient = KoreBotClient.getInstance();

// Initialize and connect
botClient.initializeBotClient(botConfig,false);

// Check connection state
const connectionState = botClient.getConnectionState();
console.log('Connection state:', connectionState);

// Manual reconnection
botClient.reconnect(true);

// Disconnect
botClient.disconnect();

// Network status management
botClient.setIsNetworkAvailable(true / false);

// Session management
botClient.setSessionActive(true / false);
botClient.setAppState('ACTIVE' | 'SLEEP');

Connection States

import {ConnectionState} from 'rn-kore-bot-socket-lib-v79';

// Available states
ConnectionState.CONNECTING; // 0
ConnectionState.CONNECTED; // 1
ConnectionState.DISCONNECTED; // 2

💬 Messaging

Send Messages

const botClient = KoreBotClient.getInstance();

// Simple text message
botClient.sendMessage('Hello bot!');

// Message with payload
botClient.sendMessage('Display message', 'Actual payload to bot');

// Message with attachments
botClient.sendMessage('Message', null, attachmentArray);

Retrieve Chat History

// Get conversation history
botClient.getBotHistory();

// Listen for history response
botClient.on(RTM_EVENT.GET_HISTORY, (response, botInfo) => {
  console.log('Chat history:', response.data);
});

🛠️ Advanced Usage

Custom Event Handling

class AdvancedBotIntegration extends Component {
  private setupAdvancedListeners = () => {
    const botClient = KoreBotClient.getInstance();

    // Connection monitoring
    botClient.on(RTM_EVENT.ON_OPEN, this.onConnected);
    botClient.on(RTM_EVENT.ON_CLOSE, this.onDisconnected);
    botClient.on(RTM_EVENT.ON_ERROR, this.onError);
    botClient.on(RTM_EVENT.RECONNECTING, this.onReconnecting);

    // Message handling
    botClient.on(RTM_EVENT.ON_MESSAGE, this.onMessage);
    botClient.on(RTM_EVENT.ON_ACK, this.onMessageAck);
  };

  private onConnected = () => {
    this.setState({connectionStatus: 'Connected'});
    // Send initial message or update UI
  };

  private onMessage = (data: any) => {
    // Process incoming bot message
    if (data.type === 'bot_response') {
      this.handleBotResponse(data);
    }
  };

  componentWillUnmount() {
    // Clean up listeners
    const botClient = KoreBotClient.getInstance();
    botClient.removeAllListeners();
    botClient.disconnect();
  }
}

Error Handling

const setupErrorHandling = () => {
  const botClient = KoreBotClient.getInstance();

  botClient.on(RTM_EVENT.ON_ERROR, error => {
    Logger.error('Bot connection error', {error});

    // Handle specific error types
    if (error.includes('401')) {
      // Handle authentication error
      this.refreshTokenAndRetry();
    } else if (error.includes('network')) {
      // Handle network error
      this.showNetworkError();
    }
  });
};

📱 React Native Integration

Complete Component Example

import React, {Component} from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Alert,
} from 'react-native';
import KoreBotClient, {
  RTM_EVENT,
  ConnectionState,
  Logger,
  LogLevel,
} from 'rn-kore-bot-socket-lib-v79';

interface State {
  connectionStatus: string;
  connectionColor: string;
  messages: any[];
}

class BotChatComponent extends Component<{}, State> {
  private botClient: any;

  constructor(props: {}) {
    super(props);
    this.state = {
      connectionStatus: 'Disconnected',
      connectionColor: '#dc3545',
      messages: [],
    };
  }

  componentDidMount() {
    this.setupBotClient();
  }

  private setupBotClient = () => {
    this.botClient = KoreBotClient.getInstance();

    // Setup event listeners
    this.botClient.on(RTM_EVENT.CONNECTING, () => {
      this.updateStatus('Connecting...', '#ffc107');
    });

    this.botClient.on(RTM_EVENT.ON_OPEN, () => {
      this.updateStatus('Connected', '#28a745');
    });

    this.botClient.on(RTM_EVENT.ON_MESSAGE, (data: any) => {
      this.addMessage(data);
    });

    this.botClient.on(RTM_EVENT.ON_ERROR, (error: any) => {
      this.updateStatus('Error', '#dc3545');
      Alert.alert('Connection Error', error.toString());
    });
  };

  private updateStatus = (status: string, color: string) => {
    this.setState({connectionStatus: status, connectionColor: color});
  };

  private addMessage = (messageData: any) => {
    this.setState(prevState => ({
      messages: [...prevState.messages, messageData],
    }));
  };

  private connect = () => {
    const botConfig = {
      // Your bot configuration
    };
    this.botClient.initializeBotClient(botConfig,false);
  };

  private disconnect = () => {
    this.updateStatus('Disconnecting...', '#ffc107');
    this.botClient.disconnect();
    setTimeout(() => {
      this.updateStatus('Disconnected', '#dc3545');
    }, 500);
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>Kore.ai Bot Chat</Text>
          <View
            style={[
              styles.statusBadge,
              {backgroundColor: this.state.connectionColor},
            ]}>
            <Text style={styles.statusText}>
              Status: {this.state.connectionStatus}
            </Text>
          </View>
        </View>

        <View style={styles.controls}>
          <TouchableOpacity style={styles.connectButton} onPress={this.connect}>
            <Text style={styles.buttonText}>Connect</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.disconnectButton}
            onPress={this.disconnect}>
            <Text style={styles.buttonText}>Disconnect</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }

  componentWillUnmount() {
    this.botClient?.removeAllListeners();
    this.botClient?.disconnect();
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  statusBadge: {
    padding: 10,
    borderRadius: 8,
    minWidth: 200,
    alignItems: 'center',
  },
  statusText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  connectButton: {
    backgroundColor: '#007bff',
    padding: 15,
    borderRadius: 8,
    flex: 0.4,
    alignItems: 'center',
  },
  disconnectButton: {
    backgroundColor: '#dc3545',
    padding: 15,
    borderRadius: 8,
    flex: 0.4,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default BotChatComponent;

🔍 Debugging

Enable Debug Logging

import {Logger, LogLevel} from 'rn-kore-bot-socket-lib-v79';

// Enable verbose logging
Logger.setLogLevel(LogLevel.DEBUG);

// Monitor all API calls
const apiLogs = Logger.getLogs().filter(log => log.category.includes('API'));

// Monitor WebSocket events
const wsLogs = Logger.getLogs().filter(log =>
  log.category.includes('WEBSOCKET'),
);

// Export logs for support
const supportLogs = JSON.stringify(Logger.getLogs(), null, 2);
console.log('Support logs:', supportLogs);

📋 API Reference

KoreBotClient Methods

| Method | Parameters | Description | | ---------------------------------------------- | -------------------- | ---------------------------- | | getInstance() | None | Get singleton instance | | initializeBotClient(config,false) | BotConfigModel | Initialize bot connection | | sendMessage(message, payload?, attachments?) | string, any?, any? | Send message to bot | | disconnect() | None | Disconnect from bot | | reconnect(isReconnection, resetCount?) | boolean, boolean? | Manual reconnection | | getConnectionState() | None | Get current connection state | | getBotHistory() | None | Retrieve chat history | | setSessionActive(active) | boolean | Set session state | | setAppState(state) | string | Set app state | | setIsNetworkAvailable(available) | boolean | Set network availability |

Event Constants

RTM_EVENT.CONNECTING;
RTM_EVENT.ON_OPEN;
RTM_EVENT.ON_CLOSE;
RTM_EVENT.ON_ERROR;
RTM_EVENT.ON_MESSAGE;
RTM_EVENT.ON_ACK;
RTM_EVENT.RECONNECTING;
RTM_EVENT.ON_JWT_TOKEN_AUTHORIZED;
RTM_EVENT.GET_HISTORY;

🚨 Troubleshooting

Common Issues

Connection Fails

• Verify bot configuration parameters
• Check network connectivity
• Ensure JWT server is accessible
• Review error logs: Logger.getLogs(LogLevel.ERROR)

Authentication Errors

• Validate clientId and clientSecret
• Check jwtServerUrl accessibility
• Verify value_aud parameter

Message Not Sending

• Ensure bot is connected: getConnectionState()
• Check WebSocket logs for errors
• Verify message format

Reconnection Issues

• Check network status
• Review reconnection logs
• Verify server availability

Debug Checklist

1. ✅ Enable debug logging: Logger.setLogLevel(LogLevel.DEBUG)
2. ✅ Check configuration parameters
3. ✅ Monitor connection events
4. ✅ Review API call logs
5. ✅ Test network connectivity
6. ✅ Verify server endpoints

📄 License

MIT License - see the LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

📞 Support

• Documentation: Full API Documentation
• Issues: GitHub Issues
• Support: Kore.ai Support

🏢 About Kore.ai

Kore.ai is a leading conversational AI platform that helps enterprises build sophisticated chatbots and virtual assistants. This library provides seamless integration with Kore.ai bots in React Native applications.

Made with ❤️ by Kore.ai