@aslaluroba/help-center 1.1.13 → 1.1.16

package/README.md

@@ -10,6 +10,35 @@ Install the package and its peer dependencies:
 npm install @babylai/help-center
 ```
 
+### Assets Configuration
+
+The help center widget requires certain assets (icons, images, etc.) to function properly. You need to configure your Angular application to include these assets:
+
+1. Update your angular.json to include the package assets:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@babylai/help-center/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
 ### 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:
@@ -22,55 +51,123 @@ This library uses [ngx-markdown](https://github.com/jfcere/ngx-markdown) for ren
 
 ## Basic Usage
 
-1. Import the HelpCenterModule in your app.module.ts:
-
-```typescript
-typescript
-import { HelpCenterModule } from '@babylai/help-center'
-@NgModule({
-  imports: [
-    // ... other imports
-    HelpCenterModule
-  ]
-})
-export class AppModule {}
-```
+1. Import the required components and services in your component:
 
-2. Add the HelpCenterComponent to your template:
 ```typescript
-import { HelpCenterWidgetComponent } from '@babylai/help-center';
+import { HelpCenterWidgetComponent, LanguageService, TranslationService, Language } from '@babylai/help-center'
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, HelpCenterWidgetComponent],
-  templateUrl: './app.component.html',
+  standalone: true,
+  imports: [CommonModule, HelpCenterWidgetComponent],
+  template: `
+    <div class="container">
+      <!-- Language Switcher -->
+      <div class="language-switcher">
+        <button [class.active]="currentLang === 'en'" (click)="switchLanguage('en')">English</button>
+        <button [class.active]="currentLang === 'ar'" (click)="switchLanguage('ar')">العربية</button>
+      </div>
+
+      <!-- Help Center Widget -->
+      <app-help-center-widget
+        [getToken]="getTokenFunction"
+        [helpScreenId]="yourHelpScreenId"
+        [showArrow]="true"
+        [messageLabel]="'Need help? Click here!'"
+      >
+      </app-help-center-widget>
+    </div>
+  `,
+  styles: [
+    `
+      .language-switcher {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .language-switcher button {
+        padding: 0.5rem 1rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .language-switcher button.active {
+        background-color: #ad49e1;
+        color: white;
+        border-color: #ad49e1;
+      }
+    `
+  ]
 })
+export class AppComponent implements OnInit, OnDestroy {
+  currentLang: Language = 'en'
+  private langSubscription?: Subscription
+
+  constructor(
+    private languageService: LanguageService,
+    private translationService: TranslationService
+  ) {}
+
+  ngOnInit() {
+    // Subscribe to language changes
+    this.langSubscription = this.translationService.currentLang.subscribe((lang) => {
+      this.currentLang = lang
+    })
+  }
+
+  ngOnDestroy() {
+    // Clean up subscription
+    if (this.langSubscription) {
+      this.langSubscription.unsubscribe()
+    }
+  }
+
+  switchLanguage(lang: Language) {
+    this.languageService.switchLanguage(lang)
+  }
+
+  // Your token function implementation
+  getTokenFunction = async () => {
+    // Implement your token retrieval logic here
+    return 'your-token'
+  }
+}
 ```
 
-```html
-<app-help-center-widget
-  [getToken]="getTokenFunction"
-  [helpScreenId]="yourHelpScreenId"
-  [user]="currentUser"
-  [showArrow]="true"
-  [messageLabel]="'Need help? Click here!'"
->
-</app-help-center-widget>
+2. Make sure to provide the services in your app.config.ts:
+
+```typescript
+import { ApplicationConfig } from '@angular/core'
+import { LanguageService } from '@babylai/help-center'
+import { TranslationService } from '@babylai/help-center'
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ... other providers
+    LanguageService,
+    TranslationService
+  ]
+}
 ```
 
+## Language Service Features
+
+The LanguageService provides the following functionality:
+
+- `switchLanguage(language: Language)`: Switch between supported languages ('en' | 'ar')
+- `getCurrentLang(): Language`: Get the current active language
+- Automatic RTL support for Arabic language
+- Automatic translation of all widget content
+- Real-time language switching without page reload
+
 ## Configuration Options
 
 The widget accepts the following inputs:
 
 - `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
+- `currentLang`: string - (Optional) Initial language setting ('en' | 'ar')