@aslaluroba/help-center-react

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)

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"
      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"
/>

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 support@babylai.com or visit our documentation.