@aslaluroba/help-center 1.1.12 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/Shape.png +0 -0
  2. package/favicon.ico +0 -0
  3. package/fesm2022/aslaluroba-help-center.mjs +267 -290
  4. package/fesm2022/aslaluroba-help-center.mjs.map +1 -1
  5. package/package.json +21 -3
  6. package/public_api.d.ts +1 -0
  7. package/src/app/help-center-widget/help-center-widget.component.d.ts +11 -7
  8. package/src/app/language.service.d.ts +11 -0
  9. package/src/app/services/translation.service.d.ts +3 -1
  10. package/src/app/shared/components/button/button.component.d.ts +4 -2
  11. package/src/app/shared/components/header/header.component.d.ts +4 -1
  12. package/lib/tailwind.css +0 -1
  13. package/src/app/shared/utils/class-utils.d.ts +0 -5
package/fesm2022/aslaluroba-help-center.mjs CHANGED
@@ -4,8 +4,6 @@ import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from '@angular/forms';
6
6
  import { FormsModule } from '@angular/forms';
7
- import { clsx } from 'clsx';
8
- import { twMerge } from 'tailwind-merge';
9
7
  import { BehaviorSubject } from 'rxjs';
10
8
  import { MarkdownComponent } from 'ngx-markdown';
11
9
  import 'prismjs';
@@ -17,36 +15,23 @@ import 'prismjs/components/prism-markdown';
17
15
  import 'prismjs/themes/prism-okaidia.css';
18
16
  import * as signalR from '@microsoft/signalr';
19
17
 
20
- /**
21
- * Utility function to conditionally join CSS class names
22
- */
23
- function cn(...inputs) {
24
- return twMerge(clsx(inputs));
25
- }
26
-
27
18
  class CardComponent {
28
19
  variant = 'default';
29
20
  class = '';
30
21
  get hostClasses() {
31
- const variantStyles = {
32
- default: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow',
33
- rounded: 'babylai-rounded-3xl babylai-bg-black-white-50 babylai-py-4 babylai-px-[24px] babylai-w-full babylai-block',
34
- shadowed: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow-lg'
35
- };
36
- return cn(variantStyles[this.variant], this.class);
22
+ const classes = ['card'];
23
+ classes.push(`card--${this.variant}`);
24
+ if (this.class) {
25
+ classes.push(this.class);
26
+ }
27
+ return classes.join(' ');
37
28
  }
38
29
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
39
- 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 });
30
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
40
31
  }
