@aslaluroba/help-center 3.0.3 → 3.0.4
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.
- package/fesm2022/aslaluroba-help-center.mjs +72 -72
- package/fesm2022/aslaluroba-help-center.mjs.map +1 -1
- package/index.d.ts +234 -5
- package/package.json +13 -15
- package/public_api.d.ts +0 -12
- package/src/app/chat/chat.component.d.ts +0 -35
- package/src/app/help-center-widget/help-center-widget.component.d.ts +0 -105
- package/src/app/help-screen-data/help-screen-data.component.d.ts +0 -59
- package/src/app/language.service.d.ts +0 -11
- package/src/app/pipes/translate.pipe.d.ts +0 -11
- package/src/app/services/ably.service.d.ts +0 -13
- package/src/app/services/api.service.d.ts +0 -16
- package/src/app/services/help-center-config.service.d.ts +0 -12
- package/src/app/services/token.service.d.ts +0 -10
- package/src/app/services/translation.service.d.ts +0 -34
- package/src/app/shared/components/button/button.component.d.ts +0 -36
- package/src/app/shared/components/button/index.d.ts +0 -1
- package/src/app/shared/components/card/card.component.d.ts +0 -38
- package/src/app/shared/components/card/index.d.ts +0 -1
- package/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.d.ts +0 -12
- package/src/app/shared/components/header/header.component.d.ts +0 -32
- package/src/app/shared/components/header/index.d.ts +0 -1
- package/src/app/shared/components/loading/loading.component.d.ts +0 -6
- package/src/app/shared/components/markdown-renderer/index.d.ts +0 -1
- package/src/app/shared/components/markdown-renderer/markdown-renderer.component.d.ts +0 -16
- package/src/app/types.d.ts +0 -38
|
@@ -160,10 +160,10 @@ class CardComponent {
|
|
|
160
160
|
}
|
|
161
161
|
return classes.join(' ');
|
|
162
162
|
}
|
|
163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
165
165
|
}
|
|
166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardComponent, decorators: [{
|
|
167
167
|
type: Component,
|
|
168
168
|
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"] }]
|
|
169
169
|
}], propDecorators: { variant: [{
|
|
@@ -183,10 +183,10 @@ class CardHeaderComponent {
|
|
|
183
183
|
}
|
|
184
184
|
return classes.join(' ');
|
|
185
185
|
}
|
|
186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
188
188
|
}
|
|
189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
190
190
|
type: Component,
|
|
191
191
|
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"] }]
|
|
192
192
|
}], propDecorators: { class: [{
|
|
@@ -204,10 +204,10 @@ class CardTitleComponent {
|
|
|
204
204
|
}
|
|
205
205
|
return classes.join(' ');
|
|
206
206
|
}
|
|
207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
207
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
209
209
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardTitleComponent, decorators: [{
|
|
211
211
|
type: Component,
|
|
212
212
|
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"] }]
|
|
213
213
|
}], propDecorators: { class: [{
|
|
@@ -225,10 +225,10 @@ class CardDescriptionComponent {
|
|
|
225
225
|
}
|
|
226
226
|
return classes.join(' ');
|
|
227
227
|
}
|
|
228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
230
230
|
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardDescriptionComponent, decorators: [{
|
|
232
232
|
type: Component,
|
|
233
233
|
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"] }]
|
|
234
234
|
}], propDecorators: { class: [{
|
|
@@ -246,10 +246,10 @@ class CardContentComponent {
|
|
|
246
246
|
}
|
|
247
247
|
return classes.join(' ');
|
|
248
248
|
}
|
|
249
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
250
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
251
251
|
}
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
253
253
|
type: Component,
|
|
254
254
|
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"] }]
|
|
255
255
|
}], propDecorators: { class: [{
|
|
@@ -267,10 +267,10 @@ class CardFooterComponent {
|
|
|
267
267
|
}
|
|
268
268
|
return classes.join(' ');
|
|
269
269
|
}
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
272
272
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
274
274
|
type: Component,
|
|
275
275
|
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"] }]
|
|
276
276
|
}], propDecorators: { class: [{
|
|
@@ -309,14 +309,14 @@ class ButtonComponent {
|
|
|
309
309
|
}
|
|
310
310
|
return classes.join(' ');
|
|
311
311
|
}
|
|
312
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
313
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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: `
|
|
314
314
|
<button [type]="type" [disabled]="disabled" [class]="getButtonClasses()" (click)="onClick.emit($event)" [dir]="direction">
|
|
315
315
|
<ng-content></ng-content>
|
|
316
316
|
</button>
|
|
317
317
|
`, 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:#fff;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-bg.button--icon{padding:.75rem}.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 }] });
|
|
318
318
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
321
|
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: `
|
|
322
322
|
<button [type]="type" [disabled]="disabled" [class]="getButtonClasses()" (click)="onClick.emit($event)" [dir]="direction">
|
|
@@ -341,10 +341,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
341
341
|
type: Output
|
|
342
342
|
}] } });
|
|
343
343
|
class ButtonContentComponent {
|
|
344
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
344
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
345
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: ButtonContentComponent, isStandalone: true, selector: "app-button-content", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
346
346
|
}
|
|
347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ButtonContentComponent, decorators: [{
|
|
348
348
|
type: Component,
|
|
349
349
|
args: [{
|
|
350
350
|
selector: 'app-button-content',
|
|
@@ -357,14 +357,14 @@ class IconButtonComponent {
|
|
|
357
357
|
className = '';
|
|
358
358
|
disabled = false;
|
|
359
359
|
onClick = new EventEmitter();
|
|
360
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
360
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IconButtonComponent, isStandalone: true, selector: "app-icon-button", inputs: { className: "className", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
362
362
|
<app-button variant="icon-bg" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
|
|
363
363
|
<ng-content></ng-content>
|
|
364
364
|
</app-button>
|
|
365
365
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
|
|
366
366
|
}
|
|
367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
368
368
|
type: Component,
|
|
369
369
|
args: [{
|
|
370
370
|
selector: 'app-icon-button',
|
|
@@ -387,14 +387,14 @@ class TransparentIconButtonComponent {
|
|
|
387
387
|
className = '';
|
|
388
388
|
disabled = false;
|
|
389
389
|
onClick = new EventEmitter();
|
|
390
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
391
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TransparentIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: TransparentIconButtonComponent, isStandalone: true, selector: "app-transparent-icon-button", inputs: { className: "className", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
|
|
392
392
|
<app-button variant="icon-only" [className]="className" [disabled]="disabled" (onClick)="onClick.emit($event)">
|
|
393
393
|
<ng-content></ng-content>
|
|
394
394
|
</app-button>
|
|
395
395
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
|
|
396
396
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TransparentIconButtonComponent, decorators: [{
|
|
398
398
|
type: Component,
|
|
399
399
|
args: [{
|
|
400
400
|
selector: 'app-transparent-icon-button',
|
|
@@ -485,10 +485,10 @@ class TranslationService {
|
|
|
485
485
|
getCurrentLang() {
|
|
486
486
|
return this._currentLang.value;
|
|
487
487
|
}
|
|
488
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
489
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
488
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
489
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TranslationService, providedIn: 'root' });
|
|
490
490
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TranslationService, decorators: [{
|
|
492
492
|
type: Injectable,
|
|
493
493
|
args: [{
|
|
494
494
|
providedIn: 'root'
|
|
@@ -504,10 +504,10 @@ class TranslatePipe {
|
|
|
504
504
|
transform(key) {
|
|
505
505
|
return this.translationService.translate(key);
|
|
506
506
|
}
|
|
507
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
508
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TranslatePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
508
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
|
|
509
509
|
}
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TranslatePipe, decorators: [{
|
|
511
511
|
type: Pipe,
|
|
512
512
|
args: [{
|
|
513
513
|
name: 'translate',
|
|
@@ -550,10 +550,10 @@ class HelpScreenDataComponent {
|
|
|
550
550
|
handleStartChat(option) {
|
|
551
551
|
this.handleStartNewChat.emit(option);
|
|
552
552
|
}
|
|
553
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
553
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 <svg class=\"header__back-button-icon\" width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"#7A1CAC\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\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 *ngIf=\"item?.chatWithUs\" variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">{{\n 'ChatNow' | translate\n }}</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" }] });
|
|
555
555
|
}
|
|
556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
|
|
557
557
|
type: Component,
|
|
558
558
|
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 <svg class=\"header__back-button-icon\" width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"#7A1CAC\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\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 *ngIf=\"item?.chatWithUs\" variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">{{\n 'ChatNow' | translate\n }}</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"] }]
|
|
559
559
|
}], propDecorators: { helpScreenData: [{
|
|
@@ -577,8 +577,8 @@ class HeaderComponent {
|
|
|
577
577
|
get isRtl() {
|
|
578
578
|
return this.language === 'ar';
|
|
579
579
|
}
|
|
580
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
581
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
580
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
581
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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: `
|
|
582
582
|
<div class="header">
|
|
583
583
|
<app-button
|
|
584
584
|
*ngIf="showBackButton"
|
|
@@ -676,7 +676,7 @@ class HeaderComponent {
|
|
|
676
676
|
</div>
|
|
677
677
|
`, isInline: true, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:flex-end}.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"] }] });
|
|
678
678
|
}
|
|
679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
680
680
|
type: Component,
|
|
681
681
|
args: [{ selector: 'app-header', standalone: true, imports: [CommonModule, ButtonComponent], template: `
|
|
682
682
|
<div class="header">
|
|
@@ -813,8 +813,8 @@ class ChatHeaderComponent {
|
|
|
813
813
|
this.isMenuOpen = false;
|
|
814
814
|
}
|
|
815
815
|
}
|
|
816
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
817
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
816
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
817
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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: `
|
|
818
818
|
<div class="chat-header">
|
|
819
819
|
<div class="chat-header__actions">
|
|
820
820
|
<app-button
|
|
@@ -908,7 +908,7 @@ class ChatHeaderComponent {
|
|
|
908
908
|
</div>
|
|
909
909
|
`, isInline: true, styles: [".header{padding:1rem;display:flex;align-items:center;justify-content:flex-end}.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" }] });
|
|
910
910
|
}
|
|
911
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ChatHeaderComponent, decorators: [{
|
|
912
912
|
type: Component,
|
|
913
913
|
args: [{ selector: 'app-chat-header', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], template: `
|
|
914
914
|
<div class="chat-header">
|
|
@@ -1024,14 +1024,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1024
1024
|
|
|
1025
1025
|
class LoadingComponent {
|
|
1026
1026
|
variant = 'default';
|
|
1027
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1028
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1027
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1028
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { variant: "variant" }, ngImport: i0, template: `
|
|
1029
1029
|
<div class="loading">
|
|
1030
1030
|
<div class="loader" [class.loader--primary]="variant === 'primary'"></div>
|
|
1031
1031
|
</div>
|
|
1032
1032
|
`, 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}.loader{width:50px;aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:#fff;animation:l15 1s infinite linear}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}.loader--primary{border-right-color:#ad49e1}.loader--primary:before,.loader--primary:after{border-right-color:#ad49e1}@keyframes l15{to{transform:rotate(1turn)}}\n"] });
|
|
1033
1033
|
}
|
|
1034
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
1036
1036
|
args: [{ selector: 'app-loading', template: `
|
|
1037
1037
|
<div class="loading">
|
|
@@ -1085,8 +1085,8 @@ class MarkdownRendererComponent {
|
|
|
1085
1085
|
}
|
|
1086
1086
|
}
|
|
1087
1087
|
}
|
|
1088
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1089
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1088
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1089
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MarkdownRendererComponent, isStandalone: true, selector: "app-markdown-renderer", inputs: { content: "content", inline: "inline", cssClass: "cssClass", dir: "dir" }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true }], ngImport: i0, template: `
|
|
1090
1090
|
<div
|
|
1091
1091
|
#markdownContainer
|
|
1092
1092
|
[class]="cssClass"
|
|
@@ -1095,7 +1095,7 @@ class MarkdownRendererComponent {
|
|
|
1095
1095
|
></div>
|
|
1096
1096
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1097
1097
|
}
|
|
1098
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MarkdownRendererComponent, decorators: [{
|
|
1099
1099
|
type: Component,
|
|
1100
1100
|
args: [{ selector: 'app-markdown-renderer', standalone: true, imports: [CommonModule], template: `
|
|
1101
1101
|
<div
|
|
@@ -1180,10 +1180,10 @@ class ChatComponent {
|
|
|
1180
1180
|
hasAgentMessageBeenSent(messages) {
|
|
1181
1181
|
return messages.some((message) => message.senderType === 2 || message.senderType === 3);
|
|
1182
1182
|
}
|
|
1183
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1184
|
-
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", isAblyConnected: "isAblyConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", loading: "loading" }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n <div class=\"chat__messages\" #chatMessagesContainer>\n <div\n *ngFor=\"let message of messages; let i = index\"\n class=\"chat__message-group\"\n >\n <div\n class=\"chat__separator\"\n *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\"\n >\n <svg\n width=\"100%\"\n height=\"14\"\n viewBox=\"0 0 327 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n <path\n d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n fill=\"#AD49E1\"\n />\n <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n </svg>\n </div>\n\n <div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n >\n <div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"\n i > 0 && messages[i - 1].senderType === message.senderType\n \"\n >\n @if (message.senderType === 3) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n } @else if (needsAgent || message.senderType === 2) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n }\n </div>\n <app-card\n variant=\"rounded\"\n [class]=\"\n 'chat__message ' +\n (message.senderType === 1\n ? 'chat__message--user'\n : 'chat__message--assistant')\n \"\n >\n <app-card-content>\n <div class=\"chat__message-content\">\n <app-markdown-renderer\n [content]=\"cleanMessageContent(message.messageContent)\"\n [inline]=\"false\"\n [cssClass]=\"'prose' + (message.senderType === 1 ? ' prose-invert' : '')\"\n [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n >\n </app-markdown-renderer>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </div>\n\n <div\n *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\"\n class=\"chat__typing\"\n >\n <div class=\"chat__avatar\">\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n </div>\n <app-card\n variant=\"rounded\"\n class=\"chat__message chat__message--assistant\"\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=\"chat__loading\">\n <app-loading variant=\"primary\" />\n </div>\n </div>\n\n <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n <div class=\"chat__input-wrapper\">\n <input\n type=\"text\"\n [(ngModel)]=\"messageContent\"\n name=\"messageContent\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed\"\n class=\"chat__input\"\n />\n <button\n type=\"submit\"\n [disabled]=\"\n !messageContent.trim() || isChatClosed || assistantStatus === 'typing'\n \"\n class=\"chat__send-button\"\n >\n <svg\n class=\"chat__send-button-icon\"\n [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n viewBox=\"0 0 19 19\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n fill=\"white\"\n />\n </svg>\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,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;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: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MarkdownRendererComponent, selector: "app-markdown-renderer", inputs: ["content", "inline", "cssClass", "dir"] }] });
|
|
1183
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isAblyConnected: "isAblyConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", loading: "loading" }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n <div class=\"chat__messages\" #chatMessagesContainer>\n <div\n *ngFor=\"let message of messages; let i = index\"\n class=\"chat__message-group\"\n >\n <div\n class=\"chat__separator\"\n *ngIf=\"i === firstAgentMessageIndex && message.senderType === 2\"\n >\n <svg\n width=\"100%\"\n height=\"14\"\n viewBox=\"0 0 327 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n <path\n d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n fill=\"#AD49E1\"\n />\n <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"#AD49E1\" />\n </svg>\n </div>\n\n <div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n >\n <div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"\n i > 0 && messages[i - 1].senderType === message.senderType\n \"\n >\n @if (message.senderType === 3) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--assistant\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n } @else if (needsAgent || message.senderType === 2) {\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5.99479 5.66658C7.46755 5.66658 8.66146 4.47268 8.66146 2.99992C8.66146 1.52716 7.46755 0.333252 5.99479 0.333252C4.52203 0.333252 3.32812 1.52716 3.32812 2.99992C3.32812 4.47268 4.52203 5.66658 5.99479 5.66658Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M11.3307 10.6665C11.3307 12.3232 11.3307 13.6665 5.9974 13.6665C0.664062 13.6665 0.664062 12.3232 0.664062 10.6665C0.664062 9.00984 3.05206 7.6665 5.9974 7.6665C8.94273 7.6665 11.3307 9.00984 11.3307 10.6665Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n }\n </div>\n <app-card\n variant=\"rounded\"\n [class]=\"\n 'chat__message ' +\n (message.senderType === 1\n ? 'chat__message--user'\n : 'chat__message--assistant')\n \"\n >\n <app-card-content>\n <div class=\"chat__message-content\">\n <app-markdown-renderer\n [content]=\"cleanMessageContent(message.messageContent)\"\n [inline]=\"false\"\n [cssClass]=\"'prose' + (message.senderType === 1 ? ' prose-invert' : '')\"\n [dir]=\"currentLang === 'ar' ? 'rtl' : 'ltr'\"\n >\n </app-markdown-renderer>\n </div>\n </app-card-content>\n </app-card>\n </div>\n </div>\n\n <div\n *ngIf=\"assistantStatus === 'typing' && firstAgentMessageIndex === -1\"\n class=\"chat__typing\"\n >\n <div class=\"chat__avatar\">\n <span class=\"chat__avatar-wrapper chat__avatar-wrapper--agent\">\n <svg\n class=\"chat__avatar-image\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </span>\n </div>\n <app-card\n variant=\"rounded\"\n class=\"chat__message chat__message--assistant\"\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=\"chat__loading\">\n <app-loading variant=\"primary\" />\n </div>\n </div>\n\n <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-container\">\n <div class=\"chat__input-wrapper\">\n <input\n type=\"text\"\n [(ngModel)]=\"messageContent\"\n name=\"messageContent\"\n [placeholder]=\"'ChatPlaceholder' | translate\"\n [disabled]=\"isChatClosed\"\n class=\"chat__input\"\n />\n <button\n type=\"submit\"\n [disabled]=\"\n !messageContent.trim() || isChatClosed || assistantStatus === 'typing'\n \"\n class=\"chat__send-button\"\n >\n <svg\n class=\"chat__send-button-icon\"\n [class.chat__send-button-icon--rtl]=\"currentLang === 'ar'\"\n viewBox=\"0 0 19 19\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M18.2346 2.68609C18.6666 1.49109 17.5086 0.33309 16.3136 0.76609L1.70855 6.04809C0.509554 6.48209 0.364554 8.11809 1.46755 8.75709L6.12955 11.4561L10.2926 7.29309C10.4812 7.11093 10.7338 7.01014 10.996 7.01242C11.2582 7.01469 11.509 7.11986 11.6944 7.30527C11.8798 7.49068 11.9849 7.74149 11.9872 8.00369C11.9895 8.26589 11.8887 8.51849 11.7066 8.70709L7.54355 12.8701L10.2436 17.5321C10.8816 18.6351 12.5176 18.4891 12.9516 17.2911L18.2346 2.68609Z\"\n fill=\"white\"\n />\n </svg>\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,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;min-height:4rem;padding-inline:1rem 4rem;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: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: MarkdownRendererComponent, selector: "app-markdown-renderer", inputs: ["content", "inline", "cssClass", "dir"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1185
1185
|
}
|
|
1186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ChatComponent, decorators: [{
|
|
1187
1187
|
type: Component,
|
|
1188
1188
|
args: [{ selector: 'app-chat', standalone: true, imports: [
|
|
1189
1189
|
CommonModule,
|
|
@@ -1225,8 +1225,8 @@ class ConfirmationDialogComponent {
|
|
|
1225
1225
|
cancelText = 'Cancel';
|
|
1226
1226
|
onConfirm = new EventEmitter();
|
|
1227
1227
|
onCancel = new EventEmitter();
|
|
1228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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: `
|
|
1230
1230
|
<div class="dialog">
|
|
1231
1231
|
<div class="dialog__content">
|
|
1232
1232
|
<h3 class="dialog__title">{{ title }}</h3>
|
|
@@ -1243,7 +1243,7 @@ class ConfirmationDialogComponent {
|
|
|
1243
1243
|
</div>
|
|
1244
1244
|
`, 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"] }] });
|
|
1245
1245
|
}
|
|
1246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
1247
1247
|
type: Component,
|
|
1248
1248
|
args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [CommonModule, ButtonComponent], template: `
|
|
1249
1249
|
<div class="dialog">
|
|
@@ -1342,10 +1342,10 @@ class ApiService {
|
|
|
1342
1342
|
}
|
|
1343
1343
|
return response;
|
|
1344
1344
|
}
|
|
1345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1346
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1345
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1346
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ApiService, providedIn: 'root' });
|
|
1347
1347
|
}
|
|
1348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ApiService, decorators: [{
|
|
1349
1349
|
type: Injectable,
|
|
1350
1350
|
args: [{
|
|
1351
1351
|
providedIn: 'root'
|
|
@@ -1692,10 +1692,10 @@ class HelpCenterWidgetComponent {
|
|
|
1692
1692
|
navigateToUrl(url) {
|
|
1693
1693
|
window.open(url, '_blank');
|
|
1694
1694
|
}
|
|
1695
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1696
|
-
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 {{\n messageLabel ||\n \"Need assistance Or You want to try the Product? Click here\"\n }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n <path\n d=\"M1 1L11 11M1 11L11 1\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\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 <svg\n class=\"help-button-logo\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\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)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading\n [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n ></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)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button\n variant=\"icon-bg\"\n (click)=\"handleShowChat()\"\n class=\"chat-button\"\n className=\"button--icon\"\n >\n <svg\n class=\"icon-full\"\n viewBox=\"0 0 25 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n stroke=\"white\"\n stroke-width=\"2.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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 [isAblyConnected]=\"isAblyConnected\"\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 <svg\n class=\"logo\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">\n {{ \"BabylaiTitle\" | translate }}\n </h4>\n <p class=\"info-description\">\n {{ \"BabylaiDescription\" | translate }}\n </p>\n </div>\n </div>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n (click)=\"handleShowHelpScreenData()\"\n >\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\n variant=\"icon-bg\"\n (click)=\"navigateToUrl('https://babylai.net/signup')\"\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{\n icon: true,\n 'icon-rtl': currentLang === 'ar'\n }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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\n variant=\"icon-bg\"\n (click)=\"navigateToUrl('https://babylai.net')\"\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{\n icon: true,\n 'icon-rtl': currentLang === 'ar'\n }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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 <svg\n class=\"stars\"\n viewBox=\"0 0 244 196\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g opacity=\"0.15\">\n <path\n d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n fill=\"#AD49E1\"\n />\n </g>\n </svg>\n\n <app-help-screen-data\n [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-help-screen-data>\n </ng-container>\n </div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <a\n href=\"https://babylai.net\"\n target=\"_blank\"\n class=\"footer-link\"\n [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\"\n >\n {{ \"PoweredByBabylAI\" | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;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-button--icon{padding:.25rem!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;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["headerType", "showBackButton", "showLogo", "logoSrc", "logoAlt", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "logoSrc", "logoAlt", "language"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }] });
|
|
1695
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1696
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 {{\n messageLabel ||\n \"Need assistance Or You want to try the Product? Click here\"\n }}\n </p>\n <button class=\"close-button\" (click)=\"handleCloseArrowAnimation()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\">\n <path\n d=\"M1 1L11 11M1 11L11 1\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\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 <svg\n class=\"help-button-logo\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\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)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \"\n [language]=\"currentLang\"\n ></app-header>\n </ng-container>\n <app-loading\n [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n ></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)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n <ng-container *ngIf=\"showHelpScreenData && sessionId\">\n <app-button\n variant=\"icon-bg\"\n (click)=\"handleShowChat()\"\n class=\"chat-button\"\n className=\"button--icon\"\n >\n <svg\n class=\"icon-full\"\n viewBox=\"0 0 25 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.5 3.83801C15.9806 2.95874 14.2555 2.49712 12.5 2.50001C6.977 2.50001 2.5 6.97701 2.5 12.5C2.5 14.1 2.876 15.612 3.543 16.953C3.721 17.309 3.78 17.716 3.677 18.101L3.082 20.327C3.02307 20.5473 3.02312 20.7792 3.08216 20.9995C3.14119 21.2198 3.25712 21.4206 3.41831 21.5819C3.57951 21.7432 3.7803 21.8593 4.00053 21.9184C4.22075 21.9776 4.45267 21.9778 4.673 21.919L6.899 21.323C7.28538 21.2254 7.69414 21.2727 8.048 21.456C9.43095 22.1446 10.9551 22.502 12.5 22.5C18.023 22.5 22.5 18.023 22.5 12.5C22.5 10.679 22.013 8.97001 21.162 7.50001\"\n stroke=\"white\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n <path\n d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\"\n stroke=\"white\"\n stroke-width=\"2.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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 [isAblyConnected]=\"isAblyConnected\"\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 <svg\n class=\"logo\"\n viewBox=\"0 0 55 53\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.53125 19.1353C8.53125 12.2804 14.0883 6.72339 20.9432 6.72339H41.6298C48.4847 6.72339 54.0418 12.2804 54.0418 19.1353V52.2339H20.9432C14.0883 52.2339 8.53125 46.6769 8.53125 39.8219V19.1353Z\"\n fill=\"#E5E5E5\"\n />\n <path\n d=\"M0 12.412C0 5.55702 5.55702 0 12.412 0H33.0985C39.9535 0 45.5105 5.55702 45.5105 12.412V33.0985C45.5105 39.9535 39.9535 45.5105 33.0985 45.5105H0V12.412Z\"\n fill=\"white\"\n />\n <path\n d=\"M14.3684 15.2203C14.3696 15.2162 14.3701 15.2142 14.3704 15.2132C14.5505 14.5816 15.4457 14.5816 15.6258 15.2132C15.6261 15.2142 15.6267 15.2162 15.6278 15.2203C15.6309 15.2311 15.6324 15.2365 15.6338 15.2416C16.4708 18.1971 18.7808 20.5071 21.7364 21.3441C21.7414 21.3455 21.7468 21.3471 21.7576 21.3501C21.7617 21.3512 21.7637 21.3518 21.7647 21.3521C22.3963 21.5322 22.3963 22.4274 21.7647 22.6075C21.7637 22.6078 21.7617 22.6084 21.7576 22.6095C21.7468 22.6126 21.7414 22.6141 21.7364 22.6155C18.7808 23.4525 16.4708 25.7625 15.6338 28.7181C15.6324 28.7231 15.6309 28.7285 15.6278 28.7393C15.6267 28.7434 15.6261 28.7454 15.6258 28.7464C15.4457 29.378 14.5505 29.378 14.3704 28.7464C14.3701 28.7454 14.3696 28.7434 14.3684 28.7393C14.3654 28.7285 14.3638 28.7231 14.3624 28.7181C13.5254 25.7625 11.2154 23.4525 8.25988 22.6155C8.25481 22.6141 8.24942 22.6126 8.23864 22.6095C8.23454 22.6084 8.2325 22.6078 8.23155 22.6075C7.5999 22.4274 7.5999 21.5322 8.23155 21.3521C8.2325 21.3518 8.23454 21.3512 8.23864 21.3501C8.24942 21.3471 8.25481 21.3455 8.25988 21.3441C11.2154 20.5071 13.5254 18.1971 14.3624 15.2416C14.3638 15.2365 14.3654 15.2311 14.3684 15.2203Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M36.7198 21.8503C36.7198 24.9207 34.2886 27.4098 31.2896 27.4098C28.2906 27.4098 25.8594 24.9207 25.8594 21.8503C25.8594 18.7799 28.2906 16.2908 31.2896 16.2908C34.2886 16.2908 36.7198 18.7799 36.7198 21.8503Z\"\n fill=\"#AD49E1\"\n />\n </svg>\n </div>\n <div class=\"info-text\">\n <h4 class=\"info-title\">\n {{ \"BabylaiTitle\" | translate }}\n </h4>\n <p class=\"info-description\">\n {{ \"BabylaiDescription\" | translate }}\n </p>\n </div>\n </div>\n <app-button\n variant=\"default\"\n [fullWidth]=\"true\"\n (click)=\"handleShowHelpScreenData()\"\n >\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\n variant=\"icon-bg\"\n (click)=\"navigateToUrl('https://babylai.net/signup')\"\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{\n icon: true,\n 'icon-rtl': currentLang === 'ar'\n }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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\n variant=\"icon-bg\"\n (click)=\"navigateToUrl('https://babylai.net')\"\n >\n <svg\n width=\"100%\"\n height=\"100%\"\n [ngClass]=\"{\n icon: true,\n 'icon-rtl': currentLang === 'ar'\n }\"\n viewBox=\"0 0 9 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 0.999998L7.5 8L6 9.75M1.5 15L3.5 12.667\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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 <svg\n class=\"stars\"\n viewBox=\"0 0 244 196\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g opacity=\"0.15\">\n <path\n d=\"M61.0903 66.4434C61.101 66.4056 61.1063 66.3867 61.1088 66.3779C62.7734 60.5407 71.046 60.5407 72.7106 66.3779C72.7131 66.3867 72.7184 66.4056 72.7291 66.4434C72.7572 66.5431 72.7712 66.5929 72.7845 66.6397C80.5193 93.9529 101.867 115.3 129.18 123.035C129.227 123.048 129.276 123.062 129.376 123.09C129.414 123.101 129.433 123.106 129.441 123.109C135.279 124.773 135.279 133.046 129.441 134.711C129.433 134.713 129.414 134.718 129.376 134.729C129.276 134.757 129.227 134.771 129.18 134.784C101.867 142.519 80.5193 163.867 72.7845 191.18C72.7712 191.227 72.7572 191.276 72.7291 191.376C72.7184 191.414 72.7131 191.433 72.7106 191.441C71.046 197.279 62.7734 197.279 61.1088 191.441C61.1063 191.433 61.101 191.414 61.0903 191.376C61.0622 191.276 61.0482 191.227 61.035 191.18C53.3002 163.867 31.9529 142.519 4.63971 134.784C4.59292 134.771 4.54309 134.757 4.44342 134.729C4.40559 134.718 4.38668 134.713 4.37792 134.711C-1.45931 133.046 -1.45931 124.773 4.37792 123.109C4.38668 123.106 4.40559 123.101 4.44342 123.09C4.54309 123.062 4.59292 123.048 4.63971 123.035C31.9529 115.3 53.3002 93.9529 61.035 66.6397C61.0482 66.5929 61.0622 66.5431 61.0903 66.4434Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M188.17 50.6848C188.179 50.6534 188.183 50.6377 188.185 50.6305C189.525 45.7898 196.183 45.7898 197.523 50.6305C197.525 50.6377 197.529 50.6534 197.538 50.6848C197.561 50.7674 197.572 50.8088 197.583 50.8476C203.808 73.4975 220.99 91.2002 242.974 97.6144C243.012 97.6253 243.052 97.637 243.132 97.6603C243.162 97.6691 243.178 97.6736 243.185 97.6756C247.883 99.056 247.883 105.916 243.185 107.297C243.178 107.299 243.162 107.303 243.132 107.312C243.052 107.335 243.012 107.347 242.974 107.358C220.99 113.772 203.808 131.475 197.583 154.125C197.572 154.163 197.561 154.205 197.538 154.287C197.529 154.319 197.525 154.334 197.523 154.342C196.183 159.182 189.525 159.182 188.185 154.342C188.183 154.334 188.179 154.319 188.17 154.287C188.148 154.205 188.136 154.163 188.126 154.125C181.9 131.475 164.718 113.772 142.734 107.358C142.697 107.347 142.657 107.335 142.576 107.312C142.546 107.303 142.531 107.299 142.524 107.297C137.825 105.916 137.825 99.056 142.524 97.6756C142.531 97.6736 142.546 97.6691 142.576 97.6603C142.657 97.637 142.697 97.6253 142.734 97.6144C164.718 91.2002 181.9 73.4975 188.126 50.8476C188.136 50.8088 188.148 50.7674 188.17 50.6848Z\"\n fill=\"#AD49E1\"\n />\n <path\n d=\"M127.131 -17.2906C127.138 -17.3137 127.143 -17.3305 127.143 -17.3305C128.198 -20.8898 133.444 -20.8898 134.5 -17.3305C134.5 -17.3305 134.505 -17.3137 134.512 -17.2906C134.529 -17.2298 134.538 -17.1994 134.547 -17.1709C139.452 -0.516516 152.989 12.5001 170.309 17.2164C170.339 17.2245 170.371 17.2331 170.434 17.2502C170.458 17.2567 170.476 17.2615 170.476 17.2615C174.177 18.2765 174.177 23.3208 170.476 24.3357C170.476 24.3357 170.458 24.3405 170.434 24.347C170.371 24.3642 170.339 24.3727 170.309 24.3808C152.989 29.0971 139.452 42.1138 134.547 58.7681C134.538 58.7967 134.529 58.8271 134.512 58.8878C134.505 58.9109 134.5 58.9278 134.5 58.9278C133.444 62.4871 128.198 62.4871 127.143 58.9278C127.143 58.9278 127.138 58.9109 127.131 58.8878C127.113 58.8271 127.104 58.7967 127.096 58.7681C122.191 42.1138 108.653 29.0971 91.3329 24.3808C91.3032 24.3727 91.2716 24.3642 91.2084 24.347C91.1844 24.3405 91.1669 24.3357 91.1669 24.3357C87.4652 23.3208 87.4652 18.2765 91.1669 17.2615C91.1669 17.2615 91.1844 17.2567 91.2084 17.2502C91.2716 17.2331 91.3032 17.2245 91.3329 17.2164C108.653 12.5001 122.191 -0.516516 127.096 -17.1709C127.104 -17.1994 127.113 -17.2298 127.131 -17.2906Z\"\n fill=\"#AD49E1\"\n />\n </g>\n </svg>\n\n <app-help-screen-data\n [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-help-screen-data>\n </ng-container>\n </div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <a\n href=\"https://babylai.net\"\n target=\"_blank\"\n class=\"footer-link\"\n [ngClass]=\"{ 'light-text': !showHelpScreenData && !showChat }\"\n >\n {{ \"PoweredByBabylAI\" | translate }}\n </a>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.help-center-container{position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000;width:auto;height:auto;display:flex;flex-direction:column;align-items:flex-end}.arrow-animation{position:fixed;bottom:5rem;right:1rem;z-index:1300;display:flex;flex-direction:column;align-items:flex-end;animation:float 3s infinite ease-in-out}.arrow-animation .message-box{background-color:#ad49e1;color:#fff;padding:.75rem 1rem;border-radius:9999px;box-shadow:#64646f33 0 7px 29px;margin-bottom:1rem;max-width:200px;position:relative}.arrow-animation .message-box p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-8px;right:-8px;width:1.25rem;height:1.25rem;border-radius:9999px;background-color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#171717;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:#451d5a;color:#fff}.arrow-animation .message-box .arrow-tip{position:absolute;bottom:-10px;right:1.25rem;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #ad49e1}.help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:#ad49e1;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:#451d5a;transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem}.help-popup{position:fixed;bottom:5rem;right:1.25rem;width:360px;height:calc(100vh - 12rem);max-height:800px;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-button--icon{padding:.25rem!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;inset-inline-end:0;width:15.42rem;height:13.49rem;opacity:.5;z-index:-1}.intro-section{display:flex;flex-direction:column;gap:1rem}.intro-section .intro-title{font-size:3.75rem;font-weight:700;color:#fff;line-height:3.5rem}.cards-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;width:100%;box-sizing:border-box;padding:0}.cards-section app-card{width:100%;display:block}.cards-section app-card ::ng-deep .card{width:100%;box-sizing:border-box}.cards-section app-card ::ng-deep .card__content{width:100%;box-sizing:border-box}.card-content{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box}.babylai-info{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%}.logo-container{display:flex;align-items:center;justify-content:center;max-width:3rem;min-width:3rem;width:3rem;height:3rem;border-radius:9999px;background-color:#ad49e1}.logo-container .logo{width:1.25rem;height:1.25rem}.info-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;flex:1}.info-text .info-title{font-size:1rem;color:#606060;font-weight:600}.info-text .info-description{font-size:1rem;color:#0a0a0a}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:#0a0a0a}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem}.footer .footer-link{font-size:.75rem;color:#919191;width:100%;text-align:center}.footer .footer-link.light-text{color:#fff}.icon-full{width:100%}\n", "@import\"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap\";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}ul,ol{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-family:Cairo,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}button{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-decoration:none}table{border-collapse:collapse;border-spacing:0}:root{--black-white-50: #ffffff;--black-white-100: #f3f3f3;--black-white-200: #e2e2e2;--black-white-300: #919191;--black-white-400: #606060;--black-white-500: #333333;--black-white-600: #1f1f1f;--black-white-700: #171717;--black-white-800: #0a0a0a;--black-white-900: #050505;--black-white-950: #000000;--black-white-default: #333333}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-accordion-down{animation:accordion-down .2s ease-out}.animate-accordion-up{animation:accordion-up .2s ease-out}.animate-float{animation:float 3s infinite ease-in-out}html,body{font-family:Cairo,sans-serif}div#wave{position:relative}div#wave .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;background:#ad49e1;animation:wave 1.3s linear infinite}div#wave .dot:nth-child(2){animation-delay:-1.1s}div#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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", "isAblyConnected", "isChatClosed", "currentLang", "loading"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText"], outputs: ["onConfirm", "onCancel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1697
1697
|
}
|
|
1698
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
|
|
1699
1699
|
type: Component,
|
|
1700
1700
|
args: [{ selector: 'app-help-center-widget', standalone: true, imports: [
|
|
1701
1701
|
CommonModule,
|
|
@@ -1743,10 +1743,10 @@ class HelpCenterConfigService {
|
|
|
1743
1743
|
getTokenFn() {
|
|
1744
1744
|
return this._getTokenFn;
|
|
1745
1745
|
}
|
|
1746
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1747
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1747
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
|
|
1748
1748
|
}
|
|
1749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: HelpCenterConfigService, decorators: [{
|
|
1750
1750
|
type: Injectable,
|
|
1751
1751
|
args: [{
|
|
1752
1752
|
providedIn: 'root'
|
|
@@ -1771,10 +1771,10 @@ class TokenService {
|
|
|
1771
1771
|
// Otherwise, return error that getTokenFn is not provided
|
|
1772
1772
|
throw new Error('getTokenFn is not provided');
|
|
1773
1773
|
}
|
|
1774
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1775
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1774
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TokenService, deps: [{ token: HelpCenterConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1775
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TokenService, providedIn: 'root' });
|
|
1776
1776
|
}
|
|
1777
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1777
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: TokenService, decorators: [{
|
|
1778
1778
|
type: Injectable,
|
|
1779
1779
|
args: [{
|
|
1780
1780
|
providedIn: 'root'
|
|
@@ -1793,10 +1793,10 @@ class LanguageService {
|
|
|
1793
1793
|
getCurrentLang() {
|
|
1794
1794
|
return this.translationService.getCurrentLang();
|
|
1795
1795
|
}
|
|
1796
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1797
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1796
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LanguageService, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1797
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LanguageService, providedIn: 'root' });
|
|
1798
1798
|
}
|
|
1799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: LanguageService, decorators: [{
|
|
1800
1800
|
type: Injectable,
|
|
1801
1801
|
args: [{
|
|
1802
1802
|
providedIn: 'root'
|