@aslaluroba/help-center 1.1.4 → 1.1.6

package/fesm2022/aslaluroba-help-center.mjs

@@ -0,0 +1,1421 @@
+import * as i0 from '@angular/core';
+import { HostBinding, Input, ViewEncapsulation, Component, EventEmitter, Output, Injectable, Pipe, HostListener, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { BehaviorSubject } from 'rxjs';
+import { MarkdownComponent } from 'ngx-markdown';
+import 'prismjs';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/themes/prism-okaidia.css';
+import * as signalR from '@microsoft/signalr';
+
+/**
+ * Utility function to conditionally join CSS class names
+ */
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+class CardComponent {
+    variant = 'default';
+    class = '';
+    get hostClasses() {
+        const variantStyles = {
+            default: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow',
+            rounded: 'babylai-rounded-3xl babylai-bg-black-white-50 babylai-py-4 babylai-px-[24px] babylai-w-full babylai-block',
+            shadowed: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow-lg'
+        };
+        return cn(variantStyles[this.variant], this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { variant: "variant", class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class CardHeaderComponent {
+    class = '';
+    get hostClasses() {
+        return cn('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-p-6', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardHeaderComponent, isStandalone: true, selector: "app-card-header", inputs: { class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-header',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class CardTitleComponent {
+    class = '';
+    get hostClasses() {
+        return cn('babylai-font-semibold babylai-leading-none babylai-tracking-tight', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardTitleComponent, isStandalone: true, selector: "app-card-title", inputs: { class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-title',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class CardDescriptionComponent {
+    class = '';
+    get hostClasses() {
+        return cn('babylai-text-sm babylai-text-muted-foreground', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardDescriptionComponent, isStandalone: true, selector: "app-card-description", inputs: { class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-description',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class CardContentComponent {
+    class = '';
+    get hostClasses() {
+        return cn('babylai-p-0 babylai-pt-0', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardContentComponent, isStandalone: true, selector: "app-card-content", inputs: { class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-content',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+class CardFooterComponent {
+    class = '';
+    get hostClasses() {
+        return cn('babylai-flex babylai-items-center babylai-p-6 babylai-pt-0', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: CardFooterComponent, isStandalone: true, selector: "app-card-footer", inputs: { class: "class" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-card-footer',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<ng-content></ng-content>`,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { class: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ButtonComponent {
+    variant = 'default';
+    type = 'button';
+    disabled = false;
+    fullWidth = false;
+    className = '';
+    onClick = new EventEmitter();
+    getButtonClasses() {
+        const baseClasses = 'babylai-cursor-pointer babylai-transition-all babylai-duration-200 ';
+        const variantClasses = {
+            default: 'babylai-bg-primary babylai-text-white babylai-py-2 babylai-px-4 babylai-rounded-full hover:babylai-bg-primary-700',
+            'icon-bg': 'babylai-bg-primary babylai-text-white babylai-py-2 babylai-px-4 babylai-rounded-full babylai-w-12 babylai-h-12 babylai-flex babylai-items-center babylai-justify-center hover:babylai-bg-primary-700',
+            'icon-only': 'babylai-bg-transparent babylai-border-none babylai-p-1 babylai-flex babylai-items-center babylai-justify-center'
+        };
+        const widthClass = this.fullWidth ? 'babylai-w-full' : '';
+        const disabledClass = this.disabled ? 'babylai-opacity-50 babylai-cursor-not-allowed' : '';
+        return `${baseClasses} ${variantClasses[this.variant]} ${widthClass} ${disabledClass} ${this.className}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { variant: "variant", type: "type", disabled: "disabled", fullWidth: "fullWidth", className: "className" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button [type]="type" [disabled]="disabled" [ngClass]="getButtonClasses()" (click)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-button',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <button [type]="type" [disabled]="disabled" [ngClass]="getButtonClasses()" (click)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </button>
+  `
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+class ButtonContentComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ButtonContentComponent, isStandalone: true, selector: "app-button-content", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-button-content',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: ` <ng-content></ng-content> `
+                }]
+        }] });
+class IconButtonComponent {
+    className = '';
+    disabled = false;
+    onClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: IconButtonComponent, isStandalone: true, selector: "app-icon-button", inputs: { className: "className", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <app-button [variant]="'icon-bg'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-icon-button',
+                    standalone: true,
+                    imports: [CommonModule, ButtonComponent],
+                    template: `
+    <app-button [variant]="'icon-bg'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `
+                }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+class TransparentIconButtonComponent {
+    className = '';
+    disabled = false;
+    onClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TransparentIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: TransparentIconButtonComponent, isStandalone: true, selector: "app-transparent-icon-button", inputs: { className: "className", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <app-button [variant]="'icon-only'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TransparentIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-transparent-icon-button',
+                    standalone: true,
+                    imports: [CommonModule, ButtonComponent],
+                    template: `
+    <app-button [variant]="'icon-only'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
+      <ng-content></ng-content>
+    </app-button>
+  `
+                }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+// src/app/services/translation.service.ts
+const defaultTranslations = {
+    ChatIntroMessage: '',
+    BabylaiTitle: '',
+    BabylaiDescription: '',
+    ChatNow: '',
+    TryBableAI: '',
+    ContactUs: '',
+    PickTopicTitle: '',
+    BabylAI: '',
+    ChatPlaceholder: '',
+    PoweredByBabylAI: '',
+    EndChat: '',
+    LeavingDialogTitle: '',
+    LeavingDialogBody: '',
+    Confirm: '',
+    Cancel: '',
+    title: ''
+};
+class TranslationService {
+    translations = {
+        en: {
+            ChatIntroMessage: 'Chat with BabylAI 🚀',
+            BabylaiTitle: 'BabylAI',
+            BabylaiDescription: "Hey there! 👋 I'm BabylAI, here to assist you.",
+            ChatNow: 'Chat Now',
+            TryBableAI: 'Try BabylAI for Free 🎉',
+            ContactUs: "Contact us, Let's Talk! 💬",
+            PickTopicTitle: 'Pick a Topic to Get Started',
+            BabylAI: 'BabylAI',
+            ChatPlaceholder: 'Type your message...',
+            PoweredByBabylAI: 'Powered by BabylAI',
+            EndChat: 'End Chat',
+            LeavingDialogTitle: 'Leaving so soon? 👋',
+            LeavingDialogBody: "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
+            Confirm: 'Confirm',
+            Cancel: 'Cancel',
+            title: 'Help Center'
+        },
+        ar: {
+            ChatIntroMessage: 'دردش مع BabylAI 🚀',
+            BabylaiTitle: 'BabylAI',
+            BabylaiDescription: 'مرحبا! 👋 أنا BabylAI، هنا لتساعدك.',
+            ChatNow: 'دردش الآن',
+            TryBableAI: 'جرب BabylAI مجانا 🎉',
+            ContactUs: 'تواصل معنا, دعنا نتحدث! 💬',
+            PickTopicTitle: 'اختر موضوع للبدء',
+            BabylAI: 'BabylAI',
+            ChatPlaceholder: 'اكتب رسالتك...',
+            PoweredByBabylAI: 'مدعوم من BabylAI',
+            EndChat: 'إنهاء الدردشة',
+            LeavingDialogTitle: 'هل تغادر بالفعل؟ 👋',
+            LeavingDialogBody: 'لا تقلق، يمكنك العودة في أي وقت. نحن دائماً هنا إذا كنت بحاجة إلى مساعدة أو لديك أسئلة.',
+            Confirm: 'تأكيد',
+            Cancel: 'إلغاء',
+            title: 'مركز المساعدة'
+        }
+    };
+    currentLang = new BehaviorSubject('en');
+    constructor() { }
+    translate(key) {
+        const lang = this.currentLang.value;
+        return this.translations[lang][key] || key;
+    }
+    setLanguage(lang) {
+        this.currentLang.next(lang);
+    }
+    getCurrentLang() {
+        return this.currentLang.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+// src/app/pipes/translate.pipe.ts
+class TranslatePipe {
+    translationService;
+    constructor(translationService) {
+        this.translationService = translationService;
+    }
+    transform(key) {
+        return this.translationService.translate(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslatePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: TranslationService }] });
+
+class HelpScreenDataComponent {
+    helpScreenData = null;
+    title = '';
+    handleStartNewChat = new EventEmitter();
+    expandedItemId = null;
+    ngOnInit() { }
+    toggleExpand(itemId) {
+        if (this.expandedItemId === itemId) {
+            this.expandedItemId = null;
+        }
+        else {
+            this.expandedItemId = itemId;
+            setTimeout(() => {
+                const element = document.getElementById(itemId);
+                if (element) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+            }, 100);
+        }
+    }
+    startNewChat(option) {
+        this.handleStartNewChat.emit(option);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HelpScreenDataComponent, isStandalone: true, selector: "app-help-screen-data", inputs: { helpScreenData: "helpScreenData", title: "title" }, outputs: { handleStartNewChat: "handleStartNewChat" }, ngImport: i0, template: "<div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n  <h1 class=\"babylai-text-4xl babylai-font-bold babylai-text-black-white-600 babylai-mb-3 babylai-max-w-56\">\n    {{ 'PickTopicTitle' | translate }}\n  </h1>\n  <img\n    src=\"/images/stars.svg\"\n    alt=\"help-center-widget-icon\"\n    class=\"babylai-absolute babylai-top-0 babylai-end-0 babylai-w-[15.42rem] babylai-h-[13.49rem] babylai-opacity-50 babylai-z-[-1]\"\n  />\n  <ng-container *ngFor=\"let item of helpScreenData?.options\">\n    <app-card\n      [id]=\"item.id\"\n      variant=\"rounded\"\n      class=\"babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-2 babylai-bg-black-white-100\"\n      (click)=\"toggleExpand(item.id)\"\n    >\n      <app-card-content>\n        <!-- Header section (always visible) -->\n        <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-p-2\">\n          <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">{{ item.title }}</h4>\n          <div\n            class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-8 babylai-h-8 babylai-rounded-full babylai-text-primary babylai-transition-transform\"\n            [ngClass]=\"{\n              'babylai-rotate-90': expandedItemId === item.id,\n              'babylai-rotate-[270deg]': expandedItemId !== item.id\n            }\"\n          >\n            <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" class=\"babylai-w-4 babylai-h-4\" />\n          </div>\n        </div>\n\n        <!-- Expanded content (visible only when expanded) -->\n        <div\n          *ngIf=\"expandedItemId === item.id\"\n          class=\"babylai-transition-all babylai-duration-300 babylai-ease-in-out babylai-flex babylai-flex-col babylai-gap-2 babylai-mt-4 babylai-p-2\"\n        >\n          <ng-container>\n            <div *ngFor=\"let paragraph of item.paragraphs\" class=\"babylai-text-base babylai-text-black-white-800 babylai-mb-2\">\n              {{ paragraph }}\n            </div>\n          </ng-container>\n\n          <app-button variant=\"default\" className=\"babylai-w-full\" (click)=\"startNewChat(item)\">{{ 'ChatNow' | translate }} </app-button>\n        </div>\n      </app-card-content>\n    </app-card>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-help-screen-data', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ButtonComponent, TranslatePipe], template: "<div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n  <h1 class=\"babylai-text-4xl babylai-font-bold babylai-text-black-white-600 babylai-mb-3 babylai-max-w-56\">\n    {{ 'PickTopicTitle' | translate }}\n  </h1>\n  <img\n    src=\"/images/stars.svg\"\n    alt=\"help-center-widget-icon\"\n    class=\"babylai-absolute babylai-top-0 babylai-end-0 babylai-w-[15.42rem] babylai-h-[13.49rem] babylai-opacity-50 babylai-z-[-1]\"\n  />\n  <ng-container *ngFor=\"let item of helpScreenData?.options\">\n    <app-card\n      [id]=\"item.id\"\n      variant=\"rounded\"\n      class=\"babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-2 babylai-bg-black-white-100\"\n      (click)=\"toggleExpand(item.id)\"\n    >\n      <app-card-content>\n        <!-- Header section (always visible) -->\n        <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-p-2\">\n          <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">{{ item.title }}</h4>\n          <div\n            class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-8 babylai-h-8 babylai-rounded-full babylai-text-primary babylai-transition-transform\"\n            [ngClass]=\"{\n              'babylai-rotate-90': expandedItemId === item.id,\n              'babylai-rotate-[270deg]': expandedItemId !== item.id\n            }\"\n          >\n            <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" class=\"babylai-w-4 babylai-h-4\" />\n          </div>\n        </div>\n\n        <!-- Expanded content (visible only when expanded) -->\n        <div\n          *ngIf=\"expandedItemId === item.id\"\n          class=\"babylai-transition-all babylai-duration-300 babylai-ease-in-out babylai-flex babylai-flex-col babylai-gap-2 babylai-mt-4 babylai-p-2\"\n        >\n          <ng-container>\n            <div *ngFor=\"let paragraph of item.paragraphs\" class=\"babylai-text-base babylai-text-black-white-800 babylai-mb-2\">\n              {{ paragraph }}\n            </div>\n          </ng-container>\n\n          <app-button variant=\"default\" className=\"babylai-w-full\" (click)=\"startNewChat(item)\">{{ 'ChatNow' | translate }} </app-button>\n        </div>\n      </app-card-content>\n    </app-card>\n  </ng-container>\n</div>\n" }]
+        }], propDecorators: { helpScreenData: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], handleStartNewChat: [{
+                type: Output
+            }] } });
+
+class HeaderComponent {
+    headerType = 'standard';
+    showBackButton = false;
+    showLogo = true;
+    logoSrc = '/logo-white.svg';
+    logoAlt = 'BabylAI Logo';
+    language = 'en';
+    onBack = new EventEmitter();
+    onClose = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { headerType: "headerType", showBackButton: "showBackButton", showLogo: "showLogo", logoSrc: "logoSrc", logoAlt: "logoAlt", language: "language" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: `
+    <div class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between">
+      <app-button *ngIf="showBackButton" variant="icon-bg" className="!babylai-bg-black-white-50" (click)="onBack.emit()">
+        <img
+          src="/icons/arrow-stripped-colored.svg"
+          alt="Back"
+          class="babylai-w-6 babylai-h-6"
+          [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+        />
+      </app-button>
+      <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+      <app-button *ngIf="!showBackButton" variant="icon-only" (click)="onClose.emit()">
+        <img src="/icons/close-circle.svg" alt="Close" class="babylai-w-10 babylai-h-10" />
+      </app-button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-header',
+                    standalone: true,
+                    imports: [CommonModule, ButtonComponent],
+                    template: `
+    <div class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between">
+      <app-button *ngIf="showBackButton" variant="icon-bg" className="!babylai-bg-black-white-50" (click)="onBack.emit()">
+        <img
+          src="/icons/arrow-stripped-colored.svg"
+          alt="Back"
+          class="babylai-w-6 babylai-h-6"
+          [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+        />
+      </app-button>
+      <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+      <app-button *ngIf="!showBackButton" variant="icon-only" (click)="onClose.emit()">
+        <img src="/icons/close-circle.svg" alt="Close" class="babylai-w-10 babylai-h-10" />
+      </app-button>
+    </div>
+  `
+                }]
+        }], propDecorators: { headerType: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], showLogo: [{
+                type: Input
+            }], logoSrc: [{
+                type: Input
+            }], logoAlt: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], onBack: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }] } });
+class ChatHeaderComponent {
+    isMenuOpen = false;
+    showBackButton = false;
+    showLogo = true;
+    logoSrc = '/logo-white.svg';
+    logoAlt = 'BabylAI Logo';
+    language = 'en';
+    onBack = new EventEmitter();
+    onClose = new EventEmitter();
+    onDocumentClick(event) {
+        const target = event.target;
+        const menuContainer = target.closest('[data-menu-container]');
+        if (!menuContainer && this.isMenuOpen) {
+            this.isMenuOpen = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: "showBackButton", showLogo: "showLogo", logoSrc: "logoSrc", logoAlt: "logoAlt", language: "language" }, outputs: { onBack: "onBack", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: `
+    <div
+      class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between babylai-bg-black-white-50 babylai-rounded-t-3xl babylai-relative"
+    >
+      <div class="babylai-flex babylai-items-center babylai-gap-2">
+        <app-button
+          variant="icon-bg"
+          className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+          (click)="onBack.emit()"
+        >
+          <img
+            src="/icons/arrow-stripped-colored.svg"
+            alt="Back"
+            class="babylai-w-full babylai-h-full"
+            [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+          />
+        </app-button>
+        <div class="babylai-relative" data-menu-container>
+          <app-button
+            variant="icon-bg"
+            className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+            (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
+          >
+            <img
+              src="/icons/menu.svg"
+              alt="Menu"
+              class="babylai-w-full babylai-h-full"
+              [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+            />
+          </app-button>
+          <div
+            *ngIf="isMenuOpen"
+            class="babylai-absolute babylai-mt-2 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-50"
+            [ngClass]="{ 'babylai-right-0': language === 'ar', 'babylai-left-0': language === 'en' }"
+          >
+            <div class="babylai-py-1">
+              <button
+                (click)="onClose.emit(); isMenuOpen = false"
+                class="babylai-block babylai-w-full babylai-text-left babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 hover:babylai-bg-gray-100"
+                [ngClass]="{ 'babylai-text-left': language === 'en', 'babylai-text-right': language === 'ar' }"
+              >
+                {{ 'EndChat' | translate }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="babylai-flex babylai-items-center babylai-gap-1 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2"
+      >
+        <img src="/logo-primary.svg" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+        <p class="babylai-text-base babylai-font-bold babylai-text-black-white-600">{{ 'BabylAI' | translate }}</p>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-chat-header',
+                    standalone: true,
+                    imports: [CommonModule, ButtonComponent, TranslatePipe],
+                    template: `
+    <div
+      class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between babylai-bg-black-white-50 babylai-rounded-t-3xl babylai-relative"
+    >
+      <div class="babylai-flex babylai-items-center babylai-gap-2">
+        <app-button
+          variant="icon-bg"
+          className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+          (click)="onBack.emit()"
+        >
+          <img
+            src="/icons/arrow-stripped-colored.svg"
+            alt="Back"
+            class="babylai-w-full babylai-h-full"
+            [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+          />
+        </app-button>
+        <div class="babylai-relative" data-menu-container>
+          <app-button
+            variant="icon-bg"
+            className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
+            (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
+          >
+            <img
+              src="/icons/menu.svg"
+              alt="Menu"
+              class="babylai-w-full babylai-h-full"
+              [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
+            />
+          </app-button>
+          <div
+            *ngIf="isMenuOpen"
+            class="babylai-absolute babylai-mt-2 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-50"
+            [ngClass]="{ 'babylai-right-0': language === 'ar', 'babylai-left-0': language === 'en' }"
+          >
+            <div class="babylai-py-1">
+              <button
+                (click)="onClose.emit(); isMenuOpen = false"
+                class="babylai-block babylai-w-full babylai-text-left babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 hover:babylai-bg-gray-100"
+                [ngClass]="{ 'babylai-text-left': language === 'en', 'babylai-text-right': language === 'ar' }"
+              >
+                {{ 'EndChat' | translate }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="babylai-flex babylai-items-center babylai-gap-1 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2"
+      >
+        <img src="/logo-primary.svg" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
+        <p class="babylai-text-base babylai-font-bold babylai-text-black-white-600">{{ 'BabylAI' | translate }}</p>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { showBackButton: [{
+                type: Input
+            }], showLogo: [{
+                type: Input
+            }], logoSrc: [{
+                type: Input
+            }], logoAlt: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], onBack: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class LoadingComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: LoadingComponent, isStandalone: true, selector: "app-loading", ngImport: i0, template: `
+    <div
+      class="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-py-16 md:babylai-py-28"
+    >
+      <img src="/images/animatedLogo.gif" alt="Animated Logo" class="babylai-w-20 babylai-h-20" />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-loading',
+                    template: `
+    <div
+      class="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-py-16 md:babylai-py-28"
+    >
+      <img src="/images/animatedLogo.gif" alt="Animated Logo" class="babylai-w-20 babylai-h-20" />
+    </div>
+  `,
+                    standalone: true
+                }]
+        }] });
+
+class ChatComponent {
+    messages = [];
+    needsAgent = false;
+    assistantStatus = 'idle';
+    isSignalRConnected = false;
+    isChatClosed = false;
+    sendMessageEvent = new EventEmitter();
+    chatMessagesContainer;
+    currentLang = 'en';
+    loading = false;
+    messageText = '';
+    get firstAgentMessageIndex() {
+        return this.messages.findIndex((message) => message.senderType === 2);
+    }
+    cleanMessageContent(content) {
+        // Remove excessive newlines (more than 2 consecutive newlines)
+        return content.replace(/\n{3,}/g, '\n\n').trim();
+    }
+    ngOnInit() {
+        // Initialize component
+    }
+    ngAfterViewChecked() {
+        this.scrollToBottom();
+    }
+    scrollToBottom() {
+        try {
+            this.chatMessagesContainer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollHeight;
+        }
+        catch (err) {
+            console.error('Error scrolling to bottom:', err);
+        }
+    }
+    sendMessage() {
+        if (!this.messageText.trim() || !this.isSignalRConnected || this.isChatClosed)
+            return;
+        this.sendMessageEvent.emit(this.messageText);
+        this.messageText = '';
+    }
+    hasAgentMessageBeenSent(messages) {
+        return messages.some((message) => message.senderType === 2 || message.senderType === 3);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isSignalRConnected: "isSignalRConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", loading: "loading" }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"babylai-flex babylai-flex-col babylai-h-full babylai-overflow-hidden\">\n  <div class=\"babylai-flex-1 babylai-overflow-y-auto babylai-pb-4 babylai-flex babylai-flex-col babylai-gap-2\" #chatMessagesContainer>\n    <div *ngFor=\"let message of messages; let i = index\" class=\"babylai-flex babylai-flex-col babylai-gap-2\">\n      <div class=\"babylai-w-full\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n        <img src=\"/images/seperator.svg\" class=\"babylai-w-full\" />\n      </div>\n      <div class=\"babylai-flex babylai-items-start babylai-gap-2\" [class.babylai-flex-row-reverse]=\"message.senderType === 1\">\n        <div\n          class=\"babylai-messageIcon babylai-mt-2\"\n          [class.babylai-invisible]=\"i > 0 && messages[i - 1].senderType === message.senderType\"\n        >\n          @if (message.senderType === 3) {\n            <span\n              class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-primary babylai-p-[10px]\"\n            >\n              <img src=\"/logo-white.svg\" alt=\"robot\" class=\"babylai-w-full\" />\n            </span>\n          } @else if (needsAgent || message.senderType === 2) {\n            <span\n              class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]\"\n            >\n              <img src=\"/icons/person.svg\" alt=\"robot\" class=\"babylai-w-full\" />\n            </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"\n            'babylai-max-w-[80%] babylai-relative ' +\n            (message.senderType === 1\n              ? 'babylai-self-start babylai-bg-primary babylai-text-white babylai-rtl'\n              : 'babylai-self-end babylai-bg-black-white-100 babylai-text-black babylai-rtl')\n          \"\n        >\n          <app-card-content>\n            <div class=\"babylai-messageContent babylai-whitespace-pre-wrap\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"babylai-prose babylai-max-w-none babylai-break-words [&>*:first-child]:babylai-mt-0 [&>*:last-child]:babylai-mb-0 [&>p]:babylai-my-2 [&>ul]:babylai-my-2 [&>ol]:babylai-my-2 [&>blockquote]:babylai-my-2\"\n                [class.babylai-prose-invert]=\"message.senderType === 1\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\" class=\"babylai-flex babylai-items-start babylai-gap-2\">\n      <div class=\"babylai-messageIcon babylai-mt-2\">\n        <span\n          class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]\"\n        >\n          <img src=\"/images/animatedLogo.gif\" alt=\"Loading\" class=\"babylai-w-full\" />\n        </span>\n      </div>\n      <app-card\n        variant=\"rounded\"\n        class=\"babylai-max-w-[80%] babylai-relative babylai-self-end babylai-bg-black-white-100 babylai-text-black\"\n      >\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"babylai-flex babylai-items-center babylai-justify-center babylai-h-full\">\n      <app-loading />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"sendMessage()\" class=\"babylai-relative\">\n    <div class=\"babylai-relative babylai-w-full\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageText\"\n        name=\"messageText\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"babylai-flex-1 babylai-min-h-16 babylai-w-full babylai-ps-3 babylai-pe-12 babylai-rounded-full focus:babylai-outline-none babylai-px-0 babylai-py-2 disabled:babylai-bg-black-white-200\"\n      />\n      <app-button\n        type=\"submit\"\n        [disabled]=\"!messageText.trim() || !isSignalRConnected || isChatClosed\"\n        variant=\"icon-bg\"\n        className=\"babylai-absolute babylai-end-1 babylai-top-1/2 babylai-transform -babylai-translate-y-1/2 babylai-w-10 babylai-h-10 babylai-opacity-100 babylai-py-0 babylai-px-0 !babylai-p-3 babylai-inline-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50 disabled:babylai-cursor-not-allowed\"\n      >\n        <img\n          src=\"/icons/send.svg\"\n          alt=\"send-message\"\n          class=\"babylai-w-full\"\n          [ngClass]=\"currentLang === 'ar' ? 'babylai-rotate-[270deg]' : ''\"\n        />\n      </app-button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-loading" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MarkdownComponent,
+                        ButtonComponent,
+                        CardComponent,
+                        CardContentComponent,
+                        LoadingComponent,
+                        TranslatePipe
+                    ], template: "<div class=\"babylai-flex babylai-flex-col babylai-h-full babylai-overflow-hidden\">\n  <div class=\"babylai-flex-1 babylai-overflow-y-auto babylai-pb-4 babylai-flex babylai-flex-col babylai-gap-2\" #chatMessagesContainer>\n    <div *ngFor=\"let message of messages; let i = index\" class=\"babylai-flex babylai-flex-col babylai-gap-2\">\n      <div class=\"babylai-w-full\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n        <img src=\"/images/seperator.svg\" class=\"babylai-w-full\" />\n      </div>\n      <div class=\"babylai-flex babylai-items-start babylai-gap-2\" [class.babylai-flex-row-reverse]=\"message.senderType === 1\">\n        <div\n          class=\"babylai-messageIcon babylai-mt-2\"\n          [class.babylai-invisible]=\"i > 0 && messages[i - 1].senderType === message.senderType\"\n        >\n          @if (message.senderType === 3) {\n            <span\n              class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-primary babylai-p-[10px]\"\n            >\n              <img src=\"/logo-white.svg\" alt=\"robot\" class=\"babylai-w-full\" />\n            </span>\n          } @else if (needsAgent || message.senderType === 2) {\n            <span\n              class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]\"\n            >\n              <img src=\"/icons/person.svg\" alt=\"robot\" class=\"babylai-w-full\" />\n            </span>\n          }\n        </div>\n        <app-card\n          variant=\"rounded\"\n          [class]=\"\n            'babylai-max-w-[80%] babylai-relative ' +\n            (message.senderType === 1\n              ? 'babylai-self-start babylai-bg-primary babylai-text-white babylai-rtl'\n              : 'babylai-self-end babylai-bg-black-white-100 babylai-text-black babylai-rtl')\n          \"\n        >\n          <app-card-content>\n            <div class=\"babylai-messageContent babylai-whitespace-pre-wrap\">\n              <markdown\n                [data]=\"cleanMessageContent(message.messageContent)\"\n                ngPreserveWhitespaces\n                [inline]=\"false\"\n                class=\"babylai-prose babylai-max-w-none babylai-break-words [&>*:first-child]:babylai-mt-0 [&>*:last-child]:babylai-mb-0 [&>p]:babylai-my-2 [&>ul]:babylai-my-2 [&>ol]:babylai-my-2 [&>blockquote]:babylai-my-2\"\n                [class.babylai-prose-invert]=\"message.senderType === 1\"\n              >\n              </markdown>\n            </div>\n          </app-card-content>\n        </app-card>\n      </div>\n    </div>\n\n    <div *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\" class=\"babylai-flex babylai-items-start babylai-gap-2\">\n      <div class=\"babylai-messageIcon babylai-mt-2\">\n        <span\n          class=\"babylai-flex babylai-items-center babylai-justify-center babylai-w-10 babylai-h-10 babylai-rounded-full babylai-bg-black-white-50 babylai-p-[10px]\"\n        >\n          <img src=\"/images/animatedLogo.gif\" alt=\"Loading\" class=\"babylai-w-full\" />\n        </span>\n      </div>\n      <app-card\n        variant=\"rounded\"\n        class=\"babylai-max-w-[80%] babylai-relative babylai-self-end babylai-bg-black-white-100 babylai-text-black\"\n      >\n        <app-card-content>\n          <div id=\"wave\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </app-card-content>\n      </app-card>\n    </div>\n    <div *ngIf=\"loading\" class=\"babylai-flex babylai-items-center babylai-justify-center babylai-h-full\">\n      <app-loading />\n    </div>\n  </div>\n\n  <form (ngSubmit)=\"sendMessage()\" class=\"babylai-relative\">\n    <div class=\"babylai-relative babylai-w-full\">\n      <input\n        type=\"text\"\n        [(ngModel)]=\"messageText\"\n        name=\"messageText\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed\"\n        class=\"babylai-flex-1 babylai-min-h-16 babylai-w-full babylai-ps-3 babylai-pe-12 babylai-rounded-full focus:babylai-outline-none babylai-px-0 babylai-py-2 disabled:babylai-bg-black-white-200\"\n      />\n      <app-button\n        type=\"submit\"\n        [disabled]=\"!messageText.trim() || !isSignalRConnected || isChatClosed\"\n        variant=\"icon-bg\"\n        className=\"babylai-absolute babylai-end-1 babylai-top-1/2 babylai-transform -babylai-translate-y-1/2 babylai-w-10 babylai-h-10 babylai-opacity-100 babylai-py-0 babylai-px-0 !babylai-p-3 babylai-inline-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50 disabled:babylai-cursor-not-allowed\"\n      >\n        <img\n          src=\"/icons/send.svg\"\n          alt=\"send-message\"\n          class=\"babylai-w-full\"\n          [ngClass]=\"currentLang === 'ar' ? 'babylai-rotate-[270deg]' : ''\"\n        />\n      </app-button>\n    </div>\n  </form>\n</div>\n" }]
+        }], propDecorators: { messages: [{
+                type: Input
+            }], needsAgent: [{
+                type: Input
+            }], assistantStatus: [{
+                type: Input
+            }], isSignalRConnected: [{
+                type: Input
+            }], isChatClosed: [{
+                type: Input
+            }], sendMessageEvent: [{
+                type: Output
+            }], chatMessagesContainer: [{
+                type: ViewChild,
+                args: ['chatMessagesContainer']
+            }], currentLang: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }] } });
+
+class ConfirmationDialogComponent {
+    title = '';
+    body = '';
+    confirmText = 'Confirm';
+    cancelText = 'Cancel';
+    onConfirm = new EventEmitter();
+    onCancel = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", inputs: { title: "title", body: "body", confirmText: "confirmText", cancelText: "cancelText" }, outputs: { onConfirm: "onConfirm", onCancel: "onCancel" }, ngImport: i0, template: `
+    <div
+      class="babylai-absolute babylai-inset-0 babylai-bg-black/50 babylai-z-[10] babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl"
+    >
+      <div class="babylai-bg-white babylai-rounded-2xl babylai-p-6 babylai-max-w-sm babylai-w-full babylai-mx-4">
+        <h3 class="babylai-text-xl babylai-font-bold babylai-mb-2">{{ title }}</h3>
+        <p class="babylai-text-gray-600 babylai-mb-6">{{ body }}</p>
+        <div class="babylai-flex babylai-gap-3 babylai-justify-end">
+          <app-button
+            variant="default"
+            className="!babylai-bg-transparent !babylai-text-primary !babylai-border !babylai-border-primary hover:!babylai-bg-primary/10"
+            (click)="onCancel.emit()"
+          >
+            {{ cancelText }}
+          </app-button>
+          <app-button variant="default" (click)="onConfirm.emit()">
+            {{ confirmText }}
+          </app-button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-confirmation-dialog',
+                    standalone: true,
+                    imports: [CommonModule, ButtonComponent],
+                    template: `
+    <div
+      class="babylai-absolute babylai-inset-0 babylai-bg-black/50 babylai-z-[10] babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl"
+    >
+      <div class="babylai-bg-white babylai-rounded-2xl babylai-p-6 babylai-max-w-sm babylai-w-full babylai-mx-4">
+        <h3 class="babylai-text-xl babylai-font-bold babylai-mb-2">{{ title }}</h3>
+        <p class="babylai-text-gray-600 babylai-mb-6">{{ body }}</p>
+        <div class="babylai-flex babylai-gap-3 babylai-justify-end">
+          <app-button
+            variant="default"
+            className="!babylai-bg-transparent !babylai-text-primary !babylai-border !babylai-border-primary hover:!babylai-bg-primary/10"
+            (click)="onCancel.emit()"
+          >
+            {{ cancelText }}
+          </app-button>
+          <app-button variant="default" (click)="onConfirm.emit()">
+            {{ confirmText }}
+          </app-button>
+        </div>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], body: [{
+                type: Input
+            }], confirmText: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], onConfirm: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+
+class ApiService {
+    getTokenFunction = null;
+    baseUrl = null;
+    initializeAPI(url, getToken) {
+        this.getTokenFunction = getToken;
+        this.baseUrl = url;
+    }
+    async getValidToken(forceRefresh = false) {
+        if (!this.getTokenFunction) {
+            throw new Error('API module not initialized. Call initializeAPI(getToken) first.');
+        }
+        let storedToken = localStorage.getItem('chatbot-token');
+        let storedExpiry = localStorage.getItem('chatbot-token-expiry');
+        const currentTime = Math.floor(Date.now() / 1000);
+        if (!storedToken || !storedExpiry || currentTime >= Number(storedExpiry) || forceRefresh) {
+            const tokenResponse = await this.getTokenFunction();
+            if (!tokenResponse) {
+                throw new Error('Invalid token response from getTokenFunction');
+            }
+            storedToken = tokenResponse;
+            storedExpiry = String(currentTime + 900);
+            localStorage.setItem('chatbot-token', storedToken);
+            localStorage.setItem('chatbot-token-expiry', storedExpiry);
+        }
+        return storedToken;
+    }
+    async fetchWithAuth(url, options, retry = true) {
+        if (!options.headers) {
+            options.headers = {};
+        }
+        const headers = options.headers;
+        headers['Authorization'] = `Bearer ${await this.getValidToken()}`;
+        let response = await fetch(url, options);
+        if ((response.status === 401 || response.status === 403) && retry) {
+            console.warn('Token expired. Fetching new token...');
+            const newToken = await this.getValidToken(true);
+            headers['Authorization'] = `Bearer ${newToken}`;
+            response = await fetch(url, options);
+        }
+        return response;
+    }
+    async apiRequest(endpoint, method = 'GET', body = null, customHeaders = {}) {
+        if (!this.baseUrl) {
+            throw new Error('API not initialized. Call initializeAPI first.');
+        }
+        const url = `${this.baseUrl}/${endpoint}`;
+        const options = {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                ...customHeaders
+            },
+            body: body ? JSON.stringify(body) : null
+        };
+        const response = await this.fetchWithAuth(url, options);
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.message || 'API request failed');
+        }
+        return response;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SignalRService {
+    connection = null;
+    isConnected = false;
+    baseURL = 'http://localhost:5086'; // Replace with your API URL
+    hubUrl = 'https://babylai.net'; // Replace with your SignalR hub URL
+    async startConnection(sessionId, apiKey, onMessageReceived) {
+        console.log('sessionId:', sessionId);
+        if (this.isConnected)
+            return;
+        this.connection = new signalR.HubConnectionBuilder()
+            .withUrl(`${this.hubUrl}/clientHub?access_token=${encodeURIComponent(apiKey)}`, {
+            withCredentials: true,
+            transport: signalR.HttpTransportType.WebSockets |
+                signalR.HttpTransportType.LongPolling,
+            headers: {
+                Authorization: `Bearer ${apiKey}`,
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-SignalR-User-Agent': 'Microsoft SignalR/8.0 (8.0.7; Unknown OS; Browser; Unknown Runtime Version)',
+            },
+            skipNegotiation: false,
+            accessTokenFactory: () => apiKey,
+        })
+            .withAutomaticReconnect()
+            .configureLogging(signalR.LogLevel.Information)
+            .build();
+        this.connection.on('ReceiveMessage', (message, senderType, needsAgent) => {
+            console.log('Received message from SignalR:', message, senderType, needsAgent);
+            onMessageReceived(message, senderType, needsAgent);
+        });
+        try {
+            await this.connection.start();
+            console.log('SignalR connection started successfully.');
+            this.isConnected = true;
+            await this.joinGroup(sessionId);
+            console.log('SignalR group joined.');
+        }
+        catch (error) {
+            console.error('Error connecting to SignalR', error);
+            this.isConnected = false;
+        }
+    }
+    async joinGroup(sessionId) {
+        if (this.connection) {
+            try {
+                console.log(`Attempting to join group with session ID: ${sessionId}`);
+                await this.connection.invoke('JoinGroup', sessionId);
+                console.log(`Joined group with session ID: ${sessionId}`);
+            }
+            catch (error) {
+                console.error('Error joining SignalR group:', error);
+            }
+        }
+    }
+    async leaveGroup(sessionId) {
+        if (this.connection && this.isConnected) {
+            try {
+                await this.connection.invoke('LeaveGroup', sessionId);
+                console.log(`Left group with session ID: ${sessionId}`);
+            }
+            catch (error) {
+                console.error('Error leaving SignalR group:', error);
+            }
+        }
+    }
+    async stopConnection() {
+        if (this.connection && this.isConnected) {
+            await this.connection.stop();
+            this.isConnected = false;
+            console.log('SignalR disconnected.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SignalRService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class TokenService {
+    baseUrl = null;
+    initializeService(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async getToken() {
+        if (!this.baseUrl) {
+            throw new Error('Token service not initialized. Call initializeService first.');
+        }
+        try {
+            const response = await fetch(`${this.baseUrl}/Auth/client/get-babylai-token`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error('Failed to fetch token');
+            }
+            const data = await response.json();
+            return {
+                token: data.token,
+                expiresIn: data.expiresIn || 3600 // Default to 1 hour if not provided
+            };
+        }
+        catch (error) {
+            throw new Error('Failed to get authentication token');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TokenService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class HelpCenterWidgetComponent {
+    apiService;
+    signalRService;
+    tokenService;
+    translationService;
+    getToken;
+    helpScreenId;
+    user;
+    showArrow = true;
+    messageLabel = null;
+    currentLang = 'en';
+    chatMessagesContainer;
+    // State variables
+    isPopupOpen = false;
+    helpScreenData = null;
+    status = 'idle';
+    error = null;
+    showArrowAnimation = false;
+    isRTL = this.currentLang === 'en' ? false : true;
+    showTooltip = false;
+    sessionId = null;
+    isSignalRConnected = false;
+    isChatClosed = false;
+    showChat = false;
+    messageText = '';
+    isTyping = false;
+    messages = [];
+    showHelpScreenData = false;
+    chatIsLoading = false;
+    isOpen = false;
+    needsAgent = false;
+    assistantStatus = 'idle';
+    selectedOption = null;
+    selectedNestedOption = null;
+    baseUrl = 'https://babylai.net/api';
+    showEndChatConfirmation = false;
+    constructor(apiService, signalRService, tokenService, translationService) {
+        this.apiService = apiService;
+        this.signalRService = signalRService;
+        this.tokenService = tokenService;
+        this.translationService = translationService;
+    }
+    ngOnInit() {
+        this.showArrowAnimation = this.showArrow;
+        this.tokenService.initializeService(this.baseUrl);
+        this.apiService.initializeAPI(this.baseUrl, this.getToken);
+    }
+    async handleTogglePopup() {
+        this.isPopupOpen = !this.isPopupOpen;
+        this.showArrowAnimation = this.isPopupOpen;
+        if (this.isPopupOpen) {
+            await this.fetchHelpScreenData();
+        }
+    }
+    async fetchHelpScreenData() {
+        this.status = 'loading';
+        this.error = null;
+        try {
+            const response = await this.apiService.apiRequest(`client/clientHelpScreen/${this.helpScreenId}`, 'GET');
+            this.helpScreenData = await response.json();
+            this.status = 'succeeded';
+        }
+        catch (error) {
+            this.error = error.message;
+            this.status = 'failed';
+        }
+    }
+    async createChatSession() {
+        try {
+            const chatSessionCreateDto = {
+                optionId: this.selectedOption?.id,
+                helpScreenId: this.helpScreenId
+            };
+            const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
+            const data = await response.json();
+            this.sessionId = data.id;
+            return data;
+        }
+        catch (error) {
+            console.error('Error creating chat session:', error);
+            throw error;
+        }
+    }
+    async sendMessage(messageText) {
+        const textToSend = messageText || this.messageText;
+        if (!textToSend.trim() || !this.isSignalRConnected || this.isChatClosed)
+            return;
+        try {
+            this.assistantStatus = 'typing';
+            // Add user message
+            this.messages.push({
+                id: Date.now(),
+                sender: 'user',
+                senderType: 1,
+                messageContent: textToSend,
+                sentAt: new Date(),
+                isSeen: false
+            });
+            if (!this.sessionId) {
+                await this.createChatSession();
+            }
+            const messageDto = { messageContent: textToSend };
+            await this.apiService.apiRequest(`Client/ClientChatSession/${this.sessionId}/send-message`, 'POST', messageDto);
+            // Clear message input
+            this.messageText = '';
+            // Update message as seen
+            this.messages = this.messages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
+        }
+        catch (error) {
+            console.error('Error sending message:', error);
+            this.assistantStatus = 'idle';
+            this.messages.push({
+                id: Date.now(),
+                sender: 'assistant',
+                senderType: 3,
+                messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
+                sentAt: new Date(),
+                isSeen: true
+            });
+        }
+    }
+    async sendMessageToChatSession(chatSessionId, messageDto) {
+        try {
+            const response = await this.apiService.apiRequest(`Client/ClientChatSession/${chatSessionId}/send-message`, 'POST', messageDto);
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error sending message:', error);
+            throw error;
+        }
+    }
+    handleReceiveMessage(message, senderType, needsAgent) {
+        if (needsAgent) {
+            this.needsAgent = true;
+        }
+        const sender = this.getSenderType(parseInt(senderType));
+        this.messages.push({
+            id: Date.now(),
+            sender: sender,
+            senderType: parseInt(senderType),
+            messageContent: message,
+            sentAt: new Date(),
+            isSeen: true
+        });
+        console.log(this.messages);
+        this.assistantStatus = 'idle';
+        this.scrollToBottom();
+    }
+    getSenderType(senderType) {
+        switch (senderType) {
+            case 1:
+                return 'user';
+            case 2:
+                return 'agent';
+            default:
+                return 'assistant';
+        }
+    }
+    async handleStartNewChat(option) {
+        this.selectedOption = option;
+        this.chatIsLoading = true;
+        if (!this.isSignalRConnected) {
+            try {
+                await this.createChatSession();
+                const tokenResponse = await this.apiService.getValidToken();
+                this.showChat = true;
+                this.isChatClosed = false;
+                this.showHelpScreenData = false;
+                await this.signalRService.startConnection(this.sessionId, tokenResponse, this.handleReceiveMessage.bind(this));
+                this.isSignalRConnected = true;
+                // add greeting message
+                this.messages.push({
+                    id: Date.now(),
+                    sender: 'assistant',
+                    senderType: 3,
+                    messageContent: option.assistant?.greeting ||
+                        (this.currentLang === 'en' ? 'Hello! How can I assist you today?' : 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
+                    sentAt: new Date(),
+                    isSeen: true
+                });
+                this.chatIsLoading = false;
+            }
+            catch (error) {
+                console.error('Error connecting to SignalR:', error);
+                this.chatIsLoading = false;
+            }
+        }
+        else {
+            this.showChat = true;
+            this.isChatClosed = false;
+            this.showHelpScreenData = false;
+            this.chatIsLoading = false;
+        }
+    }
+    async startNewChatSession(option) {
+        try {
+            this.status = 'loading';
+            this.error = '';
+            this.messages = [];
+            const chatSessionCreateDto = {
+                helpScreenId: this.helpScreenId,
+                optionId: option.id,
+                ...(this.user && {
+                    user: {
+                        id: this.user.id,
+                        name: this.user.name,
+                        email: this.user.email
+                    }
+                })
+            };
+            const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
+            const createdSession = await response.json();
+            this.sessionId = createdSession.id;
+            // Add greeting message
+            this.messages.push({
+                id: Date.now(),
+                sender: 'assistant',
+                senderType: 3,
+                messageContent: option.assistant?.greeting || 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
+                sentAt: new Date(),
+                isSeen: true
+            });
+            this.isSignalRConnected = true;
+            this.isChatClosed = false;
+            this.status = 'succeeded';
+        }
+        catch (error) {
+            console.error('Chat start error:', error);
+            this.error = error.message || 'Failed to start chat session';
+            this.status = 'failed';
+        }
+    }
+    async handleStartChat(option) {
+        this.showChat = true;
+        await this.startNewChatSession(option);
+    }
+    async handleEndChat() {
+        this.showEndChatConfirmation = true;
+    }
+    async confirmEndChat() {
+        this.showEndChatConfirmation = false;
+        if (this.sessionId) {
+            await this.closeChatSession(this.sessionId);
+            this.sessionId = null;
+        }
+        this.showChat = false;
+        this.showHelpScreenData = true;
+        this.messages = [];
+        this.needsAgent = false;
+        this.assistantStatus = 'idle';
+        this.selectedOption = null;
+        this.selectedNestedOption = null;
+    }
+    cancelEndChat() {
+        this.showEndChatConfirmation = false;
+    }
+    async closeChatSession(chatSessionId) {
+        try {
+            const response = await this.apiService.apiRequest(`Client/ClientChatSession/${chatSessionId}/close`, 'POST');
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error closing chat session:', error);
+            throw error;
+        }
+    }
+    handleClosePopup() {
+        if (this.showChat) {
+            this.handleEndChat();
+        }
+        this.showHelpScreenData = false;
+        this.showChat = false;
+        this.isPopupOpen = false;
+        this.selectedOption = null;
+        this.selectedNestedOption = null;
+    }
+    handleCloseArrowAnimation() {
+        this.showArrowAnimation = false;
+    }
+    handleBack() {
+        if (this.showChat) {
+            this.showChat = false;
+            this.showHelpScreenData = true;
+        }
+        else if (this.selectedNestedOption) {
+            this.selectedNestedOption = null;
+        }
+        else if (this.selectedOption) {
+            this.selectedOption = null;
+        }
+        else if (this.showHelpScreenData) {
+            this.showHelpScreenData = false;
+        }
+    }
+    handleShowChat() {
+        this.showChat = true;
+        this.showHelpScreenData = false;
+    }
+    selectOption(option) {
+        this.selectedOption = option;
+        this.selectedNestedOption = null;
+    }
+    selectNestedOption(nestedOption) {
+        this.selectedNestedOption = nestedOption;
+    }
+    handleShowHelpScreenData() {
+        this.showHelpScreenData = true;
+    }
+    handleHideHelpScreenData() {
+        this.showHelpScreenData = false;
+    }
+    scrollToBottom() {
+        setTimeout(() => {
+            if (this.chatMessagesContainer) {
+                const element = this.chatMessagesContainer.nativeElement;
+                element.scrollTop = element.scrollHeight;
+            }
+        });
+    }
+    getDirection() {
+        return this.currentLang === 'ar' ? 'rtl' : 'ltr';
+    }
+    get helpScreenDataList() {
+        if (!this.helpScreenData?.options)
+            return [];
+        // Transform options to the format expected by HelpScreenDataComponent
+        return this.helpScreenData.options.map((option) => ({
+            icon: option.icon || '/icons/default.svg',
+            title: option.title,
+            description: option.paragraphs?.[0] || '',
+            actionLabel: option.chatWithUs ? 'Chat Now' : '',
+            action: option.chatWithUs ? () => this.handleStartChat(option) : null
+        }));
+    }
+    navigateToUrl(url) {
+        window.open(url, '_blank');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: SignalRService }, { token: TokenService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", user: "user", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isSignalRConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading" }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-help-center-widget', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslatePipe,
+                        CardComponent,
+                        CardContentComponent,
+                        ButtonComponent,
+                        HelpScreenDataComponent,
+                        HeaderComponent,
+                        ChatHeaderComponent,
+                        ChatComponent,
+                        LoadingComponent,
+                        ConfirmationDialogComponent
+                    ], template: "<div class=\"babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[9999]\" [dir]=\"getDirection()\">\n  <!-- Arrow Animation -->\n  <div\n    *ngIf=\"showArrowAnimation && !isPopupOpen\"\n    class=\"babylai-fixed babylai-bottom-20 babylai-right-4 babylai-z-[1300] babylai-flex babylai-flex-col babylai-items-end babylai-animate-float\"\n  >\n    <div\n      class=\"babylai-bg-primary babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative\"\n    >\n      <p class=\"babylai-text-xs babylai-font-bold babylai-m-0\">\n        {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n      </p>\n      <button\n        class=\"babylai-absolute babylai-top-[-8px] babylai-right-[-8px] babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] hover:babylai-bg-primary-700 hover:babylai-text-white\"\n        (click)=\"handleCloseArrowAnimation()\"\n      >\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n          <path d=\"M1 1L11 11M1 11L11 1\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        </svg>\n      </button>\n      <div\n        class=\"babylai-absolute babylai-bottom-[-10px] babylai-right-5 babylai-w-0 babylai-h-0 babylai-border-l-[10px] babylai-border-r-[10px] babylai-border-t-[10px] babylai-border-l-transparent babylai-border-r-transparent babylai-border-t-primary\"\n      ></div>\n    </div>\n  </div>\n\n  <!-- Help Button -->\n  <button\n    class=\"babylai-w-14 babylai-h-14 babylai-rounded-full babylai-bg-primary babylai-text-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-shadow-md babylai-transition-transform babylai-duration-200 babylai-fixed babylai-bottom-5 babylai-right-5 babylai-z-[1000] hover:babylai-bg-primary-700 hover:babylai-scale-105 active:babylai-scale-95\"\n    (click)=\"handleTogglePopup()\"\n  >\n    <span class=\"babylai-flex babylai-items-center babylai-justify-center\">\n      <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"babylai-w-6 babylai-h-6\" />\n    </span>\n  </button>\n\n  <!-- Help Popup -->\n  <div\n    *ngIf=\"isPopupOpen\"\n    [ngClass]=\"{\n      'babylai-fixed babylai-bottom-20 babylai-right-5 babylai-w-[360px]  babylai-h-[684px] babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col babylai-z-[1000] babylai-bg-black-white-100': true,\n      'babylai-w-[360px]': isPopupOpen,\n      'babylai-w-[60px]': !isPopupOpen,\n      'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': isPopupOpen && !showHelpScreenData && !showChat\n    }\"\n  >\n    <app-confirmation-dialog\n      *ngIf=\"showEndChatConfirmation\"\n      [title]=\"'LeavingDialogTitle' | translate\"\n      [body]=\"'LeavingDialogBody' | translate\"\n      [confirmText]=\"'Confirm' | translate\"\n      [cancelText]=\"'Cancel' | translate\"\n      (onConfirm)=\"confirmEndChat()\"\n      (onCancel)=\"cancelEndChat()\"\n    ></app-confirmation-dialog>\n    <!-- Loading State -->\n    <div *ngIf=\"status === 'loading'\">\n      <!-- Using existing header -->\n      <ng-container *ngIf=\"!showHelpScreenData\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData\">\n        <app-header [showLogo]=\"false\" (onClose)=\"handleHideHelpScreenData()\"> </app-header>\n      </ng-container>\n\n      <!-- Animated Logo -->\n      <app-loading></app-loading>\n    </div>\n\n    <!-- Error State -->\n    <div\n      *ngIf=\"status === 'failed'\"\n      class=\"babylai-fixed babylai-bottom-[90px] babylai-right-5 babylai-p-4 babylai-bg-white babylai-rounded-xl babylai-shadow-lg\"\n    >\n      <span>Error: {{ error }}</span>\n    </div>\n\n    <!-- Content -->\n    <ng-container *ngIf=\"status === 'succeeded'\">\n      <!-- Header -->\n      <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n          [showLogo]=\"true\"\n          (onBack)=\"handleBack()\"\n          (onClose)=\"handleClosePopup()\"\n        >\n        </app-header>\n      </ng-container>\n      <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n        <app-header\n          [showBackButton]=\"showHelpScreenData\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleHideHelpScreenData()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-header>\n\n        <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n          <app-button\n            variant=\"icon-bg\"\n            (click)=\"handleShowChat()\"\n            className=\"babylai-absolute babylai-bottom-5 babylai-right-5 !babylai-p-3\"\n          >\n            <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"babylai-w-full\" />\n          </app-button>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"showChat\">\n        <app-chat-header\n          [showBackButton]=\"showChat\"\n          [showLogo]=\"false\"\n          (onClose)=\"handleEndChat()\"\n          (onBack)=\"handleBack()\"\n          [language]=\"currentLang\"\n        >\n        </app-chat-header>\n\n        <app-chat\n          class=\"babylai-h-full babylai-mt-2 babylai-p-2 babylai-max-h-[85%]\"\n          [messages]=\"messages\"\n          [needsAgent]=\"needsAgent\"\n          [assistantStatus]=\"assistantStatus\"\n          [isSignalRConnected]=\"isSignalRConnected\"\n          [isChatClosed]=\"isChatClosed\"\n          (sendMessageEvent)=\"sendMessage($event)\"\n          [currentLang]=\"currentLang\"\n          [loading]=\"chatIsLoading\"\n        >\n        </app-chat>\n      </ng-container>\n\n      <!-- Content -->\n      <div class=\"babylai-flex-1 babylai-flex babylai-flex-col babylai-gap-4 babylai-overflow-y-auto babylai-p-4\" *ngIf=\"!showChat\">\n        <ng-container *ngIf=\"!showHelpScreenData\">\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n            <h1 class=\"babylai-text-6xl babylai-font-bold babylai-text-black-white-50\">{{ 'ChatIntroMessage' | translate }}</h1>\n          </div>\n\n          <div class=\"babylai-flex babylai-flex-col babylai-gap-4 babylai-mt-8\">\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-flex-col babylai-gap-4\">\n                  <div class=\"babylai-flex babylai-items-center babylai-justify-start babylai-gap-3\">\n                    <div\n                      class=\"babylai-flex babylai-items-center babylai-justify-center babylai-max-w-12 babylai-min-w-12 babylai-w-12 babylai-h-12 babylai-rounded-full babylai-bg-primary\"\n                    >\n                      <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"babylai-w-5 babylai-h-5\" />\n                    </div>\n                    <div class=\"babylai-flex babylai-flex-col babylai-items-start babylai-justify-start babylai-gap-0\">\n                      <h4 class=\"babylai-text-base babylai-text-black-white-400 babylai-font-semibold\">\n                        {{ 'BabylaiTitle' | translate }}\n                      </h4>\n                      <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'BabylaiDescription' | translate }}</p>\n                    </div>\n                  </div>\n                  <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleShowHelpScreenData()\">\n                    {{ 'ChatNow' | translate }}\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'TryBableAI' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n\n            <app-card variant=\"rounded\">\n              <app-card-content>\n                <div class=\"babylai-flex babylai-items-center babylai-justify-between babylai-gap-4\">\n                  <p class=\"babylai-text-base babylai-text-black-white-800\">{{ 'ContactUs' | translate }}</p>\n                  <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n                    <img\n                      src=\"/icons/arrow-stripped.svg\"\n                      alt=\"Arrow Right\"\n                      [ngClass]=\"{ 'babylai-w-5 babylai-h-5': true, 'babylai-rotate-180': currentLang === 'ar' }\"\n                    />\n                  </app-button>\n                </div>\n              </app-card-content>\n            </app-card>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"showHelpScreenData\">\n          <app-help-screen-data [helpScreenData]=\"helpScreenData\" (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n        </ng-container>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"babylai-flex babylai-justify-between babylai-items-center babylai-px-5 babylai-py-2.5\">\n        <a\n          href=\"https://babylai.net\"\n          target=\"_blank\"\n          class=\"babylai-text-xs babylai-text-black-white-300 babylai-w-full babylai-text-center\"\n          [ngClass]=\"!showHelpScreenData && !showChat ? 'babylai-text-black-white-50' : ''\"\n        >\n          {{ 'PoweredByBabylAI' | translate }}\n        </a>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".babylai-help-center-container{position:fixed;bottom:20px;right:20px;z-index:9999}.babylai-help-center-loadingContainer,.babylai-help-center-errorContainer{position:fixed;bottom:90px;right:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026}.babylai-help-center-popup{position:fixed;bottom:80px;right:20px;width:360px;max-height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;z-index:1000}.babylai-help-center-header{padding:16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}.babylai-help-center-title{margin:0;font-size:18px;font-weight:500}.babylai-help-center-backButton{background:none;border:none;cursor:pointer;padding:4px;color:#666}.babylai-help-center-content{flex:1;overflow-y:auto;padding:16px}.babylai-help-center-optionsList{display:flex;flex-direction:column;gap:8px}.babylai-help-center-optionButton{padding:12px;background:#f5f5f5;border:none;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}.babylai-help-center-optionButton:hover{background:#eee}.babylai-help-center-detailsContent{display:flex;flex-direction:column;gap:12px}.babylai-help-center-paragraph{margin:0;line-height:1.5}.babylai-help-center-chatButton{background-color:#f44;color:#fff;font-size:14px;margin-top:16px;padding:12px 24px;border:none;border-radius:12px;cursor:pointer;font-weight:500;transition:background-color .2s;align-self:center}.babylai-help-center-chatButton:hover{background-color:#c00}.babylai-help-center-chatContainer{display:flex;flex-direction:column;height:400px;overflow:hidden}.babylai-help-center-chatMessages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.babylai-help-center-message{max-width:80%;padding:8px 12px;border-radius:12px;position:relative}.babylai-help-center-userMessage{align-self:flex-start;background-color:#7a8ce9;color:#fff;direction:rtl}.babylai-help-center-assistantMessage{align-self:flex-end;background-color:#f1f1f1;color:#000;direction:rtl}.babylai-help-center-seenIndicator{position:absolute;bottom:-4px;right:4px;font-size:10px;color:#666}.babylai-help-center-chatInput{display:flex;gap:8px;padding:16px;border-top:1px solid #eee;background:#fff;position:relative}.babylai-help-center-chatInput input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:20px;outline:none}.babylai-help-center-chatInput input:focus{border-color:#7a8ce9}.babylai-help-center-sendButton{width:40px;height:40px;border-radius:50%;background:#7a8ce9;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.babylai-help-center-sendButton:hover{background:#6675c3}.babylai-help-center-sendButton:disabled{background:#ccc;cursor:not-allowed}.babylai-help-center-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.babylai-help-center-footerText{margin:0;font-size:12px;color:#999}.babylai-help-center-endChatButton{background-color:#f44;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;font-size:14px}.babylai-help-center-endChatButton:hover{background-color:#c00}.babylai-help-center-typingIndicator{display:flex;gap:4px}.babylai-help-center-typingIndicator span{animation:bounce 1s infinite}.babylai-help-center-typingIndicator span:nth-child(2){animation-delay:.2s}.babylai-help-center-typingIndicator span:nth-child(3){animation-delay:.4s}.babylai-help-center-dialogOverlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1100}.babylai-help-center-dialog{background:#fff;border-radius:8px;padding:20px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.babylai-help-center-helpButton{width:56px;height:56px;border-radius:50%;background-color:#7a8ce9;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s,background-color .2s;position:fixed;bottom:20px;right:20px;z-index:1000}.babylai-help-center-helpButton:hover{background-color:#6270ba;transform:scale(1.05)}.babylai-help-center-helpButton:active{transform:scale(.95)}.babylai-help-center-helpIcon{display:flex;align-items:center;justify-content:center}.babylai-help-center-arrowBox{position:fixed;bottom:80px;right:15px;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.babylai-help-center-messageBox{background-color:#7a8ce9;color:#fff;padding:12px 16px;border-radius:20px;box-shadow:0 4px 20px #00000026;margin-bottom:16px;max-width:200px;position:relative}.babylai-help-center-messageBox:after{content:\"\";position:absolute;bottom:-10px;right:20px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgb(122,140,233)}.babylai-help-center-text{font-size:12px;font-weight:700;margin:0}.babylai-help-center-closeButton{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.babylai-help-center-closeButton:hover{background-color:#6675c3;color:#fff}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.babylai-help-center-spinner{width:24px;height:24px;border:3px solid #f3f3f3;border-top:3px solid rgba(122,140,233,.7);border-radius:50%;animation:spin 1s linear infinite}\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TokenService }, { type: TranslationService }], propDecorators: { getToken: [{
+                type: Input
+            }], helpScreenId: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], showArrow: [{
+                type: Input
+            }], messageLabel: [{
+                type: Input
+            }], currentLang: [{
+                type: Input
+            }], chatMessagesContainer: [{
+                type: ViewChild,
+                args: ['chatMessagesContainer']
+            }] } });
+
+class StylesModule {
+    constructor() {
+        // Load Tailwind CSS
+        require('../../lib/tailwind.css');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StylesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: StylesModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StylesModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: StylesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    exports: []
+                }]
+        }], ctorParameters: () => [] });
+
+// Components and Modules
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApiService, HelpCenterWidgetComponent, SignalRService, StylesModule, TokenService, TranslatePipe, TranslationService };
+//# sourceMappingURL=aslaluroba-help-center.mjs.map