41
32
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardComponent, decorators: [{
42
33
  type: Component,
43
- args: [{
44
- selector: 'app-card',
45
- standalone: true,
46
- imports: [CommonModule],
47
- template: `<ng-content></ng-content>`,
48
- encapsulation: ViewEncapsulation.None
49
- }]
34
+ args: [{ selector: 'app-card', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
50
35
  }], propDecorators: { variant: [{
51
36
  type: Input
52
37
  }], class: [{
@@ -58,20 +43,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
58
43
  class CardHeaderComponent {
59
44
  class = '';
60
45
  get hostClasses() {
61
- return cn('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-p-6', this.class);
46
+ const classes = ['card__header'];
47
+ if (this.class) {
48
+ classes.push(this.class);
49
+ }
50
+ return classes.join(' ');
62
51
  }
63
52
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
- 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 });
53
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
65
54
  }
66
55
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardHeaderComponent, decorators: [{
67
56
  type: Component,
68
- args: [{
69
- selector: 'app-card-header',
70
- standalone: true,
71
- imports: [CommonModule],
72
- template: `<ng-content></ng-content>`,
73
- encapsulation: ViewEncapsulation.None
74
- }]
57
+ args: [{ selector: 'app-card-header', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
75
58
  }], propDecorators: { class: [{
76
59
  type: Input
77
60
  }], hostClasses: [{
@@ -81,20 +64,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
81
64
  class CardTitleComponent {
82
65
  class = '';
83
66
  get hostClasses() {
84
- return cn('babylai-font-semibold babylai-leading-none babylai-tracking-tight', this.class);
67
+ const classes = ['card__title'];
68
+ if (this.class) {
69
+ classes.push(this.class);
70
+ }
71
+ return classes.join(' ');
85
72
  }
86
73
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
87
- 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 });
74
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
88
75
  }
89
76
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardTitleComponent, decorators: [{
90
77
  type: Component,
91
- args: [{
92
- selector: 'app-card-title',
93
- standalone: true,
94
- imports: [CommonModule],
95
- template: `<ng-content></ng-content>`,
96
- encapsulation: ViewEncapsulation.None
97
- }]
78
+ args: [{ selector: 'app-card-title', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
98
79
  }], propDecorators: { class: [{
99
80
  type: Input
100
81
  }], hostClasses: [{
@@ -104,20 +85,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
104
85
  class CardDescriptionComponent {
105
86
  class = '';
106
87
  get hostClasses() {
107
- return cn('babylai-text-sm babylai-text-muted-foreground', this.class);
88
+ const classes = ['card__description'];
89
+ if (this.class) {
90
+ classes.push(this.class);
91
+ }
92
+ return classes.join(' ');
108
93
  }
109
94
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
110
- 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 });
95
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
111
96
  }
112
97
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardDescriptionComponent, decorators: [{
113
98
  type: Component,
114
- args: [{
115
- selector: 'app-card-description',
116
- standalone: true,
117
- imports: [CommonModule],
118
- template: `<ng-content></ng-content>`,
119
- encapsulation: ViewEncapsulation.None
120
- }]
99
+ args: [{ selector: 'app-card-description', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
121
100
  }], propDecorators: { class: [{
122
101
  type: Input
123
102
  }], hostClasses: [{
@@ -127,20 +106,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
127
106
  class CardContentComponent {
128
107
  class = '';
129
108
  get hostClasses() {
130
- return cn('babylai-p-0 babylai-pt-0', this.class);
109
+ const classes = ['card__content'];
110
+ if (this.class) {
111
+ classes.push(this.class);
112
+ }
113
+ return classes.join(' ');
131
114
  }
132
115
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
133
- 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 });
116
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
134
117
  }
135
118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardContentComponent, decorators: [{
136
119
  type: Component,
137
- args: [{
138
- selector: 'app-card-content',
139
- standalone: true,
140
- imports: [CommonModule],
141
- template: `<ng-content></ng-content>`,
142
- encapsulation: ViewEncapsulation.None
143
- }]
120
+ args: [{ selector: 'app-card-content', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
144
121
  }], propDecorators: { class: [{
145
122
  type: Input
146
123
  }], hostClasses: [{
@@ -150,20 +127,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
150
127
  class CardFooterComponent {
151
128
  class = '';
152
129
  get hostClasses() {
153
- return cn('babylai-flex babylai-items-center babylai-p-6 babylai-pt-0', this.class);
130
+ const classes = ['card__footer'];
131
+ if (this.class) {
132
+ classes.push(this.class);
133
+ }
134
+ return classes.join(' ');
154
135
  }
155
136
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
156
- 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 });
137
+ 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, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
157
138
  }
158
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: CardFooterComponent, decorators: [{
159
140
  type: Component,
160
- args: [{
161
- selector: 'app-card-footer',
162
- standalone: true,
163
- imports: [CommonModule],
164
- template: `<ng-content></ng-content>`,
165
- encapsulation: ViewEncapsulation.None
166
- }]
141
+ args: [{ selector: 'app-card-footer', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, styles: [".card{z-index:1;width:100%;box-sizing:border-box}.card--default{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:#fff;padding:1rem 1.5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid #e2e2e2;background-color:#fff;color:#1f1f1f;box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:#606060;width:100%}.card__content{padding:0;width:100%;box-sizing:border-box}.card__footer{display:flex;align-items:center;padding:1.5rem;padding-top:0;width:100%}\n"] }]
167
142
  }], propDecorators: { class: [{
168
143
  type: Input
169
144
  }], hostClasses: [{
@@ -177,37 +152,43 @@ class ButtonComponent {
177
152
  disabled = false;
178
153
  fullWidth = false;
179
154
  className = '';
155
+ size = 'default';
156
+ direction = 'ltr';
180
157
  onClick = new EventEmitter();
181
158
  getButtonClasses() {
182
- const baseClasses = 'babylai-cursor-pointer babylai-transition-all babylai-duration-200 ';
183
- const variantClasses = {
184
- default: 'babylai-bg-primary babylai-text-white babylai-py-2 babylai-px-4 babylai-rounded-full hover:babylai-bg-primary-700',
185
- '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',
186
- 'icon-only': 'babylai-bg-transparent babylai-border-none babylai-p-1 babylai-flex babylai-items-center babylai-justify-center'
187
- };
188
- const widthClass = this.fullWidth ? 'babylai-w-full' : '';
189
- const disabledClass = this.disabled ? 'babylai-opacity-50 babylai-cursor-not-allowed' : '';
190
- return `${baseClasses} ${variantClasses[this.variant]} ${widthClass} ${disabledClass} ${this.className}`;
159
+ const classes = ['button'];
160
+ // Add variant class
161
+ classes.push(`button--${this.variant}`);
162
+ // Add full width class if needed
163
+ if (this.fullWidth) {
164
+ classes.push('button--full-width');
165
+ }
166
+ // Add size class if needed
167
+ if (this.size) {
168
+ classes.push(`button--${this.size}`);
169
+ }
170
+ // Add direction class
171
+ classes.push(`button--${this.direction}`);
172
+ // Add custom classes
173
+ if (this.className) {
174
+ classes.push(this.className);
175
+ }
176
+ return classes.join(' ');
191
177
  }
192
178
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
193
- 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: `
194
- <button [type]="type" [disabled]="disabled" [ngClass]="getButtonClasses()" (click)="onClick.emit($event)">
179
+ 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", size: "size", direction: "direction" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
180
+ <button [type]="type" [disabled]="disabled" [class]="getButtonClasses()" (click)="onClick.emit($event)" [dir]="direction">
195
181
  <ng-content></ng-content>
196
182
  </button>
197
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
183
+ `, isInline: true, styles: [".button{cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center}.button--rtl{direction:rtl}.button--rtl img{transform:scaleX(-1)}.button--default{background-color:#ad49e1;color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:#451d5a}.button--outline{background-color:transparent;color:#ad49e1;border:1px solid #ad49e1;padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:#ad49e11a}.button--icon-bg{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:#451d5a}.button--icon-bg.button--white-bg{background-color:#fff}.button--icon-bg.button--white-bg:hover{background-color:#f3f3f3}.button--icon-bg.button--light-bg{background-color:#f6ecfc}.button--icon-bg.button--light-bg:hover{background-color:#deb6f3}.button--icon-bg.button--close-button{background-color:#ad49e1;padding:.5rem;border:none}.button--icon-bg.button--close-button:hover{background-color:#ad49e1cc}.button--icon-bg.button--small{padding:.25rem .5rem;width:2rem;height:2rem}.button--icon-only{background-color:transparent;border:none;padding:.25rem;display:flex;align-items:center;justify-content:center}.button--full-width{width:100%!important;display:flex!important}.button:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
198
184
  }
199
185
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ButtonComponent, decorators: [{
200
186
  type: Component,
201
- args: [{
202
- selector: 'app-button',
203
- standalone: true,
204
- imports: [CommonModule],
205
- template: `
206
- <button [type]="type" [disabled]="disabled" [ngClass]="getButtonClasses()" (click)="onClick.emit($event)">
187
+ args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: `
188
+ <button [type]="type" [disabled]="disabled" [class]="getButtonClasses()" (click)="onClick.emit($event)" [dir]="direction">
207
189
  <ng-content></ng-content>
208
190
  </button>
209
- `
210
- }]
191
+ `, styles: [".button{cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center}.button--rtl{direction:rtl}.button--rtl img{transform:scaleX(-1)}.button--default{background-color:#ad49e1;color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:#451d5a}.button--outline{background-color:transparent;color:#ad49e1;border:1px solid #ad49e1;padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:#ad49e11a}.button--icon-bg{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:#451d5a}.button--icon-bg.button--white-bg{background-color:#fff}.button--icon-bg.button--white-bg:hover{background-color:#f3f3f3}.button--icon-bg.button--light-bg{background-color:#f6ecfc}.button--icon-bg.button--light-bg:hover{background-color:#deb6f3}.button--icon-bg.button--close-button{background-color:#ad49e1;padding:.5rem;border:none}.button--icon-bg.button--close-button:hover{background-color:#ad49e1cc}.button--icon-bg.button--small{padding:.25rem .5rem;width:2rem;height:2rem}.button--icon-only{background-color:transparent;border:none;padding:.25rem;display:flex;align-items:center;justify-content:center}.button--full-width{width:100%!important;display:flex!important}.button:disabled{opacity:.5;cursor:not-allowed}\n"] }]
211
192
  }], propDecorators: { variant: [{
212
193
  type: Input
213
194
  }], type: [{
@@ -218,6 +199,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
218
199
  type: Input
219
200
  }], className: [{
220
201
  type: Input
202
+ }], size: [{
203
+ type: Input
204
+ }], direction: [{
205
+ type: Input
221
206
  }], onClick: [{
222
207
  type: Output
223
208
  }] } });
@@ -240,10 +225,10 @@ class IconButtonComponent {
240
225
  onClick = new EventEmitter();
241
226
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
242
227
  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: `
243
- <app-button [variant]="'icon-bg'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
228
+ <app-button variant="icon-bg" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
244
229
  <ng-content></ng-content>
245
230
  </app-button>
246
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
231
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
247
232
  }
248
233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconButtonComponent, decorators: [{
249
234
  type: Component,
@@ -252,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
252
237
  standalone: true,
253
238
  imports: [CommonModule, ButtonComponent],
254
239
  template: `
255
- <app-button [variant]="'icon-bg'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
240
+ <app-button variant="icon-bg" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
256
241
  <ng-content></ng-content>
257
242
  </app-button>
258
243
  `
@@ -270,10 +255,10 @@ class TransparentIconButtonComponent {
270
255
  onClick = new EventEmitter();
271
256
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TransparentIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
272
257
  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: `
273
- <app-button [variant]="'icon-only'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
258
+ <app-button variant="icon-only" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
274
259
  <ng-content></ng-content>
275
260
  </app-button>
276
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
261
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
277
262
  }
278
263
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TransparentIconButtonComponent, decorators: [{
279
264
  type: Component,
@@ -282,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
282
267
  standalone: true,
283
268
  imports: [CommonModule, ButtonComponent],
284
269
  template: `
285
- <app-button [variant]="'icon-only'" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
270
+ <app-button variant="icon-only" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
286
271
  <ng-content></ng-content>
287
272
  </app-button>
288
273
  `
@@ -353,17 +338,24 @@ class TranslationService {
353
338
  title: 'مركز المساعدة'
354
339
  }
355
340
  };
356
- currentLang = new BehaviorSubject('en');
357
- constructor() { }
341
+ _currentLang = new BehaviorSubject('en');
342
+ currentLang = this._currentLang.asObservable();
343
+ constructor() {
344
+ console.log('TranslationService: Initialized');
345
+ }
358
346
  translate(key) {
359
- const lang = this.currentLang.value;
347
+ const lang = this._currentLang.value;
348
+ console.log('TranslationService: Translating key', key, 'for language', lang);
360
349
  return this.translations[lang][key] || key;
361
350
  }
362
351
  setLanguage(lang) {
363
- this.currentLang.next(lang);
352
+ console.log('TranslationService: Setting language to', lang);
353
+ this._currentLang.next(lang);
364
354
  }
365
355
  getCurrentLang() {
366
- return this.currentLang.value;
356
+ const currentLang = this._currentLang.value;
357
+ console.log('TranslationService: Getting current language', currentLang);
358
+ return currentLang;
367
359
  }
368
360
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
369
361
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TranslationService, providedIn: 'root' });
@@ -419,11 +411,11 @@ class HelpScreenDataComponent {
419
411
  this.handleStartNewChat.emit(option);
420
412
  }
421
413
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
422
- 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" }] });
414
+ 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=\"help-screen\">\n <h1 class=\"help-screen__title\">\n {{ 'PickTopicTitle' | translate }}\n </h1>\n <ng-container *ngFor=\"let item of helpScreenData?.options\">\n <app-card [id]=\"item.id\" variant=\"rounded\" class=\"help-screen__card\" (click)=\"toggleExpand(item.id)\">\n <app-card-content>\n <!-- Header section (always visible) -->\n <div class=\"help-screen__header\">\n <h4 class=\"help-screen__title-text\">{{ item.title }}</h4>\n <div\n class=\"help-screen__arrow-container\"\n [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\"\n >\n <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" />\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n <div *ngIf=\"expandedItemId === item.id\" class=\"help-screen__content\">\n <ng-container>\n <div *ngFor=\"let paragraph of item.paragraphs\" class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n </ng-container>\n\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"startNewChat(item)\">{{ 'ChatNow' | translate }}</app-button>\n </div>\n </app-card-content>\n </app-card>\n </ng-container>\n</div>\n", styles: ["@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.help-screen{display:flex;flex-direction:column;gap:1rem;position:relative}.help-screen__title{font-size:2.875rem;font-weight:700;color:#1f1f1f;margin-bottom:.75rem;line-height:1}.help-screen__card{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top;background-color:#fff}.help-screen__card:hover{box-shadow:#64646f33 0 7px 29px;transform:translateY(-2px)}.help-screen__card.expanded{background-color:#fff}.help-screen__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem}.help-screen__title-text{font-size:1rem;color:#606060;font-weight:600}.help-screen__arrow-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:#ad49e1;transition:transform .3s cubic-bezier(.4,0,.2,1)}.help-screen__arrow-container--expanded{transform:rotate(90deg)}.help-screen__arrow-container--collapsed{transform:rotate(270deg)}.help-screen__arrow-container img{width:1rem;height:1rem}.help-screen__content{animation:slideDown .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding:.5rem;transform-origin:top}.help-screen__paragraph{font-size:1rem;color:#0a0a0a;margin-bottom:.5rem}.help-screen__button{width:100%;margin-top:.5rem;animation:slideDown .3s cubic-bezier(.4,0,.2,1) .1s}\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", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
423
415
  }
424
416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
425
417
  type: Component,
426
- 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" }]
418
+ args: [{ selector: 'app-help-screen-data', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ButtonComponent, TranslatePipe], template: "<div class=\"help-screen\">\n <h1 class=\"help-screen__title\">\n {{ 'PickTopicTitle' | translate }}\n </h1>\n <ng-container *ngFor=\"let item of helpScreenData?.options\">\n <app-card [id]=\"item.id\" variant=\"rounded\" class=\"help-screen__card\" (click)=\"toggleExpand(item.id)\">\n <app-card-content>\n <!-- Header section (always visible) -->\n <div class=\"help-screen__header\">\n <h4 class=\"help-screen__title-text\">{{ item.title }}</h4>\n <div\n class=\"help-screen__arrow-container\"\n [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\"\n >\n <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" />\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n <div *ngIf=\"expandedItemId === item.id\" class=\"help-screen__content\">\n <ng-container>\n <div *ngFor=\"let paragraph of item.paragraphs\" class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n </ng-container>\n\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"startNewChat(item)\">{{ 'ChatNow' | translate }}</app-button>\n </div>\n </app-card-content>\n </app-card>\n </ng-container>\n</div>\n", styles: ["@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.help-screen{display:flex;flex-direction:column;gap:1rem;position:relative}.help-screen__title{font-size:2.875rem;font-weight:700;color:#1f1f1f;margin-bottom:.75rem;line-height:1}.help-screen__card{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top;background-color:#fff}.help-screen__card:hover{box-shadow:#64646f33 0 7px 29px;transform:translateY(-2px)}.help-screen__card.expanded{background-color:#fff}.help-screen__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem}.help-screen__title-text{font-size:1rem;color:#606060;font-weight:600}.help-screen__arrow-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:#ad49e1;transition:transform .3s cubic-bezier(.4,0,.2,1)}.help-screen__arrow-container--expanded{transform:rotate(90deg)}.help-screen__arrow-container--collapsed{transform:rotate(270deg)}.help-screen__arrow-container img{width:1rem;height:1rem}.help-screen__content{animation:slideDown .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding:.5rem;transform-origin:top}.help-screen__paragraph{font-size:1rem;color:#0a0a0a;margin-bottom:.5rem}.help-screen__button{width:100%;margin-top:.5rem;animation:slideDown .3s cubic-bezier(.4,0,.2,1) .1s}\n"] }]
427
419
  }], propDecorators: { helpScreenData: [{
428
420
  type: Input
429
421
  }], title: [{
@@ -439,49 +431,68 @@ class HeaderComponent {
439
431
  logoSrc = '/logo-white.svg';
440
432
  logoAlt = 'BabylAI Logo';
441
433
  language = 'en';
434
+ showCloseButton = false;
442
435
  onBack = new EventEmitter();
443
436
  onClose = new EventEmitter();
437
+ get isRtl() {
438
+ return this.language === 'ar';
439
+ }
444
440
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
445
- 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: `
446
- <div class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between">
447
- <app-button *ngIf="showBackButton" variant="icon-bg" className="!babylai-bg-black-white-50" (click)="onBack.emit()">
448
- <img
449
- src="/icons/arrow-stripped-colored.svg"
450
- alt="Back"
451
- class="babylai-w-6 babylai-h-6"
452
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
453
- />
441
+ 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", showCloseButton: "showCloseButton" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: `
442
+ <div class="header">
443
+ <app-button
444
+ *ngIf="showBackButton"
445
+ variant="icon-bg"
446
+ className="button--white-bg"
447
+ [direction]="isRtl ? 'rtl' : 'ltr'"
448
+ (click)="onBack.emit()"
449
+ >
450
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" class="header__back-button-icon" [class.rtl]="isRtl" />
451
+ </app-button>
452
+ <app-button
453
+ *ngIf="showCloseButton"
454
+ variant="icon-bg"
455
+ [direction]="isRtl ? 'rtl' : 'ltr'"
456
+ className="button--close-button"
457
+ (click)="onClose.emit()"
458
+ >
459
+ <img src="/icons/close-circle.svg" alt="Close" />
454
460
  </app-button>
455
- <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
456
- <app-button *ngIf="!showBackButton" variant="icon-only" (click)="onClose.emit()">
457
- <img src="/icons/close-circle.svg" alt="Close" class="babylai-w-10 babylai-h-10" />
461
+ <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="header__logo" />
462
+ <app-button *ngIf="!showBackButton && !showCloseButton" variant="icon-only" class="header__close-button" (click)="onClose.emit()">
463
+ <img src="/icons/close-circle.svg" alt="Close" />
458
464
  </app-button>
459
465
  </div>
460
- `, 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"] }] });
466
+ `, isInline: true, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:#fff!important}.header__back-button-icon{width:100%;height:100%}.header__back-button-icon.rtl{transform:rotate(180deg)}.header__logo,.header__close-button img{width:2.5rem;height:2.5rem}.chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:1.5rem 1.5rem 0 0;position:relative}.chat-header__actions{display:flex;align-items:center;gap:.5rem}.chat-header__button{background-color:#ad49e11a!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:#451d5a1a!important}.chat-header__button img{width:100%;height:100%}.chat-header__button img.rtl{transform:rotate(180deg)!important}.chat-header__menu{position:relative}.chat-header__menu-dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;background-color:#fff;border:1px solid rgba(0,0,0,.05);z-index:50}.chat-header__menu-dropdown-content{border-radius:.5rem}.chat-header__menu-dropdown.rtl{right:0}.chat-header__menu-dropdown.ltr{left:0}.chat-header__menu-button{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:#374151}.chat-header__menu-button:hover{background-color:#f3f4f6}.chat-header__menu-button.rtl{text-align:right}.chat-header__menu-button.ltr{text-align:left}.chat-header__brand{display:flex;align-items:center;gap:.25rem;position:absolute;left:50%;transform:translate(-50%)}.chat-header__brand img{width:2.5rem;height:2.5rem}.chat-header__brand p{font-size:1rem;font-weight:700;color:#1f1f1f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
461
467
  }
462
468
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, decorators: [{
463
469
  type: Component,
464
- args: [{
465
- selector: 'app-header',
466
- standalone: true,
467
- imports: [CommonModule, ButtonComponent],
468
- template: `
469
- <div class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between">
470
- <app-button *ngIf="showBackButton" variant="icon-bg" className="!babylai-bg-black-white-50" (click)="onBack.emit()">
471
- <img
472
- src="/icons/arrow-stripped-colored.svg"
473
- alt="Back"
474
- class="babylai-w-6 babylai-h-6"
475
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
476
- />
470
+ args: [{ selector: 'app-header', standalone: true, imports: [CommonModule, ButtonComponent], template: `
471
+ <div class="header">
472
+ <app-button
473
+ *ngIf="showBackButton"
474
+ variant="icon-bg"
475
+ className="button--white-bg"
476
+ [direction]="isRtl ? 'rtl' : 'ltr'"
477
+ (click)="onBack.emit()"
478
+ >
479
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" class="header__back-button-icon" [class.rtl]="isRtl" />
477
480
  </app-button>
478
- <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
479
- <app-button *ngIf="!showBackButton" variant="icon-only" (click)="onClose.emit()">
480
- <img src="/icons/close-circle.svg" alt="Close" class="babylai-w-10 babylai-h-10" />
481
+ <app-button
482
+ *ngIf="showCloseButton"
483
+ variant="icon-bg"
484
+ [direction]="isRtl ? 'rtl' : 'ltr'"
485
+ className="button--close-button"
486
+ (click)="onClose.emit()"
487
+ >
488
+ <img src="/icons/close-circle.svg" alt="Close" />
489
+ </app-button>
490
+ <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="header__logo" />
491
+ <app-button *ngIf="!showBackButton && !showCloseButton" variant="icon-only" class="header__close-button" (click)="onClose.emit()">
492
+ <img src="/icons/close-circle.svg" alt="Close" />
481
493
  </app-button>
482
494
  </div>
483
- `
484
- }]
495
+ `, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:#fff!important}.header__back-button-icon{width:100%;height:100%}.header__back-button-icon.rtl{transform:rotate(180deg)}.header__logo,.header__close-button img{width:2.5rem;height:2.5rem}.chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:1.5rem 1.5rem 0 0;position:relative}.chat-header__actions{display:flex;align-items:center;gap:.5rem}.chat-header__button{background-color:#ad49e11a!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:#451d5a1a!important}.chat-header__button img{width:100%;height:100%}.chat-header__button img.rtl{transform:rotate(180deg)!important}.chat-header__menu{position:relative}.chat-header__menu-dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;background-color:#fff;border:1px solid rgba(0,0,0,.05);z-index:50}.chat-header__menu-dropdown-content{border-radius:.5rem}.chat-header__menu-dropdown.rtl{right:0}.chat-header__menu-dropdown.ltr{left:0}.chat-header__menu-button{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:#374151}.chat-header__menu-button:hover{background-color:#f3f4f6}.chat-header__menu-button.rtl{text-align:right}.chat-header__menu-button.ltr{text-align:left}.chat-header__brand{display:flex;align-items:center;gap:.25rem;position:absolute;left:50%;transform:translate(-50%)}.chat-header__brand img{width:2.5rem;height:2.5rem}.chat-header__brand p{font-size:1rem;font-weight:700;color:#1f1f1f}\n"] }]
485
496
  }], propDecorators: { headerType: [{
486
497
  type: Input
487
498
  }], showBackButton: [{
@@ -494,6 +505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
494
505
  type: Input
495
506
  }], language: [{
496
507
  type: Input
508
+ }], showCloseButton: [{
509
+ type: Input
497
510
  }], onBack: [{
498
511
  type: Output
499
512
  }], onClose: [{
@@ -508,6 +521,9 @@ class ChatHeaderComponent {
508
521
  language = 'en';
509
522
  onBack = new EventEmitter();
510
523
  onClose = new EventEmitter();
524
+ get isRtl() {
525
+ return this.language === 'ar';
526
+ }
511
527
  onDocumentClick(event) {
512
528
  const target = event.target;
513
529
  const menuContainer = target.closest('[data-menu-container]');
@@ -517,123 +533,68 @@ class ChatHeaderComponent {
517
533
  }
518
534
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
519
535
  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: `
520
- <div
521
- class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between babylai-bg-black-white-50 babylai-rounded-t-3xl babylai-relative"
522
- >
523
- <div class="babylai-flex babylai-items-center babylai-gap-2">
524
- <app-button
525
- variant="icon-bg"
526
- className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
527
- (click)="onBack.emit()"
528
- >
529
- <img
530
- src="/icons/arrow-stripped-colored.svg"
531
- alt="Back"
532
- class="babylai-w-full babylai-h-full"
533
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
534
- />
536
+ <div class="chat-header">
537
+ <div class="chat-header__actions">
538
+ <app-button size="small" variant="icon-bg" className="chat-header__button button--light-bg" (click)="onBack.emit()">
539
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" [style.transform]="isRtl ? 'rotate(180deg)' : 'rotate(0deg)'" />
535
540
  </app-button>
536
- <div class="babylai-relative" data-menu-container>
541
+ <div class="chat-header__menu" data-menu-container>
537
542
  <app-button
543
+ size="small"
538
544
  variant="icon-bg"
539
- className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
545
+ className="chat-header__button button--light-bg"
540
546
  (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
541
547
  >
542
- <img
543
- src="/icons/menu.svg"
544
- alt="Menu"
545
- class="babylai-w-full babylai-h-full"
546
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
547
- />
548
+ <img src="/icons/menu.svg" alt="Menu" />
548
549
  </app-button>
549
- <div
550
- *ngIf="isMenuOpen"
551
- 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"
552
- [ngClass]="{ 'babylai-right-0': language === 'ar', 'babylai-left-0': language === 'en' }"
553
- >
554
- <div class="babylai-py-1">
555
- <button
556
- (click)="onClose.emit(); isMenuOpen = false"
557
- 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"
558
- [ngClass]="{ 'babylai-text-left': language === 'en', 'babylai-text-right': language === 'ar' }"
559
- >
550
+ <div *ngIf="isMenuOpen" class="chat-header__menu-dropdown" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
551
+ <div class="chat-header__menu-dropdown-content">
552
+ <button (click)="onClose.emit(); isMenuOpen = false" class="chat-header__menu-button" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
560
553
  {{ 'EndChat' | translate }}
561
554
  </button>
562
555
  </div>
563
556
  </div>
564
557
  </div>
565
558
  </div>
566
- <div
567
- class="babylai-flex babylai-items-center babylai-gap-1 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2"
568
- >
569
- <img src="/logo-primary.svg" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
570
- <p class="babylai-text-base babylai-font-bold babylai-text-black-white-600">{{ 'BabylAI' | translate }}</p>
559
+ <div class="chat-header__brand">
560
+ <img src="/logo-primary.svg" [alt]="logoAlt" />
561
+ <p>{{ 'BabylAI' | translate }}</p>
571
562
  </div>
572
563
  </div>
573
- `, 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" }] });
564
+ `, isInline: true, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:#fff!important}.header__back-button-icon{width:100%;height:100%}.header__back-button-icon.rtl{transform:rotate(180deg)}.header__logo,.header__close-button img{width:2.5rem;height:2.5rem}.chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:1.5rem 1.5rem 0 0;position:relative}.chat-header__actions{display:flex;align-items:center;gap:.5rem}.chat-header__button{background-color:#ad49e11a!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:#451d5a1a!important}.chat-header__button img{width:100%;height:100%}.chat-header__button img.rtl{transform:rotate(180deg)!important}.chat-header__menu{position:relative}.chat-header__menu-dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;background-color:#fff;border:1px solid rgba(0,0,0,.05);z-index:50}.chat-header__menu-dropdown-content{border-radius:.5rem}.chat-header__menu-dropdown.rtl{right:0}.chat-header__menu-dropdown.ltr{left:0}.chat-header__menu-button{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:#374151}.chat-header__menu-button:hover{background-color:#f3f4f6}.chat-header__menu-button.rtl{text-align:right}.chat-header__menu-button.ltr{text-align:left}.chat-header__brand{display:flex;align-items:center;gap:.25rem;position:absolute;left:50%;transform:translate(-50%)}.chat-header__brand img{width:2.5rem;height:2.5rem}.chat-header__brand p{font-size:1rem;font-weight:700;color:#1f1f1f}\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: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
574
565
  }
575
566
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, decorators: [{
576
567
  type: Component,
577
- args: [{
578
- selector: 'app-chat-header',
579
- standalone: true,
580
- imports: [CommonModule, ButtonComponent, TranslatePipe],
581
- template: `
582
- <div
583
- class="babylai-p-4 babylai-flex babylai-items-center babylai-justify-between babylai-bg-black-white-50 babylai-rounded-t-3xl babylai-relative"
584
- >
585
- <div class="babylai-flex babylai-items-center babylai-gap-2">
586
- <app-button
587
- variant="icon-bg"
588
- className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
589
- (click)="onBack.emit()"
590
- >
591
- <img
592
- src="/icons/arrow-stripped-colored.svg"
593
- alt="Back"
594
- class="babylai-w-full babylai-h-full"
595
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
596
- />
568
+ args: [{ selector: 'app-chat-header', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], template: `
569
+ <div class="chat-header">
570
+ <div class="chat-header__actions">
571
+ <app-button size="small" variant="icon-bg" className="chat-header__button button--light-bg" (click)="onBack.emit()">
572
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" [style.transform]="isRtl ? 'rotate(180deg)' : 'rotate(0deg)'" />
597
573
  </app-button>
598
- <div class="babylai-relative" data-menu-container>
574
+ <div class="chat-header__menu" data-menu-container>
599
575
  <app-button
576
+ size="small"
600
577
  variant="icon-bg"
601
- className="!babylai-bg-primary-500/10 babylai-w-8 babylai-h-8 !babylai-p-2 hover:!babylai-bg-primary-700/10"
578
+ className="chat-header__button button--light-bg"
602
579
  (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
603
580
  >
604
- <img
605
- src="/icons/menu.svg"
606
- alt="Menu"
607
- class="babylai-w-full babylai-h-full"
608
- [ngClass]="{ 'babylai-rotate-180': language === 'ar' }"
609
- />
581
+ <img src="/icons/menu.svg" alt="Menu" />
610
582
  </app-button>
611
- <div
612
- *ngIf="isMenuOpen"
613
- 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"
614
- [ngClass]="{ 'babylai-right-0': language === 'ar', 'babylai-left-0': language === 'en' }"
615
- >
616
- <div class="babylai-py-1">
617
- <button
618
- (click)="onClose.emit(); isMenuOpen = false"
619
- 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"
620
- [ngClass]="{ 'babylai-text-left': language === 'en', 'babylai-text-right': language === 'ar' }"
621
- >
583
+ <div *ngIf="isMenuOpen" class="chat-header__menu-dropdown" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
584
+ <div class="chat-header__menu-dropdown-content">
585
+ <button (click)="onClose.emit(); isMenuOpen = false" class="chat-header__menu-button" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
622
586
  {{ 'EndChat' | translate }}
623
587
  </button>
624
588
  </div>
625
589
  </div>
626
590
  </div>
627
591
  </div>
628
- <div
629
- class="babylai-flex babylai-items-center babylai-gap-1 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2"
630
- >
631
- <img src="/logo-primary.svg" [alt]="logoAlt" class="babylai-w-10 babylai-h-10" />
632
- <p class="babylai-text-base babylai-font-bold babylai-text-black-white-600">{{ 'BabylAI' | translate }}</p>
592
+ <div class="chat-header__brand">
593
+ <img src="/logo-primary.svg" [alt]="logoAlt" />
594
+ <p>{{ 'BabylAI' | translate }}</p>
633
595
  </div>
634
596
  </div>
635
- `
636
- }]
597
+ `, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:#fff!important}.header__back-button-icon{width:100%;height:100%}.header__back-button-icon.rtl{transform:rotate(180deg)}.header__logo,.header__close-button img{width:2.5rem;height:2.5rem}.chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:#fff;border-radius:1.5rem 1.5rem 0 0;position:relative}.chat-header__actions{display:flex;align-items:center;gap:.5rem}.chat-header__button{background-color:#ad49e11a!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:#451d5a1a!important}.chat-header__button img{width:100%;height:100%}.chat-header__button img.rtl{transform:rotate(180deg)!important}.chat-header__menu{position:relative}.chat-header__menu-dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;background-color:#fff;border:1px solid rgba(0,0,0,.05);z-index:50}.chat-header__menu-dropdown-content{border-radius:.5rem}.chat-header__menu-dropdown.rtl{right:0}.chat-header__menu-dropdown.ltr{left:0}.chat-header__menu-button{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:#374151}.chat-header__menu-button:hover{background-color:#f3f4f6}.chat-header__menu-button.rtl{text-align:right}.chat-header__menu-button.ltr{text-align:left}.chat-header__brand{display:flex;align-items:center;gap:.25rem;position:absolute;left:50%;transform:translate(-50%)}.chat-header__brand img{width:2.5rem;height:2.5rem}.chat-header__brand p{font-size:1rem;font-weight:700;color:#1f1f1f}\n"] }]
637
598
  }], propDecorators: { showBackButton: [{
638
599
  type: Input
639
600
  }], showLogo: [{
@@ -656,26 +617,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
656
617
  class LoadingComponent {
657
618
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
658
619
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: LoadingComponent, isStandalone: true, selector: "app-loading", ngImport: i0, template: `
659
- <div
660
- 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"
661
- >
662
- <img src="/images/animatedLogo.gif" alt="Animated Logo" class="babylai-w-20 babylai-h-20" />
620
+ <div class="loading">
621
+ <img src="/images/animatedLogo.gif" alt="Animated Logo" class="loading__logo" />
663
622
  </div>
664
- `, isInline: true });
623
+ `, isInline: true, styles: [".loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:4rem 0}@media (min-width: breakpoint(\"md\")){.loading{padding:7rem 0}}.loading__logo{width:5rem;height:5rem}\n"] });
665
624
  }
666
625
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, decorators: [{
667
626
  type: Component,
668
- args: [{
669
- selector: 'app-loading',
670
- template: `
671
- <div
672
- 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"
673
- >
674
- <img src="/images/animatedLogo.gif" alt="Animated Logo" class="babylai-w-20 babylai-h-20" />
627
+ args: [{ selector: 'app-loading', template: `
628
+ <div class="loading">
629
+ <img src="/images/animatedLogo.gif" alt="Animated Logo" class="loading__logo" />
675
630
  </div>
676
- `,
677
- standalone: true
678
- }]
631
+ `, standalone: true, styles: [".loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:4rem 0}@media (min-width: breakpoint(\"md\")){.loading{padding:7rem 0}}.loading__logo{width:5rem;height:5rem}\n"] }]
679
632
  }] });
680
633
 
681
634
  class ChatComponent {
@@ -720,7 +673,7 @@ class ChatComponent {
720
673
  return messages.some((message) => message.senderType === 2 || message.senderType === 3);
721
674
  }
722
675
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
723
- 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" }] });
676
+ 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=\"chat\">\n <div class=\"chat__messages\" #chatMessagesContainer>\n <div *ngFor=\"let message of messages; let i = index\" class=\"chat__message-group\">\n <div class=\"chat__separator\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n <img src=\"/images/seperator.svg\" alt=\"separator\" />\n </div>\n <div class=\"chat__message-container\" [class.chat__message-container--user]=\"message.senderType === 1\">\n <div class=\"chat__avatar\" [class.chat__avatar--hidden]=\"i > 0 && messages[i - 1].senderType === message.senderType\">\n @if (message.senderType === 3) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n <img src=\"/logo-white.svg\" alt=\"robot\" class=\"chat__avatar-image\" />\n </span>\n } @else if (needsAgent || message.senderType === 2) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <img src=\"/icons/person.svg\" alt=\"agent\" class=\"chat__avatar-image\" />\n </span>\n }\n </div>\n <app-card\n variant=\"rounded\"\n [class]=\"'chat__message ' + (message.senderType === 1 ? 'chat__message--user' : 'chat__message--assistant')\"\n >\n <app-card-content>\n <div class=\"chat__message-content\">\n <markdown\n [data]=\"cleanMessageContent(message.messageContent)\"\n ngPreserveWhitespaces\n [inline]=\"false\"\n class=\"prose\"\n [class.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=\"chat__typing\">\n <div class=\"chat__avatar\">\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <img src=\"/images/animatedLogo.gif\" alt=\"Loading\" class=\"chat__avatar-image\" />\n </span>\n </div>\n <app-card variant=\"rounded\" class=\"chat__message chat__message--assistant\">\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=\"chat__loading\">\n <app-loading />\n </div>\n </div>\n\n <form (ngSubmit)=\"sendMessage()\" class=\"chat__input-container\">\n <div class=\"chat__input-wrapper\">\n <input\n type=\"text\"\n [(ngModel)]=\"messageText\"\n name=\"messageText\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed\"\n class=\"chat__input\"\n />\n <button type=\"submit\" [disabled]=\"!messageText.trim() || !isSignalRConnected || isChatClosed\" class=\"chat__send-button\">\n <img\n src=\"/icons/send.svg\"\n alt=\"send-message\"\n class=\"chat__send-button-icon\"\n [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n />\n </button>\n </div>\n </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container{position:relative;width:100%;padding:1rem}.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding:1rem 4rem 1rem 1rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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" }] });
724
677
  }
725
678
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, decorators: [{
726
679
  type: Component,
@@ -733,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
733
686
  CardContentComponent,
734
687
  LoadingComponent,
735
688
  TranslatePipe
736
- ], 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" }]
689
+ ], template: "<div class=\"chat\">\n <div class=\"chat__messages\" #chatMessagesContainer>\n <div *ngFor=\"let message of messages; let i = index\" class=\"chat__message-group\">\n <div class=\"chat__separator\" *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\">\n <img src=\"/images/seperator.svg\" alt=\"separator\" />\n </div>\n <div class=\"chat__message-container\" [class.chat__message-container--user]=\"message.senderType === 1\">\n <div class=\"chat__avatar\" [class.chat__avatar--hidden]=\"i > 0 && messages[i - 1].senderType === message.senderType\">\n @if (message.senderType === 3) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n <img src=\"/logo-white.svg\" alt=\"robot\" class=\"chat__avatar-image\" />\n </span>\n } @else if (needsAgent || message.senderType === 2) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <img src=\"/icons/person.svg\" alt=\"agent\" class=\"chat__avatar-image\" />\n </span>\n }\n </div>\n <app-card\n variant=\"rounded\"\n [class]=\"'chat__message ' + (message.senderType === 1 ? 'chat__message--user' : 'chat__message--assistant')\"\n >\n <app-card-content>\n <div class=\"chat__message-content\">\n <markdown\n [data]=\"cleanMessageContent(message.messageContent)\"\n ngPreserveWhitespaces\n [inline]=\"false\"\n class=\"prose\"\n [class.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=\"chat__typing\">\n <div class=\"chat__avatar\">\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <img src=\"/images/animatedLogo.gif\" alt=\"Loading\" class=\"chat__avatar-image\" />\n </span>\n </div>\n <app-card variant=\"rounded\" class=\"chat__message chat__message--assistant\">\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=\"chat__loading\">\n <app-loading />\n </div>\n </div>\n\n <form (ngSubmit)=\"sendMessage()\" class=\"chat__input-container\">\n <div class=\"chat__input-wrapper\">\n <input\n type=\"text\"\n [(ngModel)]=\"messageText\"\n name=\"messageText\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed\"\n class=\"chat__input\"\n />\n <button type=\"submit\" [disabled]=\"!messageText.trim() || !isSignalRConnected || isChatClosed\" class=\"chat__send-button\">\n <img\n src=\"/icons/send.svg\"\n alt=\"send-message\"\n class=\"chat__send-button-icon\"\n [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n />\n </button>\n </div>\n </form>\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__separator,.chat__separator img{width:100%}.chat__message-container{display:flex;align-items:flex-start;gap:.5rem}.chat__message-container--user{flex-direction:row-reverse}.chat__avatar{margin-top:.5rem}.chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:#ad49e1}.chat__avatar-wrapper--agent{background-color:#fff}.chat__avatar-image{width:100%}.chat__message{max-width:80%;position:relative}.chat__message--user{align-self:flex-start;background-color:#ad49e1;color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:#fff;color:#000;direction:rtl}.chat__message-content{white-space:pre-wrap}.chat__message-content :global(.prose){max-width:none;word-break:break-words}.chat__message-content :global(.prose)>*:first-child{margin-top:0}.chat__message-content :global(.prose)>*:last-child{margin-bottom:0}.chat__message-content :global(.prose)>p,.chat__message-content :global(.prose)>ul,.chat__message-content :global(.prose)>ol,.chat__message-content :global(.prose)>blockquote{margin:.5rem 0}.chat__message-content :global(.prose).prose-invert{color:#fff}.chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}.chat__input-container{position:relative;width:100%;padding:1rem}.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding:1rem 4rem 1rem 1rem;border-radius:9999px;border:1px solid #e2e2e2;background-color:#fff;color:#000;font-size:1rem;transition:all .2s ease-in-out}.chat__input:focus{outline:none;box-shadow:0 0 0 2px #ad49e11a}.chat__input:disabled{background-color:#e2e2e2;cursor:not-allowed}.chat__input::placeholder{color:#606060}.chat__send-button{position:absolute!important;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;padding:.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ad49e1;transition:all .2s ease-in-out}.chat__send-button:hover:not(:disabled){background-color:#ad49e1}.chat__send-button:disabled{cursor:not-allowed}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}#wave{position:relative}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:#ad49e1;animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
737
690
  }], propDecorators: { messages: [{
738
691
  type: Input
739
692
  }], needsAgent: [{
@@ -764,57 +717,40 @@ class ConfirmationDialogComponent {
764
717
  onCancel = new EventEmitter();
765
718
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
766
719
  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: `
767
- <div
768
- class="babylai-absolute babylai-inset-0 babylai-bg-black/50 babylai-z-[10] babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl"
769
- >
770
- <div class="babylai-bg-white babylai-rounded-2xl babylai-p-6 babylai-max-w-sm babylai-w-full babylai-mx-4">
771
- <h3 class="babylai-text-xl babylai-font-bold babylai-mb-2">{{ title }}</h3>
772
- <p class="babylai-text-gray-600 babylai-mb-6">{{ body }}</p>
773
- <div class="babylai-flex babylai-gap-3 babylai-justify-end">
774
- <app-button
775
- variant="default"
776
- className="!babylai-bg-transparent !babylai-text-primary !babylai-border !babylai-border-primary hover:!babylai-bg-primary/10"
777
- (click)="onCancel.emit()"
778
- >
720
+ <div class="dialog">
721
+ <div class="dialog__content">
722
+ <h3 class="dialog__title">{{ title }}</h3>
723
+ <p class="dialog__body">{{ body }}</p>
724
+ <div class="dialog__actions">
725
+ <app-button variant="outline" [fullWidth]="true" (click)="onCancel.emit()">
779
726
  {{ cancelText }}
780
727
  </app-button>
781
- <app-button variant="default" (click)="onConfirm.emit()">
728
+ <app-button variant="default" [fullWidth]="true" (click)="onConfirm.emit()">
782
729
  {{ confirmText }}
783
730
  </app-button>
784
731
  </div>
785
732
  </div>
786
733
  </div>
787
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
734
+ `, isInline: true, styles: [".dialog{position:absolute;inset:0;background-color:#00000080;z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.dialog__content{background-color:#fff;border-radius:1.5rem;padding:1.5rem;max-width:360px;width:100%;margin:0 1rem}.dialog__title{font-size:1rem;font-weight:700;margin-bottom:.5rem;text-align:center}.dialog__body{color:#606060;margin-bottom:1.5rem;text-align:center}.dialog__actions{display:flex;gap:.75rem;justify-content:space-between;width:100%}.dialog__actions :host{width:100%}.dialog__actions app-button{flex:1;width:100%;display:block}.dialog__cancel-button{background-color:transparent!important;color:#ad49e1!important;border:1px solid #ad49e1!important;width:100%!important}.dialog__cancel-button:hover{background-color:#ad49e11a!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
788
735
  }
789
736
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
790
737
  type: Component,
791
- args: [{
792
- selector: 'app-confirmation-dialog',
793
- standalone: true,
794
- imports: [CommonModule, ButtonComponent],
795
- template: `
796
- <div
797
- class="babylai-absolute babylai-inset-0 babylai-bg-black/50 babylai-z-[10] babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl"
798
- >
799
- <div class="babylai-bg-white babylai-rounded-2xl babylai-p-6 babylai-max-w-sm babylai-w-full babylai-mx-4">
800
- <h3 class="babylai-text-xl babylai-font-bold babylai-mb-2">{{ title }}</h3>
801
- <p class="babylai-text-gray-600 babylai-mb-6">{{ body }}</p>
802
- <div class="babylai-flex babylai-gap-3 babylai-justify-end">
803
- <app-button
804
- variant="default"
805
- className="!babylai-bg-transparent !babylai-text-primary !babylai-border !babylai-border-primary hover:!babylai-bg-primary/10"
806
- (click)="onCancel.emit()"
807
- >
738
+ args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [CommonModule, ButtonComponent], template: `
739
+ <div class="dialog">
740
+ <div class="dialog__content">
741
+ <h3 class="dialog__title">{{ title }}</h3>
742
+ <p class="dialog__body">{{ body }}</p>
743
+ <div class="dialog__actions">
744
+ <app-button variant="outline" [fullWidth]="true" (click)="onCancel.emit()">
808
745
  {{ cancelText }}
809
746
  </app-button>
810
- <app-button variant="default" (click)="onConfirm.emit()">
747
+ <app-button variant="default" [fullWidth]="true" (click)="onConfirm.emit()">
811
748
  {{ confirmText }}
812
749
  </app-button>
813
750
  </div>
814
751
  </div>
815
752
  </div>
816
- `
817
- }]
753
+ `, styles: [".dialog{position:absolute;inset:0;background-color:#00000080;z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.dialog__content{background-color:#fff;border-radius:1.5rem;padding:1.5rem;max-width:360px;width:100%;margin:0 1rem}.dialog__title{font-size:1rem;font-weight:700;margin-bottom:.5rem;text-align:center}.dialog__body{color:#606060;margin-bottom:1.5rem;text-align:center}.dialog__actions{display:flex;gap:.75rem;justify-content:space-between;width:100%}.dialog__actions :host{width:100%}.dialog__actions app-button{flex:1;width:100%;display:block}.dialog__cancel-button{background-color:transparent!important;color:#ad49e1!important;border:1px solid #ad49e1!important;width:100%!important}.dialog__cancel-button:hover{background-color:#ad49e11a!important}\n"] }]
818
754
  }], propDecorators: { title: [{
819
755
  type: Input
820
756
  }], body: [{
@@ -991,11 +927,15 @@ class TokenService {
991
927
  throw new Error('Token service not initialized. Call initializeService first.');
992
928
  }
993
929
  try {
994
- const response = await fetch(`${this.baseUrl}/Auth/client/get-babylai-token`, {
930
+ const response = await fetch(`${this.baseUrl}/Auth/client/get-token`, {
995
931
  method: 'POST',
996
932
  headers: {
997
933
  'Content-Type': 'application/json'
998
- }
934
+ },
935
+ body: JSON.stringify({
936
+ tenantId: '2176c188-8cb4-4fc3-8366-2d32e601f7e5',
937
+ apiKey: 'I/22UK34I6xAhglfPXTwPAgUuVyJw8TdnG26ZLI5gYQ='
938
+ })
999
939
  });
1000
940
  if (!response.ok) {
1001
941
  throw new Error('Failed to fetch token');
@@ -1027,18 +967,26 @@ class HelpCenterWidgetComponent {
1027
967
  translationService;
1028
968
  getToken;
1029
969
  helpScreenId;
1030
- user;
1031
970
  showArrow = true;
1032
971
  messageLabel = null;
1033
- currentLang = 'en';
972
+ set currentLang(value) {
973
+ this._currentLang = value;
974
+ this.isRTL = value === 'ar';
975
+ }
976
+ get currentLang() {
977
+ return this._currentLang;
978
+ }
979
+ isIntroScreenEnabled = false;
1034
980
  chatMessagesContainer;
981
+ _currentLang = 'en';
982
+ langSubscription;
983
+ isRTL = false;
1035
984
  // State variables
1036
985
  isPopupOpen = false;
1037
986
  helpScreenData = null;
1038
987
  status = 'idle';
1039
988
  error = null;
1040
989
  showArrowAnimation = false;
1041
- isRTL = this.currentLang === 'en' ? false : true;
1042
990
  showTooltip = false;
1043
991
  sessionId = null;
1044
992
  isSignalRConnected = false;
@@ -1066,6 +1014,20 @@ class HelpCenterWidgetComponent {
1066
1014
  this.showArrowAnimation = this.showArrow;
1067
1015
  this.tokenService.initializeService(this.baseUrl);
1068
1016
  this.apiService.initializeAPI(this.baseUrl, this.getToken);
1017
+ console.log('🚀 ~ HelpCenterWidgetComponent ~ ngOnInit ~ isIntroScreenEnabled:', this.isIntroScreenEnabled);
1018
+ if (!this.isIntroScreenEnabled) {
1019
+ this.showHelpScreenData = true;
1020
+ }
1021
+ // Subscribe to language changes
1022
+ this.langSubscription = this.translationService.currentLang.subscribe((lang) => {
1023
+ this.currentLang = lang;
1024
+ });
1025
+ }
1026
+ ngOnDestroy() {
1027
+ // Clean up subscription
1028
+ if (this.langSubscription) {
1029
+ this.langSubscription.unsubscribe();
1030
+ }
1069
1031
  }
1070
1032
  async handleTogglePopup() {
1071
1033
  this.isPopupOpen = !this.isPopupOpen;
@@ -1221,14 +1183,7 @@ class HelpCenterWidgetComponent {
1221
1183
  this.messages = [];
1222
1184
  const chatSessionCreateDto = {
1223
1185
  helpScreenId: this.helpScreenId,
1224
- optionId: option.id,
1225
- ...(this.user && {
1226
- user: {
1227
- id: this.user.id,
1228
- name: this.user.name,
1229
- email: this.user.email
1230
- }
1231
- })
1186
+ optionId: option.id
1232
1187
  };
1233
1188
  const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
1234
1189
  const createdSession = await response.json();
@@ -1287,9 +1242,6 @@ class HelpCenterWidgetComponent {
1287
1242
  }
1288
1243
  }
1289
1244
  handleClosePopup() {
1290
- if (this.showChat) {
1291
- this.handleEndChat();
1292
- }
1293
1245
  this.showHelpScreenData = false;
1294
1246
  this.showChat = false;
1295
1247
  this.isPopupOpen = false;
@@ -1358,7 +1310,7 @@ class HelpCenterWidgetComponent {
1358
1310
  window.open(url, '_blank');
1359
1311
  }
1360
1312
  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 });
1361
- 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", "*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Cairo,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}body,html{font-family:Cairo,sans-serif}.babylai-invisible{visibility:hidden}.babylai-fixed{position:fixed}.babylai-absolute{position:absolute}.babylai-relative{position:relative}.babylai-inset-0{inset:0}.babylai-bottom-20{bottom:5rem}.babylai-bottom-5{bottom:1.25rem}.babylai-bottom-\\[-10px\\]{bottom:-10px}.babylai-bottom-\\[90px\\]{bottom:90px}.babylai-end-0{inset-inline-end:0}.babylai-end-1{inset-inline-end:.25rem}.babylai-left-0{left:0}.babylai-left-1\\/2{left:50%}.babylai-right-0{right:0}.babylai-right-4{right:1rem}.babylai-right-5{right:1.25rem}.babylai-right-\\[-8px\\]{right:-8px}.babylai-top-0{top:0}.babylai-top-1\\/2{top:50%}.babylai-top-\\[-8px\\]{top:-8px}.babylai-z-50{z-index:50}.babylai-z-\\[-1\\]{z-index:-1}.babylai-z-\\[1000\\]{z-index:1000}.babylai-z-\\[10\\]{z-index:10}.babylai-z-\\[1300\\]{z-index:1300}.babylai-z-\\[9999\\]{z-index:9999}.babylai-m-0{margin:0}.babylai-mx-4{margin-left:1rem;margin-right:1rem}.babylai-mb-2{margin-bottom:.5rem}.babylai-mb-3{margin-bottom:.75rem}.babylai-mb-4{margin-bottom:1rem}.babylai-mb-6{margin-bottom:1.5rem}.babylai-mt-2{margin-top:.5rem}.babylai-mt-4{margin-top:1rem}.babylai-mt-8{margin-top:2rem}.babylai-block{display:block}.babylai-flex{display:flex}.babylai-inline-flex{display:inline-flex}.babylai-h-0{height:0}.babylai-h-10{height:2.5rem}.babylai-h-12{height:3rem}.babylai-h-14{height:3.5rem}.babylai-h-20{height:5rem}.babylai-h-4{height:1rem}.babylai-h-5{height:1.25rem}.babylai-h-6{height:1.5rem}.babylai-h-8{height:2rem}.babylai-h-\\[13\\.49rem\\]{height:13.49rem}.babylai-h-\\[684px\\]{height:684px}.babylai-h-full{height:100%}.babylai-max-h-\\[85\\%\\]{max-height:85%}.babylai-min-h-16{min-height:4rem}.babylai-w-0{width:0}.babylai-w-10{width:2.5rem}.babylai-w-12{width:3rem}.babylai-w-14{width:3.5rem}.babylai-w-20{width:5rem}.babylai-w-4{width:1rem}.babylai-w-48{width:12rem}.babylai-w-5{width:1.25rem}.babylai-w-6{width:1.5rem}.babylai-w-8{width:2rem}.babylai-w-\\[15\\.42rem\\]{width:15.42rem}.babylai-w-\\[360px\\]{width:360px}.babylai-w-\\[60px\\]{width:60px}.babylai-w-full{width:100%}.babylai-min-w-12{min-width:3rem}.babylai-max-w-12{max-width:3rem}.babylai-max-w-56{max-width:14rem}.babylai-max-w-\\[200px\\]{max-width:200px}.babylai-max-w-\\[80\\%\\]{max-width:80%}.babylai-max-w-none{max-width:none}.babylai-max-w-sm{max-width:24rem}.babylai-flex-1{flex:1 1 0%}.-babylai-translate-y-1\\/2{--tw-translate-y:-50%}.-babylai-translate-y-1\\/2,.babylai--translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai--translate-x-1\\/2{--tw-translate-x:-50%}.babylai-rotate-180{--tw-rotate:180deg}.babylai-rotate-180,.babylai-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-90{--tw-rotate:90deg}.babylai-rotate-\\[270deg\\]{--tw-rotate:270deg}.babylai-rotate-\\[270deg\\],.babylai-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes babylai-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.babylai-animate-float{animation:babylai-float 3s ease-in-out infinite}.babylai-cursor-not-allowed{cursor:not-allowed}.babylai-cursor-pointer{cursor:pointer}.babylai-flex-row-reverse{flex-direction:row-reverse}.babylai-flex-col{flex-direction:column}.babylai-items-start{align-items:flex-start}.babylai-items-end{align-items:flex-end}.babylai-items-center{align-items:center}.babylai-justify-start{justify-content:flex-start}.babylai-justify-end{justify-content:flex-end}.babylai-justify-center{justify-content:center}.babylai-justify-between{justify-content:space-between}.babylai-gap-0{gap:0}.babylai-gap-1{gap:.25rem}.babylai-gap-2{gap:.5rem}.babylai-gap-3{gap:.75rem}.babylai-gap-4{gap:1rem}.babylai-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.babylai-self-start{align-self:flex-start}.babylai-self-end{align-self:flex-end}.babylai-overflow-hidden{overflow:hidden}.babylai-overflow-y-auto{overflow-y:auto}.babylai-whitespace-pre-wrap{white-space:pre-wrap}.babylai-break-words{overflow-wrap:break-word}.babylai-rounded-2xl{border-radius:1rem}.babylai-rounded-3xl{border-radius:1.5rem}.babylai-rounded-full{border-radius:9999px}.babylai-rounded-md{border-radius:calc(var(--radius) - 2px)}.babylai-rounded-xl{border-radius:.75rem}.babylai-rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.\\!babylai-border{border-width:1px!important}.babylai-border{border-width:1px}.babylai-border-l-\\[10px\\]{border-left-width:10px}.babylai-border-r-\\[10px\\]{border-right-width:10px}.babylai-border-t-\\[10px\\]{border-top-width:10px}.babylai-border-none{border-style:none}.\\!babylai-border-primary{--tw-border-opacity:1!important;border-color:rgb(173 73 225/var(--tw-border-opacity,1))!important}.babylai-border-l-transparent{border-left-color:#0000}.babylai-border-r-transparent{border-right-color:#0000}.babylai-border-t-primary{--tw-border-opacity:1;border-top-color:rgb(173 73 225/var(--tw-border-opacity,1))}.\\!babylai-bg-black-white-50{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.\\!babylai-bg-primary-500\\/10{background-color:#ad49e11a!important}.\\!babylai-bg-transparent{background-color:initial!important}.babylai-bg-black-white-100{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity,1))}.babylai-bg-black-white-50{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.babylai-bg-black\\/50{background-color:#17171780}.babylai-bg-card{background-color:hsl(var(--card))}.babylai-bg-primary{--tw-bg-opacity:1;background-color:rgb(173 73 225/var(--tw-bg-opacity,1))}.babylai-bg-transparent{background-color:initial}.babylai-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.babylai-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.babylai-from-primary-500{--tw-gradient-from:#ad49e1 var(--tw-gradient-from-position);--tw-gradient-to:#ad49e100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.babylai-to-primary-500\\/60{--tw-gradient-to:#ad49e199 var(--tw-gradient-to-position)}.\\!babylai-p-2{padding:.5rem!important}.\\!babylai-p-3{padding:.75rem!important}.babylai-p-0{padding:0}.babylai-p-1{padding:.25rem}.babylai-p-2{padding:.5rem}.babylai-p-4{padding:1rem}.babylai-p-6{padding:1.5rem}.babylai-p-\\[10px\\]{padding:10px}.babylai-p-\\[3px\\]{padding:3px}.\\!babylai-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\\!babylai-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.babylai-px-0{padding-left:0;padding-right:0}.babylai-px-4{padding-left:1rem;padding-right:1rem}.babylai-px-5{padding-left:1.25rem;padding-right:1.25rem}.babylai-px-\\[24px\\]{padding-left:24px;padding-right:24px}.babylai-py-0{padding-top:0;padding-bottom:0}.babylai-py-1{padding-top:.25rem;padding-bottom:.25rem}.babylai-py-16{padding-top:4rem;padding-bottom:4rem}.babylai-py-2{padding-top:.5rem;padding-bottom:.5rem}.babylai-py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.babylai-py-3{padding-top:.75rem;padding-bottom:.75rem}.babylai-py-4{padding-top:1rem}.babylai-pb-4,.babylai-py-4{padding-bottom:1rem}.babylai-pt-0{padding-top:0}.babylai-text-left{text-align:left}.babylai-text-center{text-align:center}.babylai-text-right{text-align:right}.babylai-text-4xl{font-size:2.25rem;line-height:2.5rem}.babylai-text-6xl{font-size:3.75rem;line-height:1}.babylai-text-base{font-size:1rem;line-height:1.5rem}.babylai-text-sm{font-size:.875rem;line-height:1.25rem}.babylai-text-xl{font-size:1.25rem;line-height:1.75rem}.babylai-text-xs{font-size:.75rem;line-height:1rem}.babylai-font-bold{font-weight:700}.babylai-font-semibold{font-weight:600}.babylai-leading-none{line-height:1}.babylai-tracking-tight{letter-spacing:-.025em}.\\!babylai-text-primary{--tw-text-opacity:1!important;color:rgb(173 73 225/var(--tw-text-opacity,1))!important}.babylai-text-black{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.babylai-text-black-white-300{--tw-text-opacity:1;color:rgb(145 145 145/var(--tw-text-opacity,1))}.babylai-text-black-white-400{--tw-text-opacity:1;color:rgb(96 96 96/var(--tw-text-opacity,1))}.babylai-text-black-white-50{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.babylai-text-black-white-600{--tw-text-opacity:1;color:rgb(31 31 31/var(--tw-text-opacity,1))}.babylai-text-black-white-800{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.babylai-text-card-foreground{color:hsl(var(--card-foreground))}.babylai-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.babylai-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.babylai-text-muted-foreground{color:hsl(var(--muted-foreground))}.babylai-text-primary{--tw-text-opacity:1;color:rgb(173 73 225/var(--tw-text-opacity,1))}.babylai-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.babylai-opacity-100{opacity:1}.babylai-opacity-50{opacity:.5}.babylai-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.babylai-shadow,.babylai-shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.babylai-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.babylai-shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.babylai-ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.babylai-ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(23 23 23/var(--tw-ring-opacity,1))}.babylai-ring-opacity-5{--tw-ring-opacity:.05}.babylai-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-duration-200{transition-duration:.2s}.babylai-duration-300{transition-duration:.3s}.babylai-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.babylai-duration-200{animation-duration:.2s}.babylai-duration-300{animation-duration:.3s}.babylai-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.babylai-ps-3{padding-inline-start:.75rem}.babylai-pe-12{padding-inline-end:3rem}[dir=rtl] .babylai-end-0{left:0}[dir=ltr] .babylai-end-0{right:0}[dir=rtl] .babylai-end-1{left:.25rem}[dir=ltr] .babylai-end-1{right:.25rem}.hover\\:babylai-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:\\!babylai-bg-primary-700\\/10:hover{background-color:#451d5a1a!important}.hover\\:\\!babylai-bg-primary\\/10:hover{background-color:#ad49e11a!important}.hover\\:babylai-bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:babylai-bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(69 29 90/var(--tw-bg-opacity,1))}.hover\\:babylai-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\\:babylai-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.active\\:babylai-scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:babylai-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:babylai-bg-black-white-200:disabled{--tw-bg-opacity:1;background-color:rgb(226 226 226/var(--tw-bg-opacity,1))}.disabled\\:babylai-opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\\:babylai-py-28{padding-top:7rem;padding-bottom:7rem}}.\\[\\&\\>\\*\\:first-child\\]\\:babylai-mt-0>:first-child{margin-top:0}.\\[\\&\\>\\*\\:last-child\\]\\:babylai-mb-0>:last-child{margin-bottom:0}.\\[\\&\\>blockquote\\]\\:babylai-my-2>blockquote,.\\[\\&\\>ol\\]\\:babylai-my-2>ol,.\\[\\&\\>p\\]\\:babylai-my-2>p,.\\[\\&\\>ul\\]\\:babylai-my-2>ul{margin-top:.5rem;margin-bottom:.5rem}\n/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/\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"] }] });
1313
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- Arrow Animation -->\n <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n <div class=\"message-box\">\n <p>\n {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\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 class=\"arrow-tip\"></div>\n </div>\n </div>\n\n <!-- Help Button -->\n <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n <span class=\"help-button-content\">\n <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" />\n </span>\n </button>\n\n <!-- Help Popup -->\n <div\n *ngIf=\"isPopupOpen\"\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'has-gradient': 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\n <!-- Loading State -->\n <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n <ng-container *ngIf=\"!showHelpScreenData\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <ng-container *ngIf=\"showHelpScreenData\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading></app-loading>\n </div>\n\n <!-- Error State -->\n <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n\n <!-- Content -->\n <ng-container *ngIf=\"status === 'succeeded'\">\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\">\n <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"icon-full\" />\n </app-button>\n </ng-container>\n </ng-container>\n\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 ></app-chat-header>\n\n <app-chat\n class=\"chat-container\"\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 ></app-chat>\n </ng-container>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"!showChat\">\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData\">\n <div class=\"intro-section\">\n <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n </div>\n\n <div class=\"cards-section\">\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"card-content\">\n <div class=\"babylai-info\">\n <div class=\"logo-container\">\n <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"logo\" />\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n <p class=\"info-description\">{{ '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=\"action-card\">\n <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n <img src=\"/icons/arrow-stripped.svg\" alt=\"Arrow Right\" [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\" />\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=\"action-card\">\n <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n <img src=\"/icons/arrow-stripped.svg\" alt=\"Arrow Right\" [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\" />\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData\">\n <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" />\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=\"footer\">\n <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n {{ 'PoweredByBabylAI' | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:684px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;right:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\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", "size", "direction"], 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", "showCloseButton"], 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"] }] });
1362
1314
  }
1363
1315
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
1364
1316
  type: Component,
@@ -1375,29 +1327,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
1375
1327
  ChatComponent,
1376
1328
  LoadingComponent,
1377
1329
  ConfirmationDialogComponent
1378
- ], 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", "*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:\"\"}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Cairo,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}body,html{font-family:Cairo,sans-serif}.babylai-invisible{visibility:hidden}.babylai-fixed{position:fixed}.babylai-absolute{position:absolute}.babylai-relative{position:relative}.babylai-inset-0{inset:0}.babylai-bottom-20{bottom:5rem}.babylai-bottom-5{bottom:1.25rem}.babylai-bottom-\\[-10px\\]{bottom:-10px}.babylai-bottom-\\[90px\\]{bottom:90px}.babylai-end-0{inset-inline-end:0}.babylai-end-1{inset-inline-end:.25rem}.babylai-left-0{left:0}.babylai-left-1\\/2{left:50%}.babylai-right-0{right:0}.babylai-right-4{right:1rem}.babylai-right-5{right:1.25rem}.babylai-right-\\[-8px\\]{right:-8px}.babylai-top-0{top:0}.babylai-top-1\\/2{top:50%}.babylai-top-\\[-8px\\]{top:-8px}.babylai-z-50{z-index:50}.babylai-z-\\[-1\\]{z-index:-1}.babylai-z-\\[1000\\]{z-index:1000}.babylai-z-\\[10\\]{z-index:10}.babylai-z-\\[1300\\]{z-index:1300}.babylai-z-\\[9999\\]{z-index:9999}.babylai-m-0{margin:0}.babylai-mx-4{margin-left:1rem;margin-right:1rem}.babylai-mb-2{margin-bottom:.5rem}.babylai-mb-3{margin-bottom:.75rem}.babylai-mb-4{margin-bottom:1rem}.babylai-mb-6{margin-bottom:1.5rem}.babylai-mt-2{margin-top:.5rem}.babylai-mt-4{margin-top:1rem}.babylai-mt-8{margin-top:2rem}.babylai-block{display:block}.babylai-flex{display:flex}.babylai-inline-flex{display:inline-flex}.babylai-h-0{height:0}.babylai-h-10{height:2.5rem}.babylai-h-12{height:3rem}.babylai-h-14{height:3.5rem}.babylai-h-20{height:5rem}.babylai-h-4{height:1rem}.babylai-h-5{height:1.25rem}.babylai-h-6{height:1.5rem}.babylai-h-8{height:2rem}.babylai-h-\\[13\\.49rem\\]{height:13.49rem}.babylai-h-\\[684px\\]{height:684px}.babylai-h-full{height:100%}.babylai-max-h-\\[85\\%\\]{max-height:85%}.babylai-min-h-16{min-height:4rem}.babylai-w-0{width:0}.babylai-w-10{width:2.5rem}.babylai-w-12{width:3rem}.babylai-w-14{width:3.5rem}.babylai-w-20{width:5rem}.babylai-w-4{width:1rem}.babylai-w-48{width:12rem}.babylai-w-5{width:1.25rem}.babylai-w-6{width:1.5rem}.babylai-w-8{width:2rem}.babylai-w-\\[15\\.42rem\\]{width:15.42rem}.babylai-w-\\[360px\\]{width:360px}.babylai-w-\\[60px\\]{width:60px}.babylai-w-full{width:100%}.babylai-min-w-12{min-width:3rem}.babylai-max-w-12{max-width:3rem}.babylai-max-w-56{max-width:14rem}.babylai-max-w-\\[200px\\]{max-width:200px}.babylai-max-w-\\[80\\%\\]{max-width:80%}.babylai-max-w-none{max-width:none}.babylai-max-w-sm{max-width:24rem}.babylai-flex-1{flex:1 1 0%}.-babylai-translate-y-1\\/2{--tw-translate-y:-50%}.-babylai-translate-y-1\\/2,.babylai--translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai--translate-x-1\\/2{--tw-translate-x:-50%}.babylai-rotate-180{--tw-rotate:180deg}.babylai-rotate-180,.babylai-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.babylai-rotate-90{--tw-rotate:90deg}.babylai-rotate-\\[270deg\\]{--tw-rotate:270deg}.babylai-rotate-\\[270deg\\],.babylai-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes babylai-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.babylai-animate-float{animation:babylai-float 3s ease-in-out infinite}.babylai-cursor-not-allowed{cursor:not-allowed}.babylai-cursor-pointer{cursor:pointer}.babylai-flex-row-reverse{flex-direction:row-reverse}.babylai-flex-col{flex-direction:column}.babylai-items-start{align-items:flex-start}.babylai-items-end{align-items:flex-end}.babylai-items-center{align-items:center}.babylai-justify-start{justify-content:flex-start}.babylai-justify-end{justify-content:flex-end}.babylai-justify-center{justify-content:center}.babylai-justify-between{justify-content:space-between}.babylai-gap-0{gap:0}.babylai-gap-1{gap:.25rem}.babylai-gap-2{gap:.5rem}.babylai-gap-3{gap:.75rem}.babylai-gap-4{gap:1rem}.babylai-space-y-1\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.babylai-self-start{align-self:flex-start}.babylai-self-end{align-self:flex-end}.babylai-overflow-hidden{overflow:hidden}.babylai-overflow-y-auto{overflow-y:auto}.babylai-whitespace-pre-wrap{white-space:pre-wrap}.babylai-break-words{overflow-wrap:break-word}.babylai-rounded-2xl{border-radius:1rem}.babylai-rounded-3xl{border-radius:1.5rem}.babylai-rounded-full{border-radius:9999px}.babylai-rounded-md{border-radius:calc(var(--radius) - 2px)}.babylai-rounded-xl{border-radius:.75rem}.babylai-rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.\\!babylai-border{border-width:1px!important}.babylai-border{border-width:1px}.babylai-border-l-\\[10px\\]{border-left-width:10px}.babylai-border-r-\\[10px\\]{border-right-width:10px}.babylai-border-t-\\[10px\\]{border-top-width:10px}.babylai-border-none{border-style:none}.\\!babylai-border-primary{--tw-border-opacity:1!important;border-color:rgb(173 73 225/var(--tw-border-opacity,1))!important}.babylai-border-l-transparent{border-left-color:#0000}.babylai-border-r-transparent{border-right-color:#0000}.babylai-border-t-primary{--tw-border-opacity:1;border-top-color:rgb(173 73 225/var(--tw-border-opacity,1))}.\\!babylai-bg-black-white-50{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.\\!babylai-bg-primary-500\\/10{background-color:#ad49e11a!important}.\\!babylai-bg-transparent{background-color:initial!important}.babylai-bg-black-white-100{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity,1))}.babylai-bg-black-white-50{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.babylai-bg-black\\/50{background-color:#17171780}.babylai-bg-card{background-color:hsl(var(--card))}.babylai-bg-primary{--tw-bg-opacity:1;background-color:rgb(173 73 225/var(--tw-bg-opacity,1))}.babylai-bg-transparent{background-color:initial}.babylai-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.babylai-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.babylai-from-primary-500{--tw-gradient-from:#ad49e1 var(--tw-gradient-from-position);--tw-gradient-to:#ad49e100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.babylai-to-primary-500\\/60{--tw-gradient-to:#ad49e199 var(--tw-gradient-to-position)}.\\!babylai-p-2{padding:.5rem!important}.\\!babylai-p-3{padding:.75rem!important}.babylai-p-0{padding:0}.babylai-p-1{padding:.25rem}.babylai-p-2{padding:.5rem}.babylai-p-4{padding:1rem}.babylai-p-6{padding:1.5rem}.babylai-p-\\[10px\\]{padding:10px}.babylai-p-\\[3px\\]{padding:3px}.\\!babylai-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\\!babylai-py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.babylai-px-0{padding-left:0;padding-right:0}.babylai-px-4{padding-left:1rem;padding-right:1rem}.babylai-px-5{padding-left:1.25rem;padding-right:1.25rem}.babylai-px-\\[24px\\]{padding-left:24px;padding-right:24px}.babylai-py-0{padding-top:0;padding-bottom:0}.babylai-py-1{padding-top:.25rem;padding-bottom:.25rem}.babylai-py-16{padding-top:4rem;padding-bottom:4rem}.babylai-py-2{padding-top:.5rem;padding-bottom:.5rem}.babylai-py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.babylai-py-3{padding-top:.75rem;padding-bottom:.75rem}.babylai-py-4{padding-top:1rem}.babylai-pb-4,.babylai-py-4{padding-bottom:1rem}.babylai-pt-0{padding-top:0}.babylai-text-left{text-align:left}.babylai-text-center{text-align:center}.babylai-text-right{text-align:right}.babylai-text-4xl{font-size:2.25rem;line-height:2.5rem}.babylai-text-6xl{font-size:3.75rem;line-height:1}.babylai-text-base{font-size:1rem;line-height:1.5rem}.babylai-text-sm{font-size:.875rem;line-height:1.25rem}.babylai-text-xl{font-size:1.25rem;line-height:1.75rem}.babylai-text-xs{font-size:.75rem;line-height:1rem}.babylai-font-bold{font-weight:700}.babylai-font-semibold{font-weight:600}.babylai-leading-none{line-height:1}.babylai-tracking-tight{letter-spacing:-.025em}.\\!babylai-text-primary{--tw-text-opacity:1!important;color:rgb(173 73 225/var(--tw-text-opacity,1))!important}.babylai-text-black{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.babylai-text-black-white-300{--tw-text-opacity:1;color:rgb(145 145 145/var(--tw-text-opacity,1))}.babylai-text-black-white-400{--tw-text-opacity:1;color:rgb(96 96 96/var(--tw-text-opacity,1))}.babylai-text-black-white-50{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.babylai-text-black-white-600{--tw-text-opacity:1;color:rgb(31 31 31/var(--tw-text-opacity,1))}.babylai-text-black-white-800{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.babylai-text-card-foreground{color:hsl(var(--card-foreground))}.babylai-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.babylai-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.babylai-text-muted-foreground{color:hsl(var(--muted-foreground))}.babylai-text-primary{--tw-text-opacity:1;color:rgb(173 73 225/var(--tw-text-opacity,1))}.babylai-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.babylai-opacity-100{opacity:1}.babylai-opacity-50{opacity:.5}.babylai-shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.babylai-shadow,.babylai-shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.babylai-shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.babylai-shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.babylai-ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.babylai-ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(23 23 23/var(--tw-ring-opacity,1))}.babylai-ring-opacity-5{--tw-ring-opacity:.05}.babylai-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.babylai-duration-200{transition-duration:.2s}.babylai-duration-300{transition-duration:.3s}.babylai-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.babylai-duration-200{animation-duration:.2s}.babylai-duration-300{animation-duration:.3s}.babylai-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.babylai-ps-3{padding-inline-start:.75rem}.babylai-pe-12{padding-inline-end:3rem}[dir=rtl] .babylai-end-0{left:0}[dir=ltr] .babylai-end-0{right:0}[dir=rtl] .babylai-end-1{left:.25rem}[dir=ltr] .babylai-end-1{right:.25rem}.hover\\:babylai-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:\\!babylai-bg-primary-700\\/10:hover{background-color:#451d5a1a!important}.hover\\:\\!babylai-bg-primary\\/10:hover{background-color:#ad49e11a!important}.hover\\:babylai-bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:babylai-bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(69 29 90/var(--tw-bg-opacity,1))}.hover\\:babylai-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\\:babylai-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.active\\:babylai-scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\\:babylai-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:babylai-bg-black-white-200:disabled{--tw-bg-opacity:1;background-color:rgb(226 226 226/var(--tw-bg-opacity,1))}.disabled\\:babylai-opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\\:babylai-py-28{padding-top:7rem;padding-bottom:7rem}}.\\[\\&\\>\\*\\:first-child\\]\\:babylai-mt-0>:first-child{margin-top:0}.\\[\\&\\>\\*\\:last-child\\]\\:babylai-mb-0>:last-child{margin-bottom:0}.\\[\\&\\>blockquote\\]\\:babylai-my-2>blockquote,.\\[\\&\\>ol\\]\\:babylai-my-2>ol,.\\[\\&\\>p\\]\\:babylai-my-2>p,.\\[\\&\\>ul\\]\\:babylai-my-2>ul{margin-top:.5rem;margin-bottom:.5rem}\n/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/\n", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"] }]
1330
+ ], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- Arrow Animation -->\n <div *ngIf=\"showArrowAnimation && !isPopupOpen\" class=\"arrow-animation\">\n <div class=\"message-box\">\n <p>\n {{ messageLabel || 'Need assistance Or You want to try the Product? Click here' }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\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 class=\"arrow-tip\"></div>\n </div>\n </div>\n\n <!-- Help Button -->\n <button class=\"help-button\" (click)=\"handleTogglePopup()\">\n <span class=\"help-button-content\">\n <img src=\"/logo-white.svg\" alt=\"BabylAI Logo\" class=\"help-button-logo\" />\n </span>\n </button>\n\n <!-- Help Popup -->\n <div\n *ngIf=\"isPopupOpen\"\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'has-gradient': 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\n <!-- Loading State -->\n <div *ngIf=\"status === 'loading'\" class=\"loading-state\">\n <ng-container *ngIf=\"!showHelpScreenData\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <ng-container *ngIf=\"showHelpScreenData\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading></app-loading>\n </div>\n\n <!-- Error State -->\n <div *ngIf=\"status === 'failed'\" class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n\n <!-- Content -->\n <ng-container *ngIf=\"status === 'succeeded'\">\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData && !showChat\">\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData && !showChat\">\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\">\n <img src=\"/icons/chat.svg\" alt=\"Close\" class=\"icon-full\" />\n </app-button>\n </ng-container>\n </ng-container>\n\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 ></app-chat-header>\n\n <app-chat\n class=\"chat-container\"\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 ></app-chat>\n </ng-container>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"!showChat\">\n @if (isIntroScreenEnabled) {\n <ng-container *ngIf=\"!showHelpScreenData\">\n <div class=\"intro-section\">\n <h1 class=\"intro-title\">{{ 'ChatIntroMessage' | translate }}</h1>\n </div>\n\n <div class=\"cards-section\">\n <app-card variant=\"rounded\">\n <app-card-content>\n <div class=\"card-content\">\n <div class=\"babylai-info\">\n <div class=\"logo-container\">\n <img src=\"/logo-white.svg\" alt=\"Chat\" class=\"logo\" />\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">{{ 'BabylaiTitle' | translate }}</h4>\n <p class=\"info-description\">{{ '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=\"action-card\">\n <p class=\"action-text\">{{ 'TryBableAI' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net/signup')\">\n <img src=\"/icons/arrow-stripped.svg\" alt=\"Arrow Right\" [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\" />\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=\"action-card\">\n <p class=\"action-text\">{{ 'ContactUs' | translate }}</p>\n <app-button variant=\"icon-bg\" (click)=\"navigateToUrl('https://babylai.net')\">\n <img src=\"/icons/arrow-stripped.svg\" alt=\"Arrow Right\" [ngClass]=\"{ icon: true, 'icon-rtl': currentLang === 'ar' }\" />\n </app-button>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </ng-container>\n }\n\n <ng-container *ngIf=\"showHelpScreenData\">\n <img src=\"/images/stars.svg\" alt=\"help-center-widget-icon\" class=\"stars\" />\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=\"footer\">\n <a href=\"https://babylai.net\" target=\"_blank\" class=\"footer-link\" [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\">\n {{ 'PoweredByBabylAI' | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:684px;border-radius:1.5rem;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column;z-index:1000;background-color:#f3f3f3;overflow:hidden}.help-popup.is-open{width:360px}.help-popup.is-closed{width:60px}.help-popup.has-gradient{background:linear-gradient(to bottom,#ad49e1,#ad49e199)}.error-message{bottom:22.5rem;right:1.25rem;padding:1rem;border-radius:.5rem;box-shadow:#64646f33 0 7px 29px;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-container{height:100%;margin-top:.5rem;padding:.5rem;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:1rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;right:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
1379
1331
  }], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TokenService }, { type: TranslationService }], propDecorators: { getToken: [{
1380
1332
  type: Input
1381
1333
  }], helpScreenId: [{
1382
1334
  type: Input
1383
- }], user: [{
1384
- type: Input
1385
1335
  }], showArrow: [{
1386
1336
  type: Input
1387
1337
  }], messageLabel: [{
1388
1338
  type: Input
1389
1339
  }], currentLang: [{
1390
1340
  type: Input
1341
+ }], isIntroScreenEnabled: [{
1342
+ type: Input
1391
1343
  }], chatMessagesContainer: [{
1392
1344
  type: ViewChild,
1393
1345
  args: ['chatMessagesContainer']
1394
1346
  }] } });
1395
1347
 
1348
+ // src/app/language.service.ts
1349
+ class LanguageService {
1350
+ translationService;
1351
+ constructor(translationService) {
1352
+ this.translationService = translationService;
1353
+ }
1354
+ switchLanguage(language) {
1355
+ console.log('LanguageService: Switching language to', language);
1356
+ this.translationService.setLanguage(language);
1357
+ }
1358
+ getCurrentLang() {
1359
+ const currentLang = this.translationService.getCurrentLang();
1360
+ console.log('LanguageService: Current language is', currentLang);
1361
+ return currentLang;
1362
+ }
1363
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LanguageService, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
1364
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LanguageService, providedIn: 'root' });
1365
+ }
1366
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LanguageService, decorators: [{
1367
+ type: Injectable,
1368
+ args: [{
1369
+ providedIn: 'root'
1370
+ }]
1371
+ }], ctorParameters: () => [{ type: TranslationService }] });
1372
+
1396
1373
  // Components and Modules
1397
1374
 
1398
1375
  /**
1399
1376
  * Generated bundle index. Do not edit.
1400
1377
  */
1401
1378
 
1402
- export { ApiService, HelpCenterWidgetComponent, SignalRService, TokenService, TranslatePipe, TranslationService };
1379
+ export { ApiService, HelpCenterWidgetComponent, LanguageService, SignalRService, TokenService, TranslatePipe, TranslationService };
1403
1380
  //# sourceMappingURL=aslaluroba-help-center.mjs.map