@aslaluroba/help-center 1.1.12 → 1.1.13

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 (10) hide show
  1. package/Shape.png +0 -0
  2. package/favicon.ico +0 -0
  3. package/fesm2022/aslaluroba-help-center.mjs +209 -279
  4. package/fesm2022/aslaluroba-help-center.mjs.map +1 -1
  5. package/package.json +17 -2
  6. package/src/app/help-center-widget/help-center-widget.component.d.ts +3 -3
  7. package/src/app/shared/components/button/button.component.d.ts +4 -2
  8. package/src/app/shared/components/header/header.component.d.ts +4 -1
  9. package/lib/tailwind.css +0 -1
  10. 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
  `
@@ -419,11 +404,11 @@ class HelpScreenDataComponent {
419
404
  this.handleStartNewChat.emit(option);
420
405
  }
421
406
  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" }] });
407
+ 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
408
  }
424
409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
425
410
  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" }]
411
+ 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
412
  }], propDecorators: { helpScreenData: [{
428
413
  type: Input
429
414
  }], title: [{
@@ -439,49 +424,68 @@ class HeaderComponent {
439
424
  logoSrc = '/logo-white.svg';
440
425
  logoAlt = 'BabylAI Logo';
441
426
  language = 'en';
427
+ showCloseButton = false;
442
428
  onBack = new EventEmitter();
443
429
  onClose = new EventEmitter();
430
+ get isRtl() {
431
+ return this.language === 'ar';
432
+ }
444
433
  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
- />
434
+ 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: `
435
+ <div class="header">
436
+ <app-button
437
+ *ngIf="showBackButton"
438
+ variant="icon-bg"
439
+ className="button--white-bg"
440
+ [direction]="isRtl ? 'rtl' : 'ltr'"
441
+ (click)="onBack.emit()"
442
+ >
443
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" class="header__back-button-icon" [class.rtl]="isRtl" />
454
444
  </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" />
445
+ <app-button
446
+ *ngIf="showCloseButton"
447
+ variant="icon-bg"
448
+ [direction]="isRtl ? 'rtl' : 'ltr'"
449
+ className="button--close-button"
450
+ (click)="onClose.emit()"
451
+ >
452
+ <img src="/icons/close-circle.svg" alt="Close" />
453
+ </app-button>
454
+ <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="header__logo" />
455
+ <app-button *ngIf="!showBackButton && !showCloseButton" variant="icon-only" class="header__close-button" (click)="onClose.emit()">
456
+ <img src="/icons/close-circle.svg" alt="Close" />
458
457
  </app-button>
459
458
  </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"] }] });
459
+ `, 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
460
  }
462
461
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HeaderComponent, decorators: [{
463
462
  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
- />
463
+ args: [{ selector: 'app-header', standalone: true, imports: [CommonModule, ButtonComponent], template: `
464
+ <div class="header">
465
+ <app-button
466
+ *ngIf="showBackButton"
467
+ variant="icon-bg"
468
+ className="button--white-bg"
469
+ [direction]="isRtl ? 'rtl' : 'ltr'"
470
+ (click)="onBack.emit()"
471
+ >
472
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" class="header__back-button-icon" [class.rtl]="isRtl" />
473
+ </app-button>
474
+ <app-button
475
+ *ngIf="showCloseButton"
476
+ variant="icon-bg"
477
+ [direction]="isRtl ? 'rtl' : 'ltr'"
478
+ className="button--close-button"
479
+ (click)="onClose.emit()"
480
+ >
481
+ <img src="/icons/close-circle.svg" alt="Close" />
477
482
  </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" />
483
+ <img *ngIf="showLogo" [src]="logoSrc" [alt]="logoAlt" class="header__logo" />
484
+ <app-button *ngIf="!showBackButton && !showCloseButton" variant="icon-only" class="header__close-button" (click)="onClose.emit()">
485
+ <img src="/icons/close-circle.svg" alt="Close" />
481
486
  </app-button>
