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 @aslaluroba/help-center-react
# or
yarn add @aslaluroba/help-center-react

Quick Start

import '@aslaluroba/help-center-react/style.css'
import { HelpCenter, initializeHelpCenter } from '@babylai/help-center-react'

// Initialize the help center with your configuration
initializeHelpCenter({
  baseUrl: "https://your-api-url.com",
  getToken: getToken(), // your token generator function
});

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

Configuration

Initialize Help Center

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

import '@aslaluroba/help-center-react/style.css'
import { initializeHelpCenter } from '@babylai/help-center-react'

initializeHelpCenter({
  baseUrl: "https://your-api-url.com", // Base URL for the API
  getToken: getToken(), // your token generator function
});

Props

HelpCenter Component

| Prop | Type | Required | Description | | ---------------- | -------- | -------- | ---------------------------------------------------------- | | helpScreenId | string | Yes | Unique identifier for the help screen configuration | | showArrow | boolean | No | Whether to show the floating arrow message (default: true) | | messageLabel | string | No | Custom message for the floating arrow | | language | ar or en | No | The used locale (default: en) | | primaryColor | string | No | Custom primary color for theming (hex color) | | logoUrl | string | No | Custom logo URL to replace the default BabylAI logo |

Features

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

Examples

Basic Usage

import '@aslaluroba/help-center-react/style.css'
import { HelpCenter } from '@babylai/help-center-react'

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

With Optional User Information

import '@aslaluroba/help-center-react/style.css'
import { HelpCenter } from '@babylai/help-center-react'

function App() {
  return (
    <HelpCenter
      helpScreenId="your-help-screen-id"
      messageLabel="How can we help you?"
      language="ar"
    />
  );
}

With Custom Theming and Branding

import '@aslaluroba/help-center-react/style.css'
import { HelpCenter } from '@babylai/help-center-react'

function App() {
  return (
    <HelpCenter
      helpScreenId="your-help-screen-id"
      primaryColor="#FF6B6B"
      logoUrl="https://your-domain.com/logo.png"
      messageLabel="Need assistance?"
      language="en"
    />
  );
}

Theming and Customization

Dynamic Color Theming

The widget supports dynamic theming through props. When you provide primaryColor the widget automatically generates a complete color palette with different shades:

<HelpCenter
  helpScreenId="your-help-screen-id"
  primaryColor="#AD49E1"    // Your brand primary color
/>

The theming system automatically creates:

• Primary Color Scale: 100, 200, 300, 400, 500 (base), 600, 700, 800, 900, 950
• CSS Custom Properties: Available as --babylai-primary-color-*

Custom Logo

Replace the default BabylAI logo with your own:

<HelpCenter
  helpScreenId="your-help-screen-id"
  logoUrl="https://your-domain.com/logo.png"
/>

Logo Requirements:

• Recommended size: 40x40px
• Supported formats: PNG, JPG, SVG
• Should work well on both light and dark backgrounds

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

Quick Start

For local development and testing, see our comprehensive guides:

• Quick Start Guide - Get up and running in 3 steps
• Local Development Guide - Complete setup and workflow guide

Basic Commands

# Install dependencies
yarn install

# Build the package
yarn build

# Run tests
yarn test

# Development mode with auto-publish
yarn watch

# Setup development environment
yarn setup:dev

License

MIT © BabylAI

Support

For support, please contact [email protected] or visit our documentation.