@aslaluroba/help-center 1.2.2 → 2.0.0

package/README.md

@@ -1,76 +1,240 @@
-# @babylai/help-center
+# @aslaluroba/help-center
 
-A customizable help center widget for Angular applications that provides chat functionality and documentation support.
+A powerful and customizable help center widget for Angular applications that provides real-time chat functionality, AI assistance, and multi-language support.
 
-## Installation
+## Features
+
+- 🎯 Easy integration with any Angular application
+- 🌐 Built-in multi-language support (English & Arabic) with RTL
+- 💬 Real-time chat functionality with SignalR
+- 🤖 AI Assistant integration
+- 📱 Responsive and modern design
+- 🎨 Highly customizable UI
+- 🔒 Secure token-based authentication
+- 🔄 Real-time updates and notifications
+- 📋 Nested options and help screens
 
-Install the package and its peer dependencies:
+## Installation
 
 ```bash
-npm install @babylai/help-center
+npm install @aslaluroba/help-center
 ```
 
-### Markdown Support
-
-This library uses [ngx-markdown](https://github.com/jfcere/ngx-markdown) for rendering markdown content. Please refer to their [official documentation](https://github.com/jfcere/ngx-markdown) for detailed installation and configuration instructions, including:
+## Quick Start
 
-- Syntax highlighting with Prism.js
-- Emoji support
-- Math expression rendering with KaTeX
-- Diagrams and charts with Mermaid
-- Copy-to-clipboard functionality
-
-## Basic Usage
-
-1. Import the HelpCenterModule in your app.module.ts:
+1. Import the required components and services in your app.module.ts or standalone component:
 
 ```typescript
-typescript
-import { HelpCenterModule } from '@babylai/help-center'
+import { HelpCenterWidgetComponent, HelpCenterConfigService } from '@aslaluroba/help-center'
+
 @NgModule({
   imports: [
     // ... other imports
-    HelpCenterModule
-  ]
+    HelpCenterWidgetComponent
+  ],
+  providers: [HelpCenterConfigService]
 })
 export class AppModule {}
 ```
 
-2. Add the HelpCenterComponent to your template:
+2. Configure and use the Help Center in your component:
+
 ```typescript
-import { HelpCenterWidgetComponent } from '@babylai/help-center';
+import { Component } from '@angular/core'
+import { HelpCenterConfigService, Language } from '@aslaluroba/help-center'
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, HelpCenterWidgetComponent],
-  templateUrl: './app.component.html',
+  template: `
+    <div>
+      <!-- Language Switcher (Optional) -->
+      <div class="language-switcher">
+        <button (click)="switchLanguage('en')">English</button>
+        <button (click)="switchLanguage('ar')">العربية</button>
+      </div>
+
+      <!-- Help Center Widget -->
+      <app-help-center-widget
+        [getToken]="getToken"
+        [helpScreenId]="helpScreenId"
+        [showArrow]="true"
+        [messageLabel]="'Need help? Click here!'"
+        [currentLang]="currentLang"
+        [isIntroScreenEnabled]="false"
+      >
+      </app-help-center-widget>
+    </div>
+  `
 })
+export class AppComponent {
+  helpScreenId = 'your-help-screen-id'
+  currentLang: Language = 'en'
+
+  constructor(private configService: HelpCenterConfigService) {
+    // Optional: Configure global settings
+    this.configService.setApiBaseUrl('https://your-custom-api.com')
+  }
+
+  // Required: Implement token retrieval
+  getToken = async () => {
+    const response = await fetch('your-auth-endpoint')
+    const data = await response.json()
+    return data.token
+  }
+
+  // Optional: Language switching
+  switchLanguage(lang: Language) {
+    this.currentLang = lang
+  }
+}
 ```
 
-```html
-<app-help-center-widget
-  [getToken]="getTokenFunction"
-  [helpScreenId]="yourHelpScreenId"
-  [user]="currentUser"
-  [showArrow]="true"
-  [messageLabel]="'Need help? Click here!'"
->
-</app-help-center-widget>
+## Available Services
+
+The library provides several services for advanced customization:
+
+### HelpCenterConfigService
+
+Global configuration service for the help center:
+
+```typescript
+import { HelpCenterConfigService } from '@aslaluroba/help-center'
+
+constructor(private config: HelpCenterConfigService) {
+  // Set custom API base URL (optional)
+  config.setApiBaseUrl('https://your-api.com')
+
+  // Set custom token function (optional)
+  config.setGetTokenFn(async () => {
+    return 'your-custom-token'
+  })
+}
 ```
 
-## Configuration Options
+### TranslationService & LanguageService
 
-The widget accepts the following inputs:
+Handle multi-language support:
 
-- `getToken`: () => Promise<string> - A function that returns a promise resolving to an authentication token
-- `helpScreenId`: string - The ID of the help screen to display
-- `user`: Object - (Optional) Current user information
-  ```typescript
-  {
-    id: string
-    name: string
-    email: string
-  }
-  ```
-- `showArrow`: boolean - (Optional) Whether to show the attention arrow animation
-- `messageLabel`: string - (Optional) Custom message for the arrow tooltip
+```typescript
+import {
+  TranslationService,
+  LanguageService,
+  Language
+} from '@aslaluroba/help-center'
+
+constructor(
+  private translation: TranslationService,
+  private language: LanguageService
+) {
+  // Subscribe to language changes
+  translation.currentLang.subscribe((lang: Language) => {
+    console.log('Language changed to:', lang)
+  })
+
+  // Switch language
+  language.switchLanguage('ar')
+}
+```
+
+### SignalRService
+
+Handles real-time communication:
+
+```typescript
+import { SignalRService } from '@aslaluroba/help-center'
+
+constructor(private signalR: SignalRService) {
+  // The service is automatically managed by the widget
+  // but you can subscribe to connection status if needed
+  signalR.connectionStatus$.subscribe(status => {
+    console.log('SignalR connection status:', status)
+  })
+}
+```
+
+## Component Props
+
+### Required Props
+
+| Prop         | Type                  | Description                                                          |
+| ------------ | --------------------- | -------------------------------------------------------------------- |
+| getToken     | () => Promise<string> | Function that returns a promise resolving to an authentication token |
+| helpScreenId | string                | Unique identifier for the help screen                                |
+
+### Optional Props
+
+| Prop                 | Type     | Default | Description                            |
+| -------------------- | -------- | ------- | -------------------------------------- |
+| showArrow            | boolean  | true    | Show/hide the floating arrow animation |
+| messageLabel         | string   | null    | Custom message label for the widget    |
+| currentLang          | Language | 'en'    | Current language ('en' or 'ar')        |
+| isIntroScreenEnabled | boolean  | false   | Enable/disable intro screen            |
+
+## Styling
+
+The widget can be customized using CSS variables:
+
+```css
+:root {
+  /* Primary Colors */
+  --help-center-primary-color: #ad49e1;
+  --help-center-secondary-color: #8a2be2;
+
+  /* Text Colors */
+  --help-center-text-color: #333;
+  --help-center-text-light: #fff;
+
+  /* Background Colors */
+  --help-center-background: #fff;
+  --help-center-chat-background: #f5f5f5;
+
+  /* Border Styles */
+  --help-center-border-radius: 8px;
+  --help-center-border-color: #e0e0e0;
+
+  /* Spacing */
+  --help-center-padding: 16px;
+  --help-center-margin: 8px;
+}
+```
+
+## Types
+
+The library exports several TypeScript interfaces and types:
+
+```typescript
+import {
+  Language, // 'en' | 'ar'
+  TokenResponse, // { token: string; expiresIn: number }
+  Option, // Help screen option interface
+  Message // Chat message interface
+} from '@aslaluroba/help-center'
+```
+
+## Security Considerations
+
+- All authentication is token-based
+- Tokens are never stored in localStorage/sessionStorage
+- All API communications use HTTPS
+- Real-time connections are secured via SignalR
+- API base URL can be configured for your domain
+- Custom token retrieval logic can be implemented
+
+## Browser Support
+
+- Chrome (latest 2 versions)
+- Firefox (latest 2 versions)
+- Safari (latest 2 versions)
+- Edge (latest 2 versions)
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Support
+
+For support, please [open an issue](https://github.com/aslaluroba/help-center/issues) on our GitHub repository.