@aslaluroba/help-center-react 1.0.1

package/README.md

@@ -0,0 +1,176 @@
+# 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
+
+```bash
+npm install @babylai/help-center
+# or
+yarn add @babylai/help-center
+```
+
+## Quick Start
+
+```jsx
+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:
+
+```javascript
+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
+
+| Prop           | Type    | Required | Description                                                |
+| -------------- | ------- | -------- | ---------------------------------------------------------- |
+| `helpScreenId` | string  | Yes      | Unique identifier for the help screen configuration        |
+| `user`         | object  | No       | Optional user information for the chat session             |
+| `showArrow`    | boolean | No       | Whether to show the floating arrow message (default: true) |
+| `messageLabel` | string  | No       | Custom message for the floating arrow                      |
+
+### Optional User Object Structure
+
+```typescript
+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
+
+```jsx
+import { HelpCenter } from '@babylai/help-center'
+
+function App() {
+  return <HelpCenter helpScreenId="your-help-screen-id" />
+}
+```
+
+### With Optional User Information
+
+```jsx
+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:
+
+```css
+.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:
+
+```bash
+# 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](https://docs.babylai.com).

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './shared';

package/dist/components/shared/Button/button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "rounded-icon" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: ({ children, className, variant, size, ...props }: ButtonProps) => React.JSX.Element;
+export {};

package/dist/components/shared/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/components/shared/Card/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'rounded' | 'shadowed';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/shared/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './card';

package/dist/components/shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Card';

package/dist/components/ui/agent-response/agent-response.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AgentResponseProps {
+    messageContent: string;
+    senderType: number;
+    messageId: number;
+    onType?: () => void;
+}
+declare const AgentResponse: ({ senderType, messageContent, messageId, onType }: AgentResponseProps) => React.JSX.Element;
+export default AgentResponse;

package/dist/components/ui/header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HeaderProps {
+    onClose: () => void;
+}
+export declare function Header({ onClose }: HeaderProps): React.JSX.Element;
+export {};

package/dist/core/ApiService.d.ts

@@ -0,0 +1,16 @@
+import { AxiosRequestConfig } from 'axios';
+import { HelpCenterConfig } from '../lib/types';
+export declare class ApiService {
+    private axiosInstance;
+    private config;
+    private tokenExpiryTime;
+    private currentToken;
+    constructor(config: HelpCenterConfig);
+    private setupInterceptors;
+    private getValidToken;
+    get<T>(endpoint: string, config?: AxiosRequestConfig): Promise<T>;
+    post<T>(endpoint: string, data?: unknown, config?: AxiosRequestConfig): Promise<T>;
+    put<T>(endpoint: string, data?: unknown, config?: AxiosRequestConfig): Promise<T>;
+    delete<T>(endpoint: string, config?: AxiosRequestConfig): Promise<T>;
+    private handleError;
+}

package/dist/core/SignalRService.d.ts

@@ -0,0 +1,11 @@
+export declare class ClientSignalRService {
+    private static connection;
+    private static isConnected;
+    private static hubUrl;
+    static initialize(hubUrl: string): void;
+    static startConnection(sessionId: string, apiKey: string, onMessageReceived: Function): Promise<void>;
+    static joinGroup(sessionId: string): Promise<void>;
+    static leaveGroup(sessionId: string): Promise<void>;
+    static stopConnection(): Promise<void>;
+    static isConnectionActive(): boolean;
+}

package/dist/core/api.d.ts

@@ -0,0 +1,4 @@
+import { TokenResponse } from '../lib/types';
+export declare function initializeAPI(url: string, getToken: () => Promise<TokenResponse>): void;
+export declare function getValidToken(forceRefresh?: boolean): Promise<string>;
+export declare function apiRequest(endpoint: string, method?: string, body?: any): Promise<Response>;

package/dist/core/token-service.d.ts

@@ -0,0 +1,10 @@
+type TokenResponse = {
+    token: string;
+    expiresIn: number;
+};
+export declare class TokenService {
+    private baseUrl;
+    constructor(baseUrl: string);
+    getToken(): Promise<TokenResponse>;
+}
+export {};

package/dist/i18n.d.ts

@@ -0,0 +1,2 @@
+import { i18n as I18nType } from 'i18next';
+export declare const createHelpCenterI18n: (lng?: string) => I18nType;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { HelpCenter } from './ui/help-center';
+export type HelpCenterConfig = {
+    baseUrl: string;
+    hubUrl?: string;
+};
+export declare function initializeHelpCenter(config: HelpCenterConfig): void;
+export { HelpCenter };
+export * from './lib/types';
+export * from './core/ApiService';
+export * from './core/SignalRService';
+export { TokenService } from './core/token-service';
+export { initializeAPI } from './core/api';