@aslaluroba/help-center-react v2.1.3

BabylAI Help Center

A React component library for integrating BabylAI's help center widget into your web applications. This widget provides real-time chat support functionality with AI assistance and human agent escalation capabilities.

Installation

npm install @babylai/help-center
# or
yarn add @babylai/help-center

Quick Start

import { HelpCenter, initializeHelpCenter } from '@babylai/help-center'

// Initialize the help center with your configuration
initializeHelpCenter({
  baseUrl: 'https://your-api-url.com',
  hubUrl: 'https://your-hub-url.com'
})

// Use the component
function App() {
  return <HelpCenter helpScreenId="your-help-screen-id" messageLabel="Need help? Click here!" />
}

Configuration

Initialize Help Center

Before using the component, initialize the help center with your configuration:

import { initializeHelpCenter } from '@babylai/help-center'

initializeHelpCenter({
  baseUrl: 'https://your-api-url.com', // Base URL for the API
  hubUrl: 'https://your-hub-url.com' // SignalR hub URL
})

Props

HelpCenter Component

Optional User Object Structure

interface User {
  id?: string
  name?: string
  email?: string
  avatar?: string
}

Features

• 🤖 AI-powered chat support
• 👥 Human agent escalation
• 💬 Real-time messaging
• 📱 Responsive design
• 🎨 Customizable styling
• 🔒 Secure authentication
• 🌐 Multi-language support

Examples

Basic Usage

import { HelpCenter } from '@babylai/help-center'

function App() {
  return <HelpCenter helpScreenId="your-help-screen-id" />
}

With Optional User Information

import { HelpCenter } from '@babylai/help-center'

function App() {
  return (
    <HelpCenter
      helpScreenId="your-help-screen-id"
      user={{
        name: 'John Doe',
        email: 'john@example.com',
        avatar: 'https://example.com/avatar.jpg'
      }}
      messageLabel="How can we help you?"
    />
  )
}

Styling

The widget comes with default styling but can be customized using CSS. The main component classes are:

.help-center-container {
  /* Container styles */
}
.helpButton {
  /* Help button styles */
}
.popup {
  /* Chat popup styles */
}
/* ... other classes available in the CSS files */

Events

The widget handles various events internally:

• Chat session creation
• Message sending/receiving
• Agent escalation
• Session termination

Error Handling

The widget includes built-in error handling for common scenarios:

• Network connectivity issues
• Authentication failures
• API errors

Browser Support

The widget supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

To build the package locally:

# Install dependencies
npm install

# Build the package
npm run build

# Run tests
npm test

# Development mode
npm run dev

License

MIT © BabylAI

Support

For support, please contact support@babylai.com or visit our documentation.