482
487
  </div>
483
- `
484
- }]
488
+ `, 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
489
  }], propDecorators: { headerType: [{
486
490
  type: Input
487
491
  }], showBackButton: [{
@@ -494,6 +498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
494
498
  type: Input
495
499
  }], language: [{
496
500
  type: Input
501
+ }], showCloseButton: [{
502
+ type: Input
497
503
  }], onBack: [{
498
504
  type: Output
499
505
  }], onClose: [{
@@ -508,6 +514,9 @@ class ChatHeaderComponent {
508
514
  language = 'en';
509
515
  onBack = new EventEmitter();
510
516
  onClose = new EventEmitter();
517
+ get isRtl() {
518
+ return this.language === 'ar';
519
+ }
511
520
  onDocumentClick(event) {
512
521
  const target = event.target;
513
522
  const menuContainer = target.closest('[data-menu-container]');
@@ -517,123 +526,68 @@ class ChatHeaderComponent {
517
526
  }
518
527
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
519
528
  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
- />
529
+ <div class="chat-header">
530
+ <div class="chat-header__actions">
531
+ <app-button size="small" variant="icon-bg" className="chat-header__button button--light-bg" (click)="onBack.emit()">
532
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" [style.transform]="isRtl ? 'rotate(180deg)' : 'rotate(0deg)'" />
535
533
  </app-button>
536
- <div class="babylai-relative" data-menu-container>
534
+ <div class="chat-header__menu" data-menu-container>
537
535
  <app-button
536
+ size="small"
538
537
  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"
538
+ className="chat-header__button button--light-bg"
540
539
  (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
541
540
  >
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
- />
541
+ <img src="/icons/menu.svg" alt="Menu" />
548
542
  </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
- >
543
+ <div *ngIf="isMenuOpen" class="chat-header__menu-dropdown" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
544
+ <div class="chat-header__menu-dropdown-content">
545
+ <button (click)="onClose.emit(); isMenuOpen = false" class="chat-header__menu-button" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
560
546
  {{ 'EndChat' | translate }}
561
547
  </button>
562
548
  </div>
563
549
  </div>
564
550
  </div>
565
551
  </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>
552
+ <div class="chat-header__brand">
553
+ <img src="/logo-primary.svg" [alt]="logoAlt" />
554
+ <p>{{ 'BabylAI' | translate }}</p>
571
555
  </div>
572
556
  </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" }] });
557
+ `, 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
558
  }
575
559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatHeaderComponent, decorators: [{
576
560
  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
- />
561
+ args: [{ selector: 'app-chat-header', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], template: `
562
+ <div class="chat-header">
563
+ <div class="chat-header__actions">
564
+ <app-button size="small" variant="icon-bg" className="chat-header__button button--light-bg" (click)="onBack.emit()">
565
+ <img src="/icons/arrow-stripped-colored.svg" alt="Back" [style.transform]="isRtl ? 'rotate(180deg)' : 'rotate(0deg)'" />
597
566
  </app-button>
598
- <div class="babylai-relative" data-menu-container>
567
+ <div class="chat-header__menu" data-menu-container>
599
568
  <app-button
569
+ size="small"
600
570
  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"
571
+ className="chat-header__button button--light-bg"
602
572
  (click)="$event.stopPropagation(); isMenuOpen = !isMenuOpen"
603
573
  >
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
- />
574
+ <img src="/icons/menu.svg" alt="Menu" />
610
575
  </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
- >
576
+ <div *ngIf="isMenuOpen" class="chat-header__menu-dropdown" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
577
+ <div class="chat-header__menu-dropdown-content">
578
+ <button (click)="onClose.emit(); isMenuOpen = false" class="chat-header__menu-button" [ngClass]="{ rtl: isRtl, ltr: !isRtl }">
622
579
  {{ 'EndChat' | translate }}
623
580
  </button>
624
581
  </div>
625
582
  </div>
626
583
  </div>
627
584
  </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>
585
+ <div class="chat-header__brand">
586
+ <img src="/logo-primary.svg" [alt]="logoAlt" />
587
+ <p>{{ 'BabylAI' | translate }}</p>
633
588
  </div>
634
589
  </div>
635
- `
636
- }]
590
+ `, 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
591
  }], propDecorators: { showBackButton: [{
638
592
  type: Input
639
593
  }], showLogo: [{
@@ -656,26 +610,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
656
610
  class LoadingComponent {
657
611
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
658
612
  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" />
613
+ <div class="loading">
614
+ <img src="/images/animatedLogo.gif" alt="Animated Logo" class="loading__logo" />
663
615
  </div>
664
- `, isInline: true });
616
+ `, 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
617
  }
666
618
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoadingComponent, decorators: [{
667
619
  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" />
620
+ args: [{ selector: 'app-loading', template: `
621
+ <div class="loading">
622
+ <img src="/images/animatedLogo.gif" alt="Animated Logo" class="loading__logo" />
675
623
  </div>
676
- `,
677
- standalone: true
678
- }]
624
+ `, 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
625
  }] });
680
626
 
681
627
  class ChatComponent {
@@ -720,7 +666,7 @@ class ChatComponent {
720
666
  return messages.some((message) => message.senderType === 2 || message.senderType === 3);
721
667
  }
722
668
  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" }] });
669
+ 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
670
  }
725
671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ChatComponent, decorators: [{
726
672
  type: Component,
@@ -733,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
733
679
  CardContentComponent,
734
680
  LoadingComponent,
735
681
  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" }]
682
+ ], 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
683
  }], propDecorators: { messages: [{
738
684
  type: Input
739
685
  }], needsAgent: [{
@@ -764,57 +710,40 @@ class ConfirmationDialogComponent {
764
710
  onCancel = new EventEmitter();
765
711
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
766
712
  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
- >
713
+ <div class="dialog">
714
+ <div class="dialog__content">
715
+ <h3 class="dialog__title">{{ title }}</h3>
716
+ <p class="dialog__body">{{ body }}</p>
717
+ <div class="dialog__actions">
718
+ <app-button variant="outline" [fullWidth]="true" (click)="onCancel.emit()">
779
719
  {{ cancelText }}
780
720
  </app-button>
781
- <app-button variant="default" (click)="onConfirm.emit()">
721
+ <app-button variant="default" [fullWidth]="true" (click)="onConfirm.emit()">
782
722
  {{ confirmText }}
783
723
  </app-button>
784
724
  </div>
785
725
  </div>
786
726
  </div>
787
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className"], outputs: ["onClick"] }] });
727
+ `, 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
728
  }
789
729
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
790
730
  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
- >
731
+ args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [CommonModule, ButtonComponent], template: `
732
+ <div class="dialog">
733
+ <div class="dialog__content">
734
+ <h3 class="dialog__title">{{ title }}</h3>
735
+ <p class="dialog__body">{{ body }}</p>
736
+ <div class="dialog__actions">
737
+ <app-button variant="outline" [fullWidth]="true" (click)="onCancel.emit()">
808
738
  {{ cancelText }}
809
739
  </app-button>
810
- <app-button variant="default" (click)="onConfirm.emit()">
740
+ <app-button variant="default" [fullWidth]="true" (click)="onConfirm.emit()">
811
741
  {{ confirmText }}
812
742
  </app-button>
813
743
  </div>
814
744
  </div>
815
745
  </div>
816
- `
817
- }]
746
+ `, 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
747
  }], propDecorators: { title: [{
819
748
  type: Input
820
749
  }], body: [{
@@ -991,11 +920,15 @@ class TokenService {
991
920
  throw new Error('Token service not initialized. Call initializeService first.');
992
921
  }
993
922
  try {
994
- const response = await fetch(`${this.baseUrl}/Auth/client/get-babylai-token`, {
923
+ const response = await fetch(`${this.baseUrl}/Auth/client/get-token`, {
995
924
  method: 'POST',
996
925
  headers: {
997
926
  'Content-Type': 'application/json'
998
- }
927
+ },
928
+ body: JSON.stringify({
929
+ tenantId: '2176c188-8cb4-4fc3-8366-2d32e601f7e5',
930
+ apiKey: 'I/22UK34I6xAhglfPXTwPAgUuVyJw8TdnG26ZLI5gYQ='
931
+ })
999
932
  });
1000
933
  if (!response.ok) {
1001
934
  throw new Error('Failed to fetch token');
@@ -1027,10 +960,10 @@ class HelpCenterWidgetComponent {
1027
960
  translationService;
1028
961
  getToken;
1029
962
  helpScreenId;
1030
- user;
1031
963
  showArrow = true;
1032
964
  messageLabel = null;
1033
965
  currentLang = 'en';
966
+ isIntroScreenEnabled = false;
1034
967
  chatMessagesContainer;
1035
968
  // State variables
1036
969
  isPopupOpen = false;
@@ -1066,6 +999,10 @@ class HelpCenterWidgetComponent {
1066
999
  this.showArrowAnimation = this.showArrow;
1067
1000
  this.tokenService.initializeService(this.baseUrl);
1068
1001
  this.apiService.initializeAPI(this.baseUrl, this.getToken);
1002
+ console.log('🚀 ~ HelpCenterWidgetComponent ~ ngOnInit ~ isIntroScreenEnabled:', this.isIntroScreenEnabled);
1003
+ if (!this.isIntroScreenEnabled) {
1004
+ this.showHelpScreenData = true;
1005
+ }
1069
1006
  }
1070
1007
  async handleTogglePopup() {
1071
1008
  this.isPopupOpen = !this.isPopupOpen;
@@ -1221,14 +1158,7 @@ class HelpCenterWidgetComponent {
1221
1158
  this.messages = [];
1222
1159
  const chatSessionCreateDto = {
1223
1160
  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
- })
1161
+ optionId: option.id
1232
1162
  };
1233
1163
  const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
1234
1164
  const createdSession = await response.json();
@@ -1358,7 +1288,7 @@ class HelpCenterWidgetComponent {
1358
1288
  window.open(url, '_blank');
1359
1289
  }
1360
1290
  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"] }] });
1291
+ 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)=\"handleHideHelpScreenData()\"\n (onBack)=\"handleBack()\"\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:9999}.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}.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}.help-center-container{width:100%;height:100%}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", ":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", "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
1292
  }
1363
1293
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
1364
1294
  type: Component,
@@ -1375,19 +1305,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
1375
1305
  ChatComponent,
1376
1306
  LoadingComponent,
1377
1307
  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"] }]
1308
+ ], 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)=\"handleHideHelpScreenData()\"\n (onBack)=\"handleBack()\"\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:9999}.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}.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}.help-center-container{width:100%;height:100%}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", ":host{display:block;width:100%;height:100%}.help-center-container{width:100%;height:100%}\n"] }]
1379
1309
  }], ctorParameters: () => [{ type: ApiService }, { type: SignalRService }, { type: TokenService }, { type: TranslationService }], propDecorators: { getToken: [{
1380
1310
  type: Input
1381
1311
  }], helpScreenId: [{
1382
1312
  type: Input
1383
- }], user: [{
1384
- type: Input
1385
1313
  }], showArrow: [{
1386
1314
  type: Input
1387
1315
  }], messageLabel: [{
1388
1316
  type: Input
1389
1317
  }], currentLang: [{
1390
1318
  type: Input
1319
+ }], isIntroScreenEnabled: [{
1320
+ type: Input
1391
1321
  }], chatMessagesContainer: [{
1392
1322
  type: ViewChild,
1393
1323
  args: ['chatMessagesContainer']