@aslaluroba/help-center 3.0.11 → 3.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -1
- package/fesm2022/aslaluroba-help-center.mjs +399 -46
- package/fesm2022/aslaluroba-help-center.mjs.map +1 -1
- package/index.d.ts +34 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, Component, Injectable, inject, Pipe, HostBinding, ViewEncapsulation, ViewChild, HostListener } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Output, Input, Component, Injectable, inject, Pipe, HostBinding, ViewEncapsulation, ViewChild, signal, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
@@ -164,11 +164,11 @@ class ArrowAnimationComponent {
|
|
|
164
164
|
this.closeArrowAnimation.emit();
|
|
165
165
|
}
|
|
166
166
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ArrowAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ArrowAnimationComponent, isStandalone: true, selector: "app-arrow-animation", inputs: { showArrowAnimation: "showArrowAnimation", isPopupOpen: "isPopupOpen", messageLabel: "messageLabel" }, outputs: { closeArrowAnimation: "closeArrowAnimation" }, ngImport: i0, template: "@if (showArrowAnimation && !isPopupOpen) {\n<div 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", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.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:var(--babylai-primary-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
|
|
167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ArrowAnimationComponent, isStandalone: true, selector: "app-arrow-animation", inputs: { showArrowAnimation: "showArrowAnimation", isPopupOpen: "isPopupOpen", messageLabel: "messageLabel" }, outputs: { closeArrowAnimation: "closeArrowAnimation" }, ngImport: i0, template: "@if (showArrowAnimation && !isPopupOpen) {\n<div 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", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.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:var(--babylai-primary-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:var(--black-white-50);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--black-white-700);padding:3px}.arrow-animation .message-box .close-button:hover{background-color:var(--babylai-primary-color-700, #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 var(--babylai-primary-color, #ad49e1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
168
168
|
}
|
|
169
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ArrowAnimationComponent, decorators: [{
|
|
170
170
|
type: Component,
|
|
171
|
-
args: [{ selector: 'app-arrow-animation', standalone: true, imports: [CommonModule], template: "@if (showArrowAnimation && !isPopupOpen) {\n<div 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", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.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:var(--babylai-primary-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
|
|
171
|
+
args: [{ selector: 'app-arrow-animation', standalone: true, imports: [CommonModule], template: "@if (showArrowAnimation && !isPopupOpen) {\n<div 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", styles: ["@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.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:var(--babylai-primary-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:var(--black-white-50);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--black-white-700);padding:3px}.arrow-animation .message-box .close-button:hover{background-color:var(--babylai-primary-color-700, #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 var(--babylai-primary-color, #ad49e1)}\n"] }]
|
|
172
172
|
}], propDecorators: { showArrowAnimation: [{
|
|
173
173
|
type: Input
|
|
174
174
|
}], isPopupOpen: [{
|
|
@@ -211,6 +211,15 @@ class TranslationService {
|
|
|
211
211
|
EndChat: 'End Chat',
|
|
212
212
|
LeavingDialogTitle: 'Leaving so soon? 👋',
|
|
213
213
|
LeavingDialogBody: "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
|
|
214
|
+
StartNewChatDialogTitle: 'End and Start New Chat',
|
|
215
|
+
StartNewChatDialogBody: 'Are you sure you want to end the current conversation and start a new one?',
|
|
216
|
+
ReviewDialogTitle: 'Add your Review',
|
|
217
|
+
ReviewDialogDescription: 'We appreciate your feedback! Please take a moment to rate your experience and share your thoughts in the comment section below. Your review helps us improve our services and assists other users in making informed decisions. Thank you!',
|
|
218
|
+
ReviewDialogRatingLabel: 'Rating:',
|
|
219
|
+
ReviewDialogCommentLabel: 'Comment:',
|
|
220
|
+
ReviewDialogCommentPlaceholder: 'Write your comment here...',
|
|
221
|
+
ReviewDialogSubmitButton: 'Submit Review',
|
|
222
|
+
ReviewDialogSkipButton: 'Skip',
|
|
214
223
|
Confirm: 'Confirm',
|
|
215
224
|
Cancel: 'Cancel',
|
|
216
225
|
title: 'Help Center'
|
|
@@ -229,6 +238,15 @@ class TranslationService {
|
|
|
229
238
|
EndChat: 'إنهاء الدردشة',
|
|
230
239
|
LeavingDialogTitle: 'هل تغادر بالفعل؟ 👋',
|
|
231
240
|
LeavingDialogBody: 'لا تقلق، يمكنك العودة في أي وقت. نحن دائماً هنا إذا كنت بحاجة إلى مساعدة أو لديك أسئلة.',
|
|
241
|
+
StartNewChatDialogTitle: 'إنهاء وبدء دردشة جديدة',
|
|
242
|
+
StartNewChatDialogBody: 'هل أنت متأكد من أنك تريد إنهاء المحادثة الحالية وبدء محادثة جديدة؟',
|
|
243
|
+
ReviewDialogTitle: 'أضف تقييمك',
|
|
244
|
+
ReviewDialogDescription: 'نقدر ملاحظاتك! يرجى قضاء لحظة لتقييم تجربتك ومشاركة أفكارك في قسم التعليقات أدناه. تقييمك يساعدنا في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مدروسة. شكراً لك!',
|
|
245
|
+
ReviewDialogRatingLabel: 'التقييم:',
|
|
246
|
+
ReviewDialogCommentLabel: 'التعليق:',
|
|
247
|
+
ReviewDialogCommentPlaceholder: 'اكتب تعليقك هنا...',
|
|
248
|
+
ReviewDialogSubmitButton: 'إرسال التقييم',
|
|
249
|
+
ReviewDialogSkipButton: 'تخطي',
|
|
232
250
|
Confirm: 'تأكيد',
|
|
233
251
|
Cancel: 'إلغاء',
|
|
234
252
|
title: 'مركز المساعدة'
|
|
@@ -314,7 +332,7 @@ class ButtonComponent {
|
|
|
314
332
|
>
|
|
315
333
|
<ng-content></ng-content>
|
|
316
334
|
</button>
|
|
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:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--outline{background-color:transparent;color:var(--babylai-primary-color, #ad49e1);border:1px solid var(--babylai-primary-color, #ad49e1);padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1)}.button--icon-bg{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.75rem 1rem;border-radius:9999px;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--white-bg{background-color
|
|
335
|
+
`, isInline: true, styles: [".button{cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center;position:relative}.button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.button--rtl{direction:rtl}.button--rtl img{transform:scaleX(-1)}.button--default{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--outline{background-color:transparent;color:var(--babylai-primary-color, #ad49e1);border:1px solid var(--babylai-primary-color, #ad49e1);padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1);border-color:var(--babylai-primary-color-600, #672b87)}.button--outline:focus-visible{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1);border-color:var(--ring)}.button--icon-bg{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.75rem 1rem;border-radius:9999px;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--white-bg{background-color:var(--black-white-50)}.button--icon-bg.button--white-bg:hover{background-color:var(--black-white-100)}.button--icon-bg.button--light-bg{background-color:var(--babylai-primary-color-100, #f6ecfc);color:var(--babylai-primary-color, #ad49e1)}.button--icon-bg.button--light-bg:hover{background-color:var(--babylai-primary-color-200, #deb6f3)}.button--icon-bg.button--close-button{color:var(--babylai-primary-color, #ad49e1);padding:.5rem;border:none}.button--icon-bg.button--close-button:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--small{padding:.5rem;width:1.75rem;height:1.75rem}.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
336
|
}
|
|
319
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
320
338
|
type: Component,
|
|
@@ -328,7 +346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
328
346
|
>
|
|
329
347
|
<ng-content></ng-content>
|
|
330
348
|
</button>
|
|
331
|
-
`, 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:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--outline{background-color:transparent;color:var(--babylai-primary-color, #ad49e1);border:1px solid var(--babylai-primary-color, #ad49e1);padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1)}.button--icon-bg{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.75rem 1rem;border-radius:9999px;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--white-bg{background-color
|
|
349
|
+
`, styles: [".button{cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center;position:relative}.button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}.button--rtl{direction:rtl}.button--rtl img{transform:scaleX(-1)}.button--default{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.5rem 1rem;border-radius:9999px;border:none}.button--default:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--outline{background-color:transparent;color:var(--babylai-primary-color, #ad49e1);border:1px solid var(--babylai-primary-color, #ad49e1);padding:.5rem 1rem;border-radius:9999px}.button--outline:hover{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1);border-color:var(--babylai-primary-color-600, #672b87)}.button--outline:focus-visible{background-color:rgba(var(--babylai-primary-color, #ad49e1),.1);border-color:var(--ring)}.button--icon-bg{background-color:var(--babylai-primary-color, #ad49e1);color:#fff;padding:.75rem 1rem;border-radius:9999px;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none}.button--icon-bg:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--white-bg{background-color:var(--black-white-50)}.button--icon-bg.button--white-bg:hover{background-color:var(--black-white-100)}.button--icon-bg.button--light-bg{background-color:var(--babylai-primary-color-100, #f6ecfc);color:var(--babylai-primary-color, #ad49e1)}.button--icon-bg.button--light-bg:hover{background-color:var(--babylai-primary-color-200, #deb6f3)}.button--icon-bg.button--close-button{color:var(--babylai-primary-color, #ad49e1);padding:.5rem;border:none}.button--icon-bg.button--close-button:hover{background-color:var(--babylai-primary-color-300, #d49cee)}.button--icon-bg.button--small{padding:.5rem;width:1.75rem;height:1.75rem}.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"] }]
|
|
332
350
|
}], propDecorators: { variant: [{
|
|
333
351
|
type: Input
|
|
334
352
|
}], type: [{
|
|
@@ -452,11 +470,11 @@ class CardComponent {
|
|
|
452
470
|
return classes.join(' ');
|
|
453
471
|
}
|
|
454
472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
456
474
|
}
|
|
457
475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardComponent, decorators: [{
|
|
458
476
|
type: Component,
|
|
459
|
-
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
|
|
477
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
460
478
|
}], propDecorators: { variant: [{
|
|
461
479
|
type: Input
|
|
462
480
|
}], class: [{
|
|
@@ -475,11 +493,11 @@ class CardHeaderComponent {
|
|
|
475
493
|
return classes.join(' ');
|
|
476
494
|
}
|
|
477
495
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
479
497
|
}
|
|
480
498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
481
499
|
type: Component,
|
|
482
|
-
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
|
|
500
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
483
501
|
}], propDecorators: { class: [{
|
|
484
502
|
type: Input
|
|
485
503
|
}], hostClasses: [{
|
|
@@ -496,11 +514,11 @@ class CardTitleComponent {
|
|
|
496
514
|
return classes.join(' ');
|
|
497
515
|
}
|
|
498
516
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
499
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
517
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
500
518
|
}
|
|
501
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardTitleComponent, decorators: [{
|
|
502
520
|
type: Component,
|
|
503
|
-
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
|
|
521
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
504
522
|
}], propDecorators: { class: [{
|
|
505
523
|
type: Input
|
|
506
524
|
}], hostClasses: [{
|
|
@@ -517,11 +535,11 @@ class CardDescriptionComponent {
|
|
|
517
535
|
return classes.join(' ');
|
|
518
536
|
}
|
|
519
537
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
520
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
538
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
521
539
|
}
|
|
522
540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardDescriptionComponent, decorators: [{
|
|
523
541
|
type: Component,
|
|
524
|
-
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
|
|
542
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
525
543
|
}], propDecorators: { class: [{
|
|
526
544
|
type: Input
|
|
527
545
|
}], hostClasses: [{
|
|
@@ -538,11 +556,11 @@ class CardContentComponent {
|
|
|
538
556
|
return classes.join(' ');
|
|
539
557
|
}
|
|
540
558
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
541
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
559
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
542
560
|
}
|
|
543
561
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardContentComponent, decorators: [{
|
|
544
562
|
type: Component,
|
|
545
|
-
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
|
|
563
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
546
564
|
}], propDecorators: { class: [{
|
|
547
565
|
type: Input
|
|
548
566
|
}], hostClasses: [{
|
|
@@ -559,11 +577,11 @@ class CardFooterComponent {
|
|
|
559
577
|
return classes.join(' ');
|
|
560
578
|
}
|
|
561
579
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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
|
|
580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", 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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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 });
|
|
563
581
|
}
|
|
564
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CardFooterComponent, decorators: [{
|
|
565
583
|
type: Component,
|
|
566
|
-
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
|
|
584
|
+
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 var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{border-radius:1.5rem;background-color:var(--card);padding:.25rem .5rem;display:block}.card--shadowed{border-radius:.5rem;border:1px solid var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__header{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem;width:100%}.card__title{font-weight:600;line-height:1;letter-spacing:-.02em;width:100%}.card__description{font-size:.875rem;color:var(--muted-foreground);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"] }]
|
|
567
585
|
}], propDecorators: { class: [{
|
|
568
586
|
type: Input
|
|
569
587
|
}], hostClasses: [{
|
|
@@ -607,11 +625,11 @@ class HelpScreenDataComponent {
|
|
|
607
625
|
this.handleStartNewChat.emit(option);
|
|
608
626
|
}
|
|
609
627
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", 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 @for (item of helpScreenData?.options; track item.id) {\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 class=\"help-screen__arrow-container\" [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\">\n <!-- <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" /> -->\n <svg class=\"help-screen__header__back-button-icon\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n @if (expandedItemId === item.id) {\n <div class=\"help-screen__content\">\n @for (paragraph of item.paragraphs; track paragraph) {\n <div class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n }\n </div>\n @if (item?.chatWithUs) {\n <footer class=\"help-screen__footer\">\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </footer>\n }\n }\n </app-card-content>\n </app-card>\n }\n</div>", 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.25rem;font-weight:700;color
|
|
628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", 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 @for (item of helpScreenData?.options; track item.id) {\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 class=\"help-screen__arrow-container\" [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\">\n <!-- <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" /> -->\n <svg class=\"help-screen__header__back-button-icon\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n @if (expandedItemId === item.id) {\n <div class=\"help-screen__content\">\n @for (paragraph of item.paragraphs; track paragraph) {\n <div class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n }\n </div>\n @if (item?.chatWithUs) {\n <footer class=\"help-screen__footer\">\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </footer>\n }\n }\n </app-card-content>\n </app-card>\n }\n</div>", 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.25rem;font-weight:700;color:var(--card-foreground);margin-top:.5rem;margin-bottom:1rem;line-height:1}.help-screen__card{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top;background-color:var(--card)}.help-screen__card:hover{box-shadow:#64646f33 0 7px 29px;transform:translateY(-2px)}.help-screen__card.expanded{background-color:var(--secondary)}.help-screen__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem}.help-screen__header__back-button-icon{width:1rem;height:1rem}.help-screen__title-text{font-size:.875rem;color:var(--card-foreground);font-weight:500}.help-screen__arrow-container{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;color:var(--babylai-primary-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:.75rem;height:.75rem}.help-screen__content{animation:slideDown .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.5rem;padding:0 1.5rem 1.5rem;transform-origin:top}.help-screen__paragraph{font-size:1rem;color:var(--card-foreground)}.help-screen__footer{font-size:.75rem;padding:0 1.5rem 1.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: "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" }] });
|
|
611
629
|
}
|
|
612
630
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
|
|
613
631
|
type: Component,
|
|
614
|
-
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 @for (item of helpScreenData?.options; track item.id) {\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 class=\"help-screen__arrow-container\" [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\">\n <!-- <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" /> -->\n <svg class=\"help-screen__header__back-button-icon\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n @if (expandedItemId === item.id) {\n <div class=\"help-screen__content\">\n @for (paragraph of item.paragraphs; track paragraph) {\n <div class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n }\n </div>\n @if (item?.chatWithUs) {\n <footer class=\"help-screen__footer\">\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </footer>\n }\n }\n </app-card-content>\n </app-card>\n }\n</div>", 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.25rem;font-weight:700;color
|
|
632
|
+
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 @for (item of helpScreenData?.options; track item.id) {\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 class=\"help-screen__arrow-container\" [ngClass]=\"{\n 'help-screen__arrow-container--expanded': expandedItemId === item.id,\n 'help-screen__arrow-container--collapsed': expandedItemId !== item.id\n }\">\n <!-- <img src=\"/icons/arrow-stripped-colored.svg\" alt=\"arrow-down\" /> -->\n <svg class=\"help-screen__header__back-button-icon\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </div>\n\n <!-- Expanded content (visible only when expanded) -->\n @if (expandedItemId === item.id) {\n <div class=\"help-screen__content\">\n @for (paragraph of item.paragraphs; track paragraph) {\n <div class=\"help-screen__paragraph\">\n {{ paragraph }}\n </div>\n }\n </div>\n @if (item?.chatWithUs) {\n <footer class=\"help-screen__footer\">\n <app-button variant=\"default\" [fullWidth]=\"true\" (click)=\"handleStartChat(item)\">\n {{ 'ChatNow' | translate }}\n </app-button>\n </footer>\n }\n }\n </app-card-content>\n </app-card>\n }\n</div>", 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.25rem;font-weight:700;color:var(--card-foreground);margin-top:.5rem;margin-bottom:1rem;line-height:1}.help-screen__card{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:top;background-color:var(--card)}.help-screen__card:hover{box-shadow:#64646f33 0 7px 29px;transform:translateY(-2px)}.help-screen__card.expanded{background-color:var(--secondary)}.help-screen__header{display:flex;align-items:center;justify-content:space-between;padding:.5rem}.help-screen__header__back-button-icon{width:1rem;height:1rem}.help-screen__title-text{font-size:.875rem;color:var(--card-foreground);font-weight:500}.help-screen__arrow-container{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;color:var(--babylai-primary-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:.75rem;height:.75rem}.help-screen__content{animation:slideDown .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.5rem;padding:0 1.5rem 1.5rem;transform-origin:top}.help-screen__paragraph{font-size:1rem;color:var(--card-foreground)}.help-screen__footer{font-size:.75rem;padding:0 1.5rem 1.5rem}.help-screen__button{width:100%;margin-top:.5rem;animation:slideDown .3s cubic-bezier(.4,0,.2,1) .1s}\n"] }]
|
|
615
633
|
}], propDecorators: { helpScreenData: [{
|
|
616
634
|
type: Input
|
|
617
635
|
}], title: [{
|
|
@@ -713,11 +731,11 @@ class ChatAvatarComponent {
|
|
|
713
731
|
needsAgent = false;
|
|
714
732
|
isHidden = false;
|
|
715
733
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
716
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChatAvatarComponent, isStandalone: true, selector: "app-chat-avatar", inputs: { senderType: "senderType", needsAgent: "needsAgent", isHidden: "isHidden" }, ngImport: i0, template: "<div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"isHidden\"\n>\n @if (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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent || 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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n }\n</div>\n", styles: [".chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:var(--babylai-primary-color, #ad49e1)}.chat__avatar-wrapper--agent{background-color
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChatAvatarComponent, isStandalone: true, selector: "app-chat-avatar", inputs: { senderType: "senderType", needsAgent: "needsAgent", isHidden: "isHidden" }, ngImport: i0, template: "<div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"isHidden\"\n>\n @if (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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent || 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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n }\n</div>\n", styles: [".chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:var(--babylai-primary-color, #ad49e1)}.chat__avatar-wrapper--agent{background-color:var(--black-white-50)}.chat__avatar-image{width:100%;color:var(--babylai-primary-color-500, #ad49e1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
717
735
|
}
|
|
718
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatAvatarComponent, decorators: [{
|
|
719
737
|
type: Component,
|
|
720
|
-
args: [{ selector: 'app-chat-avatar', standalone: true, imports: [CommonModule], template: "<div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"isHidden\"\n>\n @if (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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent || 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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n }\n</div>\n", styles: [".chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:var(--babylai-primary-color, #ad49e1)}.chat__avatar-wrapper--agent{background-color
|
|
738
|
+
args: [{ selector: 'app-chat-avatar', standalone: true, imports: [CommonModule], template: "<div\n class=\"chat__avatar\"\n [class.chat__avatar--hidden]=\"isHidden\"\n>\n @if (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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n } @else if (needsAgent || 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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </svg>\n </span>\n }\n</div>\n", styles: [".chat__avatar--hidden{visibility:hidden}.chat__avatar-wrapper{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;padding:.5rem}.chat__avatar-wrapper--assistant{background-color:var(--babylai-primary-color, #ad49e1)}.chat__avatar-wrapper--agent{background-color:var(--black-white-50)}.chat__avatar-image{width:100%;color:var(--babylai-primary-color-500, #ad49e1)}\n"] }]
|
|
721
739
|
}], propDecorators: { senderType: [{
|
|
722
740
|
type: Input
|
|
723
741
|
}], needsAgent: [{
|
|
@@ -735,7 +753,7 @@ class ChatMessageComponent {
|
|
|
735
753
|
return content.replace(/```/g, '\\`\\`\\`');
|
|
736
754
|
}
|
|
737
755
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
738
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ChatMessageComponent, isStandalone: true, selector: "app-chat-message", inputs: { message: "message", needsAgent: "needsAgent", currentLang: "currentLang", isHidden: "isHidden" }, ngImport: i0, template: "<div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n>\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent\"\n [isHidden]=\"isHidden\"\n />\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", styles: [".chat__message-container{display:flex;align-items:flex-start;gap:.75rem}.chat__message-container--user{flex-direction:row-reverse}.chat__message{max-width:80%;position:relative;border-radius:1rem;padding:1rem}.chat__message--user{align-self:flex-start;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color
|
|
756
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ChatMessageComponent, isStandalone: true, selector: "app-chat-message", inputs: { message: "message", needsAgent: "needsAgent", currentLang: "currentLang", isHidden: "isHidden" }, ngImport: i0, template: "<div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n>\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent\"\n [isHidden]=\"isHidden\"\n />\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", styles: [".chat__message-container{display:flex;align-items:flex-start;gap:.75rem}.chat__message-container--user{flex-direction:row-reverse}.chat__message{max-width:80%;position:relative;border-radius:1rem;padding:1rem}.chat__message--user{align-self:flex-start;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:var(--card);color:var(--card-foreground);direction:rtl}.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:var(--card-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: MarkdownRendererComponent, selector: "app-markdown-renderer", inputs: ["content", "inline", "cssClass", "dir"] }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }] });
|
|
739
757
|
}
|
|
740
758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatMessageComponent, decorators: [{
|
|
741
759
|
type: Component,
|
|
@@ -745,7 +763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
745
763
|
CardContentComponent,
|
|
746
764
|
MarkdownRendererComponent,
|
|
747
765
|
ChatAvatarComponent,
|
|
748
|
-
], template: "<div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n>\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent\"\n [isHidden]=\"isHidden\"\n />\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", styles: [".chat__message-container{display:flex;align-items:flex-start;gap:.75rem}.chat__message-container--user{flex-direction:row-reverse}.chat__message{max-width:80%;position:relative;border-radius:1rem;padding:1rem}.chat__message--user{align-self:flex-start;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color
|
|
766
|
+
], template: "<div\n class=\"chat__message-container\"\n [class.chat__message-container--user]=\"message.senderType === 1\"\n>\n <app-chat-avatar\n [senderType]=\"message.senderType\"\n [needsAgent]=\"needsAgent\"\n [isHidden]=\"isHidden\"\n />\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", styles: [".chat__message-container{display:flex;align-items:flex-start;gap:.75rem}.chat__message-container--user{flex-direction:row-reverse}.chat__message{max-width:80%;position:relative;border-radius:1rem;padding:1rem}.chat__message--user{align-self:flex-start;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;direction:rtl}.chat__message--assistant,.chat__message--agent{align-self:flex-end;background-color:var(--card);color:var(--card-foreground);direction:rtl}.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:var(--card-foreground)}\n"] }]
|
|
749
767
|
}], propDecorators: { message: [{
|
|
750
768
|
type: Input
|
|
751
769
|
}], needsAgent: [{
|
|
@@ -796,11 +814,11 @@ class ChatInputComponent {
|
|
|
796
814
|
}
|
|
797
815
|
}
|
|
798
816
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ChatInputComponent, isStandalone: true, selector: "app-chat-input", inputs: { isChatClosed: "isChatClosed", assistantStatus: "assistantStatus", currentLang: "currentLang" }, outputs: { sendMessage: "sendMessage" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<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 #messageInput\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", styles: [".chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;padding-inline:1rem 4rem;padding-block:1rem;border-radius:9999px;border:1px solid
|
|
817
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: ChatInputComponent, isStandalone: true, selector: "app-chat-input", inputs: { isChatClosed: "isChatClosed", assistantStatus: "assistantStatus", currentLang: "currentLang" }, outputs: { sendMessage: "sendMessage" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<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 #messageInput\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", styles: [".chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;padding-inline:1rem 4rem;padding-block:1rem;border-radius:9999px;border:1px solid var(--border);background-color:var(--input);color:var(--foreground);font-size:1rem;transition:all .2s ease-in-out;font-size:.875rem}.chat__input:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--babylai-primary-color, #ad49e1),.1)}.chat__input:disabled{background-color:var(--muted);color:var(--muted-foreground);cursor:not-allowed;opacity:.6}.chat__input::placeholder{color:var(--muted-foreground);opacity:.8}.chat__send-button{position:absolute!important;inset-inline-end:1rem;top:50%;transform:translateY(-50%);width:1.75rem;height:1.75rem;padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);transition:all .2s ease-in-out;opacity:1;border:none}.chat__send-button:hover:not(:disabled){background-color:var(--babylai-primary-color-600, #672b87);transform:translateY(-50%) scale(1.05)}.chat__send-button:disabled{cursor:not-allowed;opacity:.5;background-color:var(--muted)}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
800
818
|
}
|
|
801
819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatInputComponent, decorators: [{
|
|
802
820
|
type: Component,
|
|
803
|
-
args: [{ selector: 'app-chat-input', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], template: "<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 #messageInput\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", styles: [".chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;padding-inline:1rem 4rem;padding-block:1rem;border-radius:9999px;border:1px solid
|
|
821
|
+
args: [{ selector: 'app-chat-input', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], template: "<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 #messageInput\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", styles: [".chat__input-container,.chat__input-wrapper{position:relative;width:100%}.chat__input{width:100%;padding-inline:1rem 4rem;padding-block:1rem;border-radius:9999px;border:1px solid var(--border);background-color:var(--input);color:var(--foreground);font-size:1rem;transition:all .2s ease-in-out;font-size:.875rem}.chat__input:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--babylai-primary-color, #ad49e1),.1)}.chat__input:disabled{background-color:var(--muted);color:var(--muted-foreground);cursor:not-allowed;opacity:.6}.chat__input::placeholder{color:var(--muted-foreground);opacity:.8}.chat__send-button{position:absolute!important;inset-inline-end:1rem;top:50%;transform:translateY(-50%);width:1.75rem;height:1.75rem;padding:.375rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);transition:all .2s ease-in-out;opacity:1;border:none}.chat__send-button:hover:not(:disabled){background-color:var(--babylai-primary-color-600, #672b87);transform:translateY(-50%) scale(1.05)}.chat__send-button:disabled{cursor:not-allowed;opacity:.5;background-color:var(--muted)}.chat__send-button-icon{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}.chat__send-button-icon--rtl{transform:rotate(270deg)}\n"] }]
|
|
804
822
|
}], propDecorators: { isChatClosed: [{
|
|
805
823
|
type: Input
|
|
806
824
|
}], assistantStatus: [{
|
|
@@ -914,7 +932,7 @@ class ConfirmationDialogComponent {
|
|
|
914
932
|
</div>
|
|
915
933
|
</div>
|
|
916
934
|
</div>
|
|
917
|
-
`, isInline: true, styles: [".dialog{position:absolute;inset:0;background-color
|
|
935
|
+
`, isInline: true, styles: [".dialog{position:absolute;inset:0;background-color:rgba(var(--card-foreground),.5);z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.dialog__content{background-color:var(--card);border-radius:1.5rem;padding:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 3px 0 var(--babylai-primary-color-200)}.dialog__title{font-size:1rem;font-weight:700;margin-bottom:.5rem;text-align:center}.dialog__body{color:var(--card-foreground);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:var(--card-foreground)!important;border:1px solid var(--card-foreground)!important;width:100%!important}.dialog__cancel-button:hover{background-color:rgba(var(--card-foreground),.1)!important;border-color:var(--card-foreground)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }] });
|
|
918
936
|
}
|
|
919
937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
920
938
|
type: Component,
|
|
@@ -933,7 +951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
933
951
|
</div>
|
|
934
952
|
</div>
|
|
935
953
|
</div>
|
|
936
|
-
`, styles: [".dialog{position:absolute;inset:0;background-color
|
|
954
|
+
`, styles: [".dialog{position:absolute;inset:0;background-color:rgba(var(--card-foreground),.5);z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.dialog__content{background-color:var(--card);border-radius:1.5rem;padding:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 3px 0 var(--babylai-primary-color-200)}.dialog__title{font-size:1rem;font-weight:700;margin-bottom:.5rem;text-align:center}.dialog__body{color:var(--card-foreground);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:var(--card-foreground)!important;border:1px solid var(--card-foreground)!important;width:100%!important}.dialog__cancel-button:hover{background-color:rgba(var(--card-foreground),.1)!important;border-color:var(--card-foreground)!important}\n"] }]
|
|
937
955
|
}], propDecorators: { title: [{
|
|
938
956
|
type: Input
|
|
939
957
|
}], body: [{
|
|
@@ -948,6 +966,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
948
966
|
type: Output
|
|
949
967
|
}] } });
|
|
950
968
|
|
|
969
|
+
class ReviewDialogComponent {
|
|
970
|
+
isOpen = false;
|
|
971
|
+
isSubmitting = false;
|
|
972
|
+
close = new EventEmitter();
|
|
973
|
+
submitReview = new EventEmitter();
|
|
974
|
+
skip = new EventEmitter();
|
|
975
|
+
rating = 0;
|
|
976
|
+
comment = '';
|
|
977
|
+
// Validation errors
|
|
978
|
+
ratingError = '';
|
|
979
|
+
commentError = '';
|
|
980
|
+
onRatingClick(starIndex) {
|
|
981
|
+
this.rating = starIndex + 1;
|
|
982
|
+
this.clearRatingError();
|
|
983
|
+
}
|
|
984
|
+
onCommentChange() {
|
|
985
|
+
this.clearCommentError();
|
|
986
|
+
}
|
|
987
|
+
onClose() {
|
|
988
|
+
if (!this.isSubmitting) {
|
|
989
|
+
this.close.emit();
|
|
990
|
+
}
|
|
991
|
+
}
|
|
992
|
+
onSubmitReview() {
|
|
993
|
+
if (this.validateForm() && !this.isSubmitting) {
|
|
994
|
+
this.submitReview.emit({
|
|
995
|
+
rating: this.rating,
|
|
996
|
+
comment: this.comment.trim()
|
|
997
|
+
});
|
|
998
|
+
// Don't reset form immediately - wait for parent to handle submission
|
|
999
|
+
}
|
|
1000
|
+
}
|
|
1001
|
+
onSkip() {
|
|
1002
|
+
if (!this.isSubmitting) {
|
|
1003
|
+
this.skip.emit();
|
|
1004
|
+
this.resetForm();
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
validateForm() {
|
|
1008
|
+
let isValid = true;
|
|
1009
|
+
// Validate rating
|
|
1010
|
+
if (this.rating < 1 || this.rating > 5) {
|
|
1011
|
+
this.ratingError = 'Rating must be between 1 and 5.';
|
|
1012
|
+
isValid = false;
|
|
1013
|
+
}
|
|
1014
|
+
// Validate comment
|
|
1015
|
+
const trimmedComment = this.comment.trim();
|
|
1016
|
+
if (trimmedComment.length < 10) {
|
|
1017
|
+
this.commentError = 'Comment must be at least 10 characters long.';
|
|
1018
|
+
isValid = false;
|
|
1019
|
+
}
|
|
1020
|
+
else if (trimmedComment.length > 500) {
|
|
1021
|
+
this.commentError = 'Comment must not exceed 500 characters.';
|
|
1022
|
+
isValid = false;
|
|
1023
|
+
}
|
|
1024
|
+
return isValid;
|
|
1025
|
+
}
|
|
1026
|
+
clearRatingError() {
|
|
1027
|
+
this.ratingError = '';
|
|
1028
|
+
}
|
|
1029
|
+
clearCommentError() {
|
|
1030
|
+
this.commentError = '';
|
|
1031
|
+
}
|
|
1032
|
+
resetForm() {
|
|
1033
|
+
this.rating = 0;
|
|
1034
|
+
this.comment = '';
|
|
1035
|
+
this.ratingError = '';
|
|
1036
|
+
this.commentError = '';
|
|
1037
|
+
}
|
|
1038
|
+
getStarsArray() {
|
|
1039
|
+
return Array(5).fill(0).map((_, index) => index);
|
|
1040
|
+
}
|
|
1041
|
+
isStarFilled(starIndex) {
|
|
1042
|
+
return starIndex < this.rating;
|
|
1043
|
+
}
|
|
1044
|
+
getCommentLength() {
|
|
1045
|
+
return this.comment.trim().length;
|
|
1046
|
+
}
|
|
1047
|
+
getCommentMaxLength() {
|
|
1048
|
+
return 500;
|
|
1049
|
+
}
|
|
1050
|
+
getCommentMinLength() {
|
|
1051
|
+
return 10;
|
|
1052
|
+
}
|
|
1053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ReviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ReviewDialogComponent, isStandalone: true, selector: "app-review-dialog", inputs: { isOpen: "isOpen", isSubmitting: "isSubmitting" }, outputs: { close: "close", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "@if (isOpen) {\n<div class=\"review-dialog-overlay\" (click)=\"onClose()\">\n <div class=\"review-dialog\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"review-dialog__header\">\n <h3 class=\"review-dialog__title\">{{ 'ReviewDialogTitle' | translate }}</h3>\n <button class=\"review-dialog__close\" (click)=\"onClose()\" type=\"button\" [disabled]=\"isSubmitting\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Divider -->\n <div class=\"review-dialog__divider\"></div>\n\n <!-- Content -->\n <div class=\"review-dialog__content\">\n <p class=\"review-dialog__description\">\n {{ 'ReviewDialogDescription' | translate }}\n </p>\n\n <!-- Rating Section -->\n <div class=\"review-dialog__rating-section\">\n <label class=\"review-dialog__label\">{{ 'ReviewDialogRatingLabel' | translate }}</label>\n <div class=\"review-dialog__stars\">\n @for (star of getStarsArray(); track star) {\n <button \n class=\"review-dialog__star\" \n [class.review-dialog__star--filled]=\"isStarFilled(star)\"\n [class.review-dialog__star--error]=\"ratingError\"\n [disabled]=\"isSubmitting\"\n (click)=\"onRatingClick(star)\"\n type=\"button\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\"\n [attr.fill]=\"isStarFilled(star) ? 'currentColor' : 'none'\"/>\n </svg>\n </button>\n }\n </div>\n @if (ratingError) {\n <div class=\"review-dialog__error\">{{ ratingError }}</div>\n }\n </div>\n\n <!-- Comment Section -->\n <div class=\"review-dialog__comment-section\">\n <label class=\"review-dialog__label\">{{ 'ReviewDialogCommentLabel' | translate }}</label>\n <textarea \n class=\"review-dialog__textarea\"\n [class.review-dialog__textarea--error]=\"commentError\"\n [(ngModel)]=\"comment\"\n (ngModelChange)=\"onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting\"\n rows=\"4\"\n ></textarea>\n <div class=\"review-dialog__comment-info\">\n <div class=\"review-dialog__char-count\">\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n @if (getCommentLength() < getCommentMinLength()) {\n (minimum {{ getCommentMinLength() }})\n }\n </div>\n @if (commentError) {\n <div class=\"review-dialog__error\">{{ commentError }}</div>\n }\n </div>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"review-dialog__divider\"></div>\n\n <!-- Actions -->\n <div class=\"review-dialog__actions\">\n <app-button \n variant=\"default\" \n [fullWidth]=\"true\" \n [disabled]=\"isSubmitting\"\n (click)=\"onSubmitReview()\"\n class=\"review-dialog__submit-btn\"\n >\n @if (isSubmitting) {\n Submitting...\n } @else {\n {{ 'ReviewDialogSubmitButton' | translate }}\n }\n </app-button>\n <app-button \n variant=\"outline\" \n [fullWidth]=\"true\" \n [disabled]=\"isSubmitting\"\n (click)=\"onSkip()\"\n class=\"review-dialog__skip-btn\"\n >\n {{ 'ReviewDialogSkipButton' | translate }}\n </app-button>\n </div>\n </div>\n</div>\n}\n", styles: [".review-dialog-overlay{position:absolute;inset:0;background-color:color-mix(in srgb,var(--card-foreground) 50%,transparent);z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.review-dialog{background-color:var(--card);border-radius:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 4px 0 var(--babylai-primary-color-200)}.review-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.review-dialog__title{color:var(--card-foreground);font-size:1rem;font-weight:700;margin:0}.review-dialog__close{background:none;border:none;color:var(--card-foreground);cursor:pointer;padding:.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.review-dialog__close:hover:not(:disabled){background-color:color-mix(in srgb,var(--card-foreground) 10%,transparent)}.review-dialog__close:disabled{opacity:.5;cursor:not-allowed}.review-dialog__divider{height:1px;background-color:var(--border)}.review-dialog__content{padding:1rem}.review-dialog__description{color:var(--card-foreground);font-size:.875rem;line-height:1.6}.review-dialog__label{color:var(--card-foreground);font-size:.875rem;font-weight:500;display:block;margin-bottom:.5rem}.review-dialog__stars{display:flex}.review-dialog__star{background:none;border:none;color:var(--card-foreground);cursor:pointer;padding:.25rem;border-radius:calc(var(--radius) - 4px);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.review-dialog__star:hover{color:var(--babylai-primary-color);transform:scale(1.1)}.review-dialog__star--filled{color:var(--babylai-primary-color)}.review-dialog__star--error{color:var(--destructive)}.review-dialog__star:disabled{opacity:.5;cursor:not-allowed}.review-dialog__textarea{width:100%;background-color:var(--secondary);border:1px solid #4b5563;border-radius:.5rem;color:var(--card-foreground);font-size:.875rem;padding:.75rem;resize:vertical;min-height:100px;font-family:inherit}.review-dialog__textarea::placeholder{color:var(--card-foreground)}.review-dialog__textarea:focus{outline:none;border-color:var(--babylai-primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--card-foreground) 10%,transparent)}.review-dialog__textarea--error{border-color:var(--destructive)}.review-dialog__textarea--error:focus{border-color:var(--destructive);box-shadow:0 0 0 3px #ef44441a}.review-dialog__textarea:disabled{opacity:.5;cursor:not-allowed;background-color:var(--secondary)}.review-dialog__error{color:var(--destructive);font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.review-dialog__comment-info{display:flex;flex-direction:column}.review-dialog__char-count{color:var(--card-foreground);font-size:.75rem;white-space:nowrap}.review-dialog__actions{display:flex;gap:.75rem;padding:1rem}.review-dialog__submit-btn{flex:1}.review-dialog__submit-btn:disabled{opacity:.5;cursor:not-allowed}.review-dialog__skip-btn{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1055
|
+
}
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ReviewDialogComponent, decorators: [{
|
|
1057
|
+
type: Component,
|
|
1058
|
+
args: [{ selector: 'app-review-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], template: "@if (isOpen) {\n<div class=\"review-dialog-overlay\" (click)=\"onClose()\">\n <div class=\"review-dialog\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"review-dialog__header\">\n <h3 class=\"review-dialog__title\">{{ 'ReviewDialogTitle' | translate }}</h3>\n <button class=\"review-dialog__close\" (click)=\"onClose()\" type=\"button\" [disabled]=\"isSubmitting\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- Divider -->\n <div class=\"review-dialog__divider\"></div>\n\n <!-- Content -->\n <div class=\"review-dialog__content\">\n <p class=\"review-dialog__description\">\n {{ 'ReviewDialogDescription' | translate }}\n </p>\n\n <!-- Rating Section -->\n <div class=\"review-dialog__rating-section\">\n <label class=\"review-dialog__label\">{{ 'ReviewDialogRatingLabel' | translate }}</label>\n <div class=\"review-dialog__stars\">\n @for (star of getStarsArray(); track star) {\n <button \n class=\"review-dialog__star\" \n [class.review-dialog__star--filled]=\"isStarFilled(star)\"\n [class.review-dialog__star--error]=\"ratingError\"\n [disabled]=\"isSubmitting\"\n (click)=\"onRatingClick(star)\"\n type=\"button\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\"\n [attr.fill]=\"isStarFilled(star) ? 'currentColor' : 'none'\"/>\n </svg>\n </button>\n }\n </div>\n @if (ratingError) {\n <div class=\"review-dialog__error\">{{ ratingError }}</div>\n }\n </div>\n\n <!-- Comment Section -->\n <div class=\"review-dialog__comment-section\">\n <label class=\"review-dialog__label\">{{ 'ReviewDialogCommentLabel' | translate }}</label>\n <textarea \n class=\"review-dialog__textarea\"\n [class.review-dialog__textarea--error]=\"commentError\"\n [(ngModel)]=\"comment\"\n (ngModelChange)=\"onCommentChange()\"\n [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n [maxlength]=\"getCommentMaxLength()\"\n [disabled]=\"isSubmitting\"\n rows=\"4\"\n ></textarea>\n <div class=\"review-dialog__comment-info\">\n <div class=\"review-dialog__char-count\">\n {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n @if (getCommentLength() < getCommentMinLength()) {\n (minimum {{ getCommentMinLength() }})\n }\n </div>\n @if (commentError) {\n <div class=\"review-dialog__error\">{{ commentError }}</div>\n }\n </div>\n </div>\n </div>\n\n <!-- Divider -->\n <div class=\"review-dialog__divider\"></div>\n\n <!-- Actions -->\n <div class=\"review-dialog__actions\">\n <app-button \n variant=\"default\" \n [fullWidth]=\"true\" \n [disabled]=\"isSubmitting\"\n (click)=\"onSubmitReview()\"\n class=\"review-dialog__submit-btn\"\n >\n @if (isSubmitting) {\n Submitting...\n } @else {\n {{ 'ReviewDialogSubmitButton' | translate }}\n }\n </app-button>\n <app-button \n variant=\"outline\" \n [fullWidth]=\"true\" \n [disabled]=\"isSubmitting\"\n (click)=\"onSkip()\"\n class=\"review-dialog__skip-btn\"\n >\n {{ 'ReviewDialogSkipButton' | translate }}\n </app-button>\n </div>\n </div>\n</div>\n}\n", styles: [".review-dialog-overlay{position:absolute;inset:0;background-color:color-mix(in srgb,var(--card-foreground) 50%,transparent);z-index:50;display:flex;align-items:center;justify-content:center;border-radius:1.5rem}.review-dialog{background-color:var(--card);border-radius:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 4px 0 var(--babylai-primary-color-200)}.review-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.review-dialog__title{color:var(--card-foreground);font-size:1rem;font-weight:700;margin:0}.review-dialog__close{background:none;border:none;color:var(--card-foreground);cursor:pointer;padding:.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.review-dialog__close:hover:not(:disabled){background-color:color-mix(in srgb,var(--card-foreground) 10%,transparent)}.review-dialog__close:disabled{opacity:.5;cursor:not-allowed}.review-dialog__divider{height:1px;background-color:var(--border)}.review-dialog__content{padding:1rem}.review-dialog__description{color:var(--card-foreground);font-size:.875rem;line-height:1.6}.review-dialog__label{color:var(--card-foreground);font-size:.875rem;font-weight:500;display:block;margin-bottom:.5rem}.review-dialog__stars{display:flex}.review-dialog__star{background:none;border:none;color:var(--card-foreground);cursor:pointer;padding:.25rem;border-radius:calc(var(--radius) - 4px);transition:all .2s ease;display:flex;align-items:center;justify-content:center}.review-dialog__star:hover{color:var(--babylai-primary-color);transform:scale(1.1)}.review-dialog__star--filled{color:var(--babylai-primary-color)}.review-dialog__star--error{color:var(--destructive)}.review-dialog__star:disabled{opacity:.5;cursor:not-allowed}.review-dialog__textarea{width:100%;background-color:var(--secondary);border:1px solid #4b5563;border-radius:.5rem;color:var(--card-foreground);font-size:.875rem;padding:.75rem;resize:vertical;min-height:100px;font-family:inherit}.review-dialog__textarea::placeholder{color:var(--card-foreground)}.review-dialog__textarea:focus{outline:none;border-color:var(--babylai-primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--card-foreground) 10%,transparent)}.review-dialog__textarea--error{border-color:var(--destructive)}.review-dialog__textarea--error:focus{border-color:var(--destructive);box-shadow:0 0 0 3px #ef44441a}.review-dialog__textarea:disabled{opacity:.5;cursor:not-allowed;background-color:var(--secondary)}.review-dialog__error{color:var(--destructive);font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.review-dialog__comment-info{display:flex;flex-direction:column}.review-dialog__char-count{color:var(--card-foreground);font-size:.75rem;white-space:nowrap}.review-dialog__actions{display:flex;gap:.75rem;padding:1rem}.review-dialog__submit-btn{flex:1}.review-dialog__submit-btn:disabled{opacity:.5;cursor:not-allowed}.review-dialog__skip-btn{flex:1}\n"] }]
|
|
1059
|
+
}], propDecorators: { isOpen: [{
|
|
1060
|
+
type: Input
|
|
1061
|
+
}], isSubmitting: [{
|
|
1062
|
+
type: Input
|
|
1063
|
+
}], close: [{
|
|
1064
|
+
type: Output
|
|
1065
|
+
}], submitReview: [{
|
|
1066
|
+
type: Output
|
|
1067
|
+
}], skip: [{
|
|
1068
|
+
type: Output
|
|
1069
|
+
}] } });
|
|
1070
|
+
|
|
951
1071
|
class IntroSectionComponent {
|
|
952
1072
|
currentLang = 'en';
|
|
953
1073
|
showHelpScreenData = new EventEmitter();
|
|
@@ -959,7 +1079,7 @@ class IntroSectionComponent {
|
|
|
959
1079
|
this.navigateToUrl.emit(url);
|
|
960
1080
|
}
|
|
961
1081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IntroSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: IntroSectionComponent, isStandalone: true, selector: "app-intro-section", inputs: { currentLang: "currentLang" }, outputs: { showHelpScreenData: "showHelpScreenData", navigateToUrl: "navigateToUrl" }, ngImport: i0, template: "<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\" [class]=\"'babylai-p-8'\">\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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", styles: [".intro-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.intro-section .intro-title{font-size:2.25rem;font-weight:700;color
|
|
1082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: IntroSectionComponent, isStandalone: true, selector: "app-intro-section", inputs: { currentLang: "currentLang" }, outputs: { showHelpScreenData: "showHelpScreenData", navigateToUrl: "navigateToUrl" }, ngImport: i0, template: "<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\" [class]=\"'babylai-p-8'\">\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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", styles: [".intro-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.intro-section .intro-title{font-size:2.25rem;font-weight:700;color:var(--card-foreground);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:5rem;min-width:5rem;width:5rem;height:5rem;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);color:var(--babylai-primary-color, #ad49e1)}.logo-container .logo{width:3rem;height:3rem}.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:var(--card-foreground);font-weight:600}.info-text .info-description{font-size:1rem;color:var(--card-foreground)}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:var(--card-foreground)}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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" }] });
|
|
963
1083
|
}
|
|
964
1084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: IntroSectionComponent, decorators: [{
|
|
965
1085
|
type: Component,
|
|
@@ -969,7 +1089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
969
1089
|
CardComponent,
|
|
970
1090
|
CardContentComponent,
|
|
971
1091
|
ButtonComponent,
|
|
972
|
-
], template: "<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\" [class]=\"'babylai-p-8'\">\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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", styles: [".intro-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.intro-section .intro-title{font-size:2.25rem;font-weight:700;color
|
|
1092
|
+
], template: "<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\" [class]=\"'babylai-p-8'\">\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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\" [class]=\"'babylai-p-6'\">\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)=\"handleNavigateToUrl('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", styles: [".intro-section{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.intro-section .intro-title{font-size:2.25rem;font-weight:700;color:var(--card-foreground);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:5rem;min-width:5rem;width:5rem;height:5rem;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);color:var(--babylai-primary-color, #ad49e1)}.logo-container .logo{width:3rem;height:3rem}.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:var(--card-foreground);font-weight:600}.info-text .info-description{font-size:1rem;color:var(--card-foreground)}.action-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.action-card .action-text{font-size:1rem;color:var(--card-foreground)}.action-card .icon{width:1.25rem;height:1.25rem}.action-card .icon-rtl{transform:rotate(180deg)}\n"] }]
|
|
973
1093
|
}], propDecorators: { currentLang: [{
|
|
974
1094
|
type: Input
|
|
975
1095
|
}], showHelpScreenData: [{
|
|
@@ -982,11 +1102,11 @@ class FooterComponent {
|
|
|
982
1102
|
showHelpScreenData = false;
|
|
983
1103
|
showChat = false;
|
|
984
1104
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
985
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FooterComponent, isStandalone: true, selector: "app-footer", inputs: { showHelpScreenData: "showHelpScreenData", showChat: "showChat" }, ngImport: i0, template: "<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", styles: [".footer{display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem}.footer .footer-link{font-size:.75rem;color
|
|
1105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: FooterComponent, isStandalone: true, selector: "app-footer", inputs: { showHelpScreenData: "showHelpScreenData", showChat: "showChat" }, ngImport: i0, template: "<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", styles: [".footer{display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem}.footer .footer-link{font-size:.75rem;color:var(--card-foreground);width:100%;text-align:center;font-weight:700}.footer .footer-link.light-text{color:var(--card-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
986
1106
|
}
|
|
987
1107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FooterComponent, decorators: [{
|
|
988
1108
|
type: Component,
|
|
989
|
-
args: [{ selector: 'app-footer', standalone: true, imports: [CommonModule, TranslatePipe], template: "<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", styles: [".footer{display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem}.footer .footer-link{font-size:.75rem;color
|
|
1109
|
+
args: [{ selector: 'app-footer', standalone: true, imports: [CommonModule, TranslatePipe], template: "<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", styles: [".footer{display:flex;justify-content:space-between;align-items:center;padding:.5rem 2rem}.footer .footer-link{font-size:.75rem;color:var(--card-foreground);width:100%;text-align:center;font-weight:700}.footer .footer-link.light-text{color:var(--card-foreground)}\n"] }]
|
|
990
1110
|
}], propDecorators: { showHelpScreenData: [{
|
|
991
1111
|
type: Input
|
|
992
1112
|
}], showChat: [{
|
|
@@ -1047,7 +1167,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1047
1167
|
class ThemeService {
|
|
1048
1168
|
primaryColor = '#ad49e1';
|
|
1049
1169
|
logoUrl = '';
|
|
1050
|
-
|
|
1170
|
+
isDarkMode = signal(false, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : []));
|
|
1171
|
+
constructor() {
|
|
1172
|
+
this.initializeDarkModeDetection();
|
|
1173
|
+
}
|
|
1174
|
+
/**
|
|
1175
|
+
* Initialize dark mode detection based on browser preferences
|
|
1176
|
+
*/
|
|
1177
|
+
initializeDarkModeDetection() {
|
|
1178
|
+
// Check initial preference
|
|
1179
|
+
this.updateDarkModeState();
|
|
1180
|
+
// Listen for changes in color scheme preference
|
|
1181
|
+
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
1182
|
+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
1183
|
+
// Add listener for changes
|
|
1184
|
+
mediaQuery.addEventListener('change', () => {
|
|
1185
|
+
this.updateDarkModeState();
|
|
1186
|
+
});
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
/**
|
|
1190
|
+
* Update dark mode state based on current browser preference
|
|
1191
|
+
*/
|
|
1192
|
+
updateDarkModeState() {
|
|
1193
|
+
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
1194
|
+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
1195
|
+
this.isDarkMode.set(isDark);
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
/**
|
|
1199
|
+
* Get current dark mode state
|
|
1200
|
+
*/
|
|
1201
|
+
getDarkModeState() {
|
|
1202
|
+
return this.isDarkMode.asReadonly();
|
|
1203
|
+
}
|
|
1204
|
+
/**
|
|
1205
|
+
* Check if dark mode is currently active
|
|
1206
|
+
*/
|
|
1207
|
+
isDarkModeActive() {
|
|
1208
|
+
return this.isDarkMode();
|
|
1209
|
+
}
|
|
1051
1210
|
setPrimaryColor(color) {
|
|
1052
1211
|
this.primaryColor = color;
|
|
1053
1212
|
this.updateCSSVariables();
|
|
@@ -1166,7 +1325,7 @@ class HeaderComponent {
|
|
|
1166
1325
|
return this.language === 'ar';
|
|
1167
1326
|
}
|
|
1168
1327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1169
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { headerType: "headerType", showBackButton: "showBackButton", showLogo: "showLogo", language: "language", showCloseButton: "showCloseButton" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: "<div class=\"header\">\n @if (showBackButton) {\n <app-back-button\n [size]=\"'medium'\"\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n ></app-back-button>\n }\n \n @if (showCloseButton) {\n <app-close-button\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-close-button>\n }\n \n <app-logo [showLogo]=\"showLogo\"></app-logo>\n\n @if (!showBackButton && !showCloseButton) {\n <app-simple-close-button\n (onClose)=\"onClose.emit()\"\n ></app-simple-close-button>\n }\n</div>\n", styles: [".header{padding:2rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color
|
|
1328
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { headerType: "headerType", showBackButton: "showBackButton", showLogo: "showLogo", language: "language", showCloseButton: "showCloseButton" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: "<div class=\"header\">\n @if (showBackButton) {\n <app-back-button\n [size]=\"'medium'\"\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n ></app-back-button>\n }\n \n @if (showCloseButton) {\n <app-close-button\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-close-button>\n }\n \n <app-logo [showLogo]=\"showLogo\"></app-logo>\n\n @if (!showBackButton && !showCloseButton) {\n <app-simple-close-button\n (onClose)=\"onClose.emit()\"\n ></app-simple-close-button>\n }\n</div>\n", styles: [".header{padding:2rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:var(--black-white-50)!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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BackButtonComponent, selector: "app-back-button", inputs: ["language", "size"], outputs: ["onBack"] }, { kind: "component", type: CloseButtonComponent, selector: "app-close-button", inputs: ["language"], outputs: ["onClose"] }, { kind: "component", type: SimpleCloseButtonComponent, selector: "app-simple-close-button", outputs: ["onClose"] }, { kind: "component", type: LogoComponent, selector: "app-logo", inputs: ["showLogo", "size"] }] });
|
|
1170
1329
|
}
|
|
1171
1330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1172
1331
|
type: Component,
|
|
@@ -1176,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1176
1335
|
CloseButtonComponent,
|
|
1177
1336
|
SimpleCloseButtonComponent,
|
|
1178
1337
|
LogoComponent,
|
|
1179
|
-
], template: "<div class=\"header\">\n @if (showBackButton) {\n <app-back-button\n [size]=\"'medium'\"\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n ></app-back-button>\n }\n \n @if (showCloseButton) {\n <app-close-button\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-close-button>\n }\n \n <app-logo [showLogo]=\"showLogo\"></app-logo>\n\n @if (!showBackButton && !showCloseButton) {\n <app-simple-close-button\n (onClose)=\"onClose.emit()\"\n ></app-simple-close-button>\n }\n</div>\n", styles: [".header{padding:2rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color
|
|
1338
|
+
], template: "<div class=\"header\">\n @if (showBackButton) {\n <app-back-button\n [size]=\"'medium'\"\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n ></app-back-button>\n }\n \n @if (showCloseButton) {\n <app-close-button\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-close-button>\n }\n \n <app-logo [showLogo]=\"showLogo\"></app-logo>\n\n @if (!showBackButton && !showCloseButton) {\n <app-simple-close-button\n (onClose)=\"onClose.emit()\"\n ></app-simple-close-button>\n }\n</div>\n", styles: [".header{padding:2rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between}.header__back-button.icon-bg{background-color:var(--black-white-50)!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}\n"] }]
|
|
1180
1339
|
}], propDecorators: { headerType: [{
|
|
1181
1340
|
type: Input
|
|
1182
1341
|
}], showBackButton: [{
|
|
@@ -1208,11 +1367,11 @@ class MenuDropdownComponent {
|
|
|
1208
1367
|
}
|
|
1209
1368
|
}
|
|
1210
1369
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MenuDropdownComponent, isStandalone: true, selector: "app-menu-dropdown", inputs: { language: "language" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"menu-dropdown\" data-menu-container>\n <app-button\n size=\"small\"\n variant=\"icon-bg\"\n className=\"menu-dropdown__button button--light-bg\"\n (click)=\"$event.stopPropagation(); isMenuOpen = !isMenuOpen\"\n >\n <svg\n width=\"14\"\n height=\"4\"\n viewBox=\"0 0 14 4\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.25 1.8269C3.25 2.22473 3.09196 2.60626 2.81066 2.88756C2.52936 3.16887 2.14782 3.3269 1.75 3.3269C1.35218 3.3269 0.970644 3.16887 0.68934 2.88756C0.408035 2.60626 0.25 2.22473 0.25 1.8269C0.25 1.42908 0.408035 1.04755 0.68934 0.766244C0.970644 0.48494 1.35218 0.326904 1.75 0.326904C2.14782 0.326904 2.52936 0.48494 2.81066 0.766244C3.09196 1.04755 3.25 1.42908 3.25 1.8269ZM8.5 1.8269C8.5 2.22473 8.34196 2.60626 8.06066 2.88756C7.77936 3.16887 7.39782 3.3269 7 3.3269C6.60218 3.3269 6.22064 3.16887 5.93934 2.88756C5.65804 2.60626 5.5 2.22473 5.5 1.8269C5.5 1.42908 5.65804 1.04755 5.93934 0.766244C6.22064 0.48494 6.60218 0.326904 7 0.326904C7.39782 0.326904 7.77936 0.48494 8.06066 0.766244C8.34196 1.04755 8.5 1.42908 8.5 1.8269ZM13.75 1.8269C13.75 2.22473 13.592 2.60626 13.3107 2.88756C13.0294 3.16887 12.6478 3.3269 12.25 3.3269C11.8522 3.3269 11.4706 3.16887 11.1893 2.88756C10.908 2.60626 10.75 2.22473 10.75 1.8269C10.75 1.42908 10.908 1.04755 11.1893 0.766244C11.4706 0.48494 11.8522 0.326904 12.25 0.326904C12.6478 0.326904 13.0294 0.48494 13.3107 0.766244C13.592 1.04755 13.75 1.42908 13.75 1.8269Z\"\n fill=\"currentColor\"\n />\n </svg>\n </app-button>\n @if (isMenuOpen) {\n <div\n class=\"menu-dropdown__dropdown\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n <div class=\"menu-dropdown__content\">\n <button\n (click)=\"onClose.emit(); isMenuOpen = false\"\n class=\"menu-dropdown__button-item\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n {{ 'EndChat' | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".menu-dropdown{position:relative}.menu-dropdown__dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background-color
|
|
1370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: MenuDropdownComponent, isStandalone: true, selector: "app-menu-dropdown", inputs: { language: "language" }, outputs: { onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"menu-dropdown\" data-menu-container>\n <app-button\n size=\"small\"\n variant=\"icon-bg\"\n className=\"menu-dropdown__button button--light-bg\"\n (click)=\"$event.stopPropagation(); isMenuOpen = !isMenuOpen\"\n >\n <svg\n width=\"14\"\n height=\"4\"\n viewBox=\"0 0 14 4\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.25 1.8269C3.25 2.22473 3.09196 2.60626 2.81066 2.88756C2.52936 3.16887 2.14782 3.3269 1.75 3.3269C1.35218 3.3269 0.970644 3.16887 0.68934 2.88756C0.408035 2.60626 0.25 2.22473 0.25 1.8269C0.25 1.42908 0.408035 1.04755 0.68934 0.766244C0.970644 0.48494 1.35218 0.326904 1.75 0.326904C2.14782 0.326904 2.52936 0.48494 2.81066 0.766244C3.09196 1.04755 3.25 1.42908 3.25 1.8269ZM8.5 1.8269C8.5 2.22473 8.34196 2.60626 8.06066 2.88756C7.77936 3.16887 7.39782 3.3269 7 3.3269C6.60218 3.3269 6.22064 3.16887 5.93934 2.88756C5.65804 2.60626 5.5 2.22473 5.5 1.8269C5.5 1.42908 5.65804 1.04755 5.93934 0.766244C6.22064 0.48494 6.60218 0.326904 7 0.326904C7.39782 0.326904 7.77936 0.48494 8.06066 0.766244C8.34196 1.04755 8.5 1.42908 8.5 1.8269ZM13.75 1.8269C13.75 2.22473 13.592 2.60626 13.3107 2.88756C13.0294 3.16887 12.6478 3.3269 12.25 3.3269C11.8522 3.3269 11.4706 3.16887 11.1893 2.88756C10.908 2.60626 10.75 2.22473 10.75 1.8269C10.75 1.42908 10.908 1.04755 11.1893 0.766244C11.4706 0.48494 11.8522 0.326904 12.25 0.326904C12.6478 0.326904 13.0294 0.48494 13.3107 0.766244C13.592 1.04755 13.75 1.42908 13.75 1.8269Z\"\n fill=\"currentColor\"\n />\n </svg>\n </app-button>\n @if (isMenuOpen) {\n <div\n class=\"menu-dropdown__dropdown\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n <div class=\"menu-dropdown__content\">\n <button\n (click)=\"onClose.emit(); isMenuOpen = false\"\n class=\"menu-dropdown__button-item\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n {{ 'EndChat' | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".menu-dropdown{position:relative}.menu-dropdown__dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background-color:var(--card);border:1px solid rgba(0,0,0,.05);z-index:50}.menu-dropdown__dropdown-content{border-radius:.5rem}.menu-dropdown__dropdown.rtl{right:0}.menu-dropdown__dropdown.ltr{left:0}.menu-dropdown__button-item{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:var(--card-foreground);background:none;border:none;cursor:pointer}.menu-dropdown__button-item:hover{background-color:transparent;text-decoration:underline;color:var(--babylai-primary-color)}.menu-dropdown__button-item.rtl{text-align:right}.menu-dropdown__button-item.ltr{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1212
1371
|
}
|
|
1213
1372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: MenuDropdownComponent, decorators: [{
|
|
1214
1373
|
type: Component,
|
|
1215
|
-
args: [{ selector: 'app-menu-dropdown', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], template: "<div class=\"menu-dropdown\" data-menu-container>\n <app-button\n size=\"small\"\n variant=\"icon-bg\"\n className=\"menu-dropdown__button button--light-bg\"\n (click)=\"$event.stopPropagation(); isMenuOpen = !isMenuOpen\"\n >\n <svg\n width=\"14\"\n height=\"4\"\n viewBox=\"0 0 14 4\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.25 1.8269C3.25 2.22473 3.09196 2.60626 2.81066 2.88756C2.52936 3.16887 2.14782 3.3269 1.75 3.3269C1.35218 3.3269 0.970644 3.16887 0.68934 2.88756C0.408035 2.60626 0.25 2.22473 0.25 1.8269C0.25 1.42908 0.408035 1.04755 0.68934 0.766244C0.970644 0.48494 1.35218 0.326904 1.75 0.326904C2.14782 0.326904 2.52936 0.48494 2.81066 0.766244C3.09196 1.04755 3.25 1.42908 3.25 1.8269ZM8.5 1.8269C8.5 2.22473 8.34196 2.60626 8.06066 2.88756C7.77936 3.16887 7.39782 3.3269 7 3.3269C6.60218 3.3269 6.22064 3.16887 5.93934 2.88756C5.65804 2.60626 5.5 2.22473 5.5 1.8269C5.5 1.42908 5.65804 1.04755 5.93934 0.766244C6.22064 0.48494 6.60218 0.326904 7 0.326904C7.39782 0.326904 7.77936 0.48494 8.06066 0.766244C8.34196 1.04755 8.5 1.42908 8.5 1.8269ZM13.75 1.8269C13.75 2.22473 13.592 2.60626 13.3107 2.88756C13.0294 3.16887 12.6478 3.3269 12.25 3.3269C11.8522 3.3269 11.4706 3.16887 11.1893 2.88756C10.908 2.60626 10.75 2.22473 10.75 1.8269C10.75 1.42908 10.908 1.04755 11.1893 0.766244C11.4706 0.48494 11.8522 0.326904 12.25 0.326904C12.6478 0.326904 13.0294 0.48494 13.3107 0.766244C13.592 1.04755 13.75 1.42908 13.75 1.8269Z\"\n fill=\"currentColor\"\n />\n </svg>\n </app-button>\n @if (isMenuOpen) {\n <div\n class=\"menu-dropdown__dropdown\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n <div class=\"menu-dropdown__content\">\n <button\n (click)=\"onClose.emit(); isMenuOpen = false\"\n class=\"menu-dropdown__button-item\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n {{ 'EndChat' | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".menu-dropdown{position:relative}.menu-dropdown__dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background-color
|
|
1374
|
+
args: [{ selector: 'app-menu-dropdown', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], template: "<div class=\"menu-dropdown\" data-menu-container>\n <app-button\n size=\"small\"\n variant=\"icon-bg\"\n className=\"menu-dropdown__button button--light-bg\"\n (click)=\"$event.stopPropagation(); isMenuOpen = !isMenuOpen\"\n >\n <svg\n width=\"14\"\n height=\"4\"\n viewBox=\"0 0 14 4\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.25 1.8269C3.25 2.22473 3.09196 2.60626 2.81066 2.88756C2.52936 3.16887 2.14782 3.3269 1.75 3.3269C1.35218 3.3269 0.970644 3.16887 0.68934 2.88756C0.408035 2.60626 0.25 2.22473 0.25 1.8269C0.25 1.42908 0.408035 1.04755 0.68934 0.766244C0.970644 0.48494 1.35218 0.326904 1.75 0.326904C2.14782 0.326904 2.52936 0.48494 2.81066 0.766244C3.09196 1.04755 3.25 1.42908 3.25 1.8269ZM8.5 1.8269C8.5 2.22473 8.34196 2.60626 8.06066 2.88756C7.77936 3.16887 7.39782 3.3269 7 3.3269C6.60218 3.3269 6.22064 3.16887 5.93934 2.88756C5.65804 2.60626 5.5 2.22473 5.5 1.8269C5.5 1.42908 5.65804 1.04755 5.93934 0.766244C6.22064 0.48494 6.60218 0.326904 7 0.326904C7.39782 0.326904 7.77936 0.48494 8.06066 0.766244C8.34196 1.04755 8.5 1.42908 8.5 1.8269ZM13.75 1.8269C13.75 2.22473 13.592 2.60626 13.3107 2.88756C13.0294 3.16887 12.6478 3.3269 12.25 3.3269C11.8522 3.3269 11.4706 3.16887 11.1893 2.88756C10.908 2.60626 10.75 2.22473 10.75 1.8269C10.75 1.42908 10.908 1.04755 11.1893 0.766244C11.4706 0.48494 11.8522 0.326904 12.25 0.326904C12.6478 0.326904 13.0294 0.48494 13.3107 0.766244C13.592 1.04755 13.75 1.42908 13.75 1.8269Z\"\n fill=\"currentColor\"\n />\n </svg>\n </app-button>\n @if (isMenuOpen) {\n <div\n class=\"menu-dropdown__dropdown\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n <div class=\"menu-dropdown__content\">\n <button\n (click)=\"onClose.emit(); isMenuOpen = false\"\n class=\"menu-dropdown__button-item\"\n [ngClass]=\"{ rtl: isRtl, ltr: !isRtl }\"\n >\n {{ 'EndChat' | translate }}\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".menu-dropdown{position:relative}.menu-dropdown__dropdown{position:absolute;margin-top:.5rem;width:12rem;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background-color:var(--card);border:1px solid rgba(0,0,0,.05);z-index:50}.menu-dropdown__dropdown-content{border-radius:.5rem}.menu-dropdown__dropdown.rtl{right:0}.menu-dropdown__dropdown.ltr{left:0}.menu-dropdown__button-item{display:block;width:100%;padding:1rem .5rem;font-size:.875rem;color:var(--card-foreground);background:none;border:none;cursor:pointer}.menu-dropdown__button-item:hover{background-color:transparent;text-decoration:underline;color:var(--babylai-primary-color)}.menu-dropdown__button-item.rtl{text-align:right}.menu-dropdown__button-item.ltr{text-align:left}\n"] }]
|
|
1216
1375
|
}], propDecorators: { language: [{
|
|
1217
1376
|
type: Input
|
|
1218
1377
|
}], onClose: [{
|
|
@@ -1229,7 +1388,7 @@ class ChatHeaderComponent {
|
|
|
1229
1388
|
onBack = new EventEmitter();
|
|
1230
1389
|
onClose = new EventEmitter();
|
|
1231
1390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: "showBackButton", showLogo: "showLogo", language: "language" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: "<div class=\"chat-header\">\n <div class=\"chat-header__actions\">\n @if (showBackButton) {\n <app-back-button\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n [size]=\"'small'\"\n ></app-back-button>\n }\n\n <app-menu-dropdown\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-menu-dropdown>\n </div>\n\n <app-logo [showLogo]=\"showLogo\"></app-logo>\n</div>\n", styles: [".chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color
|
|
1391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: "showBackButton", showLogo: "showLogo", language: "language" }, outputs: { onBack: "onBack", onClose: "onClose" }, ngImport: i0, template: "<div class=\"chat-header\">\n <div class=\"chat-header__actions\">\n @if (showBackButton) {\n <app-back-button\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n [size]=\"'small'\"\n ></app-back-button>\n }\n\n <app-menu-dropdown\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-menu-dropdown>\n </div>\n\n <app-logo [showLogo]=\"showLogo\"></app-logo>\n</div>\n", styles: [".chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--card);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:rgba(var(--babylai-primary-color-500, #ad49e1),.1)!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:rgba(var(--babylai-primary-color-700, #451d5a),.1)!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:var(--black-white-50);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:var(--black-white-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BackButtonComponent, selector: "app-back-button", inputs: ["language", "size"], outputs: ["onBack"] }, { kind: "component", type: MenuDropdownComponent, selector: "app-menu-dropdown", inputs: ["language"], outputs: ["onClose"] }, { kind: "component", type: LogoComponent, selector: "app-logo", inputs: ["showLogo", "size"] }] });
|
|
1233
1392
|
}
|
|
1234
1393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ChatHeaderComponent, decorators: [{
|
|
1235
1394
|
type: Component,
|
|
@@ -1238,7 +1397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1238
1397
|
BackButtonComponent,
|
|
1239
1398
|
MenuDropdownComponent,
|
|
1240
1399
|
LogoComponent,
|
|
1241
|
-
], template: "<div class=\"chat-header\">\n <div class=\"chat-header__actions\">\n @if (showBackButton) {\n <app-back-button\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n [size]=\"'small'\"\n ></app-back-button>\n }\n\n <app-menu-dropdown\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-menu-dropdown>\n </div>\n\n <app-logo [showLogo]=\"showLogo\"></app-logo>\n</div>\n", styles: [".chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color
|
|
1400
|
+
], template: "<div class=\"chat-header\">\n <div class=\"chat-header__actions\">\n @if (showBackButton) {\n <app-back-button\n [language]=\"language\"\n (onBack)=\"onBack.emit()\"\n [size]=\"'small'\"\n ></app-back-button>\n }\n\n <app-menu-dropdown\n [language]=\"language\"\n (onClose)=\"onClose.emit()\"\n ></app-menu-dropdown>\n </div>\n\n <app-logo [showLogo]=\"showLogo\"></app-logo>\n</div>\n", styles: [".chat-header{padding:1rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--card);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:rgba(var(--babylai-primary-color-500, #ad49e1),.1)!important;width:2rem;height:2rem;padding:.5rem!important}.chat-header__button:hover{background-color:rgba(var(--babylai-primary-color-700, #451d5a),.1)!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:var(--black-white-50);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:var(--black-white-600)}\n"] }]
|
|
1242
1401
|
}], propDecorators: { showBackButton: [{
|
|
1243
1402
|
type: Input
|
|
1244
1403
|
}], showLogo: [{
|
|
@@ -1272,12 +1431,19 @@ class HelpPopupComponent {
|
|
|
1272
1431
|
selectedOption = null;
|
|
1273
1432
|
selectedNestedOption = null;
|
|
1274
1433
|
showEndChatConfirmation = false;
|
|
1434
|
+
showStartNewChatConfirmation = false;
|
|
1435
|
+
showReviewDialog = false;
|
|
1436
|
+
isSubmittingReview = false;
|
|
1275
1437
|
closePopup = new EventEmitter();
|
|
1276
1438
|
back = new EventEmitter();
|
|
1277
1439
|
showChatEvent = new EventEmitter();
|
|
1278
1440
|
endChat = new EventEmitter();
|
|
1279
1441
|
confirmEndChat = new EventEmitter();
|
|
1280
1442
|
cancelEndChat = new EventEmitter();
|
|
1443
|
+
confirmStartNewChat = new EventEmitter();
|
|
1444
|
+
cancelStartNewChat = new EventEmitter();
|
|
1445
|
+
reviewSubmit = new EventEmitter();
|
|
1446
|
+
reviewSkip = new EventEmitter();
|
|
1281
1447
|
sendMessageEvent = new EventEmitter();
|
|
1282
1448
|
startNewChat = new EventEmitter();
|
|
1283
1449
|
showHelpScreenDataEvent = new EventEmitter();
|
|
@@ -1301,6 +1467,18 @@ class HelpPopupComponent {
|
|
|
1301
1467
|
handleCancelEndChat() {
|
|
1302
1468
|
this.cancelEndChat.emit();
|
|
1303
1469
|
}
|
|
1470
|
+
handleConfirmStartNewChat() {
|
|
1471
|
+
this.confirmStartNewChat.emit();
|
|
1472
|
+
}
|
|
1473
|
+
handleCancelStartNewChat() {
|
|
1474
|
+
this.cancelStartNewChat.emit();
|
|
1475
|
+
}
|
|
1476
|
+
handleReviewSubmit(reviewData) {
|
|
1477
|
+
this.reviewSubmit.emit(reviewData);
|
|
1478
|
+
}
|
|
1479
|
+
handleReviewSkip() {
|
|
1480
|
+
this.reviewSkip.emit();
|
|
1481
|
+
}
|
|
1304
1482
|
handleSendMessage(message) {
|
|
1305
1483
|
this.sendMessageEvent.emit(message);
|
|
1306
1484
|
}
|
|
@@ -1317,7 +1495,7 @@ class HelpPopupComponent {
|
|
|
1317
1495
|
this.navigateToUrl.emit(url);
|
|
1318
1496
|
}
|
|
1319
1497
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HelpPopupComponent, isStandalone: true, selector: "app-help-popup", inputs: { isPopupOpen: "isPopupOpen", showHelpScreenData: "showHelpScreenData", showChat: "showChat", status: "status", error: "error", helpScreenData: "helpScreenData", messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isAblyConnected: "isAblyConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", chatIsLoading: "chatIsLoading", sessionId: "sessionId", isIntroScreenEnabled: "isIntroScreenEnabled", selectedOption: "selectedOption", selectedNestedOption: "selectedNestedOption", showEndChatConfirmation: "showEndChatConfirmation" }, outputs: { closePopup: "closePopup", back: "back", showChatEvent: "showChatEvent", endChat: "endChat", confirmEndChat: "confirmEndChat", cancelEndChat: "cancelEndChat", sendMessageEvent: "sendMessageEvent", startNewChat: "startNewChat", showHelpScreenDataEvent: "showHelpScreenDataEvent", hideHelpScreenData: "hideHelpScreenData", navigateToUrl: "navigateToUrl" }, ngImport: i0, template: "@if (isPopupOpen) {\n<div class=\"help-popup\" [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'babylai-bg-linear-to-b': isPopupOpen && !showHelpScreenData && !showChat\n }\">\n @if (showEndChatConfirmation) {\n <app-confirmation-dialog [title]=\"'LeavingDialogTitle' | translate\" [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\" [cancelText]=\"'Cancel' | translate\" (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status === 'loading') {\n <div class=\"loading-state\">\n @if (!showHelpScreenData) {\n <app-header [showBackButton]=\"!!selectedOption || !!selectedNestedOption\" [showLogo]=\"true\" (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\" [language]=\"currentLang\"></app-header>\n }\n @if (showHelpScreenData) {\n <app-header [showCloseButton]=\"!isIntroScreenEnabled\" [showLogo]=\"true\" (onClose)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \" [language]=\"currentLang\"></app-header>\n }\n <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (status === 'failed') {\n <div class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n }\n\n <!-- Content -->\n @if (status === 'succeeded') {\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n @if (!showHelpScreenData && !showChat) {\n <app-header [showBackButton]=\"!!selectedOption || !!selectedNestedOption\" [showLogo]=\"true\" (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\" [language]=\"currentLang\"></app-header>\n }\n }\n\n @if (showHelpScreenData && !showChat) {\n <app-header [showCloseButton]=\"!isIntroScreenEnabled\" [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\" (onClose)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \" (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\" [language]=\"currentLang\"></app-header>\n\n @if (showHelpScreenData && sessionId) {\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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\" stroke-width=\"2\" stroke-linecap=\"round\" />\n <path d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\" stroke=\"white\" stroke-width=\"2.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </app-button>\n }\n }\n\n @if (showChat) {\n <app-chat-header [showBackButton]=\"showChat\" [showLogo]=\"true\" (onClose)=\"handleEndChat()\" (onBack)=\"handleBack()\"\n [language]=\"currentLang\"></app-chat-header>\n\n <app-chat class=\"chat-container\" [messages]=\"messages\" [needsAgent]=\"needsAgent\" [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\" [isChatClosed]=\"isChatClosed\" (sendMessageEvent)=\"handleSendMessage($event)\"\n [currentLang]=\"currentLang\" [loading]=\"chatIsLoading\"></app-chat>\n }\n\n <!-- Main Content -->\n @if (!showChat) {\n <div class=\"main-content\">\n @if (isIntroScreenEnabled) {\n @if (!showHelpScreenData) {\n <app-intro-section [currentLang]=\"currentLang\" (showHelpScreenData)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"handleNavigateToUrl($event)\"></app-intro-section>\n }\n }\n\n @if (showHelpScreenData) {\n <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\" />\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=\"currentColor\" />\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=\"currentColor\" />\n </g>\n </svg>\n\n <app-help-screen-data [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n }\n\n </div>\n }\n\n <!-- Footer -->\n <app-footer [showHelpScreenData]=\"showHelpScreenData\" [showChat]=\"showChat\"></app-footer>\n }\n</div>\n}", styles: [".help-popup{position:fixed;bottom:5rem;right:1.25rem;width:384px;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:384px}.help-popup.is-closed{width:60px}.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%;padding:1rem 1rem 0;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:0 1.5rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:10rem;height:10rem;color:var(--babylai-primary-color, #ad49e1)}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--babylai-primary-color);background:linear-gradient(180deg,var(--babylai-primary-color) 1%,color-mix(in srgb,var(--babylai-primary-color) 1%,transparent) 100%)}@media (prefers-color-scheme: dark){.babylai-bg-linear-to-b{background:var(--babylai-storm-dust-950);background:linear-gradient(180deg,var(--babylai-storm-dust-950) 1%,color-mix(in srgb,var(--babylai-storm-dust-950) 60%,transparent) 100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "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: "component", type: IntroSectionComponent, selector: "app-intro-section", inputs: ["currentLang"], outputs: ["showHelpScreenData", "navigateToUrl"] }, { kind: "component", type: FooterComponent, selector: "app-footer", inputs: ["showHelpScreenData", "showChat"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1498
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HelpPopupComponent, isStandalone: true, selector: "app-help-popup", inputs: { isPopupOpen: "isPopupOpen", showHelpScreenData: "showHelpScreenData", showChat: "showChat", status: "status", error: "error", helpScreenData: "helpScreenData", messages: "messages", needsAgent: "needsAgent", assistantStatus: "assistantStatus", isAblyConnected: "isAblyConnected", isChatClosed: "isChatClosed", currentLang: "currentLang", chatIsLoading: "chatIsLoading", sessionId: "sessionId", isIntroScreenEnabled: "isIntroScreenEnabled", selectedOption: "selectedOption", selectedNestedOption: "selectedNestedOption", showEndChatConfirmation: "showEndChatConfirmation", showStartNewChatConfirmation: "showStartNewChatConfirmation", showReviewDialog: "showReviewDialog", isSubmittingReview: "isSubmittingReview" }, outputs: { closePopup: "closePopup", back: "back", showChatEvent: "showChatEvent", endChat: "endChat", confirmEndChat: "confirmEndChat", cancelEndChat: "cancelEndChat", confirmStartNewChat: "confirmStartNewChat", cancelStartNewChat: "cancelStartNewChat", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip", sendMessageEvent: "sendMessageEvent", startNewChat: "startNewChat", showHelpScreenDataEvent: "showHelpScreenDataEvent", hideHelpScreenData: "hideHelpScreenData", navigateToUrl: "navigateToUrl" }, ngImport: i0, template: "@if (isPopupOpen) {\n<div\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'babylai-bg-linear-to-b': isPopupOpen && !showHelpScreenData && !showChat\n }\"\n>\n @if (showEndChatConfirmation) {\n <app-confirmation-dialog\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"\n ></app-confirmation-dialog>\n }\n\n @if (showStartNewChatConfirmation) {\n <app-confirmation-dialog\n [title]=\"'StartNewChatDialogTitle' | translate\"\n [body]=\"'StartNewChatDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"handleConfirmStartNewChat()\"\n (onCancel)=\"handleCancelStartNewChat()\"\n ></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status === 'loading') {\n <div class=\"loading-state\">\n @if (!showHelpScreenData) {\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n } @if (showHelpScreenData) {\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"true\"\n (onClose)=\"\n isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\n \"\n [language]=\"currentLang\"\n ></app-header>\n }\n <app-loading\n [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n ></app-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (status === 'failed') {\n <div class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n }\n\n <!-- Content -->\n @if (status === 'succeeded') {\n <!-- Headers -->\n @if (isIntroScreenEnabled) { @if (!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 } } @if (showHelpScreenData && !showChat) {\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"\n isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\n \"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n @if (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 } } @if (showChat) {\n <app-chat-header\n [showBackButton]=\"showChat\"\n [showLogo]=\"true\"\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)=\"handleSendMessage($event)\"\n [currentLang]=\"currentLang\"\n [loading]=\"chatIsLoading\"\n ></app-chat>\n }\n\n <!-- Main Content -->\n @if (!showChat) {\n <div class=\"main-content\">\n @if (isIntroScreenEnabled) { @if (!showHelpScreenData) {\n <app-intro-section\n [currentLang]=\"currentLang\"\n (showHelpScreenData)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"handleNavigateToUrl($event)\"\n ></app-intro-section>\n } } @if (showHelpScreenData) {\n <svg\n class=\"stars\"\n viewBox=\"0 0 244 196\"\n fill=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </g>\n </svg>\n\n <app-help-screen-data\n [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-help-screen-data>\n }\n </div>\n }\n\n <!-- Footer -->\n <app-footer\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n ></app-footer>\n\n <!-- Review Dialog -->\n <app-review-dialog\n [isOpen]=\"showReviewDialog\"\n [isSubmitting]=\"isSubmittingReview\"\n (close)=\"handleReviewSkip()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n ></app-review-dialog>\n }\n</div>\n}\n", styles: [".help-popup{position:fixed;bottom:5rem;right:1.25rem;width:384px;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:var(--secondary);overflow:hidden}.help-popup.is-open{width:384px}.help-popup.is-closed{width:60px}.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%;padding:1rem 1rem 0;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:0 1.5rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:10rem;height:10rem;color:var(--babylai-primary-color, #ad49e1)}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--babylai-primary-color);background:linear-gradient(180deg,var(--babylai-primary-color) 1%,color-mix(in srgb,var(--babylai-primary-color) 1%,transparent) 100%)}@media (prefers-color-scheme: dark){.babylai-bg-linear-to-b{background:var(--babylai-storm-dust-950);background:linear-gradient(180deg,var(--babylai-storm-dust-950) 1%,color-mix(in srgb,var(--babylai-storm-dust-950) 60%,transparent) 100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "language", "showCloseButton"], outputs: ["onBack", "onClose"] }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "showLogo", "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: "component", type: ReviewDialogComponent, selector: "app-review-dialog", inputs: ["isOpen", "isSubmitting"], outputs: ["close", "submitReview", "skip"] }, { kind: "component", type: IntroSectionComponent, selector: "app-intro-section", inputs: ["currentLang"], outputs: ["showHelpScreenData", "navigateToUrl"] }, { kind: "component", type: FooterComponent, selector: "app-footer", inputs: ["showHelpScreenData", "showChat"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1321
1499
|
}
|
|
1322
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpPopupComponent, decorators: [{
|
|
1323
1501
|
type: Component,
|
|
@@ -1331,9 +1509,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1331
1509
|
ChatComponent,
|
|
1332
1510
|
LoadingComponent,
|
|
1333
1511
|
ConfirmationDialogComponent,
|
|
1512
|
+
ReviewDialogComponent,
|
|
1334
1513
|
IntroSectionComponent,
|
|
1335
1514
|
FooterComponent,
|
|
1336
|
-
], template: "@if (isPopupOpen) {\n<div class=\"help-popup\" [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'babylai-bg-linear-to-b': isPopupOpen && !showHelpScreenData && !showChat\n }\">\n @if (showEndChatConfirmation) {\n <app-confirmation-dialog [title]=\"'LeavingDialogTitle' | translate\" [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\" [cancelText]=\"'Cancel' | translate\" (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status === 'loading') {\n <div class=\"loading-state\">\n @if (!showHelpScreenData) {\n <app-header [showBackButton]=\"!!selectedOption || !!selectedNestedOption\" [showLogo]=\"true\" (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\" [language]=\"currentLang\"></app-header>\n }\n @if (showHelpScreenData) {\n <app-header [showCloseButton]=\"!isIntroScreenEnabled\" [showLogo]=\"true\" (onClose)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \" [language]=\"currentLang\"></app-header>\n }\n <app-loading [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"></app-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (status === 'failed') {\n <div class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n }\n\n <!-- Content -->\n @if (status === 'succeeded') {\n <!-- Headers -->\n @if (isIntroScreenEnabled) {\n @if (!showHelpScreenData && !showChat) {\n <app-header [showBackButton]=\"!!selectedOption || !!selectedNestedOption\" [showLogo]=\"true\" (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\" [language]=\"currentLang\"></app-header>\n }\n }\n\n @if (showHelpScreenData && !showChat) {\n <app-header [showCloseButton]=\"!isIntroScreenEnabled\" [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\" (onClose)=\"\n isIntroScreenEnabled\n ? handleHideHelpScreenData()\n : handleClosePopup()\n \" (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\" [language]=\"currentLang\"></app-header>\n\n @if (showHelpScreenData && sessionId) {\n <app-button variant=\"icon-bg\" (click)=\"handleShowChat()\" class=\"chat-button\" className=\"button--icon\">\n <svg class=\"icon-full\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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\" stroke-width=\"2\" stroke-linecap=\"round\" />\n <path d=\"M8.5 12.5H8.509M12.491 12.5H12.5M16.491 12.5H16.5\" stroke=\"white\" stroke-width=\"2.66667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </app-button>\n }\n }\n\n @if (showChat) {\n <app-chat-header [showBackButton]=\"showChat\" [showLogo]=\"true\" (onClose)=\"handleEndChat()\" (onBack)=\"handleBack()\"\n [language]=\"currentLang\"></app-chat-header>\n\n <app-chat class=\"chat-container\" [messages]=\"messages\" [needsAgent]=\"needsAgent\" [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\" [isChatClosed]=\"isChatClosed\" (sendMessageEvent)=\"handleSendMessage($event)\"\n [currentLang]=\"currentLang\" [loading]=\"chatIsLoading\"></app-chat>\n }\n\n <!-- Main Content -->\n @if (!showChat) {\n <div class=\"main-content\">\n @if (isIntroScreenEnabled) {\n @if (!showHelpScreenData) {\n <app-intro-section [currentLang]=\"currentLang\" (showHelpScreenData)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"handleNavigateToUrl($event)\"></app-intro-section>\n }\n }\n\n @if (showHelpScreenData) {\n <svg class=\"stars\" viewBox=\"0 0 244 196\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\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=\"currentColor\" />\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=\"currentColor\" />\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=\"currentColor\" />\n </g>\n </svg>\n\n <app-help-screen-data [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"></app-help-screen-data>\n }\n\n </div>\n }\n\n <!-- Footer -->\n <app-footer [showHelpScreenData]=\"showHelpScreenData\" [showChat]=\"showChat\"></app-footer>\n }\n</div>\n}", styles: [".help-popup{position:fixed;bottom:5rem;right:1.25rem;width:384px;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:384px}.help-popup.is-closed{width:60px}.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%;padding:1rem 1rem 0;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:0 1.5rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:10rem;height:10rem;color:var(--babylai-primary-color, #ad49e1)}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--babylai-primary-color);background:linear-gradient(180deg,var(--babylai-primary-color) 1%,color-mix(in srgb,var(--babylai-primary-color) 1%,transparent) 100%)}@media (prefers-color-scheme: dark){.babylai-bg-linear-to-b{background:var(--babylai-storm-dust-950);background:linear-gradient(180deg,var(--babylai-storm-dust-950) 1%,color-mix(in srgb,var(--babylai-storm-dust-950) 60%,transparent) 100%)}}\n"] }]
|
|
1515
|
+
], template: "@if (isPopupOpen) {\n<div\n class=\"help-popup\"\n [ngClass]=\"{\n 'is-open': isPopupOpen,\n 'is-closed': !isPopupOpen,\n 'babylai-bg-linear-to-b': isPopupOpen && !showHelpScreenData && !showChat\n }\"\n>\n @if (showEndChatConfirmation) {\n <app-confirmation-dialog\n [title]=\"'LeavingDialogTitle' | translate\"\n [body]=\"'LeavingDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"handleConfirmEndChat()\"\n (onCancel)=\"handleCancelEndChat()\"\n ></app-confirmation-dialog>\n }\n\n @if (showStartNewChatConfirmation) {\n <app-confirmation-dialog\n [title]=\"'StartNewChatDialogTitle' | translate\"\n [body]=\"'StartNewChatDialogBody' | translate\"\n [confirmText]=\"'Confirm' | translate\"\n [cancelText]=\"'Cancel' | translate\"\n (onConfirm)=\"handleConfirmStartNewChat()\"\n (onCancel)=\"handleCancelStartNewChat()\"\n ></app-confirmation-dialog>\n }\n\n <!-- Loading State -->\n @if (status === 'loading') {\n <div class=\"loading-state\">\n @if (!showHelpScreenData) {\n <app-header\n [showBackButton]=\"!!selectedOption || !!selectedNestedOption\"\n [showLogo]=\"true\"\n (onBack)=\"handleBack()\"\n (onClose)=\"handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n } @if (showHelpScreenData) {\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showLogo]=\"true\"\n (onClose)=\"\n isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\n \"\n [language]=\"currentLang\"\n ></app-header>\n }\n <app-loading\n [variant]=\"!isIntroScreenEnabled ? 'primary' : 'default'\"\n ></app-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (status === 'failed') {\n <div class=\"error-message\">\n <span>Error: {{ error }}</span>\n </div>\n }\n\n <!-- Content -->\n @if (status === 'succeeded') {\n <!-- Headers -->\n @if (isIntroScreenEnabled) { @if (!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 } } @if (showHelpScreenData && !showChat) {\n <app-header\n [showCloseButton]=\"!isIntroScreenEnabled\"\n [showBackButton]=\"isIntroScreenEnabled && showHelpScreenData\"\n [showLogo]=\"false\"\n (onClose)=\"\n isIntroScreenEnabled ? handleHideHelpScreenData() : handleClosePopup()\n \"\n (onBack)=\"isIntroScreenEnabled ? handleBack() : handleClosePopup()\"\n [language]=\"currentLang\"\n ></app-header>\n\n @if (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 } } @if (showChat) {\n <app-chat-header\n [showBackButton]=\"showChat\"\n [showLogo]=\"true\"\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)=\"handleSendMessage($event)\"\n [currentLang]=\"currentLang\"\n [loading]=\"chatIsLoading\"\n ></app-chat>\n }\n\n <!-- Main Content -->\n @if (!showChat) {\n <div class=\"main-content\">\n @if (isIntroScreenEnabled) { @if (!showHelpScreenData) {\n <app-intro-section\n [currentLang]=\"currentLang\"\n (showHelpScreenData)=\"handleShowHelpScreenData()\"\n (navigateToUrl)=\"handleNavigateToUrl($event)\"\n ></app-intro-section>\n } } @if (showHelpScreenData) {\n <svg\n class=\"stars\"\n viewBox=\"0 0 244 196\"\n fill=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\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=\"currentColor\"\n />\n </g>\n </svg>\n\n <app-help-screen-data\n [helpScreenData]=\"helpScreenData\"\n (handleStartNewChat)=\"handleStartNewChat($event)\"\n ></app-help-screen-data>\n }\n </div>\n }\n\n <!-- Footer -->\n <app-footer\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n ></app-footer>\n\n <!-- Review Dialog -->\n <app-review-dialog\n [isOpen]=\"showReviewDialog\"\n [isSubmitting]=\"isSubmittingReview\"\n (close)=\"handleReviewSkip()\"\n (submitReview)=\"handleReviewSubmit($event)\"\n (skip)=\"handleReviewSkip()\"\n ></app-review-dialog>\n }\n</div>\n}\n", styles: [".help-popup{position:fixed;bottom:5rem;right:1.25rem;width:384px;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:var(--secondary);overflow:hidden}.help-popup.is-open{width:384px}.help-popup.is-closed{width:60px}.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%;padding:1rem 1rem 0;max-height:85%}.main-content{flex:1;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding:0 1.5rem;width:100%;box-sizing:border-box}.stars{position:absolute;top:0;inset-inline-end:0;width:10rem;height:10rem;color:var(--babylai-primary-color, #ad49e1)}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--babylai-primary-color);background:linear-gradient(180deg,var(--babylai-primary-color) 1%,color-mix(in srgb,var(--babylai-primary-color) 1%,transparent) 100%)}@media (prefers-color-scheme: dark){.babylai-bg-linear-to-b{background:var(--babylai-storm-dust-950);background:linear-gradient(180deg,var(--babylai-storm-dust-950) 1%,color-mix(in srgb,var(--babylai-storm-dust-950) 60%,transparent) 100%)}}\n"] }]
|
|
1337
1516
|
}], propDecorators: { isPopupOpen: [{
|
|
1338
1517
|
type: Input
|
|
1339
1518
|
}], showHelpScreenData: [{
|
|
@@ -1370,6 +1549,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1370
1549
|
type: Input
|
|
1371
1550
|
}], showEndChatConfirmation: [{
|
|
1372
1551
|
type: Input
|
|
1552
|
+
}], showStartNewChatConfirmation: [{
|
|
1553
|
+
type: Input
|
|
1554
|
+
}], showReviewDialog: [{
|
|
1555
|
+
type: Input
|
|
1556
|
+
}], isSubmittingReview: [{
|
|
1557
|
+
type: Input
|
|
1373
1558
|
}], closePopup: [{
|
|
1374
1559
|
type: Output
|
|
1375
1560
|
}], back: [{
|
|
@@ -1382,6 +1567,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1382
1567
|
type: Output
|
|
1383
1568
|
}], cancelEndChat: [{
|
|
1384
1569
|
type: Output
|
|
1570
|
+
}], confirmStartNewChat: [{
|
|
1571
|
+
type: Output
|
|
1572
|
+
}], cancelStartNewChat: [{
|
|
1573
|
+
type: Output
|
|
1574
|
+
}], reviewSubmit: [{
|
|
1575
|
+
type: Output
|
|
1576
|
+
}], reviewSkip: [{
|
|
1577
|
+
type: Output
|
|
1385
1578
|
}], sendMessageEvent: [{
|
|
1386
1579
|
type: Output
|
|
1387
1580
|
}], startNewChat: [{
|
|
@@ -1516,6 +1709,10 @@ class HelpCenterWidgetComponent {
|
|
|
1516
1709
|
selectedOption = null;
|
|
1517
1710
|
selectedNestedOption = null;
|
|
1518
1711
|
showEndChatConfirmation = false;
|
|
1712
|
+
showStartNewChatConfirmation = false;
|
|
1713
|
+
showReviewDialog = false;
|
|
1714
|
+
isSubmittingReview = false;
|
|
1715
|
+
pendingNewChatOption = null;
|
|
1519
1716
|
constructor(apiService, translationService, themeService) {
|
|
1520
1717
|
this.apiService = apiService;
|
|
1521
1718
|
this.translationService = translationService;
|
|
@@ -1566,7 +1763,9 @@ class HelpCenterWidgetComponent {
|
|
|
1566
1763
|
this.status = 'loading';
|
|
1567
1764
|
this.error = null;
|
|
1568
1765
|
try {
|
|
1569
|
-
const response = await this.apiService.apiRequest(`client/clientHelpScreen/${this.helpScreenId}`, 'GET'
|
|
1766
|
+
const response = await this.apiService.apiRequest(`client/clientHelpScreen/${this.helpScreenId}`, 'GET', null, {
|
|
1767
|
+
'Accept-Langauge': this.currentLang,
|
|
1768
|
+
});
|
|
1570
1769
|
this.helpScreenData = await response.json();
|
|
1571
1770
|
this.status = 'succeeded';
|
|
1572
1771
|
}
|
|
@@ -1582,7 +1781,9 @@ class HelpCenterWidgetComponent {
|
|
|
1582
1781
|
optionId: selectedOpt?.id,
|
|
1583
1782
|
helpScreenId: this.helpScreenId,
|
|
1584
1783
|
};
|
|
1585
|
-
const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto
|
|
1784
|
+
const response = await this.apiService.apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto, {
|
|
1785
|
+
'Accept-Langauge': this.currentLang,
|
|
1786
|
+
});
|
|
1586
1787
|
const data = await response.json();
|
|
1587
1788
|
const { chatSession, ablyToken } = data;
|
|
1588
1789
|
this.sessionId = chatSession?.id;
|
|
@@ -1624,7 +1825,9 @@ class HelpCenterWidgetComponent {
|
|
|
1624
1825
|
await this.createChatSession(this.selectedOption || undefined);
|
|
1625
1826
|
}
|
|
1626
1827
|
const messageDto = { messageContent: textToSend };
|
|
1627
|
-
await this.apiService.apiRequest(`Client/ClientChatSession/${this.sessionId}/send-message`, 'POST', messageDto
|
|
1828
|
+
await this.apiService.apiRequest(`Client/ClientChatSession/${this.sessionId}/send-message`, 'POST', messageDto, {
|
|
1829
|
+
'Accept-Langauge': this.currentLang,
|
|
1830
|
+
});
|
|
1628
1831
|
// Clear message input
|
|
1629
1832
|
this.messageText = '';
|
|
1630
1833
|
// Update message as seen
|
|
@@ -1669,11 +1872,44 @@ class HelpCenterWidgetComponent {
|
|
|
1669
1872
|
return 'assistant';
|
|
1670
1873
|
}
|
|
1671
1874
|
}
|
|
1875
|
+
hasActiveChatSession() {
|
|
1876
|
+
// Check if there are any user messages or agent/assistant responses (not just welcome messages)
|
|
1877
|
+
return this.messages.some((message) => message.senderType === 1 || // User message
|
|
1878
|
+
((message.senderType === 2 || message.senderType === 3) &&
|
|
1879
|
+
!this.isWelcomeMessage(message.messageContent)));
|
|
1880
|
+
}
|
|
1881
|
+
isWelcomeMessage(content) {
|
|
1882
|
+
const welcomeMessages = [
|
|
1883
|
+
'Hello! How can I assist you today?',
|
|
1884
|
+
'مرحباً! كيف يمكنني مساعدتك اليوم؟',
|
|
1885
|
+
];
|
|
1886
|
+
// Check if it's a standard welcome message or if it contains common greeting patterns
|
|
1887
|
+
return (welcomeMessages.some((welcome) => content.includes(welcome)) ||
|
|
1888
|
+
content.includes('Hello!') ||
|
|
1889
|
+
content.includes('مرحباً!') ||
|
|
1890
|
+
content.includes('How can I assist') ||
|
|
1891
|
+
content.includes('كيف يمكنني مساعدتك'));
|
|
1892
|
+
}
|
|
1672
1893
|
async handleStartNewChat(option) {
|
|
1894
|
+
// Check if there's already an active chat session (has sessionId and meaningful messages)
|
|
1895
|
+
if (this.sessionId && this.hasActiveChatSession()) {
|
|
1896
|
+
this.pendingNewChatOption = option;
|
|
1897
|
+
this.showStartNewChatConfirmation = true;
|
|
1898
|
+
return;
|
|
1899
|
+
}
|
|
1900
|
+
// If there's a sessionId but only welcome messages, clear the session and start fresh
|
|
1901
|
+
if (this.sessionId && !this.hasActiveChatSession()) {
|
|
1902
|
+
await this.clearCurrentChat();
|
|
1903
|
+
}
|
|
1904
|
+
// If there are only welcome messages but no session, clear them and start fresh
|
|
1905
|
+
if (this.messages.length > 0 && !this.sessionId) {
|
|
1906
|
+
this.messages = [];
|
|
1907
|
+
}
|
|
1673
1908
|
this.selectedOption = option;
|
|
1674
1909
|
this.chatIsLoading = true;
|
|
1675
1910
|
try {
|
|
1676
1911
|
// Create chat session (includes Ably connection setup)
|
|
1912
|
+
await this.createChatSession(option);
|
|
1677
1913
|
// Add greeting message
|
|
1678
1914
|
this.messages.push({
|
|
1679
1915
|
id: Date.now(),
|
|
@@ -1731,6 +1967,51 @@ class HelpCenterWidgetComponent {
|
|
|
1731
1967
|
}
|
|
1732
1968
|
async confirmEndChat() {
|
|
1733
1969
|
this.showEndChatConfirmation = false;
|
|
1970
|
+
// Only show review dialog if there was an active chat session with meaningful interaction
|
|
1971
|
+
if (this.sessionId && this.hasActiveChatSession()) {
|
|
1972
|
+
this.showReviewDialog = true;
|
|
1973
|
+
}
|
|
1974
|
+
else {
|
|
1975
|
+
// No meaningful interaction, just end the chat directly
|
|
1976
|
+
await this.endChatSession();
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
async handleReviewSubmit(reviewData) {
|
|
1980
|
+
try {
|
|
1981
|
+
console.log('Review submitted:', reviewData);
|
|
1982
|
+
this.isSubmittingReview = true;
|
|
1983
|
+
// Store session ID before closing chat
|
|
1984
|
+
const currentSessionId = this.sessionId;
|
|
1985
|
+
// Close chat session first
|
|
1986
|
+
await this.endChatSession();
|
|
1987
|
+
// Then submit review to API endpoint
|
|
1988
|
+
if (currentSessionId) {
|
|
1989
|
+
const reviewPayload = {
|
|
1990
|
+
rating: reviewData.rating,
|
|
1991
|
+
comment: reviewData.comment,
|
|
1992
|
+
};
|
|
1993
|
+
await this.apiService.apiRequest(`Client/ClientChatSession/${currentSessionId}/review`, 'POST', reviewPayload, {
|
|
1994
|
+
'Accept-Langauge': this.currentLang,
|
|
1995
|
+
});
|
|
1996
|
+
console.log('Review submitted successfully');
|
|
1997
|
+
}
|
|
1998
|
+
// Close review dialog
|
|
1999
|
+
this.showReviewDialog = false;
|
|
2000
|
+
this.isSubmittingReview = false;
|
|
2001
|
+
}
|
|
2002
|
+
catch (error) {
|
|
2003
|
+
console.error('Error submitting review:', error);
|
|
2004
|
+
this.isSubmittingReview = false;
|
|
2005
|
+
// Still close the dialog even if review submission fails
|
|
2006
|
+
this.showReviewDialog = false;
|
|
2007
|
+
}
|
|
2008
|
+
}
|
|
2009
|
+
async handleReviewSkip() {
|
|
2010
|
+
// Close review dialog and end chat
|
|
2011
|
+
this.showReviewDialog = false;
|
|
2012
|
+
await this.endChatSession();
|
|
2013
|
+
}
|
|
2014
|
+
async endChatSession() {
|
|
1734
2015
|
if (this.sessionId) {
|
|
1735
2016
|
await this.closeChatSession(this.sessionId);
|
|
1736
2017
|
this.sessionId = null;
|
|
@@ -1749,9 +2030,78 @@ class HelpCenterWidgetComponent {
|
|
|
1749
2030
|
cancelEndChat() {
|
|
1750
2031
|
this.showEndChatConfirmation = false;
|
|
1751
2032
|
}
|
|
2033
|
+
async confirmStartNewChat() {
|
|
2034
|
+
this.showStartNewChatConfirmation = false;
|
|
2035
|
+
if (this.pendingNewChatOption) {
|
|
2036
|
+
// Clear current chat session
|
|
2037
|
+
await this.clearCurrentChat();
|
|
2038
|
+
// Start new chat with the pending option
|
|
2039
|
+
await this.startNewChatWithOption(this.pendingNewChatOption);
|
|
2040
|
+
this.pendingNewChatOption = null;
|
|
2041
|
+
}
|
|
2042
|
+
}
|
|
2043
|
+
cancelStartNewChat() {
|
|
2044
|
+
this.showStartNewChatConfirmation = false;
|
|
2045
|
+
this.pendingNewChatOption = null;
|
|
2046
|
+
}
|
|
2047
|
+
async clearCurrentChat() {
|
|
2048
|
+
if (this.sessionId) {
|
|
2049
|
+
await this.closeChatSession(this.sessionId);
|
|
2050
|
+
this.sessionId = null;
|
|
2051
|
+
}
|
|
2052
|
+
// Stop Ably connection
|
|
2053
|
+
await ClientAblyService.stopConnection();
|
|
2054
|
+
this.isAblyConnected = false;
|
|
2055
|
+
// Clear messages and reset state
|
|
2056
|
+
this.messages = [];
|
|
2057
|
+
this.needsAgent = false;
|
|
2058
|
+
this.assistantStatus = 'idle';
|
|
2059
|
+
this.selectedOption = null;
|
|
2060
|
+
this.selectedNestedOption = null;
|
|
2061
|
+
}
|
|
2062
|
+
async startNewChatWithOption(option) {
|
|
2063
|
+
this.selectedOption = option;
|
|
2064
|
+
this.chatIsLoading = true;
|
|
2065
|
+
try {
|
|
2066
|
+
// Create chat session (includes Ably connection setup)
|
|
2067
|
+
await this.createChatSession(option);
|
|
2068
|
+
// Add greeting message
|
|
2069
|
+
this.messages.push({
|
|
2070
|
+
id: Date.now(),
|
|
2071
|
+
sender: 'assistant',
|
|
2072
|
+
senderType: 3,
|
|
2073
|
+
messageContent: option.assistant?.greeting ||
|
|
2074
|
+
(this.currentLang === 'en'
|
|
2075
|
+
? 'Hello! How can I assist you today?'
|
|
2076
|
+
: 'مرحباً! كيف يمكنني مساعدتك اليوم؟'),
|
|
2077
|
+
sentAt: new Date(),
|
|
2078
|
+
isSeen: true,
|
|
2079
|
+
});
|
|
2080
|
+
// Update UI state
|
|
2081
|
+
this.showChat = true;
|
|
2082
|
+
this.isChatClosed = false;
|
|
2083
|
+
this.showHelpScreenData = false;
|
|
2084
|
+
this.chatIsLoading = false;
|
|
2085
|
+
}
|
|
2086
|
+
catch (error) {
|
|
2087
|
+
console.error('Error starting new chat:', error);
|
|
2088
|
+
this.chatIsLoading = false;
|
|
2089
|
+
// Show error message to user
|
|
2090
|
+
this.messages.push({
|
|
2091
|
+
id: Date.now(),
|
|
2092
|
+
sender: 'assistant',
|
|
2093
|
+
senderType: 3,
|
|
2094
|
+
messageContent: 'Failed to start chat. Please try again.\n فشل في بدء المحادثة. يرجى المحاولة مرة أخرى.',
|
|
2095
|
+
sentAt: new Date(),
|
|
2096
|
+
isSeen: true,
|
|
2097
|
+
});
|
|
2098
|
+
}
|
|
2099
|
+
}
|
|
1752
2100
|
async closeChatSession(chatSessionId) {
|
|
1753
2101
|
try {
|
|
1754
|
-
const response = await this.apiService.apiRequest(`Client/ClientChatSession/${chatSessionId}/close`, 'POST'
|
|
2102
|
+
const response = await this.apiService.apiRequest(`Client/ClientChatSession/${chatSessionId}/close`, 'POST', null, {
|
|
2103
|
+
'Accept-Langauge': this.currentLang,
|
|
2104
|
+
});
|
|
1755
2105
|
return await response.json();
|
|
1756
2106
|
}
|
|
1757
2107
|
catch (error) {
|
|
@@ -1765,6 +2115,8 @@ class HelpCenterWidgetComponent {
|
|
|
1765
2115
|
this.isPopupOpen = false;
|
|
1766
2116
|
this.selectedOption = null;
|
|
1767
2117
|
this.selectedNestedOption = null;
|
|
2118
|
+
// Clear messages when closing popup to ensure fresh start next time
|
|
2119
|
+
this.messages = [];
|
|
1768
2120
|
}
|
|
1769
2121
|
handleCloseArrowAnimation() {
|
|
1770
2122
|
this.showArrowAnimation = false;
|
|
@@ -1773,6 +2125,7 @@ class HelpCenterWidgetComponent {
|
|
|
1773
2125
|
if (this.showChat) {
|
|
1774
2126
|
this.showChat = false;
|
|
1775
2127
|
this.showHelpScreenData = true;
|
|
2128
|
+
// Don't clear sessionId or messages when going back - user might want to return to chat
|
|
1776
2129
|
}
|
|
1777
2130
|
else if (this.selectedNestedOption) {
|
|
1778
2131
|
this.selectedNestedOption = null;
|
|
@@ -1828,7 +2181,7 @@ class HelpCenterWidgetComponent {
|
|
|
1828
2181
|
window.open(url, '_blank');
|
|
1829
2182
|
}
|
|
1830
2183
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpCenterWidgetComponent, deps: [{ token: ApiService }, { token: TranslationService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1831
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled", primaryColor: "primaryColor", logoUrl: "logoUrl" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation\"\n [isPopupOpen]=\"isPopupOpen\"\n [messageLabel]=\"messageLabel\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button (togglePopup)=\"handleTogglePopup()\"></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen\"\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n [status]=\"status\"\n [error]=\"error\"\n [helpScreenData]=\"helpScreenData\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\"\n [isChatClosed]=\"isChatClosed\"\n [currentLang]=\"currentLang\"\n [chatIsLoading]=\"chatIsLoading\"\n [sessionId]=\"sessionId\"\n [isIntroScreenEnabled]=\"isIntroScreenEnabled\"\n [selectedOption]=\"selectedOption\"\n [selectedNestedOption]=\"selectedNestedOption\"\n [showEndChatConfirmation]=\"showEndChatConfirmation\"\n (closePopup)=\"handleClosePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (hideHelpScreenData)=\"handleHideHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n
|
|
2184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: "getToken", helpScreenId: "helpScreenId", showArrow: "showArrow", messageLabel: "messageLabel", currentLang: "currentLang", isIntroScreenEnabled: "isIntroScreenEnabled", primaryColor: "primaryColor", logoUrl: "logoUrl" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation\"\n [isPopupOpen]=\"isPopupOpen\"\n [messageLabel]=\"messageLabel\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button (togglePopup)=\"handleTogglePopup()\"></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen\"\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n [status]=\"status\"\n [error]=\"error\"\n [helpScreenData]=\"helpScreenData\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\"\n [isChatClosed]=\"isChatClosed\"\n [currentLang]=\"currentLang\"\n [chatIsLoading]=\"chatIsLoading\"\n [sessionId]=\"sessionId\"\n [isIntroScreenEnabled]=\"isIntroScreenEnabled\"\n [selectedOption]=\"selectedOption\"\n [selectedNestedOption]=\"selectedNestedOption\"\n [showEndChatConfirmation]=\"showEndChatConfirmation\"\n [showStartNewChatConfirmation]=\"showStartNewChatConfirmation\"\n [showReviewDialog]=\"showReviewDialog\"\n [isSubmittingReview]=\"isSubmittingReview\"\n (closePopup)=\"handleClosePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (confirmStartNewChat)=\"confirmStartNewChat()\"\n (cancelStartNewChat)=\"cancelStartNewChat()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (hideHelpScreenData)=\"handleHideHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n > </app-help-popup>\n</div>\n", styles: [".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}::ng-deep .babylai-p-6{padding:1.5rem!important}::ng-deep .babylai-p-8{padding:2rem!important}::ng-deep *,::ng-deep *:before,::ng-deep *:after{box-sizing:border-box;margin:0;padding:0}\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;--babylai-storm-dust: #3d3d3d;--babylai-storm-dust-950: #262626;--babylai-primary-color: #ad49e1;--babylai-primary-color-100: #f6ecfc;--babylai-primary-color-200: #deb6f3;--babylai-primary-color-300: #d49cee;--babylai-primary-color-400: #c57fea;--babylai-primary-color-500: #ad49e1;--babylai-primary-color-600: #672b87;--babylai-primary-color-700: #451d5a;--babylai-primary-color-800: #220e2d;--babylai-primary-color-900: #110716;--babylai-primary-color-950: #0a0310;--background: #ffffff;--foreground: #333333;--card: #ffffff;--card-foreground: #333333;--popover: #ffffff;--popover-foreground: #333333;--secondary: #f3f3f3;--secondary-foreground: #333333;--muted: #f3f3f3;--muted-foreground: #606060;--accent: #f3f3f3;--accent-foreground: #333333;--destructive: #ef4444;--destructive-foreground: #ffffff;--border: #e2e2e2;--input: #e2e2e2;--ring: #ad49e1;--radius: .5rem}*:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;text-decoration:underline}@media (prefers-contrast: high){:root{--background: #ffffff;--foreground: #000000;--card: #ffffff;--card-foreground: #000000;--border: #000000;--muted-foreground: #000000}}@media (prefers-color-scheme: dark){:root{--black-white-50: #000000;--black-white-100: #050505;--black-white-200: #0a0a0a;--black-white-300: #171717;--black-white-400: #1f1f1f;--black-white-500: #333333;--black-white-600: #606060;--black-white-700: #919191;--black-white-800: #e2e2e2;--black-white-900: #f3f3f3;--black-white-950: #ffffff;--black-white-default: #e2e2e2;--babylai-storm-dust: #262626;--babylai-storm-dust-950: #3d3d3d;--background: #121212;--foreground: #ffffff;--card: #262626;--card-foreground: #ffffff;--popover: #1e1e1e;--popover-foreground: #ffffff;--secondary: #3d3d3d;--secondary-foreground: #ffffff;--muted: #2a2a2a;--muted-foreground: #b3b3b3;--accent: #2a2a2a;--accent-foreground: #ffffff;--destructive: #ff6b6b;--destructive-foreground: #ffffff;--border: #404040;--input: var(--card);--ring: #ad49e1}body{background-color:var(--background);color:var(--foreground)}.card--default,.card--shadowed{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.help-popup{box-shadow:0 10px 15px -3px #0006,0 4px 6px -2px #0000004d}*:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;text-decoration:underline}}@media (prefers-color-scheme: dark) and (prefers-contrast: high){:root{--background: #000000;--foreground: #ffffff;--card: #000000;--card-foreground: #ffffff;--border: #ffffff;--muted-foreground: #ffffff}}@media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.button:hover{transform:none!important}.chat__send-button:hover:not(:disabled){transform:translateY(-50%)!important}}@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: "ngmodule", type: FormsModule }, { kind: "component", type: ArrowAnimationComponent, selector: "app-arrow-animation", inputs: ["showArrowAnimation", "isPopupOpen", "messageLabel"], outputs: ["closeArrowAnimation"] }, { kind: "component", type: HelpButtonComponent, selector: "app-help-button", outputs: ["togglePopup"] }, { kind: "component", type: HelpPopupComponent, selector: "app-help-popup", inputs: ["isPopupOpen", "showHelpScreenData", "showChat", "status", "error", "helpScreenData", "messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "chatIsLoading", "sessionId", "isIntroScreenEnabled", "selectedOption", "selectedNestedOption", "showEndChatConfirmation", "showStartNewChatConfirmation", "showReviewDialog", "isSubmittingReview"], outputs: ["closePopup", "back", "showChatEvent", "endChat", "confirmEndChat", "cancelEndChat", "confirmStartNewChat", "cancelStartNewChat", "reviewSubmit", "reviewSkip", "sendMessageEvent", "startNewChat", "showHelpScreenDataEvent", "hideHelpScreenData", "navigateToUrl"] }] });
|
|
1832
2185
|
}
|
|
1833
2186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
|
|
1834
2187
|
type: Component,
|
|
@@ -1838,7 +2191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
|
|
|
1838
2191
|
ArrowAnimationComponent,
|
|
1839
2192
|
HelpButtonComponent,
|
|
1840
2193
|
HelpPopupComponent,
|
|
1841
|
-
], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation\"\n [isPopupOpen]=\"isPopupOpen\"\n [messageLabel]=\"messageLabel\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button (togglePopup)=\"handleTogglePopup()\"></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen\"\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n [status]=\"status\"\n [error]=\"error\"\n [helpScreenData]=\"helpScreenData\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\"\n [isChatClosed]=\"isChatClosed\"\n [currentLang]=\"currentLang\"\n [chatIsLoading]=\"chatIsLoading\"\n [sessionId]=\"sessionId\"\n [isIntroScreenEnabled]=\"isIntroScreenEnabled\"\n [selectedOption]=\"selectedOption\"\n [selectedNestedOption]=\"selectedNestedOption\"\n [showEndChatConfirmation]=\"showEndChatConfirmation\"\n (closePopup)=\"handleClosePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (hideHelpScreenData)=\"handleHideHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n
|
|
2194
|
+
], template: "<div class=\"help-center-container\" [dir]=\"getDirection()\">\n <!-- TEST: Version mismatch fixed - Arrow Animation - SUCCESS! -->\n <app-arrow-animation\n [showArrowAnimation]=\"showArrowAnimation\"\n [isPopupOpen]=\"isPopupOpen\"\n [messageLabel]=\"messageLabel\"\n (closeArrowAnimation)=\"handleCloseArrowAnimation()\"\n ></app-arrow-animation>\n\n <!-- Help Button -->\n <app-help-button (togglePopup)=\"handleTogglePopup()\"></app-help-button>\n\n <!-- Help Popup -->\n <app-help-popup\n [isPopupOpen]=\"isPopupOpen\"\n [showHelpScreenData]=\"showHelpScreenData\"\n [showChat]=\"showChat\"\n [status]=\"status\"\n [error]=\"error\"\n [helpScreenData]=\"helpScreenData\"\n [messages]=\"messages\"\n [needsAgent]=\"needsAgent\"\n [assistantStatus]=\"assistantStatus\"\n [isAblyConnected]=\"isAblyConnected\"\n [isChatClosed]=\"isChatClosed\"\n [currentLang]=\"currentLang\"\n [chatIsLoading]=\"chatIsLoading\"\n [sessionId]=\"sessionId\"\n [isIntroScreenEnabled]=\"isIntroScreenEnabled\"\n [selectedOption]=\"selectedOption\"\n [selectedNestedOption]=\"selectedNestedOption\"\n [showEndChatConfirmation]=\"showEndChatConfirmation\"\n [showStartNewChatConfirmation]=\"showStartNewChatConfirmation\"\n [showReviewDialog]=\"showReviewDialog\"\n [isSubmittingReview]=\"isSubmittingReview\"\n (closePopup)=\"handleClosePopup()\"\n (back)=\"handleBack()\"\n (showChatEvent)=\"handleShowChat()\"\n (endChat)=\"handleEndChat()\"\n (confirmEndChat)=\"confirmEndChat()\"\n (cancelEndChat)=\"cancelEndChat()\"\n (confirmStartNewChat)=\"confirmStartNewChat()\"\n (cancelStartNewChat)=\"cancelStartNewChat()\"\n (reviewSubmit)=\"handleReviewSubmit($event)\"\n (reviewSkip)=\"handleReviewSkip()\"\n (sendMessageEvent)=\"sendMessage($event)\"\n (startNewChat)=\"handleStartNewChat($event)\"\n (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n (hideHelpScreenData)=\"handleHideHelpScreenData()\"\n (navigateToUrl)=\"navigateToUrl($event)\"\n > </app-help-popup>\n</div>\n", styles: [".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}::ng-deep .babylai-p-6{padding:1.5rem!important}::ng-deep .babylai-p-8{padding:2rem!important}::ng-deep *,::ng-deep *:before,::ng-deep *:after{box-sizing:border-box;margin:0;padding:0}\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;--babylai-storm-dust: #3d3d3d;--babylai-storm-dust-950: #262626;--babylai-primary-color: #ad49e1;--babylai-primary-color-100: #f6ecfc;--babylai-primary-color-200: #deb6f3;--babylai-primary-color-300: #d49cee;--babylai-primary-color-400: #c57fea;--babylai-primary-color-500: #ad49e1;--babylai-primary-color-600: #672b87;--babylai-primary-color-700: #451d5a;--babylai-primary-color-800: #220e2d;--babylai-primary-color-900: #110716;--babylai-primary-color-950: #0a0310;--background: #ffffff;--foreground: #333333;--card: #ffffff;--card-foreground: #333333;--popover: #ffffff;--popover-foreground: #333333;--secondary: #f3f3f3;--secondary-foreground: #333333;--muted: #f3f3f3;--muted-foreground: #606060;--accent: #f3f3f3;--accent-foreground: #333333;--destructive: #ef4444;--destructive-foreground: #ffffff;--border: #e2e2e2;--input: #e2e2e2;--ring: #ad49e1;--radius: .5rem}*:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;text-decoration:underline}@media (prefers-contrast: high){:root{--background: #ffffff;--foreground: #000000;--card: #ffffff;--card-foreground: #000000;--border: #000000;--muted-foreground: #000000}}@media (prefers-color-scheme: dark){:root{--black-white-50: #000000;--black-white-100: #050505;--black-white-200: #0a0a0a;--black-white-300: #171717;--black-white-400: #1f1f1f;--black-white-500: #333333;--black-white-600: #606060;--black-white-700: #919191;--black-white-800: #e2e2e2;--black-white-900: #f3f3f3;--black-white-950: #ffffff;--black-white-default: #e2e2e2;--babylai-storm-dust: #262626;--babylai-storm-dust-950: #3d3d3d;--background: #121212;--foreground: #ffffff;--card: #262626;--card-foreground: #ffffff;--popover: #1e1e1e;--popover-foreground: #ffffff;--secondary: #3d3d3d;--secondary-foreground: #ffffff;--muted: #2a2a2a;--muted-foreground: #b3b3b3;--accent: #2a2a2a;--accent-foreground: #ffffff;--destructive: #ff6b6b;--destructive-foreground: #ffffff;--border: #404040;--input: var(--card);--ring: #ad49e1}body{background-color:var(--background);color:var(--foreground)}.card--default,.card--shadowed{box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -1px #0003}.help-popup{box-shadow:0 10px 15px -3px #0006,0 4px 6px -2px #0000004d}*:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;text-decoration:underline}}@media (prefers-color-scheme: dark) and (prefers-contrast: high){:root{--background: #000000;--foreground: #ffffff;--card: #000000;--card-foreground: #ffffff;--border: #ffffff;--muted-foreground: #ffffff}}@media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.button:hover{transform:none!important}.chat__send-button:hover:not(:disabled){transform:translateY(-50%)!important}}@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"] }]
|
|
1842
2195
|
}], ctorParameters: () => [{ type: ApiService }, { type: TranslationService }, { type: ThemeService }], propDecorators: { getToken: [{
|
|
1843
2196
|
type: Input
|
|
1844
2197
|
}], helpScreenId: [{
|