@aslaluroba/help-center 4.0.0 → 4.0.2

package/fesm2022/aslaluroba-help-center.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, output, ChangeDetectionStrategy, Component, inject, Pipe, computed, ViewEncapsulation, signal, effect, SecurityContext, ViewChild, EventEmitter, Output, Input, HostListener, DestroyRef } from '@angular/core';
+import { Injectable, input, output, ChangeDetectionStrategy, Component, inject, Pipe, computed, effect, ViewChild, CUSTOM_ELEMENTS_SCHEMA, signal, ViewEncapsulation, SecurityContext, EventEmitter, Output, Input, DestroyRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { BehaviorSubject, from, throwError, Observable, forkJoin, catchError as catchError$1, of, firstValueFrom } from 'rxjs';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import { marked } from 'marked';
 import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http';
 import { switchMap, map, catchError, filter } from 'rxjs/operators';
 import * as Ably from 'ably';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * Service for handling API requests with automatic authentication token management.
@@ -340,10 +340,10 @@ class ApiService {
         }
         return response;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -358,12 +358,12 @@ class ArrowAnimationComponent {
     handleCloseArrowAnimation() {
         this.closeArrowAnimation.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ArrowAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ArrowAnimationComponent, isStandalone: true, selector: "app-arrow-animation", inputs: { showArrowAnimation: { classPropertyName: "showArrowAnimation", publicName: "showArrowAnimation", isSignal: true, isRequired: false, transformFunction: null }, isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null } }, 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 \n      class=\"close-button\" \n      (click)=\"handleCloseArrowAnimation()\"\n      type=\"button\"\n      [attr.aria-label]=\"'Close'\"\n    >\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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrowAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ArrowAnimationComponent, isStandalone: true, selector: "app-arrow-animation", inputs: { showArrowAnimation: { classPropertyName: "showArrowAnimation", publicName: "showArrowAnimation", isSignal: true, isRequired: false, transformFunction: null }, isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeArrowAnimation: "closeArrowAnimation" }, ngImport: i0, template: "@if (showArrowAnimation() && !isPopupOpen()) {\n<div class=\"arrow-animation fixed bottom-24 right-6 z-[9997] animate-float\">\n  <div class=\"message-box relative bg-primary rounded-full mb-4 shadow-lg px-4 py-3 max-w-xs\">\n    <p class=\"text-sm mb-2 text-white\">\n      {{\n        messageLabel() ||\n          \"Need assistance Or You want to try the Product? Click here\"\n      }}\n    </p>\n    <button \n      class=\"close-button absolute top-2 right-2 w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors\" \n      (click)=\"handleCloseArrowAnimation()\"\n      type=\"button\"\n      [attr.aria-label]=\"'Close'\"\n    >\n      <svg class=\"w-3 h-3\" 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=\"absolute bottom-[-8px] right-6 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-primary\"></div>\n  </div>\n</div>\n}\n", styles: [".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 p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-.5rem;right:-.5rem;width:1.25rem;height:1.25rem;border-radius:9999px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:var(--primary-color-700);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ArrowAnimationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrowAnimationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-arrow-animation', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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 \n      class=\"close-button\" \n      (click)=\"handleCloseArrowAnimation()\"\n      type=\"button\"\n      [attr.aria-label]=\"'Close'\"\n    >\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"] }]
+            args: [{ selector: 'app-arrow-animation', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showArrowAnimation() && !isPopupOpen()) {\n<div class=\"arrow-animation fixed bottom-24 right-6 z-[9997] animate-float\">\n  <div class=\"message-box relative bg-primary rounded-full mb-4 shadow-lg px-4 py-3 max-w-xs\">\n    <p class=\"text-sm mb-2 text-white\">\n      {{\n        messageLabel() ||\n          \"Need assistance Or You want to try the Product? Click here\"\n      }}\n    </p>\n    <button \n      class=\"close-button absolute top-2 right-2 w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors\" \n      (click)=\"handleCloseArrowAnimation()\"\n      type=\"button\"\n      [attr.aria-label]=\"'Close'\"\n    >\n      <svg class=\"w-3 h-3\" 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=\"absolute bottom-[-8px] right-6 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-primary\"></div>\n  </div>\n</div>\n}\n", styles: [".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 p{font-size:.75rem;font-weight:700;margin:0}.arrow-animation .message-box .close-button{position:absolute;top:-.5rem;right:-.5rem;width:1.25rem;height:1.25rem;border-radius:9999px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;padding:3px}.arrow-animation .message-box .close-button:hover{background-color:var(--primary-color-700);color:#fff}\n"] }]
         }], propDecorators: { showArrowAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrowAnimation", required: false }] }], isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], messageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageLabel", required: false }] }], closeArrowAnimation: [{ type: i0.Output, args: ["closeArrowAnimation"] }] } });
 
 class HelpButtonComponent {
@@ -372,12 +372,12 @@ class HelpButtonComponent {
     handleTogglePopup() {
         this.togglePopup.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: HelpButtonComponent, isStandalone: true, selector: "app-help-button", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { togglePopup: "togglePopup" }, ngImport: i0, template: "<button \n  class=\"help-button\" \n  (click)=\"handleTogglePopup()\"\n  type=\"button\"\n  [attr.aria-label]=\"'Toggle help center'\"\n  [attr.aria-expanded]=\"isPopupOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  (keydown.enter)=\"handleTogglePopup()\"\n  (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n  <span class=\"help-button-content\">\n    <svg\n      class=\"help-button-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  </span>\n</button>\n", styles: [".help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:var(--babylai-primary-color-300, #d49cee);transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem;color:var(--babylai-primary-color, #ad49e1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: HelpButtonComponent, isStandalone: true, selector: "app-help-button", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { togglePopup: "togglePopup" }, ngImport: i0, template: "<button \n  class=\"fixed bottom-6 right-6 z-[9998] w-14 h-14 rounded-full shadow-lg bg-primary flex items-center justify-center transition-all duration-300 hover:scale-110 cursor-pointer\"\n  (click)=\"handleTogglePopup()\"\n  type=\"button\"\n  [attr.aria-label]=\"'Toggle help center'\"\n  [attr.aria-expanded]=\"isPopupOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  (keydown.enter)=\"handleTogglePopup()\"\n  (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n  <span class=\"flex items-center justify-center w-full h-full text-primary\">\n    <svg\n      class=\"w-8 h-8\"\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</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-help-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  class=\"help-button\" \n  (click)=\"handleTogglePopup()\"\n  type=\"button\"\n  [attr.aria-label]=\"'Toggle help center'\"\n  [attr.aria-expanded]=\"isPopupOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  (keydown.enter)=\"handleTogglePopup()\"\n  (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n  <span class=\"help-button-content\">\n    <svg\n      class=\"help-button-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  </span>\n</button>\n", styles: [".help-button{width:3.5rem;height:3.5rem;border-radius:9999px;background-color:var(--babylai-primary-color, #ad49e1);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px;transition:transform .2s ease-out;position:fixed;bottom:1.25rem;right:1.25rem;z-index:1000}.help-button:hover{background-color:var(--babylai-primary-color-300, #d49cee);transform:scale(1.05)}.help-button:active{transform:scale(.95)}.help-button-content{display:flex;align-items:center;justify-content:center}.help-button-logo{width:1.5rem;height:1.5rem;color:var(--babylai-primary-color, #ad49e1)}\n"] }]
+            args: [{ selector: 'app-help-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  class=\"fixed bottom-6 right-6 z-[9998] w-14 h-14 rounded-full shadow-lg bg-primary flex items-center justify-center transition-all duration-300 hover:scale-110 cursor-pointer\"\n  (click)=\"handleTogglePopup()\"\n  type=\"button\"\n  [attr.aria-label]=\"'Toggle help center'\"\n  [attr.aria-expanded]=\"isPopupOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  (keydown.enter)=\"handleTogglePopup()\"\n  (keydown.space)=\"$event.preventDefault(); handleTogglePopup()\"\n>\n  <span class=\"flex items-center justify-center w-full h-full text-primary\">\n    <svg\n      class=\"w-8 h-8\"\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</button>\n" }]
         }], propDecorators: { isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], togglePopup: [{ type: i0.Output, args: ["togglePopup"] }] } });
 
 // src/app/services/translation.service.ts
@@ -395,20 +395,20 @@ class TranslationService {
             ChatIntroMessage: 'Chat with BabylAI 🚀',
             BabylaiTitle: 'BabylAI',
             BabylaiDescription: "Hey there! 👋 I'm BabylAI, here to assist you.",
-            ChatNow: 'Chat Now',
+            ChatNow: 'Let\'s Chat',
             TryBableAI: 'Try BabylAI for Free 🎉',
             ContactUs: "Contact us, Let's Talk! 💬",
-            PickTopicTitle: 'Pick a Topic to Get Started',
+            HelpCenter: 'Help Center',
             BabylAI: 'BabylAI',
             ChatPlaceholder: 'Type your message...',
-            PoweredByBabylAI: 'Powered by BabylAI © 2025',
+            PoweredByBabylAI: 'Powered by',
             EndChat: 'End Chat',
             LeavingDialogTitle: 'Leaving so soon? 👋',
             LeavingDialogBody: "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
             StartNewChatDialogTitle: 'End and Start New Chat',
             StartNewChatDialogBody: 'Are you sure you want to end the current conversation and start a new one?',
-            ReviewDialogTitle: 'Add your Review',
-            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!',
+            ReviewDialogTitle: 'How was your conversation with us today?',
+            ReviewDialogDescription: 'We’d love to know how we did — your feedback helps us make every chat even better.',
             ReviewDialogRatingLabel: 'Rating:',
             ReviewDialogCommentLabel: 'Comment:',
             ReviewDialogCommentPlaceholder: 'Write your comment here...',
@@ -429,25 +429,27 @@ class TranslationService {
             ErrorNetworkFailure: 'Network error. Please check your connection and try again.',
             ErrorUnknown: 'An unexpected error occurred. Please try again.',
             ErrorMessageTooLong: 'Message is too long. Maximum 5000 characters allowed.',
-            ErrorMessageEmpty: 'Message cannot be empty.'
+            ErrorMessageEmpty: 'Message cannot be empty.',
+            CloseChat: 'Close Chat',
+            Continue: 'Continue',
         },
         ar: {
             ChatIntroMessage: 'دردش مع BabylAI 🚀',
             BabylaiTitle: 'BabylAI',
             BabylaiDescription: 'مرحبا! 👋 أنا BabylAI، هنا لتساعدك.',
-            ChatNow: 'دردش الآن',
+            ChatNow: 'دعنا نتحدث',
             TryBableAI: 'جرب BabylAI مجانا 🎉',
             ContactUs: 'تواصل معنا, دعنا نتحدث! 💬',
-            PickTopicTitle: 'اختر موضوع للبدء',
+            HelpCenter: 'مركز المساعدة',
             BabylAI: 'BabylAI',
             ChatPlaceholder: 'اكتب رسالتك...',
-            PoweredByBabylAI: 'مدعوم من BabylAI © 2025',
+            PoweredByBabylAI: 'مدعوم من',
             EndChat: 'إنهاء الدردشة',
             LeavingDialogTitle: 'هل تغادر بالفعل؟ 👋',
             LeavingDialogBody: 'لا تقلق، يمكنك العودة في أي وقت. نحن دائماً هنا إذا كنت بحاجة إلى مساعدة أو لديك أسئلة.',
             StartNewChatDialogTitle: 'إنهاء وبدء دردشة جديدة',
             StartNewChatDialogBody: 'هل أنت متأكد من أنك تريد إنهاء المحادثة الحالية وبدء محادثة جديدة؟',
-            ReviewDialogTitle: 'أضف تقييمك',
+            ReviewDialogTitle: 'كيف كانت تجربتك معنا؟',
             ReviewDialogDescription: 'نقدر ملاحظاتك! يرجى قضاء لحظة لتقييم تجربتك ومشاركة أفكارك في قسم التعليقات أدناه. تقييمك يساعدنا في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مدروسة. شكراً لك!',
             ReviewDialogRatingLabel: 'التقييم:',
             ReviewDialogCommentLabel: 'التعليق:',
@@ -469,7 +471,9 @@ class TranslationService {
             ErrorNetworkFailure: 'خطأ في الشبكة. يرجى التحقق من الاتصال والمحاولة مرة أخرى.',
             ErrorUnknown: 'حدث خطأ غير متوقع. يرجى المحاولة مرة أخرى.',
             ErrorMessageTooLong: 'الرسالة طويلة جداً. الحد الأقصى 5000 حرف.',
-            ErrorMessageEmpty: 'لا يمكن أن تكون الرسالة فارغة.'
+            ErrorMessageEmpty: 'لا يمكن أن تكون الرسالة فارغة.',
+            CloseChat: 'إغلاق الدردشة',
+            Continue: 'متابعة',
         }
     };
     _currentLang = new BehaviorSubject('en');
@@ -483,7 +487,7 @@ class TranslationService {
      * @example
      * ```typescript
      * const message = translationService.translate('ChatNow');
-     * // Returns 'Chat Now' in English or 'دردش الآن' in Arabic
+     * // Returns 'Let\'s Chat' in English or 'دعنا نتحدث' in Arabic
      * ```
      */
     translate(key) {
@@ -511,10 +515,10 @@ class TranslationService {
     getCurrentLang() {
         return this._currentLang.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TranslationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TranslationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -543,10 +547,10 @@ class TranslatePipe {
     transform(key) {
         return this.translationService.translate(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'translate',
@@ -554,81 +558,406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
-class ButtonComponent {
+class LoadingComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loading flex items-center justify-center\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n  <span class=\"sr-only\">Loading, please wait</span>\n  <div class=\"loader w-8 h-8 border-4 rounded-full animate-spin\" [style.border-color]=\"variant() === 'primary' ? 'var(--primary-color)' : 'var(--muted-foreground)'\" [style.border-top-color]=\"variant() === 'primary' ? 'var(--primary-color-600)' : 'var(--foreground)'\" aria-hidden=\"true\"></div>\n</div>\n\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loading flex items-center justify-center\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n  <span class=\"sr-only\">Loading, please wait</span>\n  <div class=\"loader w-8 h-8 border-4 rounded-full animate-spin\" [style.border-color]=\"variant() === 'primary' ? 'var(--primary-color)' : 'var(--muted-foreground)'\" [style.border-top-color]=\"variant() === 'primary' ? 'var(--primary-color-600)' : 'var(--foreground)'\" aria-hidden=\"true\"></div>\n</div>\n\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class ButtonComponent {
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
     className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    direction = input('ltr', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     onClick = output();
     getButtonClasses = computed(() => {
-        const classes = ['button'];
-        // Add variant class
-        classes.push(`button--${this.variant()}`);
+        const classes = [
+            'button',
+            'cursor-pointer',
+            'transition-all',
+            'duration-200',
+            'ease-out',
+            'inline-flex',
+            'items-center',
+            'justify-center',
+            'relative',
+            'gap-1',
+            'text-xl',
+            'disabled:bg-black-white-300',
+            'disabled:cursor-not-allowed',
+            'disabled:text-white',
+            'disabled:border-black-white-300',
+        ];
+        // Add variant-specific classes
+        if (this.variant() === 'default') {
+            classes.push('bg-primary', 'text-white', 'p-3', 'rounded-2xl', 'border', 'border-primary');
+        }
+        else if (this.variant() === 'outline') {
+            classes.push('p-3', 'rounded-2xl', 'border', 'text-primary');
+        }
+        else if (this.variant() === 'icon-bg') {
+            if (this.className().includes('white-bg')) {
+                classes.push('bg-white');
+            }
+            else if (this.className().includes('light-bg')) {
+                // Will be handled by CSS variables
+            }
+            if (this.size() === 'small') {
+                classes.push('p-2', 'w-7', 'h-7');
+            }
+            else {
+                classes.push('p-3');
+            }
+        }
+        else if (this.variant() === 'icon-only') {
+            classes.push('bg-transparent', 'border-none', 'p-1', 'flex', 'items-center', 'justify-center');
+        }
         // Add full width class if needed
         if (this.fullWidth()) {
-            classes.push('button--full-width');
-        }
-        // Add size class if needed
-        if (this.size()) {
-            classes.push(`button--${this.size()}`);
+            classes.push('w-full', 'flex');
         }
-        // Add direction class
-        classes.push(`button--${this.direction()}`);
         // Add custom classes
         if (this.className()) {
             classes.push(this.className());
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "getButtonClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [class]=\"getButtonClasses()\"\n  (click)=\"onClick.emit($event)\"\n  [dir]=\"direction()\"\n>\n  <ng-content></ng-content>\n</button>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [class]=\"getButtonClasses()\"\n  (click)=\"onClick.emit($event)\"\n  dir=\"auto\"\n>\n  <ng-content></ng-content>\n</button>\n\n", styles: [".button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [class]=\"getButtonClasses()\"\n  (click)=\"onClick.emit($event)\"\n  [dir]=\"direction()\"\n>\n  <ng-content></ng-content>\n</button>\n\n", 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"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+            args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [class]=\"getButtonClasses()\"\n  (click)=\"onClick.emit($event)\"\n  dir=\"auto\"\n>\n  <ng-content></ng-content>\n</button>\n\n", styles: [".button:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
-class ButtonContentComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ButtonContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ButtonContentComponent, isStandalone: true, selector: "app-button-content", ngImport: i0, template: "<ng-content></ng-content>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class BaseDialogComponent {
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    closeOnOverlayClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOverlayClick" }] : []));
+    ariaLabel = input('Dialog', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    close = output();
+    dialogContainer;
+    previousActiveElement = null;
+    tabKeyListener;
+    escapeKeyListener;
+    focusTimeouts = [];
+    focusEffectRef;
+    constructor() {
+        // Effect to handle focus trapping when dialog opens/closes
+        this.focusEffectRef = effect(() => {
+            if (this.isOpen()) {
+                // Use setTimeout to ensure DOM is fully rendered
+                const timeoutId = setTimeout(() => {
+                    if (this.dialogContainer?.nativeElement) {
+                        this.trapFocus();
+                    }
+                }, 0);
+                this.focusTimeouts.push(timeoutId);
+            }
+            else {
+                this.releaseFocus();
+            }
+        }, ...(ngDevMode ? [{ debugName: "focusEffectRef" }] : []));
+    }
+    ngOnInit() {
+        // Set up Escape key listener for closing dialog
+        this.escapeKeyListener = (event) => {
+            if (event.key === 'Escape' && this.isOpen() && this.closeOnEscape() && !this.isLoading()) {
+                this.handleClose();
+            }
+        };
+        document.addEventListener('keydown', this.escapeKeyListener);
+    }
+    ngAfterViewInit() {
+        if (this.isOpen()) {
+            const timeoutId = setTimeout(() => {
+                if (this.dialogContainer?.nativeElement) {
+                    this.trapFocus();
+                }
+            }, 0);
+            this.focusTimeouts.push(timeoutId);
+        }
+    }
+    ngOnDestroy() {
+        // Clean up effect
+        if (this.focusEffectRef) {
+            this.focusEffectRef.destroy();
+            this.focusEffectRef = undefined;
+        }
+        this.releaseFocus();
+        // Remove Escape key listener
+        if (this.escapeKeyListener) {
+            document.removeEventListener('keydown', this.escapeKeyListener);
+            this.escapeKeyListener = undefined;
+        }
+        // Clear all pending focus timeouts
+        this.focusTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
+        this.focusTimeouts = [];
+    }
+    onOverlayClick() {
+        if (this.closeOnOverlayClick() && !this.isLoading()) {
+            this.handleClose();
+        }
+    }
+    onDialogClick(event) {
+        // Prevent overlay click when clicking inside dialog
+        event.stopPropagation();
+    }
+    handleClose() {
+        if (!this.isLoading()) {
+            this.close.emit();
+        }
+    }
+    trapFocus() {
+        // Store the previously focused element
+        this.previousActiveElement = document.activeElement;
+        // Set up Tab key listener for focus trapping
+        this.tabKeyListener = (event) => {
+            if (event.key !== 'Tab' || !this.isOpen())
+                return;
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (event.shiftKey) {
+                // Shift + Tab
+                if (document.activeElement === firstElement) {
+                    event.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                // Tab
+                if (document.activeElement === lastElement) {
+                    event.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', this.tabKeyListener);
+        // Focus the first focusable element after a short delay to ensure DOM is ready
+        // If no focusable elements exist, focus the container itself
+        const timeoutId = setTimeout(() => {
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+            else if (this.dialogContainer?.nativeElement) {
+                // Fallback: focus the container itself if no focusable elements
+                this.dialogContainer.nativeElement.focus();
+            }
+        }, 0);
+        this.focusTimeouts.push(timeoutId);
+    }
+    releaseFocus() {
+        // Remove Tab key listener
+        if (this.tabKeyListener) {
+            document.removeEventListener('keydown', this.tabKeyListener);
+            this.tabKeyListener = undefined;
+        }
+        // Return focus to the previously active element
+        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+            this.previousActiveElement.focus();
+            this.previousActiveElement = null;
+        }
+    }
+    getFocusableElements() {
+        if (!this.dialogContainer?.nativeElement)
+            return [];
+        const container = this.dialogContainer.nativeElement;
+        const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        return Array.from(container.querySelectorAll(selector)).filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BaseDialogComponent, isStandalone: true, selector: "app-base-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlayClick: { classPropertyName: "closeOnOverlayClick", publicName: "closeOnOverlayClick", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true }], ngImport: i0, template: "@if (isOpen()) {\n<div \n  class=\"dialog-overlay\" \n  (click)=\"onOverlayClick()\" \n  role=\"dialog\" \n  aria-modal=\"true\" \n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"dialog\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n    <ng-content></ng-content>\n    @if (isLoading()) {\n      <div class=\"bg-black/30 flex items-center justify-center absolute inset-0\">\n        <app-loading variant=\"primary\"></app-loading>\n      </div>\n    }\n  </div>\n</div>\n}\n\n", styles: ["::ng-deep .dialog-overlay{position:absolute;inset:0;display:flex;align-items:end;justify-content:center;border-radius:1.5rem;z-index:50;background-color:color-mix(in srgb,var(--card-foreground) 50%,transparent)}::ng-deep .dialog{background-color:var(--card);border-radius:1.5rem 1.5rem 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ButtonContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button-content', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n" }]
-        }] });
+            args: [{ selector: 'app-base-dialog', standalone: true, imports: [CommonModule, LoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n<div \n  class=\"dialog-overlay\" \n  (click)=\"onOverlayClick()\" \n  role=\"dialog\" \n  aria-modal=\"true\" \n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"dialog\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n    <ng-content></ng-content>\n    @if (isLoading()) {\n      <div class=\"bg-black/30 flex items-center justify-center absolute inset-0\">\n        <app-loading variant=\"primary\"></app-loading>\n      </div>\n    }\n  </div>\n</div>\n}\n\n", styles: ["::ng-deep .dialog-overlay{position:absolute;inset:0;display:flex;align-items:end;justify-content:center;border-radius:1.5rem;z-index:50;background-color:color-mix(in srgb,var(--card-foreground) 50%,transparent)}::ng-deep .dialog{background-color:var(--card);border-radius:1.5rem 1.5rem 0 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOverlayClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlayClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], dialogContainer: [{
+                type: ViewChild,
+                args: ['dialogContainer']
+            }] } });
 
-class IconButtonComponent {
+class IconComponent {
+    // Icon name from Solar icon set (e.g., 'solar:home-bold', 'solar:chat-round-bold')
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    // Size of the icon (can be a number or string like '24px', '1em', etc.)
+    size = input('1em', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    // Color of the icon (CSS color value)
+    color = input('currentColor', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    // Additional CSS classes
     className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    onClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: IconButtonComponent, isStandalone: true, selector: "app-icon-button", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<app-button\n  variant=\"icon-bg\"\n  [className]=\"className()\"\n  [disabled]=\"disabled()\"\n  (onClick)=\"onClick.emit($event)\"\n>\n  <ng-content></ng-content>\n</app-button>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    // Whether the icon should be inline
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    // Flip the icon horizontally
+    flip = input(undefined, ...(ngDevMode ? [{ debugName: "flip" }] : []));
+    // Rotate the icon (degrees or '90deg', '180deg', etc.)
+    rotate = input(undefined, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<iconify-icon\n  [icon]=\"name()\"\n  [style.width]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.height]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.font-size]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.color]=\"color()\"\n  [class]=\"className()\"\n  [attr.inline]=\"inline() ? '' : null\"\n  [attr.flip]=\"flip() || null\"\n  [attr.rotate]=\"rotate() ? (typeof rotate() === 'number' ? rotate() + 'deg' : rotate()) : null\"\n></iconify-icon>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-icon-button', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-button\n  variant=\"icon-bg\"\n  [className]=\"className()\"\n  [disabled]=\"disabled()\"\n  (onClick)=\"onClick.emit($event)\"\n>\n  <ng-content></ng-content>\n</app-button>\n\n" }]
-        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+            args: [{ selector: 'app-icon', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<iconify-icon\n  [icon]=\"name()\"\n  [style.width]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.height]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.font-size]=\"typeof size() === 'number' ? size() + 'px' : size()\"\n  [style.color]=\"color()\"\n  [class]=\"className()\"\n  [attr.inline]=\"inline() ? '' : null\"\n  [attr.flip]=\"flip() || null\"\n  [attr.rotate]=\"rotate() ? (typeof rotate() === 'number' ? rotate() + 'deg' : rotate()) : null\"\n></iconify-icon>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
 
-class TransparentIconButtonComponent {
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    onClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TransparentIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: TransparentIconButtonComponent, isStandalone: true, selector: "app-transparent-icon-button", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<app-button\n  variant=\"icon-only\"\n  [className]=\"className()\"\n  [disabled]=\"disabled()\"\n  (onClick)=\"onClick.emit($event)\"\n>\n  <ng-content></ng-content>\n</app-button>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class ConfirmationDialogComponent {
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    body = input('', ...(ngDevMode ? [{ debugName: "body" }] : []));
+    confirmText = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmText" }] : []));
+    cancelText = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
+    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    onConfirm = output();
+    onCancel = output();
+    onClose = output();
+    disableActions = computed(() => this.isLoading(), ...(ngDevMode ? [{ debugName: "disableActions" }] : []));
+    onCloseClick() {
+        this.onClose.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onConfirm: "onConfirm", onCancel: "onCancel", onClose: "onClose" }, ngImport: i0, template: "<app-base-dialog\n  [isOpen]=\"true\"\n  [isLoading]=\"isLoading()\"\n  [ariaLabel]=\"title()\"\n  (close)=\"onCloseClick()\"\n>\n  <div class=\"flex flex-col p-6\">\n    <button class=\"cursor-pointer mb-6 ms-auto\" (click)=\"onCloseClick()\">\n      <app-icon\n        name=\"solar:close-circle-line-duotone\"\n        class=\"flex\"\n        size=\"26px\"\n      />\n    </button>\n    <section\n      class=\"flex items-center justify-center border-b border-black-white-200 pb-6 mb-6\"\n    >\n      <div\n        class=\"flex items-center justify-center w-20 h-20 rounded-full p-3 bg-primary/15 text-primary\"\n      >\n        <app-icon\n          name=\"solar:chat-round-unread-bold-duotone\"\n          class=\"flex\"\n          size=\"64px\"\n        />\n      </div>\n    </section>\n    <h3 class=\"text-2xl text-center font-bold mb-2\">{{ title() }}</h3>\n    <p class=\"text-sm text-center\">{{ body() }}</p>\n  </div>\n  <div class=\"flex justify-between gap-3 mb-5 px-6\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onConfirm.emit()\"\n      class=\"w-full\"\n    >\n      {{ confirmText() }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onCancel.emit()\"\n      class=\"w-full\"\n    >\n      {{ cancelText() }}\n      <svg\n        class=\"w-6 h-6\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          opacity=\"0.5\"\n          d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </app-button>\n  </div>\n</app-base-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [CommonModule, ButtonComponent, BaseDialogComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n  [isOpen]=\"true\"\n  [isLoading]=\"isLoading()\"\n  [ariaLabel]=\"title()\"\n  (close)=\"onCloseClick()\"\n>\n  <div class=\"flex flex-col p-6\">\n    <button class=\"cursor-pointer mb-6 ms-auto\" (click)=\"onCloseClick()\">\n      <app-icon\n        name=\"solar:close-circle-line-duotone\"\n        class=\"flex\"\n        size=\"26px\"\n      />\n    </button>\n    <section\n      class=\"flex items-center justify-center border-b border-black-white-200 pb-6 mb-6\"\n    >\n      <div\n        class=\"flex items-center justify-center w-20 h-20 rounded-full p-3 bg-primary/15 text-primary\"\n      >\n        <app-icon\n          name=\"solar:chat-round-unread-bold-duotone\"\n          class=\"flex\"\n          size=\"64px\"\n        />\n      </div>\n    </section>\n    <h3 class=\"text-2xl text-center font-bold mb-2\">{{ title() }}</h3>\n    <p class=\"text-sm text-center\">{{ body() }}</p>\n  </div>\n  <div class=\"flex justify-between gap-3 mb-5 px-6\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onConfirm.emit()\"\n      class=\"w-full\"\n    >\n      {{ confirmText() }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onCancel.emit()\"\n      class=\"w-full\"\n    >\n      {{ cancelText() }}\n      <svg\n        class=\"w-6 h-6\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          opacity=\"0.5\"\n          d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </app-button>\n  </div>\n</app-base-dialog>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], onConfirm: [{ type: i0.Output, args: ["onConfirm"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+
+class ReviewDialogComponent {
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+    showCommentField = input(true, ...(ngDevMode ? [{ debugName: "showCommentField" }] : []));
+    close = output();
+    submitReview = output();
+    skip = output();
+    rating = signal(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
+    comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : []));
+    // Validation errors
+    ratingError = signal('', ...(ngDevMode ? [{ debugName: "ratingError" }] : []));
+    commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : []));
+    onRatingClick(starIndex) {
+        this.rating.set(starIndex + 1);
+        this.clearRatingError();
+    }
+    onCommentChange() {
+        this.clearCommentError();
+    }
+    onClose() {
+        if (!this.isSubmitting()) {
+            this.close.emit();
+        }
+    }
+    onDialogClose() {
+        this.onClose();
+    }
+    onSubmitReview() {
+        if (this.validateForm() && !this.isSubmitting()) {
+            this.submitReview.emit({
+                rating: this.rating(),
+                comment: this.comment().trim()
+            });
+        }
+    }
+    onSkip() {
+        if (!this.isSubmitting()) {
+            this.skip.emit();
+            this.resetForm();
+        }
+    }
+    validateForm() {
+        let isValid = true;
+        // Validate rating
+        if (this.rating() < 1 || this.rating() > 5) {
+            this.ratingError.set('Rating must be between 1 and 5.');
+            isValid = false;
+        }
+        // Validate comment only if comment field is shown
+        if (this.showCommentField()) {
+            const trimmedComment = this.comment().trim();
+            if (trimmedComment.length < 10) {
+                this.commentError.set('Comment must be at least 10 characters long.');
+                isValid = false;
+            }
+            else if (trimmedComment.length > 500) {
+                this.commentError.set('Comment must not exceed 500 characters.');
+                isValid = false;
+            }
+        }
+        return isValid;
+    }
+    clearRatingError() {
+        this.ratingError.set('');
+    }
+    clearCommentError() {
+        this.commentError.set('');
+    }
+    resetForm() {
+        this.rating.set(0);
+        this.comment.set('');
+        this.ratingError.set('');
+        this.commentError.set('');
+    }
+    getStarsArray() {
+        return Array(5).fill(0).map((_, index) => index);
+    }
+    isStarFilled(starIndex) {
+        return starIndex < this.rating();
+    }
+    getCommentLength() {
+        return this.comment().trim().length;
+    }
+    getCommentMaxLength() {
+        return 500;
+    }
+    getCommentMinLength() {
+        return 10;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ReviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ReviewDialogComponent, isStandalone: true, selector: "app-review-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, showCommentField: { classPropertyName: "showCommentField", publicName: "showCommentField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "<app-base-dialog\n  [isOpen]=\"isOpen()\"\n  [isLoading]=\"isSubmitting()\"\n  [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n  (close)=\"onDialogClose()\"\n>\n  <div class=\"flex flex-col p-6\">\n    <button class=\"cursor-pointer mb-6 ms-auto\" (click)=\"onClose()\">\n      <app-icon\n        name=\"solar:close-circle-line-duotone\"\n        class=\"flex\"\n        size=\"26px\"\n      />\n    </button>\n    <section\n      class=\"flex items-center justify-center border-b border-black-white-200 pb-6 mb-6\"\n    >\n      <!-- Rating Section -->\n      <div>\n        <label class=\"sr-only\">\n          {{ \"ReviewDialogRatingLabel\" | translate }}\n        </label>\n        <div class=\"inline-flex gap-2\">\n          @for (star of getStarsArray(); track star) {\n          <button\n            class=\"hover:text-primary\"\n            [class.text-black-white-200]=\"!isStarFilled(star)\"\n            [class.dark:text-muted-foreground]=\"!isStarFilled(star)\"\n            [class.text-primary]=\"isStarFilled(star)\"\n            [disabled]=\"isSubmitting()\"\n            (click)=\"onRatingClick(star)\"\n            [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n            [attr.aria-pressed]=\"isStarFilled(star)\"\n            role=\"button\"\n            type=\"button\"\n            (keydown.enter)=\"onRatingClick(star)\"\n            (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n          >\n            <svg\n              class=\"h-14 w-14\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <path\n                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              />\n            </svg>\n          </button>\n          }\n        </div>\n        @if (ratingError()) {\n        <div class=\"review-dialog__error\">{{ ratingError() }}</div>\n        }\n      </div>\n    </section>\n    <h3 class=\"text-2xl text-center font-bold mb-2\">\n      {{ \"ReviewDialogTitle\" | translate }}\n    </h3>\n    <p class=\"text-sm text-center text-muted-foreground\">\n      {{ \"ReviewDialogDescription\" | translate }}\n    </p>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"flex justify-between gap-3 my-5 px-6\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSkip()\"\n      class=\"w-full\"\n    >\n      {{ \"ReviewDialogSkipButton\" | translate }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSubmitReview()\"\n      class=\"w-full\"\n    >\n      @if (isSubmitting()) { Submitting... } @else {\n      {{ \"ReviewDialogSubmitButton\" | translate }}\n      }\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".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:600;display:block;margin-bottom:.5rem}.review-dialog__stars{display:flex}.review-dialog__star{background:transparent;border:none;color:var(--card-foreground);cursor:pointer;padding:.25rem;border-radius:2px;transition:all .2s;display:flex;align-items:center;justify-content:center}.review-dialog__star:hover{color:var(--primary-color);transform:scale(1.1)}.review-dialog__star--filled{color:var(--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(--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}.dialog__actions app-button{flex:1;width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ReviewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-review-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, BaseDialogComponent, TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n  [isOpen]=\"isOpen()\"\n  [isLoading]=\"isSubmitting()\"\n  [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n  (close)=\"onDialogClose()\"\n>\n  <div class=\"flex flex-col p-6\">\n    <button class=\"cursor-pointer mb-6 ms-auto\" (click)=\"onClose()\">\n      <app-icon\n        name=\"solar:close-circle-line-duotone\"\n        class=\"flex\"\n        size=\"26px\"\n      />\n    </button>\n    <section\n      class=\"flex items-center justify-center border-b border-black-white-200 pb-6 mb-6\"\n    >\n      <!-- Rating Section -->\n      <div>\n        <label class=\"sr-only\">\n          {{ \"ReviewDialogRatingLabel\" | translate }}\n        </label>\n        <div class=\"inline-flex gap-2\">\n          @for (star of getStarsArray(); track star) {\n          <button\n            class=\"hover:text-primary\"\n            [class.text-black-white-200]=\"!isStarFilled(star)\"\n            [class.dark:text-muted-foreground]=\"!isStarFilled(star)\"\n            [class.text-primary]=\"isStarFilled(star)\"\n            [disabled]=\"isSubmitting()\"\n            (click)=\"onRatingClick(star)\"\n            [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n            [attr.aria-pressed]=\"isStarFilled(star)\"\n            role=\"button\"\n            type=\"button\"\n            (keydown.enter)=\"onRatingClick(star)\"\n            (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n          >\n            <svg\n              class=\"h-14 w-14\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <path\n                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              />\n            </svg>\n          </button>\n          }\n        </div>\n        @if (ratingError()) {\n        <div class=\"review-dialog__error\">{{ ratingError() }}</div>\n        }\n      </div>\n    </section>\n    <h3 class=\"text-2xl text-center font-bold mb-2\">\n      {{ \"ReviewDialogTitle\" | translate }}\n    </h3>\n    <p class=\"text-sm text-center text-muted-foreground\">\n      {{ \"ReviewDialogDescription\" | translate }}\n    </p>\n  </div>\n\n  <!-- Actions -->\n  <div class=\"flex justify-between gap-3 my-5 px-6\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSkip()\"\n      class=\"w-full\"\n    >\n      {{ \"ReviewDialogSkipButton\" | translate }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSubmitReview()\"\n      class=\"w-full\"\n    >\n      @if (isSubmitting()) { Submitting... } @else {\n      {{ \"ReviewDialogSubmitButton\" | translate }}\n      }\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".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:600;display:block;margin-bottom:.5rem}.review-dialog__stars{display:flex}.review-dialog__star{background:transparent;border:none;color:var(--card-foreground);cursor:pointer;padding:.25rem;border-radius:2px;transition:all .2s;display:flex;align-items:center;justify-content:center}.review-dialog__star:hover{color:var(--primary-color);transform:scale(1.1)}.review-dialog__star--filled{color:var(--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(--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}.dialog__actions app-button{flex:1;width:100%;display:block}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], showCommentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCommentField", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], submitReview: [{ type: i0.Output, args: ["submitReview"] }], skip: [{ type: i0.Output, args: ["skip"] }] } });
+
+class CompanyCardComponent {
+    title = input('BabylAI', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('Smart solutions for customer service', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    iconUrl = input('', ...(ngDevMode ? [{ debugName: "iconUrl" }] : []));
+    hasIconUrl = computed(() => {
+        const url = this.iconUrl();
+        return !!url && url.trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasIconUrl" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CompanyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CompanyCardComponent, isStandalone: true, selector: "app-company-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, iconUrl: { classPropertyName: "iconUrl", publicName: "iconUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-3 p-6 mb-6 bg-card rounded-3xl border border-black-white-200 bg-card\">\n  <!-- Left Icon -->\n  @if (hasIconUrl()) {\n  <div class=\"flex-shrink-0 w-12 h-12 rounded-md overflow-hidden\">\n    <img\n      [src]=\"iconUrl()!\"\n      [alt]=\"title() + ' logo'\"\n      class=\"w-full h-full object-contain\"\n    />\n  </div>\n  }\n\n  <!-- Center Content -->\n  <div class=\"flex-1 min-w-0\">\n    <h3 class=\"text-lg font-semibold mb-1 text-color-card-foreground\" dir=\"auto\">{{ title() }}</h3>\n    <p class=\"text-sm text-color-card-foreground\" dir=\"auto\">{{ description() }}</p>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TransparentIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CompanyCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-transparent-icon-button', standalone: true, imports: [CommonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-button\n  variant=\"icon-only\"\n  [className]=\"className()\"\n  [disabled]=\"disabled()\"\n  (onClick)=\"onClick.emit($event)\"\n>\n  <ng-content></ng-content>\n</app-button>\n\n" }]
-        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+            args: [{ selector: 'app-company-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center gap-3 p-6 mb-6 bg-card rounded-3xl border border-black-white-200 bg-card\">\n  <!-- Left Icon -->\n  @if (hasIconUrl()) {\n  <div class=\"flex-shrink-0 w-12 h-12 rounded-md overflow-hidden\">\n    <img\n      [src]=\"iconUrl()!\"\n      [alt]=\"title() + ' logo'\"\n      class=\"w-full h-full object-contain\"\n    />\n  </div>\n  }\n\n  <!-- Center Content -->\n  <div class=\"flex-1 min-w-0\">\n    <h3 class=\"text-lg font-semibold mb-1 text-color-card-foreground\" dir=\"auto\">{{ title() }}</h3>\n    <p class=\"text-sm text-color-card-foreground\" dir=\"auto\">{{ description() }}</p>\n  </div>\n</div>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], iconUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconUrl", required: false }] }] } });
 
 class CardComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card'];
+        const classes = ['card', 'z-[1]', 'w-full', 'box-border'];
+        // Add variant-specific classes
+        if (this.variant() === 'default' || this.variant() === 'shadowed') {
+            classes.push('rounded-lg', 'border', 'block');
+        }
+        else if (this.variant() === 'rounded') {
+            classes.push('rounded-3xl', 'p-1', 'px-2', 'block');
+        }
         classes.push(`card--${this.variant()}`);
         const classValue = this.class();
         if (classValue) {
@@ -636,182 +965,229 @@ class CardComponent {
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardComponent, isStandalone: true, selector: "app-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardHeaderComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card__header'];
+        const classes = ['card__header', 'flex', 'flex-col', 'gap-1.5', 'p-6', 'w-full'];
         const classValue = this.class();
         if (classValue) {
             classes.push(classValue);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardHeaderComponent, isStandalone: true, selector: "app-card-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardHeaderComponent, isStandalone: true, selector: "app-card-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-header', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardTitleComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card__title'];
+        const classes = ['card__title', 'font-semibold', 'leading-none', 'tracking-tight', 'w-full'];
         const classValue = this.class();
         if (classValue) {
             classes.push(classValue);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardTitleComponent, isStandalone: true, selector: "app-card-title", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardTitleComponent, isStandalone: true, selector: "app-card-title", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-title', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardDescriptionComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card__description'];
+        const classes = ['card__description', 'text-sm', 'w-full'];
         const classValue = this.class();
         if (classValue) {
             classes.push(classValue);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardDescriptionComponent, isStandalone: true, selector: "app-card-description", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardDescriptionComponent, isStandalone: true, selector: "app-card-description", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardDescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardDescriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-description', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardContentComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card__content'];
+        const classes = ['card__content', 'p-0', 'pt-0', 'w-full', 'box-border'];
         const classValue = this.class();
         if (classValue) {
             classes.push(classValue);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardContentComponent, isStandalone: true, selector: "app-card-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardContentComponent, isStandalone: true, selector: "app-card-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-content', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardFooterComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     hostClasses = computed(() => {
-        const classes = ['card__footer'];
+        const classes = ['card__footer', 'flex', 'items-center', 'p-6', 'pt-0', 'w-full'];
         const classValue = this.class();
         if (classValue) {
             classes.push(classValue);
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CardFooterComponent, isStandalone: true, selector: "app-card-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", 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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: CardFooterComponent, isStandalone: true, selector: "app-card-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-footer', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()'
-                    }, template: "<ng-content></ng-content>\n\n", 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"] }]
+                    }, template: "<ng-content></ng-content>\n\n", styles: [".card--default{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card--rounded{background-color:var(--card)}.card--shadowed{border-color:var(--border);background-color:var(--card);color:var(--card-foreground);box-shadow:#64646f33 0 7px 29px}.card__title{letter-spacing:-.02em}.card__description{color:var(--muted-foreground)}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class HelpScreenDataComponent {
     helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : []));
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     handleStartNewChat = output();
-    expandedItemId = signal(null, ...(ngDevMode ? [{ debugName: "expandedItemId" }] : []));
-    scrollTimeout;
-    helpScreenDataList = computed(() => {
+    selectedItemId = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemId" }] : []));
+    selectedOption = computed(() => {
         const data = this.helpScreenData();
-        if (!data?.options)
-            return [];
-        // Transform options to the format expected by HelpScreenDataComponent
-        return data.options.map((option) => ({
-            icon: option.icon || 'assets/icons/default.svg',
-            title: option.title,
-            description: option.paragraphs?.[0] || '',
-            actionLabel: option.chatWithUs ? 'Chat Now' : '',
-            action: option.chatWithUs ? () => this.handleStartChat(option) : null
-        }));
-    }, ...(ngDevMode ? [{ debugName: "helpScreenDataList" }] : []));
+        const selectedId = this.selectedItemId();
+        if (!data?.options || !selectedId)
+            return null;
+        return data.options.find((option) => option.id === selectedId) || null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    canStartChat = computed(() => {
+        const selected = this.selectedOption();
+        return selected?.chatWithUs ?? false;
+    }, ...(ngDevMode ? [{ debugName: "canStartChat" }] : []));
     ngOnInit() { }
-    toggleExpand(itemId) {
-        if (this.expandedItemId() === itemId) {
-            this.expandedItemId.set(null);
+    selectItem(itemId) {
+        if (this.selectedItemId() === itemId) {
+            // Deselect if clicking the same item
+            this.selectedItemId.set(null);
         }
         else {
-            this.expandedItemId.set(itemId);
-            // Clear any existing timeout
-            if (this.scrollTimeout) {
-                clearTimeout(this.scrollTimeout);
-            }
-            this.scrollTimeout = setTimeout(() => {
-                const element = document.getElementById(itemId);
-                if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                }
-                this.scrollTimeout = undefined;
-            }, 100);
+            this.selectedItemId.set(itemId);
         }
     }
-    ngOnDestroy() {
-        // Clear any pending scroll timeout
-        if (this.scrollTimeout) {
-            clearTimeout(this.scrollTimeout);
-            this.scrollTimeout = undefined;
+    ngOnDestroy() { }
+    handleStartChat() {
+        const selected = this.selectedOption();
+        if (selected) {
+            this.handleStartNewChat.emit(selected);
         }
     }
-    handleStartChat(option) {
-        this.handleStartNewChat.emit(option);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: HelpScreenDataComponent, isStandalone: true, selector: "app-help-screen-data", inputs: { helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, 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)\" role=\"button\" tabindex=\"0\" [attr.aria-expanded]=\"expandedItemId() === item.id\" [attr.aria-label]=\"item.title + (expandedItemId() === item.id ? ' (expanded)' : ' (collapsed)')\" (keydown.enter)=\"toggleExpand(item.id)\" (keydown.space)=\"$event.preventDefault(); 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\" dir=\"auto\">{{ item.title }}</h4>\n        <div \n          class=\"help-screen__arrow-container\" \n          [class.help-screen__arrow-container--expanded]=\"expandedItemId() === item.id\"\n          [class.help-screen__arrow-container--collapsed]=\"expandedItemId() !== item.id\"\n          aria-hidden=\"true\"\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\" dir=\"auto\">\n          {{ paragraph }}\n        </div>\n        }\n      </div>\n      @if (item?.chatWithUs) {\n      <footer class=\"help-screen__footer\">\n        <app-button \n          variant=\"default\" \n          [fullWidth]=\"true\" \n          (onClick)=\"handleStartChat(item)\" \n          [attr.aria-label]=\"'Start chat about ' + item.title\"\n        >\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: "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpScreenDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: HelpScreenDataComponent, isStandalone: true, selector: "app-help-screen-data", inputs: { helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleStartNewChat: "handleStartNewChat" }, ngImport: i0, template: "<div class=\"flex flex-col flex-1 gap-4\">\n  <div class=\"grid grid-cols-1 gap-4\">\n    @for (item of helpScreenData()?.options; track item.id) {\n    <app-card\n      [id]=\"item.id\"\n      variant=\"rounded\"\n      class=\"cursor-pointer transition-all duration-200 p-6! hover:shadow-md hover:translate-y-[-2px]\"\n      [class.ring]=\"selectedItemId() === item.id\"\n      [class.ring-ring]=\"selectedItemId() === item.id\"\n      (click)=\"selectItem(item.id)\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"\n        item.title + (selectedItemId() === item.id ? ' (selected)' : '')\n      \"\n      [attr.aria-pressed]=\"selectedItemId() === item.id\"\n      (keydown.enter)=\"selectItem(item.id)\"\n      (keydown.space)=\"$event.preventDefault(); selectItem(item.id)\"\n    >\n      <app-card-content>\n        <h4\n          class=\"text-base font-semibold mb-2 text-card-foreground\"\n          dir=\"auto\"\n        >\n          {{ item.title }}\n        </h4>\n        @if (item.paragraphs && item.paragraphs.length > 0) {\n        <p class=\"text-sm text-muted-foreground\" dir=\"auto\">\n          {{ item.paragraphs[0] }}\n        </p>\n        }\n      </app-card-content>\n    </app-card>\n    }\n  </div>\n\n  <!-- Fixed call to action button -->\n  <div class=\"sticky bottom-0 z-10\">\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"!canStartChat()\"\n      (onClick)=\"handleStartChat()\"\n      [attr.aria-label]=\"'Start chat'\"\n    >\n      <span>\n        {{ \"ChatNow\" | translate }}\n      </span>\n      <svg\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n          fill=\"white\"\n        />\n        <path\n          opacity=\"0.5\"\n          d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </app-button>\n  </div>\n</div>\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: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpScreenDataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-help-screen-data', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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)\" role=\"button\" tabindex=\"0\" [attr.aria-expanded]=\"expandedItemId() === item.id\" [attr.aria-label]=\"item.title + (expandedItemId() === item.id ? ' (expanded)' : ' (collapsed)')\" (keydown.enter)=\"toggleExpand(item.id)\" (keydown.space)=\"$event.preventDefault(); 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\" dir=\"auto\">{{ item.title }}</h4>\n        <div \n          class=\"help-screen__arrow-container\" \n          [class.help-screen__arrow-container--expanded]=\"expandedItemId() === item.id\"\n          [class.help-screen__arrow-container--collapsed]=\"expandedItemId() !== item.id\"\n          aria-hidden=\"true\"\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\" dir=\"auto\">\n          {{ paragraph }}\n        </div>\n        }\n      </div>\n      @if (item?.chatWithUs) {\n      <footer class=\"help-screen__footer\">\n        <app-button \n          variant=\"default\" \n          [fullWidth]=\"true\" \n          (onClick)=\"handleStartChat(item)\" \n          [attr.aria-label]=\"'Start chat about ' + item.title\"\n        >\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"] }]
+            args: [{ selector: 'app-help-screen-data', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col flex-1 gap-4\">\n  <div class=\"grid grid-cols-1 gap-4\">\n    @for (item of helpScreenData()?.options; track item.id) {\n    <app-card\n      [id]=\"item.id\"\n      variant=\"rounded\"\n      class=\"cursor-pointer transition-all duration-200 p-6! hover:shadow-md hover:translate-y-[-2px]\"\n      [class.ring]=\"selectedItemId() === item.id\"\n      [class.ring-ring]=\"selectedItemId() === item.id\"\n      (click)=\"selectItem(item.id)\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"\n        item.title + (selectedItemId() === item.id ? ' (selected)' : '')\n      \"\n      [attr.aria-pressed]=\"selectedItemId() === item.id\"\n      (keydown.enter)=\"selectItem(item.id)\"\n      (keydown.space)=\"$event.preventDefault(); selectItem(item.id)\"\n    >\n      <app-card-content>\n        <h4\n          class=\"text-base font-semibold mb-2 text-card-foreground\"\n          dir=\"auto\"\n        >\n          {{ item.title }}\n        </h4>\n        @if (item.paragraphs && item.paragraphs.length > 0) {\n        <p class=\"text-sm text-muted-foreground\" dir=\"auto\">\n          {{ item.paragraphs[0] }}\n        </p>\n        }\n      </app-card-content>\n    </app-card>\n    }\n  </div>\n\n  <!-- Fixed call to action button -->\n  <div class=\"sticky bottom-0 z-10\">\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"!canStartChat()\"\n      (onClick)=\"handleStartChat()\"\n      [attr.aria-label]=\"'Start chat'\"\n    >\n      <span>\n        {{ \"ChatNow\" | translate }}\n      </span>\n      <svg\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n          fill=\"white\"\n        />\n        <path\n          opacity=\"0.5\"\n          d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n          fill=\"white\"\n        />\n      </svg>\n    </app-button>\n  </div>\n</div>\n" }]
         }], propDecorators: { helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], handleStartNewChat: [{ type: i0.Output, args: ["handleStartNewChat"] }] } });
 
-class LoadingComponent {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loading\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n  <span class=\"loading__sr-only\">Loading, please wait</span>\n  <div class=\"loader\" [class.loader--primary]=\"variant() === 'primary'\" aria-hidden=\"true\"></div>\n</div>\n\n", styles: [".loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:4rem 0;position:relative}@media (min-width: breakpoint(\"md\")){.loading{padding:7rem 0}}.loading__logo{width:5rem;height:5rem}.loading__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border-width:0}.loader{width:50px;aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:#fff;animation:l15 1s infinite linear}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}.loader--primary{border-right-color:var(--babylai-primary-color, #ad49e1)}.loader--primary:before,.loader--primary:after{border-right-color:var(--babylai-primary-color, #ad49e1)}@keyframes l15{to{transform:rotate(1turn)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class FooterComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"flex items-center justify-center p-3 border-t border-border\">\n  <a\n    href=\"https://babylai.net\"\n    target=\"_blank\"\n    class=\"flex items-center justify-center gap-2 text-sm text-card-foreground no-underline transition-opacity duration-200 hover:opacity-80\"\n  >\n  <span>\n    {{ \"PoweredByBabylAI\" | translate }}\n  </span>\n    <span>|</span>\n    <svg viewBox=\"0 0 54 19\" fill=\"none\" class=\"w-15\">\n      <path\n        d=\"M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z\"\n        fill=\"#606060\"\n      />\n      <path\n        d=\"M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z\"\n        fill=\"#606060\"\n      />\n      <path\n        d=\"M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z\"\n        fill=\"#606060\"\n      />\n      <path d=\"M42.5703 13.092V5H44.0929V13.092H42.5703Z\" fill=\"#919191\" />\n      <path\n        d=\"M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z\"\n        fill=\"#919191\"\n      />\n    </svg>\n  </a>\n</footer>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loading\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n  <span class=\"loading__sr-only\">Loading, please wait</span>\n  <div class=\"loader\" [class.loader--primary]=\"variant() === 'primary'\" aria-hidden=\"true\"></div>\n</div>\n\n", styles: [".loading{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:4rem 0;position:relative}@media (min-width: breakpoint(\"md\")){.loading{padding:7rem 0}}.loading__logo{width:5rem;height:5rem}.loading__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border-width:0}.loader{width:50px;aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:#fff;animation:l15 1s infinite linear}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}.loader--primary{border-right-color:var(--babylai-primary-color, #ad49e1)}.loader--primary:before,.loader--primary:after{border-right-color:var(--babylai-primary-color, #ad49e1)}@keyframes l15{to{transform:rotate(1turn)}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+            args: [{ selector: 'app-footer', standalone: true, imports: [CommonModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"flex items-center justify-center p-3 border-t border-border\">\n  <a\n    href=\"https://babylai.net\"\n    target=\"_blank\"\n    class=\"flex items-center justify-center gap-2 text-sm text-card-foreground no-underline transition-opacity duration-200 hover:opacity-80\"\n  >\n  <span>\n    {{ \"PoweredByBabylAI\" | translate }}\n  </span>\n    <span>|</span>\n    <svg viewBox=\"0 0 54 19\" fill=\"none\" class=\"w-15\">\n      <path\n        d=\"M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z\"\n        fill=\"#606060\"\n      />\n      <path\n        d=\"M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z\"\n        fill=\"#606060\"\n      />\n      <path\n        d=\"M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z\"\n        fill=\"#606060\"\n      />\n      <path d=\"M42.5703 13.092V5H44.0929V13.092H42.5703Z\" fill=\"#919191\" />\n      <path\n        d=\"M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z\"\n        fill=\"#919191\"\n      />\n      <path\n        d=\"M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z\"\n        fill=\"#919191\"\n      />\n    </svg>\n  </a>\n</footer>\n" }]
+        }] });
+
+class MinimizeButtonComponent {
+    onMinimize = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MinimizeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MinimizeButtonComponent, isStandalone: true, selector: "app-minimize-button", outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<button\n  (click)=\"onMinimize.emit()\"\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base ml-auto cursor-pointer\"\n  [attr.aria-label]=\"'Minimize'\"\n  type=\"button\"\n>\n  <app-icon name=\"fa7-solid:subtract\" class=\"flex\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MinimizeButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-minimize-button', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"onMinimize.emit()\"\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base ml-auto cursor-pointer\"\n  [attr.aria-label]=\"'Minimize'\"\n  type=\"button\"\n>\n  <app-icon name=\"fa7-solid:subtract\" class=\"flex\" />\n</button>\n" }]
+        }], propDecorators: { onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
+
+class HeaderComponent {
+    onMinimize = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: HeaderComponent, isStandalone: true, selector: "app-header", outputs: { onMinimize: "onMinimize" }, ngImport: i0, template: "<div class=\"bg-header flex items-center justify-end p-6 border-b border-black-white-200\">\n  <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MinimizeButtonComponent, selector: "app-minimize-button", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-header', standalone: true, imports: [
+                        CommonModule,
+                        MinimizeButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-header flex items-center justify-end p-6 border-b border-black-white-200\">\n  <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</div>\n" }]
+        }], propDecorators: { onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
+
+class BackButtonComponent {
+    onBack = output();
+    translationService = inject(TranslationService);
+    currentLang = toSignal(this.translationService.currentLang, {
+        initialValue: 'en',
+    });
+    isArabic = computed(() => this.currentLang() === 'ar', ...(ngDevMode ? [{ debugName: "isArabic" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BackButtonComponent, isStandalone: true, selector: "app-back-button", outputs: { onBack: "onBack" }, ngImport: i0, template: "<button\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base cursor-pointer\"\n  (click)=\"onBack.emit()\"\n  [attr.aria-label]=\"'Back' | translate\"\n  type=\"button\"\n>\n  <app-icon\n    name=\"solar:alt-arrow-left-linear\"\n    class=\"flex\"\n    [style.transform]=\"isArabic() ? 'rotate(180deg)' : 'none'\"\n  />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BackButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-back-button', standalone: true, imports: [CommonModule, TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base cursor-pointer\"\n  (click)=\"onBack.emit()\"\n  [attr.aria-label]=\"'Back' | translate\"\n  type=\"button\"\n>\n  <app-icon\n    name=\"solar:alt-arrow-left-linear\"\n    class=\"flex\"\n    [style.transform]=\"isArabic() ? 'rotate(180deg)' : 'none'\"\n  />\n</button>\n" }]
+        }], propDecorators: { onBack: [{ type: i0.Output, args: ["onBack"] }] } });
+
+class CloseButtonComponent {
+    onClose = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", outputs: { onClose: "onClose" }, ngImport: i0, template: "<button\n  (click)=\"onClose.emit()\"\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base cursor-pointer\"\n  [attr.aria-label]=\"'Close'\"\n  type=\"button\"\n>\n  <app-icon name=\"material-symbols:close-small-outline-rounded\" class=\"flex\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "size", "color", "className", "inline", "flip", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-close-button', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"onClose.emit()\"\n  class=\"bg-card h-6 w-8 rounded-full flex items-center justify-center font-bold text-base cursor-pointer\"\n  [attr.aria-label]=\"'Close'\"\n  type=\"button\"\n>\n  <app-icon name=\"material-symbols:close-small-outline-rounded\" class=\"flex\" />\n</button>\n" }]
+        }], propDecorators: { onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+
+class ChatHeaderComponent {
+    showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
+    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
+    selectedOptionTitle = input(null, ...(ngDevMode ? [{ debugName: "selectedOptionTitle" }] : []));
+    onBack = output();
+    onClose = output();
+    onMinimize = output();
+    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTitle: { classPropertyName: "selectedOptionTitle", publicName: "selectedOptionTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBack: "onBack", onClose: "onClose", onMinimize: "onMinimize" }, ngImport: i0, template: "<header\n  class=\"bg-header flex items-center justify-between p-6 gap-4 border-b border-black-white-200\"\n>\n  <div class=\"flex items-center gap-2\">\n    <app-back-button (onBack)=\"onBack.emit()\" />\n\n    <app-close-button (onClose)=\"onClose.emit()\" />\n  </div>\n\n  <h1 class=\"text-center font-semibold text-foreground\">\n    {{ selectedOptionTitle() }}\n  </h1>\n\n  <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</header>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BackButtonComponent, selector: "app-back-button", outputs: ["onBack"] }, { kind: "component", type: CloseButtonComponent, selector: "app-close-button", outputs: ["onClose"] }, { kind: "component", type: MinimizeButtonComponent, selector: "app-minimize-button", outputs: ["onMinimize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-header', standalone: true, imports: [CommonModule, BackButtonComponent, CloseButtonComponent, MinimizeButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  class=\"bg-header flex items-center justify-between p-6 gap-4 border-b border-black-white-200\"\n>\n  <div class=\"flex items-center gap-2\">\n    <app-back-button (onBack)=\"onBack.emit()\" />\n\n    <app-close-button (onClose)=\"onClose.emit()\" />\n  </div>\n\n  <h1 class=\"text-center font-semibold text-foreground\">\n    {{ selectedOptionTitle() }}\n  </h1>\n\n  <app-minimize-button (onMinimize)=\"onMinimize.emit()\"></app-minimize-button>\n</header>\n" }]
+        }], propDecorators: { showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], selectedOptionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptionTitle", required: false }] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
 
 // Configure marked with safe options
 marked.setOptions({
@@ -933,10 +1309,10 @@ class MarkdownRendererComponent {
             this.contentEffectRef = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: MarkdownRendererComponent, isStandalone: true, selector: "app-markdown-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true }], ngImport: i0, template: "<div \n  #markdownContainer\n  [class]=\"cssClass()\"\n  [dir]=\"dir()\"\n  [innerHTML]=\"sanitizedContent()\"\n></div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MarkdownRendererComponent, isStandalone: true, selector: "app-markdown-renderer", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "markdownContainer", first: true, predicate: ["markdownContainer"], descendants: true }], ngImport: i0, template: "<div \n  #markdownContainer\n  [class]=\"cssClass()\"\n  [dir]=\"dir()\"\n  [innerHTML]=\"sanitizedContent()\"\n></div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MarkdownRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MarkdownRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-markdown-renderer', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  #markdownContainer\n  [class]=\"cssClass()\"\n  [dir]=\"dir()\"\n  [innerHTML]=\"sanitizedContent()\"\n></div>\n\n" }]
         }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], markdownContainer: [{
@@ -944,16 +1320,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 args: ['markdownContainer']
             }] } });
 
+// Main header components
+
+class HomeScreenComponent {
+    helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : []));
+    showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : []));
+    startNewChat = output();
+    onClose = output();
+    onMinimize = output();
+    handleStartNewChat(option) {
+        this.startNewChat.emit(option);
+    }
+    handleClosePopup() {
+        this.onClose.emit();
+    }
+    handleMinimizePopup() {
+        this.onMinimize.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HomeScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: HomeScreenComponent, isStandalone: true, selector: "app-home-screen", inputs: { helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startNewChat: "startNewChat", onClose: "onClose", onMinimize: "onMinimize" }, ngImport: i0, template: "<app-header (onMinimize)=\"handleMinimizePopup()\" />\n<div class=\"flex flex-col flex-1 overflow-y-auto px-6 pt-6 pb-4 gap-6\">\n  <header\n    class=\"flex items-center justify-center gap-3 pb-5 border-b border-black-white-200\"\n  >\n    <svg\n      class=\"w-8 h-8\"\n      [style.color]=\"'var(--primary-color)'\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 34 34\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M18.4785 1.12896C18.4758 1.11935 18.4745 1.11454 18.4739 1.11232C18.0509 -0.370772 15.9491 -0.370772 15.5261 1.11232C15.5255 1.11454 15.5242 1.11935 15.5215 1.12896C15.5143 1.15428 15.5107 1.16694 15.5074 1.17883C13.5422 8.11839 8.11839 13.5422 1.17883 15.5074C1.16694 15.5107 1.15428 15.5143 1.12895 15.5215C1.11934 15.5242 1.11454 15.5255 1.11232 15.5261C-0.370773 15.9491 -0.370773 18.0509 1.11232 18.4739C1.11454 18.4745 1.11934 18.4758 1.12896 18.4785C1.15428 18.4857 1.16694 18.4893 1.17883 18.4926C8.11839 20.4578 13.5422 25.8816 15.5074 32.8212C15.5107 32.8331 15.5143 32.8457 15.5215 32.871C15.5242 32.8807 15.5255 32.8855 15.5261 32.8877C15.9491 34.3708 18.0509 34.3708 18.4739 32.8877C18.4745 32.8855 18.4758 32.8807 18.4785 32.871C18.4857 32.8457 18.4893 32.8331 18.4926 32.8212C20.4578 25.8816 25.8816 20.4578 32.8212 18.4926C32.8331 18.4893 32.8457 18.4857 32.871 18.4785C32.8807 18.4758 32.8855 18.4745 32.8877 18.4739C34.3708 18.0509 34.3708 15.9491 32.8877 15.5261C32.8855 15.5255 32.8807 15.5242 32.871 15.5215C32.8457 15.5143 32.8331 15.5107 32.8212 15.5074C25.8816 13.5422 20.4578 8.11839 18.4926 1.17883C18.4893 1.16694 18.4857 1.15428 18.4785 1.12896Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    <h1 class=\"text-2xl font-semibold text-color-card-foreground\">\n      {{ \"HelpCenter\" | translate }}\n    </h1>\n  </header>\n  <app-company-card\n    [title]=\"helpScreenData()?.tenant?.name\"\n    [description]=\"\n      helpScreenData()?.tenant?.settings?.description ||\n      helpScreenData()?.description\n    \"\n    [iconUrl]=\"helpScreenData()?.tenant?.logoUrl\"\n    class=\"border-b border-black-white-200\"\n  />\n  @if (showHelpScreenData()) {\n  <app-help-screen-data\n    [helpScreenData]=\"helpScreenData()\"\n    (handleStartNewChat)=\"handleStartNewChat($event)\"\n  ></app-help-screen-data>\n  }\n</div>\n<app-footer />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CompanyCardComponent, selector: "app-company-card", inputs: ["title", "description", "iconUrl"] }, { kind: "component", type: HelpScreenDataComponent, selector: "app-help-screen-data", inputs: ["helpScreenData", "title"], outputs: ["handleStartNewChat"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "component", type: HeaderComponent, selector: "app-header", outputs: ["onMinimize"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HomeScreenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-home-screen', standalone: true, imports: [
+                        CommonModule,
+                        TranslatePipe,
+                        CompanyCardComponent,
+                        HelpScreenDataComponent,
+                        FooterComponent,
+                        HeaderComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-header (onMinimize)=\"handleMinimizePopup()\" />\n<div class=\"flex flex-col flex-1 overflow-y-auto px-6 pt-6 pb-4 gap-6\">\n  <header\n    class=\"flex items-center justify-center gap-3 pb-5 border-b border-black-white-200\"\n  >\n    <svg\n      class=\"w-8 h-8\"\n      [style.color]=\"'var(--primary-color)'\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 34 34\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M18.4785 1.12896C18.4758 1.11935 18.4745 1.11454 18.4739 1.11232C18.0509 -0.370772 15.9491 -0.370772 15.5261 1.11232C15.5255 1.11454 15.5242 1.11935 15.5215 1.12896C15.5143 1.15428 15.5107 1.16694 15.5074 1.17883C13.5422 8.11839 8.11839 13.5422 1.17883 15.5074C1.16694 15.5107 1.15428 15.5143 1.12895 15.5215C1.11934 15.5242 1.11454 15.5255 1.11232 15.5261C-0.370773 15.9491 -0.370773 18.0509 1.11232 18.4739C1.11454 18.4745 1.11934 18.4758 1.12896 18.4785C1.15428 18.4857 1.16694 18.4893 1.17883 18.4926C8.11839 20.4578 13.5422 25.8816 15.5074 32.8212C15.5107 32.8331 15.5143 32.8457 15.5215 32.871C15.5242 32.8807 15.5255 32.8855 15.5261 32.8877C15.9491 34.3708 18.0509 34.3708 18.4739 32.8877C18.4745 32.8855 18.4758 32.8807 18.4785 32.871C18.4857 32.8457 18.4893 32.8331 18.4926 32.8212C20.4578 25.8816 25.8816 20.4578 32.8212 18.4926C32.8331 18.4893 32.8457 18.4857 32.871 18.4785C32.8807 18.4758 32.8855 18.4745 32.8877 18.4739C34.3708 18.0509 34.3708 15.9491 32.8877 15.5261C32.8855 15.5255 32.8807 15.5242 32.871 15.5215C32.8457 15.5143 32.8331 15.5107 32.8212 15.5074C25.8816 13.5422 20.4578 8.11839 18.4926 1.17883C18.4893 1.16694 18.4857 1.15428 18.4785 1.12896Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n    <h1 class=\"text-2xl font-semibold text-color-card-foreground\">\n      {{ \"HelpCenter\" | translate }}\n    </h1>\n  </header>\n  <app-company-card\n    [title]=\"helpScreenData()?.tenant?.name\"\n    [description]=\"\n      helpScreenData()?.tenant?.settings?.description ||\n      helpScreenData()?.description\n    \"\n    [iconUrl]=\"helpScreenData()?.tenant?.logoUrl\"\n    class=\"border-b border-black-white-200\"\n  />\n  @if (showHelpScreenData()) {\n  <app-help-screen-data\n    [helpScreenData]=\"helpScreenData()\"\n    (handleStartNewChat)=\"handleStartNewChat($event)\"\n  ></app-help-screen-data>\n  }\n</div>\n<app-footer />\n" }]
+        }], propDecorators: { helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], startNewChat: [{ type: i0.Output, args: ["startNewChat"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }] } });
+
 class ChatAvatarComponent {
     senderType = input(1, ...(ngDevMode ? [{ debugName: "senderType" }] : []));
     needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
     isHidden = input(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ChatAvatarComponent, isStandalone: true, selector: "app-chat-avatar", inputs: { senderType: { classPropertyName: "senderType", publicName: "senderType", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"chat__avatar\"\n  [class.chat__avatar--hidden]=\"isHidden()\"\n  role=\"img\"\n  [attr.aria-label]=\"senderType() === 3 ? 'Assistant avatar' : (needsAgent() || senderType() === 2 ? 'Agent avatar' : 'User avatar')\"\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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ChatAvatarComponent, isStandalone: true, selector: "app-chat-avatar", inputs: { senderType: { classPropertyName: "senderType", publicName: "senderType", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class.invisible]=\"isHidden()\"\n  role=\"img\"\n  [attr.aria-label]=\"\n    senderType() === 3\n      ? 'Assistant avatar'\n      : needsAgent() || senderType() === 2\n      ? 'Agent avatar'\n      : 'User avatar'\n  \"\n>\n  @if (senderType() === 3) {\n  <span\n    class=\"flex items-center justify-center w-8 h-8 rounded-full p-2 bg-primary text-primary\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"13\"\n      height=\"13\"\n      viewBox=\"0 0 13 13\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M0 3.32671C0 1.48942 1.48942 0 3.32672 0H8.87124C10.7085 0 12.198 1.48942 12.198 3.32672V8.87124C12.198 10.7085 10.7085 12.198 8.87124 12.198H0V3.32671Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M3.84993 4.07931C3.85024 4.07821 3.85039 4.07767 3.85047 4.07741C3.89874 3.90812 4.13867 3.90812 4.18695 4.07741C4.18702 4.07767 4.18718 4.07821 4.18749 4.07931C4.1883 4.0822 4.18871 4.08365 4.1891 4.085C4.41343 4.87717 5.03256 5.49631 5.82473 5.72064C5.82608 5.72102 5.82753 5.72143 5.83042 5.72224C5.83152 5.72255 5.83207 5.72271 5.83232 5.72278C6.00162 5.77106 6.00162 6.01099 5.83232 6.05927C5.83207 6.05934 5.83152 6.05949 5.83042 6.0598C5.82753 6.06062 5.82608 6.06103 5.82473 6.06141C5.03256 6.28574 4.41343 6.90488 4.1891 7.69704C4.18871 7.6984 4.1883 7.69984 4.18749 7.70273C4.18718 7.70383 4.18702 7.70438 4.18695 7.70463C4.13867 7.87393 3.89874 7.87393 3.85047 7.70463C3.85039 7.70438 3.85024 7.70383 3.84993 7.70273C3.84911 7.69984 3.84871 7.6984 3.84832 7.69704C3.62399 6.90488 3.00486 6.28574 2.21269 6.06141C2.21133 6.06103 2.20989 6.06062 2.207 6.0598C2.2059 6.05949 2.20535 6.05934 2.2051 6.05927C2.0358 6.01099 2.0358 5.77106 2.2051 5.72278C2.20535 5.72271 2.2059 5.72255 2.207 5.72224C2.20989 5.72143 2.21133 5.72102 2.21269 5.72064C3.00486 5.49631 3.62399 4.87717 3.84832 4.085C3.84871 4.08365 3.84911 4.0822 3.84993 4.07931Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M9.84056 5.85655C9.84056 6.6795 9.18894 7.34664 8.38513 7.34664C7.58131 7.34664 6.92969 6.6795 6.92969 5.85655C6.92969 5.03359 7.58131 4.36646 8.38513 4.36646C9.18894 4.36646 9.84056 5.03359 9.84056 5.85655Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </span>\n  } @else if (needsAgent() || senderType() === 2) {\n  <span\n    class=\"flex items-center justify-center w-8 h-8 rounded-full p-2 bg-black-white-50 text-primary\"\n  >\n    <svg\n      class=\"w-full\"\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", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-chat-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chat__avatar\"\n  [class.chat__avatar--hidden]=\"isHidden()\"\n  role=\"img\"\n  [attr.aria-label]=\"senderType() === 3 ? 'Assistant avatar' : (needsAgent() || senderType() === 2 ? 'Agent avatar' : 'User avatar')\"\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"] }]
+            args: [{ selector: 'app-chat-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class.invisible]=\"isHidden()\"\n  role=\"img\"\n  [attr.aria-label]=\"\n    senderType() === 3\n      ? 'Assistant avatar'\n      : needsAgent() || senderType() === 2\n      ? 'Agent avatar'\n      : 'User avatar'\n  \"\n>\n  @if (senderType() === 3) {\n  <span\n    class=\"flex items-center justify-center w-8 h-8 rounded-full p-2 bg-primary text-primary\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"13\"\n      height=\"13\"\n      viewBox=\"0 0 13 13\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M0 3.32671C0 1.48942 1.48942 0 3.32672 0H8.87124C10.7085 0 12.198 1.48942 12.198 3.32672V8.87124C12.198 10.7085 10.7085 12.198 8.87124 12.198H0V3.32671Z\"\n        fill=\"white\"\n      />\n      <path\n        d=\"M3.84993 4.07931C3.85024 4.07821 3.85039 4.07767 3.85047 4.07741C3.89874 3.90812 4.13867 3.90812 4.18695 4.07741C4.18702 4.07767 4.18718 4.07821 4.18749 4.07931C4.1883 4.0822 4.18871 4.08365 4.1891 4.085C4.41343 4.87717 5.03256 5.49631 5.82473 5.72064C5.82608 5.72102 5.82753 5.72143 5.83042 5.72224C5.83152 5.72255 5.83207 5.72271 5.83232 5.72278C6.00162 5.77106 6.00162 6.01099 5.83232 6.05927C5.83207 6.05934 5.83152 6.05949 5.83042 6.0598C5.82753 6.06062 5.82608 6.06103 5.82473 6.06141C5.03256 6.28574 4.41343 6.90488 4.1891 7.69704C4.18871 7.6984 4.1883 7.69984 4.18749 7.70273C4.18718 7.70383 4.18702 7.70438 4.18695 7.70463C4.13867 7.87393 3.89874 7.87393 3.85047 7.70463C3.85039 7.70438 3.85024 7.70383 3.84993 7.70273C3.84911 7.69984 3.84871 7.6984 3.84832 7.69704C3.62399 6.90488 3.00486 6.28574 2.21269 6.06141C2.21133 6.06103 2.20989 6.06062 2.207 6.0598C2.2059 6.05949 2.20535 6.05934 2.2051 6.05927C2.0358 6.01099 2.0358 5.77106 2.2051 5.72278C2.20535 5.72271 2.2059 5.72255 2.207 5.72224C2.20989 5.72143 2.21133 5.72102 2.21269 5.72064C3.00486 5.49631 3.62399 4.87717 3.84832 4.085C3.84871 4.08365 3.84911 4.0822 3.84993 4.07931Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M9.84056 5.85655C9.84056 6.6795 9.18894 7.34664 8.38513 7.34664C7.58131 7.34664 6.92969 6.6795 6.92969 5.85655C6.92969 5.03359 7.58131 4.36646 8.38513 4.36646C9.18894 4.36646 9.84056 5.03359 9.84056 5.85655Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </span>\n  } @else if (needsAgent() || senderType() === 2) {\n  <span\n    class=\"flex items-center justify-center w-8 h-8 rounded-full p-2 bg-black-white-50 text-primary\"\n  >\n    <svg\n      class=\"w-full\"\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" }]
         }], propDecorators: { senderType: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderType", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
 
 // src/app/language.service.ts
@@ -988,10 +1396,10 @@ class LanguageService {
     getCurrentLang() {
         return this.translationService.getCurrentLang();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LanguageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LanguageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1108,10 +1516,10 @@ class FileUploadService {
             });
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUploadService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1166,12 +1574,12 @@ class ImageAttachmentComponent {
             this.imageClick.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ImageAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ImageAttachmentComponent, isStandalone: true, selector: "app-image-attachment", inputs: { fileId: "fileId", enablePreview: "enablePreview", className: "className" }, outputs: { imageClick: "imageClick" }, ngImport: i0, template: "<div\n  class=\"image-attachment\"\n  [class]=\"className\"\n  (click)=\"handleClick()\"\n  [class.image-attachment--clickable]=\"enablePreview && imageUrl()\"\n>\n  @if (isLoading()) {\n    <div class=\"image-attachment__loading\">...</div>\n  } @else if (hasError()) {\n    <div class=\"image-attachment__error\">!</div>\n  } @else if (imageUrl()) {\n    <img\n      [src]=\"imageUrl()!\"\n      [alt]=\"'Image attachment'\"\n      class=\"image-attachment__image\"\n      loading=\"lazy\"\n    />\n  }\n</div>\n\n", styles: [".image-attachment{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background-color:var(--muted);flex-shrink:0}.image-attachment--clickable{cursor:pointer;transition:opacity .2s ease-in-out}.image-attachment--clickable:hover{opacity:.8}.image-attachment__image{width:100%;height:100%;object-fit:cover;display:block}.image-attachment__loading{font-size:.875rem;color:var(--muted-foreground)}.image-attachment__error{font-size:.875rem;color:var(--destructive);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImageAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ImageAttachmentComponent, isStandalone: true, selector: "app-image-attachment", inputs: { fileId: "fileId", enablePreview: "enablePreview", className: "className" }, outputs: { imageClick: "imageClick" }, ngImport: i0, template: "<div\n  class=\"image-attachment inline-flex items-center justify-center w-[50px] h-[50px] rounded-md overflow-hidden flex-shrink-0\"\n  [style.background-color]=\"'var(--muted)'\"\n  [class]=\"className\"\n  (click)=\"handleClick()\"\n  [class.cursor-pointer]=\"enablePreview && imageUrl()\"\n  [class.transition-opacity]=\"enablePreview && imageUrl()\"\n  [class.duration-200]=\"enablePreview && imageUrl()\"\n>\n  @if (isLoading()) {\n    <div class=\"text-sm\" [style.color]=\"'var(--muted-foreground)'\">...</div>\n  } @else if (hasError()) {\n    <div class=\"text-sm font-semibold\" [style.color]=\"'var(--destructive)'\">!</div>\n  } @else if (imageUrl()) {\n    <img\n      [src]=\"imageUrl()!\"\n      [alt]=\"'Image attachment'\"\n      class=\"w-full h-full object-cover block\"\n      [class.opacity-80]=\"enablePreview\"\n      loading=\"lazy\"\n    />\n  }\n</div>\n\n", styles: [".image-attachment--clickable:hover{opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ImageAttachmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImageAttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-attachment', standalone: true, imports: [CommonModule], template: "<div\n  class=\"image-attachment\"\n  [class]=\"className\"\n  (click)=\"handleClick()\"\n  [class.image-attachment--clickable]=\"enablePreview && imageUrl()\"\n>\n  @if (isLoading()) {\n    <div class=\"image-attachment__loading\">...</div>\n  } @else if (hasError()) {\n    <div class=\"image-attachment__error\">!</div>\n  } @else if (imageUrl()) {\n    <img\n      [src]=\"imageUrl()!\"\n      [alt]=\"'Image attachment'\"\n      class=\"image-attachment__image\"\n      loading=\"lazy\"\n    />\n  }\n</div>\n\n", styles: [".image-attachment{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:calc(var(--radius) - 2px);overflow:hidden;background-color:var(--muted);flex-shrink:0}.image-attachment--clickable{cursor:pointer;transition:opacity .2s ease-in-out}.image-attachment--clickable:hover{opacity:.8}.image-attachment__image{width:100%;height:100%;object-fit:cover;display:block}.image-attachment__loading{font-size:.875rem;color:var(--muted-foreground)}.image-attachment__error{font-size:.875rem;color:var(--destructive);font-weight:600}\n"] }]
+            args: [{ selector: 'app-image-attachment', standalone: true, imports: [CommonModule], template: "<div\n  class=\"image-attachment inline-flex items-center justify-center w-[50px] h-[50px] rounded-md overflow-hidden flex-shrink-0\"\n  [style.background-color]=\"'var(--muted)'\"\n  [class]=\"className\"\n  (click)=\"handleClick()\"\n  [class.cursor-pointer]=\"enablePreview && imageUrl()\"\n  [class.transition-opacity]=\"enablePreview && imageUrl()\"\n  [class.duration-200]=\"enablePreview && imageUrl()\"\n>\n  @if (isLoading()) {\n    <div class=\"text-sm\" [style.color]=\"'var(--muted-foreground)'\">...</div>\n  } @else if (hasError()) {\n    <div class=\"text-sm font-semibold\" [style.color]=\"'var(--destructive)'\">!</div>\n  } @else if (imageUrl()) {\n    <img\n      [src]=\"imageUrl()!\"\n      [alt]=\"'Image attachment'\"\n      class=\"w-full h-full object-cover block\"\n      [class.opacity-80]=\"enablePreview\"\n      loading=\"lazy\"\n    />\n  }\n</div>\n\n", styles: [".image-attachment--clickable:hover{opacity:.8}\n"] }]
         }], propDecorators: { fileId: [{
                 type: Input
             }], enablePreview: [{
@@ -1183,47 +1591,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
             }] } });
 
 class ImagePreviewDialogComponent {
-    imageUrls = [];
-    initialIndex = 0;
-    isOpen = false;
-    close = new EventEmitter();
+    imageUrls = input([], ...(ngDevMode ? [{ debugName: "imageUrls" }] : []));
+    initialIndex = input(0, ...(ngDevMode ? [{ debugName: "initialIndex" }] : []));
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    close = output();
     currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
     currentImageUrl = computed(() => {
         const index = this.currentIndex();
-        return this.imageUrls[index] || null;
+        return this.imageUrls()[index] || null;
     }, ...(ngDevMode ? [{ debugName: "currentImageUrl" }] : []));
     imageCounter = computed(() => {
-        return `${this.currentIndex() + 1} / ${this.imageUrls.length}`;
+        return `${this.currentIndex() + 1} / ${this.imageUrls().length}`;
     }, ...(ngDevMode ? [{ debugName: "imageCounter" }] : []));
-    hasMultipleImages = computed(() => this.imageUrls.length > 1, ...(ngDevMode ? [{ debugName: "hasMultipleImages" }] : []));
+    hasMultipleImages = computed(() => this.imageUrls().length > 1, ...(ngDevMode ? [{ debugName: "hasMultipleImages" }] : []));
     canGoPrevious = computed(() => this.currentIndex() > 0, ...(ngDevMode ? [{ debugName: "canGoPrevious" }] : []));
-    canGoNext = computed(() => this.currentIndex() < this.imageUrls.length - 1, ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
+    canGoNext = computed(() => this.currentIndex() < this.imageUrls().length - 1, ...(ngDevMode ? [{ debugName: "canGoNext" }] : []));
     ngOnInit() {
-        this.currentIndex.set(this.initialIndex);
+        this.currentIndex.set(this.initialIndex());
     }
     ngOnChanges(changes) {
-        if (changes['initialIndex'] && this.isOpen) {
-            this.currentIndex.set(this.initialIndex);
-        }
-        if (changes['isOpen'] && this.isOpen) {
-            this.currentIndex.set(this.initialIndex);
-        }
-    }
-    handleEscapeKey(event) {
-        if (this.isOpen) {
-            this.handleClose();
+        if (changes['initialIndex'] && this.isOpen()) {
+            this.currentIndex.set(this.initialIndex());
         }
-    }
-    handleArrowLeft(event) {
-        if (this.isOpen) {
-            event.preventDefault();
-            this.handlePrevious();
+        if (changes['isOpen'] && this.isOpen()) {
+            this.currentIndex.set(this.initialIndex());
         }
     }
-    handleArrowRight(event) {
-        if (this.isOpen) {
-            event.preventDefault();
-            this.handleNext();
+    handleKeydown(event) {
+        if (!this.isOpen())
+            return;
+        switch (event.key) {
+            case 'Escape':
+                this.handleClose();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.handlePrevious();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.handleNext();
+                break;
         }
     }
     handleClose() {
@@ -1245,30 +1653,15 @@ class ImagePreviewDialogComponent {
             this.currentIndex.update((index) => index + 1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ImagePreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ImagePreviewDialogComponent, isStandalone: true, selector: "app-image-preview-dialog", inputs: { imageUrls: "imageUrls", initialIndex: "initialIndex", isOpen: "isOpen" }, outputs: { close: "close" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)", "document:keydown.arrowleft": "handleArrowLeft($event)", "document:keydown.arrowright": "handleArrowRight($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen) {\n  <div\n    class=\"image-preview-dialog__backdrop\"\n    (click)=\"handleBackdropClick($event)\"\n  >\n    <div class=\"image-preview-dialog__container\">\n      <button\n        class=\"image-preview-dialog__close\"\n        (click)=\"handleClose()\"\n        type=\"button\"\n        aria-label=\"Close preview\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      @if (hasMultipleImages()) {\n        <button\n          class=\"image-preview-dialog__nav image-preview-dialog__nav--previous\"\n          [class.image-preview-dialog__nav--disabled]=\"!canGoPrevious()\"\n          (click)=\"handlePrevious()\"\n          type=\"button\"\n          aria-label=\"Previous image\"\n          [disabled]=\"!canGoPrevious()\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 18L9 12L15 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        <button\n          class=\"image-preview-dialog__nav image-preview-dialog__nav--next\"\n          [class.image-preview-dialog__nav--disabled]=\"!canGoNext()\"\n          (click)=\"handleNext()\"\n          type=\"button\"\n          aria-label=\"Next image\"\n          [disabled]=\"!canGoNext()\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M9 18L15 12L9 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      }\n\n      <div class=\"image-preview-dialog__image-container\">\n        @if (currentImageUrl()) {\n          <img\n            [src]=\"currentImageUrl()!\"\n            [alt]=\"'Image preview'\"\n            class=\"image-preview-dialog__image\"\n          />\n        }\n      </div>\n\n      @if (hasMultipleImages()) {\n        <div class=\"image-preview-dialog__counter\">\n          {{ imageCounter() }}\n        </div>\n      }\n    </div>\n  </div>\n}\n\n", styles: [".image-preview-dialog__backdrop{position:fixed;inset:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.image-preview-dialog__container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:90vh;z-index:1}.image-preview-dialog__close{position:absolute;top:1rem;inset-inline-end:1rem;z-index:10001;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .2s ease-in-out;pointer-events:auto}.image-preview-dialog__close:hover{background-color:#fff3;transform:scale(1.1)}.image-preview-dialog__close svg{width:1.5rem;height:1.5rem;pointer-events:none}.image-preview-dialog__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10001;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .2s ease-in-out;pointer-events:auto}.image-preview-dialog__nav:hover:not(.image-preview-dialog__nav--disabled){background-color:#fff3;transform:translateY(-50%) scale(1.1)}.image-preview-dialog__nav--disabled{opacity:.3;cursor:not-allowed}.image-preview-dialog__nav--previous{inset-inline-start:1rem}.image-preview-dialog__nav--next{inset-inline-end:1rem}.image-preview-dialog__nav svg{width:1.5rem;height:1.5rem;pointer-events:none}.image-preview-dialog__image-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}.image-preview-dialog__image{max-width:100%;max-height:100%;object-fit:contain;border-radius:calc(var(--radius) - 2px);pointer-events:none}.image-preview-dialog__counter{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);padding:.5rem 1rem;background-color:#0009;color:#fff;border-radius:9999px;font-size:.875rem;font-weight:500;z-index:10001;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImagePreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ImagePreviewDialogComponent, isStandalone: true, selector: "app-image-preview-dialog", inputs: { imageUrls: { classPropertyName: "imageUrls", publicName: "imageUrls", isSignal: true, isRequired: false, transformFunction: null }, initialIndex: { classPropertyName: "initialIndex", publicName: "initialIndex", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (isOpen()) {\n  <div\n    class=\"image-preview-dialog__backdrop fixed inset-0 bg-black/90 flex items-center justify-center z-[9999] p-4\"\n    (click)=\"handleBackdropClick($event)\"\n  >\n    <div class=\"image-preview-dialog__container relative w-full h-full flex items-center justify-center max-w-[90vw] max-h-[90vh] z-[1]\">\n      <button\n        class=\"image-preview-dialog__close absolute top-4 right-4 z-[10001] w-10 h-10 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto hover:bg-white/20 hover:scale-110\"\n        (click)=\"handleClose()\"\n        type=\"button\"\n        aria-label=\"Close preview\"\n      >\n        <svg\n          class=\"w-6 h-6 pointer-events-none\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      @if (hasMultipleImages()) {\n        <button\n          class=\"image-preview-dialog__nav absolute top-1/2 -translate-y-1/2 z-[10001] w-12 h-12 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto left-4\"\n          [class.opacity-30]=\"!canGoPrevious()\"\n          [class.cursor-not-allowed]=\"!canGoPrevious()\"\n          (click)=\"handlePrevious()\"\n          type=\"button\"\n          aria-label=\"Previous image\"\n          [disabled]=\"!canGoPrevious()\"\n        >\n          <svg\n            class=\"w-6 h-6 pointer-events-none\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 18L9 12L15 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        <button\n          class=\"image-preview-dialog__nav absolute top-1/2 -translate-y-1/2 z-[10001] w-12 h-12 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto right-4\"\n          [class.opacity-30]=\"!canGoNext()\"\n          [class.cursor-not-allowed]=\"!canGoNext()\"\n          (click)=\"handleNext()\"\n          type=\"button\"\n          aria-label=\"Next image\"\n          [disabled]=\"!canGoNext()\"\n        >\n          <svg\n            class=\"w-6 h-6 pointer-events-none\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M9 18L15 12L9 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      }\n\n      <div class=\"image-preview-dialog__image-container relative w-full h-full flex items-center justify-center overflow-hidden z-[1]\">\n        @if (currentImageUrl()) {\n          <img\n            [src]=\"currentImageUrl()!\"\n            [alt]=\"'Image preview'\"\n            class=\"max-w-full max-h-full object-contain rounded-md pointer-events-none\"\n          />\n        }\n      </div>\n\n      @if (hasMultipleImages()) {\n        <div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 py-2 px-4 bg-black/60 text-white rounded-full text-sm font-medium z-[10001] pointer-events-none\">\n          {{ imageCounter() }}\n        </div>\n      }\n    </div>\n  </div>\n}\n\n", styles: [".image-preview-dialog__nav:hover:not(.image-preview-dialog__nav--disabled){background-color:#fff3;transform:translateY(-50%) scale(1.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-preview-dialog', standalone: true, imports: [CommonModule], template: "@if (isOpen) {\n  <div\n    class=\"image-preview-dialog__backdrop\"\n    (click)=\"handleBackdropClick($event)\"\n  >\n    <div class=\"image-preview-dialog__container\">\n      <button\n        class=\"image-preview-dialog__close\"\n        (click)=\"handleClose()\"\n        type=\"button\"\n        aria-label=\"Close preview\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      @if (hasMultipleImages()) {\n        <button\n          class=\"image-preview-dialog__nav image-preview-dialog__nav--previous\"\n          [class.image-preview-dialog__nav--disabled]=\"!canGoPrevious()\"\n          (click)=\"handlePrevious()\"\n          type=\"button\"\n          aria-label=\"Previous image\"\n          [disabled]=\"!canGoPrevious()\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 18L9 12L15 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        <button\n          class=\"image-preview-dialog__nav image-preview-dialog__nav--next\"\n          [class.image-preview-dialog__nav--disabled]=\"!canGoNext()\"\n          (click)=\"handleNext()\"\n          type=\"button\"\n          aria-label=\"Next image\"\n          [disabled]=\"!canGoNext()\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M9 18L15 12L9 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      }\n\n      <div class=\"image-preview-dialog__image-container\">\n        @if (currentImageUrl()) {\n          <img\n            [src]=\"currentImageUrl()!\"\n            [alt]=\"'Image preview'\"\n            class=\"image-preview-dialog__image\"\n          />\n        }\n      </div>\n\n      @if (hasMultipleImages()) {\n        <div class=\"image-preview-dialog__counter\">\n          {{ imageCounter() }}\n        </div>\n      }\n    </div>\n  </div>\n}\n\n", styles: [".image-preview-dialog__backdrop{position:fixed;inset:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.image-preview-dialog__container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:90vh;z-index:1}.image-preview-dialog__close{position:absolute;top:1rem;inset-inline-end:1rem;z-index:10001;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .2s ease-in-out;pointer-events:auto}.image-preview-dialog__close:hover{background-color:#fff3;transform:scale(1.1)}.image-preview-dialog__close svg{width:1.5rem;height:1.5rem;pointer-events:none}.image-preview-dialog__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10001;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;transition:all .2s ease-in-out;pointer-events:auto}.image-preview-dialog__nav:hover:not(.image-preview-dialog__nav--disabled){background-color:#fff3;transform:translateY(-50%) scale(1.1)}.image-preview-dialog__nav--disabled{opacity:.3;cursor:not-allowed}.image-preview-dialog__nav--previous{inset-inline-start:1rem}.image-preview-dialog__nav--next{inset-inline-end:1rem}.image-preview-dialog__nav svg{width:1.5rem;height:1.5rem;pointer-events:none}.image-preview-dialog__image-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}.image-preview-dialog__image{max-width:100%;max-height:100%;object-fit:contain;border-radius:calc(var(--radius) - 2px);pointer-events:none}.image-preview-dialog__counter{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);padding:.5rem 1rem;background-color:#0009;color:#fff;border-radius:9999px;font-size:.875rem;font-weight:500;z-index:10001;pointer-events:none}\n"] }]
-        }], propDecorators: { imageUrls: [{
-                type: Input
-            }], initialIndex: [{
-                type: Input
-            }], isOpen: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], handleEscapeKey: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }], handleArrowLeft: [{
-                type: HostListener,
-                args: ['document:keydown.arrowleft', ['$event']]
-            }], handleArrowRight: [{
-                type: HostListener,
-                args: ['document:keydown.arrowright', ['$event']]
-            }] } });
+            args: [{ selector: 'app-image-preview-dialog', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(document:keydown)': 'handleKeydown($event)',
+                    }, template: "@if (isOpen()) {\n  <div\n    class=\"image-preview-dialog__backdrop fixed inset-0 bg-black/90 flex items-center justify-center z-[9999] p-4\"\n    (click)=\"handleBackdropClick($event)\"\n  >\n    <div class=\"image-preview-dialog__container relative w-full h-full flex items-center justify-center max-w-[90vw] max-h-[90vh] z-[1]\">\n      <button\n        class=\"image-preview-dialog__close absolute top-4 right-4 z-[10001] w-10 h-10 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto hover:bg-white/20 hover:scale-110\"\n        (click)=\"handleClose()\"\n        type=\"button\"\n        aria-label=\"Close preview\"\n      >\n        <svg\n          class=\"w-6 h-6 pointer-events-none\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M18 6L6 18M6 6L18 18\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      @if (hasMultipleImages()) {\n        <button\n          class=\"image-preview-dialog__nav absolute top-1/2 -translate-y-1/2 z-[10001] w-12 h-12 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto left-4\"\n          [class.opacity-30]=\"!canGoPrevious()\"\n          [class.cursor-not-allowed]=\"!canGoPrevious()\"\n          (click)=\"handlePrevious()\"\n          type=\"button\"\n          aria-label=\"Previous image\"\n          [disabled]=\"!canGoPrevious()\"\n        >\n          <svg\n            class=\"w-6 h-6 pointer-events-none\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M15 18L9 12L15 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        <button\n          class=\"image-preview-dialog__nav absolute top-1/2 -translate-y-1/2 z-[10001] w-12 h-12 flex items-center justify-center rounded-full bg-white/10 border border-white/20 text-white cursor-pointer transition-all duration-200 pointer-events-auto right-4\"\n          [class.opacity-30]=\"!canGoNext()\"\n          [class.cursor-not-allowed]=\"!canGoNext()\"\n          (click)=\"handleNext()\"\n          type=\"button\"\n          aria-label=\"Next image\"\n          [disabled]=\"!canGoNext()\"\n        >\n          <svg\n            class=\"w-6 h-6 pointer-events-none\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M9 18L15 12L9 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      }\n\n      <div class=\"image-preview-dialog__image-container relative w-full h-full flex items-center justify-center overflow-hidden z-[1]\">\n        @if (currentImageUrl()) {\n          <img\n            [src]=\"currentImageUrl()!\"\n            [alt]=\"'Image preview'\"\n            class=\"max-w-full max-h-full object-contain rounded-md pointer-events-none\"\n          />\n        }\n      </div>\n\n      @if (hasMultipleImages()) {\n        <div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 py-2 px-4 bg-black/60 text-white rounded-full text-sm font-medium z-[10001] pointer-events-none\">\n          {{ imageCounter() }}\n        </div>\n      }\n    </div>\n  </div>\n}\n\n", styles: [".image-preview-dialog__nav:hover:not(.image-preview-dialog__nav--disabled){background-color:#fff3;transform:translateY(-50%) scale(1.1)}\n"] }]
+        }], propDecorators: { imageUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrls", required: false }] }], initialIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIndex", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 class ChatMessageComponent {
     message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
@@ -1310,10 +1703,10 @@ class ChatMessageComponent {
         this.previewImageUrls.set([]);
         this.previewImageIndex.set(-1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ChatMessageComponent, isStandalone: true, selector: "app-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, 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      @if (hasAttachments()) {\n        <div class=\"chat__message-attachments\">\n          @for (fileId of message().attachmentIds!; track fileId; let i = $index) {\n            <app-image-attachment\n              [fileId]=\"fileId\"\n              [enablePreview]=\"true\"\n              (imageClick)=\"handleImageClick(i)\"\n            />\n          }\n        </div>\n      }\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]=\"'auto'\"\n        >\n        </app-markdown-renderer>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n\n<app-image-preview-dialog\n  [imageUrls]=\"previewImageUrls()\"\n  [initialIndex]=\"previewImageIndex()\"\n  [isOpen]=\"isPreviewOpen()\"\n  (close)=\"closePreview()\"\n/>\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-attachments{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.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"] }, { kind: "component", type: ImageAttachmentComponent, selector: "app-image-attachment", inputs: ["fileId", "enablePreview", "className"], outputs: ["imageClick"] }, { kind: "component", type: ImagePreviewDialogComponent, selector: "app-image-preview-dialog", inputs: ["imageUrls", "initialIndex", "isOpen"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ChatMessageComponent, isStandalone: true, selector: "app-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"chat__message-container flex items-start gap-3\"\n  [class.flex-row-reverse]=\"message().senderType === 1\"\n>\n  @if (message().senderType !== 1) {\n  <app-chat-avatar\n    [senderType]=\"message().senderType\"\n    [needsAgent]=\"needsAgent()\"\n    [isHidden]=\"isHidden()\"\n  />\n  }\n\n  <app-card\n    variant=\"rounded\"\n    [class]=\"\n      'chat__message max-w-[80%] relative rounded-2xl p-5! text-sm ' +\n      (message().senderType === 1\n        ? 'chat__message--user self-start ms-6'\n        : 'chat__message--assistant self-end')\n    \"\n  >\n    <app-card-content>\n      @if (hasAttachments()) {\n      <div class=\"chat__message-attachments flex flex-wrap gap-2 mb-2\">\n        @for (fileId of message().attachmentIds!; track fileId; let i = $index)\n        {\n        <app-image-attachment\n          [fileId]=\"fileId\"\n          [enablePreview]=\"true\"\n          (imageClick)=\"handleImageClick(i)\"\n        />\n        }\n      </div>\n      }\n      <div class=\"chat__message-content\">\n        <app-markdown-renderer\n          [content]=\"cleanMessageContent(message().messageContent)\"\n          [inline]=\"false\"\n          [cssClass]=\"\n            'prose' + (message().senderType === 1 ? ' prose-invert' : '')\n          \"\n          [dir]=\"'auto'\"\n        >\n        </app-markdown-renderer>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n\n<app-image-preview-dialog\n  [imageUrls]=\"previewImageUrls()\"\n  [initialIndex]=\"previewImageIndex()\"\n  [isOpen]=\"isPreviewOpen()\"\n  (close)=\"closePreview()\"\n/>\n", styles: [".chat__message--user{background-color:var(--primary-color);color:#fff;direction:rtl}.chat__message--assistant{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"] }, { kind: "component", type: ImageAttachmentComponent, selector: "app-image-attachment", inputs: ["fileId", "enablePreview", "className"], outputs: ["imageClick"] }, { kind: "component", type: ImagePreviewDialogComponent, selector: "app-image-preview-dialog", inputs: ["imageUrls", "initialIndex", "isOpen"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-chat-message', standalone: true, imports: [
                         CommonModule,
@@ -1323,27 +1716,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         ChatAvatarComponent,
                         ImageAttachmentComponent,
                         ImagePreviewDialogComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      @if (hasAttachments()) {\n        <div class=\"chat__message-attachments\">\n          @for (fileId of message().attachmentIds!; track fileId; let i = $index) {\n            <app-image-attachment\n              [fileId]=\"fileId\"\n              [enablePreview]=\"true\"\n              (imageClick)=\"handleImageClick(i)\"\n            />\n          }\n        </div>\n      }\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]=\"'auto'\"\n        >\n        </app-markdown-renderer>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n\n<app-image-preview-dialog\n  [imageUrls]=\"previewImageUrls()\"\n  [initialIndex]=\"previewImageIndex()\"\n  [isOpen]=\"isPreviewOpen()\"\n  (close)=\"closePreview()\"\n/>\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-attachments{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chat__message-container flex items-start gap-3\"\n  [class.flex-row-reverse]=\"message().senderType === 1\"\n>\n  @if (message().senderType !== 1) {\n  <app-chat-avatar\n    [senderType]=\"message().senderType\"\n    [needsAgent]=\"needsAgent()\"\n    [isHidden]=\"isHidden()\"\n  />\n  }\n\n  <app-card\n    variant=\"rounded\"\n    [class]=\"\n      'chat__message max-w-[80%] relative rounded-2xl p-5! text-sm ' +\n      (message().senderType === 1\n        ? 'chat__message--user self-start ms-6'\n        : 'chat__message--assistant self-end')\n    \"\n  >\n    <app-card-content>\n      @if (hasAttachments()) {\n      <div class=\"chat__message-attachments flex flex-wrap gap-2 mb-2\">\n        @for (fileId of message().attachmentIds!; track fileId; let i = $index)\n        {\n        <app-image-attachment\n          [fileId]=\"fileId\"\n          [enablePreview]=\"true\"\n          (imageClick)=\"handleImageClick(i)\"\n        />\n        }\n      </div>\n      }\n      <div class=\"chat__message-content\">\n        <app-markdown-renderer\n          [content]=\"cleanMessageContent(message().messageContent)\"\n          [inline]=\"false\"\n          [cssClass]=\"\n            'prose' + (message().senderType === 1 ? ' prose-invert' : '')\n          \"\n          [dir]=\"'auto'\"\n        >\n        </app-markdown-renderer>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n\n<app-image-preview-dialog\n  [imageUrls]=\"previewImageUrls()\"\n  [initialIndex]=\"previewImageIndex()\"\n  [isOpen]=\"isPreviewOpen()\"\n  (close)=\"closePreview()\"\n/>\n", styles: [".chat__message--user{background-color:var(--primary-color);color:#fff;direction:rtl}.chat__message--assistant{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"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }] } });
 
 class ChatSeparatorComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ChatSeparatorComponent, isStandalone: true, selector: "app-chat-separator", ngImport: i0, template: "<div class=\"chat__separator\">\n  <svg\n    width=\"100%\"\n    height=\"14\"\n    viewBox=\"0 0 327 14\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n    <path\n      d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n      fill=\"currentColor\"\n    />\n    <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n  </svg>\n</div>\n", styles: [".chat__separator{width:100%;color:var(--babylai-primary-color, #ad49e1)}.chat__separator img{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ChatSeparatorComponent, isStandalone: true, selector: "app-chat-separator", ngImport: i0, template: "<div class=\"chat__separator w-full text-black-white-300\">\n  <svg\n    class=\"w-full\"\n    height=\"14\"\n    viewBox=\"0 0 327 14\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n    <path\n      d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n      fill=\"currentColor\"\n    />\n    <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n  </svg>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatSeparatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-chat-separator', standalone: true, imports: [CommonModule], template: "<div class=\"chat__separator\">\n  <svg\n    width=\"100%\"\n    height=\"14\"\n    viewBox=\"0 0 327 14\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n    <path\n      d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n      fill=\"currentColor\"\n    />\n    <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n  </svg>\n</div>\n", styles: [".chat__separator{width:100%;color:var(--babylai-primary-color, #ad49e1)}.chat__separator img{width:100%}\n"] }]
+            args: [{ selector: 'app-chat-separator', standalone: true, imports: [CommonModule], template: "<div class=\"chat__separator w-full text-black-white-300\">\n  <svg\n    class=\"w-full\"\n    height=\"14\"\n    viewBox=\"0 0 327 14\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <line x1=\"132.5\" y1=\"7.5\" y2=\"7.5\" stroke=\"currentColor\" />\n    <path\n      d=\"M162.891 0.464864C162.892 0.460907 162.893 0.458928 162.893 0.458012C163.067 -0.152671 163.933 -0.152671 164.107 0.458012C164.107 0.458928 164.108 0.460907 164.109 0.464864C164.112 0.475291 164.113 0.480505 164.115 0.4854C164.924 3.34287 167.157 5.57619 170.015 6.38539C170.019 6.38678 170.025 6.38825 170.035 6.39119C170.039 6.3923 170.041 6.39286 170.042 6.39312C170.653 6.56727 170.653 7.43274 170.042 7.60688C170.041 7.60714 170.039 7.6077 170.035 7.60881C170.025 7.61175 170.019 7.61322 170.015 7.61461C167.157 8.42381 164.924 10.6571 164.115 13.5146C164.113 13.5195 164.112 13.5247 164.109 13.5351C164.108 13.5391 164.107 13.5411 164.107 13.542C163.933 14.1527 163.067 14.1527 162.893 13.542C162.893 13.5411 162.892 13.5391 162.891 13.5351C162.888 13.5247 162.887 13.5195 162.885 13.5146C162.076 10.6571 159.843 8.42381 156.985 7.61461C156.981 7.61322 156.975 7.61175 156.965 7.60881C156.961 7.6077 156.959 7.60714 156.958 7.60688C156.347 7.43274 156.347 6.56727 156.958 6.39312C156.959 6.39286 156.961 6.3923 156.965 6.39119C156.975 6.38825 156.981 6.38678 156.985 6.38539C159.843 5.57619 162.076 3.34287 162.885 0.4854C162.887 0.480505 162.888 0.475291 162.891 0.464864Z\"\n      fill=\"currentColor\"\n    />\n    <line x1=\"327\" y1=\"7.5\" x2=\"194.5\" y2=\"7.5\" stroke=\"currentColor\" />\n  </svg>\n</div>\n" }]
         }] });
 
 class ChatTypingIndicatorComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatTypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ChatTypingIndicatorComponent, isStandalone: true, selector: "app-chat-typing-indicator", ngImport: i0, template: "<div class=\"chat__typing\">\n  <app-chat-avatar [senderType]=\"3\" [needsAgent]=\"false\" [isHidden]=\"false\" />\n  <app-card\n    variant=\"rounded\"\n    class=\"chat__typing_indicator\"\n  >\n    <app-card-content>\n      <div id=\"wave\">\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n", styles: [".chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__typing_indicator{border-radius:1rem;padding:1rem}#wave{position:relative;text-align:start}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:var(--babylai-primary-color, #ad49e1);animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatTypingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ChatTypingIndicatorComponent, isStandalone: true, selector: "app-chat-typing-indicator", ngImport: i0, template: "<div class=\"flex items-start gap-2\">\n  <app-chat-avatar [senderType]=\"3\" [needsAgent]=\"false\" [isHidden]=\"false\" />\n  <app-card\n    variant=\"rounded\"\n    class=\"w-auto! p-3!\"\n  >\n    <app-card-content>\n      <div id=\"wave\">\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n", styles: ["#wave{position:relative;text-align:start}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:var(--primary-color);animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}\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: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatTypingIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatTypingIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-chat-typing-indicator', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ChatAvatarComponent], template: "<div class=\"chat__typing\">\n  <app-chat-avatar [senderType]=\"3\" [needsAgent]=\"false\" [isHidden]=\"false\" />\n  <app-card\n    variant=\"rounded\"\n    class=\"chat__typing_indicator\"\n  >\n    <app-card-content>\n      <div id=\"wave\">\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n", styles: [".chat__typing{display:flex;align-items:flex-start;gap:.5rem}.chat__typing_indicator{border-radius:1rem;padding:1rem}#wave{position:relative;text-align:start}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:var(--babylai-primary-color, #ad49e1);animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}\n"] }]
+            args: [{ selector: 'app-chat-typing-indicator', standalone: true, imports: [CommonModule, CardComponent, CardContentComponent, ChatAvatarComponent], template: "<div class=\"flex items-start gap-2\">\n  <app-chat-avatar [senderType]=\"3\" [needsAgent]=\"false\" [isHidden]=\"false\" />\n  <app-card\n    variant=\"rounded\"\n    class=\"w-auto! p-3!\"\n  >\n    <app-card-content>\n      <div id=\"wave\">\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n        <span class=\"dot\"></span>\n      </div>\n    </app-card-content>\n  </app-card>\n</div>\n", styles: ["#wave{position:relative;text-align:start}#wave .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:9999px;margin-right:.25rem;background:var(--primary-color);animation:wave 1.3s linear infinite}#wave .dot:nth-child(2){animation-delay:-1.1s}#wave .dot:nth-child(3){animation-delay:-.9s}\n"] }]
         }] });
 
+class ReviewMessageComponent {
+    isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    rating = signal(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
+    comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : []));
+    // Validation errors
+    ratingError = signal('', ...(ngDevMode ? [{ debugName: "ratingError" }] : []));
+    commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : []));
+    ratingChange = output();
+    commentChange = output();
+    submitReview = output();
+    skip = output();
+    onRatingClick(starIndex) {
+        this.rating.set(starIndex + 1);
+        this.clearRatingError();
+        this.ratingChange.emit(this.rating());
+    }
+    onCommentChange() {
+        this.clearCommentError();
+        this.commentChange.emit(this.comment());
+    }
+    onSubmitReview() {
+        if (this.validateForm() && !this.isSubmitting()) {
+            this.submitReview.emit({
+                rating: this.rating(),
+                comment: this.comment().trim()
+            });
+        }
+    }
+    onSkip() {
+        if (!this.isSubmitting()) {
+            this.skip.emit();
+            this.resetForm();
+        }
+    }
+    validateForm() {
+        let isValid = true;
+        // Validate rating
+        if (this.rating() < 1 || this.rating() > 5) {
+            this.ratingError.set('Rating must be between 1 and 5.');
+            isValid = false;
+        }
+        // Validate comment (optional - only check max length if provided)
+        const trimmedComment = this.comment().trim();
+        if (trimmedComment.length > 0 && trimmedComment.length > 500) {
+            this.commentError.set('Comment must not exceed 500 characters.');
+            isValid = false;
+        }
+        else {
+            // Clear any existing error if comment is valid or empty
+            this.commentError.set('');
+        }
+        return isValid;
+    }
+    clearRatingError() {
+        this.ratingError.set('');
+    }
+    clearCommentError() {
+        this.commentError.set('');
+    }
+    resetForm() {
+        this.rating.set(0);
+        this.comment.set('');
+        this.ratingError.set('');
+        this.commentError.set('');
+    }
+    getStarsArray() {
+        return Array(5).fill(0).map((_, index) => index);
+    }
+    isStarFilled(starIndex) {
+        return starIndex < this.rating();
+    }
+    getCommentLength() {
+        return this.comment().trim().length;
+    }
+    getCommentMaxLength() {
+        return 500;
+    }
+    getCommentMinLength() {
+        return 10;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ReviewMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ReviewMessageComponent, isStandalone: true, selector: "app-review-message", inputs: { isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratingChange: "ratingChange", commentChange: "commentChange", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2.5\">\n  <h2 class=\"font-normal\">{{ \"ReviewDialogTitle\" | translate }}</h2>\n  <p class=\"text-sm text-center text-muted-foreground\">\n    {{ \"ReviewDialogDescription\" | translate }}\n  </p>\n\n  <div class=\"\">\n    <label class=\"sr-only\" aria-label=\"review message stars label\">\n      {{ \"ReviewDialogRatingLabel\" | translate }}\n    </label>\n    <div\n      class=\"inline-flex bg-muted rounded-3xl p-3 gap-2\"\n      aria-labelledby=\"review message stars\"\n    >\n      @for (star of getStarsArray(); track star) {\n      <button\n        class=\"hover:text-primary\"\n        [class.text-black-white-200]=\"!isStarFilled(star)\"\n        [class.dark:text-muted-foreground]=\"!isStarFilled(star)\"\n        [class.text-primary]=\"isStarFilled(star)\"\n        [disabled]=\"isSubmitting()\"\n        (click)=\"onRatingClick(star)\"\n        [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n        [attr.aria-pressed]=\"isStarFilled(star)\"\n        role=\"button\"\n        type=\"button\"\n        (keydown.enter)=\"onRatingClick(star)\"\n        (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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]=\"'currentColor'\"\n          />\n        </svg>\n      </button>\n      }\n    </div>\n    @if (ratingError()) {\n    <div class=\"review-message__error\">{{ ratingError() }}</div>\n    }\n  </div>\n\n  @if (rating() > 0) {\n  <div class=\"\">\n    <label class=\"review-message__label\">{{\n      \"ReviewDialogCommentLabel\" | translate\n    }}</label>\n    <textarea\n      class=\"review-message__textarea\"\n      [class.review-message__textarea--error]=\"commentError()\"\n      [ngModel]=\"comment()\"\n      (ngModelChange)=\"comment.set($event); onCommentChange()\"\n      [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n      [maxlength]=\"getCommentMaxLength()\"\n      [disabled]=\"isSubmitting()\"\n      rows=\"4\"\n    ></textarea>\n    <div class=\"review-message__comment-info\">\n      <div class=\"review-message__char-count\">\n        {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n      </div>\n      @if (commentError()) {\n      <div class=\"review-message__error\">{{ commentError() }}</div>\n      }\n    </div>\n  </div>\n\n  <app-button\n    variant=\"default\"\n    [fullWidth]=\"true\"\n    [disabled]=\"isSubmitting()\"\n    (onClick)=\"onSubmitReview()\"\n    class=\"review-message__submit-btn\"\n  >\n    @if (isSubmitting()) { Submitting... } @else {\n    {{ \"ReviewDialogSubmitButton\" | translate }}\n    }\n  </app-button>\n  }\n</div>\n", styles: [".review-message__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;margin-bottom:.5rem}.review-message__textarea::placeholder{color:var(--card-foreground);opacity:.6}.review-message__textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 10%,transparent)}.review-message__textarea--error{border-color:var(--destructive)}.review-message__textarea--error:focus{border-color:var(--destructive);box-shadow:0 0 0 3px #ef44441a}.review-message__textarea:disabled{opacity:.5;cursor:not-allowed;background-color:var(--secondary)}.review-message__error{color:var(--destructive);font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.review-message__comment-info{display:flex;flex-direction:column;margin-bottom:1rem}.review-message__char-count{color:var(--card-foreground);font-size:.75rem;white-space:nowrap;opacity:.7}.review-message__rating-section,.review-message__comment-section{margin-bottom:1rem}.review-message__actions{display:flex;gap:.5rem;margin-top:1rem}.review-message__actions app-button{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.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"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ReviewMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-review-message', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2.5\">\n  <h2 class=\"font-normal\">{{ \"ReviewDialogTitle\" | translate }}</h2>\n  <p class=\"text-sm text-center text-muted-foreground\">\n    {{ \"ReviewDialogDescription\" | translate }}\n  </p>\n\n  <div class=\"\">\n    <label class=\"sr-only\" aria-label=\"review message stars label\">\n      {{ \"ReviewDialogRatingLabel\" | translate }}\n    </label>\n    <div\n      class=\"inline-flex bg-muted rounded-3xl p-3 gap-2\"\n      aria-labelledby=\"review message stars\"\n    >\n      @for (star of getStarsArray(); track star) {\n      <button\n        class=\"hover:text-primary\"\n        [class.text-black-white-200]=\"!isStarFilled(star)\"\n        [class.dark:text-muted-foreground]=\"!isStarFilled(star)\"\n        [class.text-primary]=\"isStarFilled(star)\"\n        [disabled]=\"isSubmitting()\"\n        (click)=\"onRatingClick(star)\"\n        [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n        [attr.aria-pressed]=\"isStarFilled(star)\"\n        role=\"button\"\n        type=\"button\"\n        (keydown.enter)=\"onRatingClick(star)\"\n        (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n      >\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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]=\"'currentColor'\"\n          />\n        </svg>\n      </button>\n      }\n    </div>\n    @if (ratingError()) {\n    <div class=\"review-message__error\">{{ ratingError() }}</div>\n    }\n  </div>\n\n  @if (rating() > 0) {\n  <div class=\"\">\n    <label class=\"review-message__label\">{{\n      \"ReviewDialogCommentLabel\" | translate\n    }}</label>\n    <textarea\n      class=\"review-message__textarea\"\n      [class.review-message__textarea--error]=\"commentError()\"\n      [ngModel]=\"comment()\"\n      (ngModelChange)=\"comment.set($event); onCommentChange()\"\n      [placeholder]=\"'ReviewDialogCommentPlaceholder' | translate\"\n      [maxlength]=\"getCommentMaxLength()\"\n      [disabled]=\"isSubmitting()\"\n      rows=\"4\"\n    ></textarea>\n    <div class=\"review-message__comment-info\">\n      <div class=\"review-message__char-count\">\n        {{ getCommentLength() }}/{{ getCommentMaxLength() }} characters\n      </div>\n      @if (commentError()) {\n      <div class=\"review-message__error\">{{ commentError() }}</div>\n      }\n    </div>\n  </div>\n\n  <app-button\n    variant=\"default\"\n    [fullWidth]=\"true\"\n    [disabled]=\"isSubmitting()\"\n    (onClick)=\"onSubmitReview()\"\n    class=\"review-message__submit-btn\"\n  >\n    @if (isSubmitting()) { Submitting... } @else {\n    {{ \"ReviewDialogSubmitButton\" | translate }}\n    }\n  </app-button>\n  }\n</div>\n", styles: [".review-message__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;margin-bottom:.5rem}.review-message__textarea::placeholder{color:var(--card-foreground);opacity:.6}.review-message__textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 10%,transparent)}.review-message__textarea--error{border-color:var(--destructive)}.review-message__textarea--error:focus{border-color:var(--destructive);box-shadow:0 0 0 3px #ef44441a}.review-message__textarea:disabled{opacity:.5;cursor:not-allowed;background-color:var(--secondary)}.review-message__error{color:var(--destructive);font-size:.75rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.review-message__comment-info{display:flex;flex-direction:column;margin-bottom:1rem}.review-message__char-count{color:var(--card-foreground);font-size:.75rem;white-space:nowrap;opacity:.7}.review-message__rating-section,.review-message__comment-section{margin-bottom:1rem}.review-message__actions{display:flex;gap:.5rem;margin-top:1rem}.review-message__actions app-button{flex:1}\n"] }]
+        }], propDecorators: { isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], ratingChange: [{ type: i0.Output, args: ["ratingChange"] }], commentChange: [{ type: i0.Output, args: ["commentChange"] }], submitReview: [{ type: i0.Output, args: ["submitReview"] }], skip: [{ type: i0.Output, args: ["skip"] }] } });
+
+class ChatComponent {
+    // Using input() signals - automatically trigger change detection on updates
+    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+    needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
+    assistantStatus = input('', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : []));
+    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : []));
+    chatMessagesContainer;
+    reviewSubmit = output();
+    reviewSkip = output();
+    // Computed signal for first agent message index
+    firstAgentMessageIndex = computed(() => {
+        return this.messages().findIndex((message) => message.senderType === 2);
+    }, ...(ngDevMode ? [{ debugName: "firstAgentMessageIndex" }] : []));
+    previousMessagesLength = 0;
+    scrollTimeouts = [];
+    messagesEffectRef;
+    constructor() {
+        // Effect to handle scrolling when messages change
+        this.messagesEffectRef = effect(() => {
+            const messages = this.messages();
+            const currentLength = messages.length;
+            // Only scroll if messages array length changed (new message added)
+            if (currentLength !== this.previousMessagesLength) {
+                this.previousMessagesLength = currentLength;
+                // Use setTimeout to ensure DOM is updated
+                const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
+                this.scrollTimeouts.push(timeoutId);
+            }
+        }, ...(ngDevMode ? [{ debugName: "messagesEffectRef" }] : []));
+    }
+    ngOnInit() {
+        this.previousMessagesLength = this.messages().length;
+    }
+    ngAfterViewInit() {
+        // Initial scroll to bottom after view init
+        const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
+        this.scrollTimeouts.push(timeoutId);
+    }
+    ngOnDestroy() {
+        // Clean up effect
+        if (this.messagesEffectRef) {
+            this.messagesEffectRef.destroy();
+            this.messagesEffectRef = undefined;
+        }
+        // Clear all pending scroll timeouts
+        this.scrollTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
+        this.scrollTimeouts = [];
+    }
+    scrollToBottom() {
+        try {
+            this.chatMessagesContainer.nativeElement.scrollTop =
+                this.chatMessagesContainer.nativeElement.scrollHeight;
+        }
+        catch (err) {
+            console.error('Error scrolling to bottom:', err);
+        }
+    }
+    handleReviewSubmit(reviewData) {
+        this.reviewSubmit.emit(reviewData);
+    }
+    handleReviewSkip() {
+        this.reviewSkip.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"chat__messages flex-1 overflow-y-auto pb-4 flex flex-col gap-4\"\n  #chatMessagesContainer\n  style=\"max-height: calc(100vh - 400px)\"\n>\n  @for (message of messages(); track message.id; let i = $index) {\n  <div class=\"chat__message-group flex flex-col gap-2\">\n    @if (i === firstAgentMessageIndex() && message.senderType === 2) {\n    <app-chat-separator class=\"py-4\" />\n    }\n    @if (message.isReviewMessage) {\n    <div class=\"chat__message-container flex items-start gap-3\">\n      <app-chat-avatar\n        [senderType]=\"message.senderType\"\n        [needsAgent]=\"needsAgent()\"\n        [isHidden]=\"false\"\n      />\n      <app-card\n        variant=\"rounded\"\n        class=\"chat__message max-w-[80%] relative rounded-2xl p-5! text-sm chat__message--assistant\"\n      >\n        <app-card-content>\n          <app-review-message\n            [isSubmitting]=\"isSubmittingReview()\"\n            [currentLang]=\"currentLang()\"\n            (submitReview)=\"handleReviewSubmit($event)\"\n            (skip)=\"handleReviewSkip()\"\n          />\n        </app-card-content>\n      </app-card>\n    </div>\n    } @else {\n    <app-chat-message\n      [message]=\"message\"\n      [needsAgent]=\"needsAgent()\"\n      [currentLang]=\"currentLang()\"\n      [isHidden]=\"i > 0 && messages()[i - 1].senderType === message.senderType\"\n    />\n    }\n  </div>\n  } @if (assistantStatus() === 'typing' && firstAgentMessageIndex() === -1) {\n  <app-chat-typing-indicator />\n  } @if (loading()) {\n  <div class=\"chat__loading flex items-center justify-center h-full\">\n    <app-loading variant=\"primary\" />\n  </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "needsAgent", "currentLang", "isHidden"] }, { kind: "component", type: ChatSeparatorComponent, selector: "app-chat-separator" }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "app-chat-typing-indicator" }, { kind: "component", type: ReviewMessageComponent, selector: "app-review-message", inputs: ["isSubmitting", "currentLang"], outputs: ["ratingChange", "commentChange", "submitReview", "skip"] }, { kind: "component", type: ChatAvatarComponent, selector: "app-chat-avatar", inputs: ["senderType", "needsAgent", "isHidden"] }, { kind: "component", type: CardComponent, selector: "app-card", inputs: ["variant", "class"] }, { kind: "component", type: CardContentComponent, selector: "app-card-content", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat', standalone: true, imports: [
+                        CommonModule,
+                        LoadingComponent,
+                        ChatMessageComponent,
+                        ChatSeparatorComponent,
+                        ChatTypingIndicatorComponent,
+                        ReviewMessageComponent,
+                        ChatAvatarComponent,
+                        CardComponent,
+                        CardContentComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chat__messages flex-1 overflow-y-auto pb-4 flex flex-col gap-4\"\n  #chatMessagesContainer\n  style=\"max-height: calc(100vh - 400px)\"\n>\n  @for (message of messages(); track message.id; let i = $index) {\n  <div class=\"chat__message-group flex flex-col gap-2\">\n    @if (i === firstAgentMessageIndex() && message.senderType === 2) {\n    <app-chat-separator class=\"py-4\" />\n    }\n    @if (message.isReviewMessage) {\n    <div class=\"chat__message-container flex items-start gap-3\">\n      <app-chat-avatar\n        [senderType]=\"message.senderType\"\n        [needsAgent]=\"needsAgent()\"\n        [isHidden]=\"false\"\n      />\n      <app-card\n        variant=\"rounded\"\n        class=\"chat__message max-w-[80%] relative rounded-2xl p-5! text-sm chat__message--assistant\"\n      >\n        <app-card-content>\n          <app-review-message\n            [isSubmitting]=\"isSubmittingReview()\"\n            [currentLang]=\"currentLang()\"\n            (submitReview)=\"handleReviewSubmit($event)\"\n            (skip)=\"handleReviewSkip()\"\n          />\n        </app-card-content>\n      </app-card>\n    </div>\n    } @else {\n    <app-chat-message\n      [message]=\"message\"\n      [needsAgent]=\"needsAgent()\"\n      [currentLang]=\"currentLang()\"\n      [isHidden]=\"i > 0 && messages()[i - 1].senderType === message.senderType\"\n    />\n    }\n  </div>\n  } @if (assistantStatus() === 'typing' && firstAgentMessageIndex() === -1) {\n  <app-chat-typing-indicator />\n  } @if (loading()) {\n  <div class=\"chat__loading flex items-center justify-center h-full\">\n    <app-loading variant=\"primary\" />\n  </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], chatMessagesContainer: [{
+                type: ViewChild,
+                args: ['chatMessagesContainer']
+            }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }] } });
+
 class ChatInputComponent {
     // Using input() signals - automatically trigger change detection on updates
     isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : []));
@@ -1407,7 +1975,7 @@ class ChatInputComponent {
             return;
         const imageFiles = Array.from(files).filter((file) => file.type.startsWith('image/'));
         if (imageFiles.length === 0) {
-            alert('Please select image files only');
+            window.alert('Please select image files only');
             return;
         }
         // Create preview URLs and add to selected files
@@ -1538,471 +2106,236 @@ class ChatInputComponent {
         });
         // Clear message and files
         this.messageContent.set('');
-        this.selectedFiles().forEach((f) => {
-            if (f.previewUrl.startsWith('blob:')) {
-                URL.revokeObjectURL(f.previewUrl);
-            }
-        });
-        this.selectedFiles.set([]);
-        this.adjustTextareaHeight();
-    }
-    handlePreviewImage(index) {
-        const file = this.selectedFiles()[index];
-        if (file) {
-            this.previewImageUrl.set(file.previewUrl);
-            this.previewImageIndex.set(index);
-        }
-    }
-    closePreview() {
-        this.previewImageUrl.set(null);
-        this.previewImageIndex.set(-1);
-    }
-    adjustTextareaHeight() {
-        const textarea = this.messageInput?.nativeElement;
-        if (textarea) {
-            textarea.style.height = 'auto';
-            textarea.style.height = textarea.scrollHeight + 'px';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ChatInputComponent, isStandalone: true, selector: "app-chat-input", inputs: { isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat__input-container\">\n  @if (selectedFiles().length > 0) {\n  <div class=\"chat__file-preview\">\n    @for (file of selectedFiles(); track $index) {\n    <div class=\"chat__file-preview-item\">\n      <img\n        [src]=\"file.previewUrl\"\n        [alt]=\"file.file.name\"\n        class=\"chat__file-preview-image\"\n        [class.chat__file-preview-image--uploading]=\"file.uploading\"\n        (click)=\"handlePreviewImage($index)\"\n      />\n      @if (file.uploading) {\n      <div class=\"chat__file-preview-progress-overlay\">\n        <svg class=\"chat__file-preview-progress-circle\" viewBox=\"0 0 36 36\">\n          <circle\n            class=\"chat__file-preview-progress-circle-bg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n          />\n          <circle\n            class=\"chat__file-preview-progress-circle-fg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>\n      } @if (file.error) {\n      <div class=\"chat__file-preview-error\" [title]=\"file.error\">!</div>\n      }\n      <button\n        type=\"button\"\n        class=\"chat__file-preview-remove\"\n        (click)=\"removeFile($index)\"\n        aria-label=\"Remove image\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-form\">\n    <input\n      type=\"file\"\n      #fileInput\n      accept=\"image/*\"\n      multiple\n      (change)=\"handleFileSelect($event)\"\n      class=\"chat__file-input\"\n      [disabled]=\"isChatClosed()\"\n    />\n\n    <div class=\"chat__input-wrapper\">\n      <button\n        type=\"button\"\n        class=\"chat__attach-button\"\n        (click)=\"handleAttachClick()\"\n        [disabled]=\"isChatClosed()\"\n        aria-label=\"Attach image\"\n      >\n        <svg\n          class=\"chat__attach-button-icon\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M16.5 6.75L9.75 13.5C8.92157 14.3284 8.92157 15.6716 9.75 16.5C10.5784 17.3284 11.9216 17.3284 12.75 16.5L18.75 10.5C20.4069 8.84315 20.4069 6.15685 18.75 4.5C17.0931 2.84315 14.4069 2.84315 12.75 4.5L6 11.25C3.92893 13.3211 3.92893 16.6789 6 18.75C8.07107 20.8211 11.4289 20.8211 13.5 18.75L18 14.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.8\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <input\n        type=\"text\"\n        [ngModel]=\"messageContent()\"\n        (ngModelChange)=\"messageContent.set($event)\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed()\"\n        [attr.aria-label]=\"'Chat input field'\"\n        [attr.aria-disabled]=\"isChatClosed()\"\n        role=\"textbox\"\n        class=\"chat__input\"\n        [class.chat__input--ar]=\"currentLang() === 'ar'\"\n        [class.chat__input--en]=\"currentLang() === 'en'\"\n        dir=\"auto\"\n        #messageInput\n        (keydown.enter)=\"handleSendMessage()\"\n        (keydown.escape)=\"messageContent.set('')\"\n      />\n\n      <button\n        type=\"submit\"\n        [disabled]=\"!canSend()\"\n        [attr.aria-label]=\"'Send message'\"\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.5 9.5L10.5 17.5C8.5 19.5 5.5 19.5 3.5 17.5C1.5 15.5 1.5 12.5 3.5 10.5L11.5 2.5C12.6 1.4 14.4 1.4 15.5 2.5C16.6 3.6 16.6 5.4 15.5 6.5L7.5 14.5C7 15 6.2 15 5.7 14.5C5.2 14 5.2 13.2 5.7 12.7L12.7 5.7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat__input-container,.chat__input-form{position:relative;width:100%}.chat__file-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.chat__input-wrapper{position:relative;width:100%;display:flex;align-items:center;gap:.5rem}.chat__attach-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:.5rem;border-radius:9999px;background-color:transparent;border:none;color:var(--muted-foreground);cursor:pointer;transition:all .2s ease-in-out;flex-shrink:0}.chat__attach-button:hover:not(:disabled){color:var(--foreground);background-color:var(--muted)}.chat__attach-button:disabled{cursor:not-allowed;opacity:.5}.chat__attach-button svg{width:100%;height:100%}.chat__input{flex:1;width:100%;padding-inline:1rem;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--ar{padding-left:4rem}.chat__input--en{padding-right:4rem}.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)}.chat__file-preview{display:flex;gap:.5rem;padding:.5rem;margin-bottom:.5rem;overflow-x:auto;scrollbar-width:thin}.chat__file-preview::-webkit-scrollbar{height:4px}.chat__file-preview::-webkit-scrollbar-track{background:var(--muted);border-radius:9999px}.chat__file-preview::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:9999px}.chat__file-preview-item{position:relative;width:50px;height:50px;border-radius:calc(var(--radius) - 2px);overflow:hidden;flex-shrink:0;background-color:var(--muted)}.chat__file-preview-image{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .2s ease-in-out}.chat__file-preview-image:hover{opacity:.8}.chat__file-preview-image--uploading{opacity:.6}.chat__file-preview-progress-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0000004d;border-radius:calc(var(--radius) - 2px)}.chat__file-preview-progress-circle{width:32px;height:32px;transform:rotate(-90deg)}.chat__file-preview-progress-circle-bg{stroke:#fff3;stroke-width:3}.chat__file-preview-progress-circle-fg{stroke:var(--babylai-primary-color, #ad49e1);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.48;stroke-dashoffset:100.48;animation:circular-progress 2s ease-in-out infinite}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}.chat__file-preview-error{position:absolute;top:2px;inset-inline-end:2px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--destructive);color:#fff;font-size:.75rem;font-weight:600}.chat__file-preview-remove{position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#0009;color:#fff;border:none;cursor:pointer;transition:all .2s ease-in-out;opacity:0}.chat__file-preview-item:hover .chat__file-preview-remove{opacity:1}.chat__file-preview-remove:hover{background-color:#000c;transform:scale(1.1)}.chat__file-preview-remove svg{width:12px;height:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-chat-input', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat__input-container\">\n  @if (selectedFiles().length > 0) {\n  <div class=\"chat__file-preview\">\n    @for (file of selectedFiles(); track $index) {\n    <div class=\"chat__file-preview-item\">\n      <img\n        [src]=\"file.previewUrl\"\n        [alt]=\"file.file.name\"\n        class=\"chat__file-preview-image\"\n        [class.chat__file-preview-image--uploading]=\"file.uploading\"\n        (click)=\"handlePreviewImage($index)\"\n      />\n      @if (file.uploading) {\n      <div class=\"chat__file-preview-progress-overlay\">\n        <svg class=\"chat__file-preview-progress-circle\" viewBox=\"0 0 36 36\">\n          <circle\n            class=\"chat__file-preview-progress-circle-bg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n          />\n          <circle\n            class=\"chat__file-preview-progress-circle-fg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>\n      } @if (file.error) {\n      <div class=\"chat__file-preview-error\" [title]=\"file.error\">!</div>\n      }\n      <button\n        type=\"button\"\n        class=\"chat__file-preview-remove\"\n        (click)=\"removeFile($index)\"\n        aria-label=\"Remove image\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <form (ngSubmit)=\"handleSendMessage()\" class=\"chat__input-form\">\n    <input\n      type=\"file\"\n      #fileInput\n      accept=\"image/*\"\n      multiple\n      (change)=\"handleFileSelect($event)\"\n      class=\"chat__file-input\"\n      [disabled]=\"isChatClosed()\"\n    />\n\n    <div class=\"chat__input-wrapper\">\n      <button\n        type=\"button\"\n        class=\"chat__attach-button\"\n        (click)=\"handleAttachClick()\"\n        [disabled]=\"isChatClosed()\"\n        aria-label=\"Attach image\"\n      >\n        <svg\n          class=\"chat__attach-button-icon\"\n          width=\"20\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M16.5 6.75L9.75 13.5C8.92157 14.3284 8.92157 15.6716 9.75 16.5C10.5784 17.3284 11.9216 17.3284 12.75 16.5L18.75 10.5C20.4069 8.84315 20.4069 6.15685 18.75 4.5C17.0931 2.84315 14.4069 2.84315 12.75 4.5L6 11.25C3.92893 13.3211 3.92893 16.6789 6 18.75C8.07107 20.8211 11.4289 20.8211 13.5 18.75L18 14.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.8\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n\n      <input\n        type=\"text\"\n        [ngModel]=\"messageContent()\"\n        (ngModelChange)=\"messageContent.set($event)\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed()\"\n        [attr.aria-label]=\"'Chat input field'\"\n        [attr.aria-disabled]=\"isChatClosed()\"\n        role=\"textbox\"\n        class=\"chat__input\"\n        [class.chat__input--ar]=\"currentLang() === 'ar'\"\n        [class.chat__input--en]=\"currentLang() === 'en'\"\n        dir=\"auto\"\n        #messageInput\n        (keydown.enter)=\"handleSendMessage()\"\n        (keydown.escape)=\"messageContent.set('')\"\n      />\n\n      <button\n        type=\"submit\"\n        [disabled]=\"!canSend()\"\n        [attr.aria-label]=\"'Send message'\"\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.5 9.5L10.5 17.5C8.5 19.5 5.5 19.5 3.5 17.5C1.5 15.5 1.5 12.5 3.5 10.5L11.5 2.5C12.6 1.4 14.4 1.4 15.5 2.5C16.6 3.6 16.6 5.4 15.5 6.5L7.5 14.5C7 15 6.2 15 5.7 14.5C5.2 14 5.2 13.2 5.7 12.7L12.7 5.7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat__input-container,.chat__input-form{position:relative;width:100%}.chat__file-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.chat__input-wrapper{position:relative;width:100%;display:flex;align-items:center;gap:.5rem}.chat__attach-button{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:.5rem;border-radius:9999px;background-color:transparent;border:none;color:var(--muted-foreground);cursor:pointer;transition:all .2s ease-in-out;flex-shrink:0}.chat__attach-button:hover:not(:disabled){color:var(--foreground);background-color:var(--muted)}.chat__attach-button:disabled{cursor:not-allowed;opacity:.5}.chat__attach-button svg{width:100%;height:100%}.chat__input{flex:1;width:100%;padding-inline:1rem;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--ar{padding-left:4rem}.chat__input--en{padding-right:4rem}.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)}.chat__file-preview{display:flex;gap:.5rem;padding:.5rem;margin-bottom:.5rem;overflow-x:auto;scrollbar-width:thin}.chat__file-preview::-webkit-scrollbar{height:4px}.chat__file-preview::-webkit-scrollbar-track{background:var(--muted);border-radius:9999px}.chat__file-preview::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:9999px}.chat__file-preview-item{position:relative;width:50px;height:50px;border-radius:calc(var(--radius) - 2px);overflow:hidden;flex-shrink:0;background-color:var(--muted)}.chat__file-preview-image{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .2s ease-in-out}.chat__file-preview-image:hover{opacity:.8}.chat__file-preview-image--uploading{opacity:.6}.chat__file-preview-progress-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0000004d;border-radius:calc(var(--radius) - 2px)}.chat__file-preview-progress-circle{width:32px;height:32px;transform:rotate(-90deg)}.chat__file-preview-progress-circle-bg{stroke:#fff3;stroke-width:3}.chat__file-preview-progress-circle-fg{stroke:var(--babylai-primary-color, #ad49e1);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.48;stroke-dashoffset:100.48;animation:circular-progress 2s ease-in-out infinite}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}.chat__file-preview-error{position:absolute;top:2px;inset-inline-end:2px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--destructive);color:#fff;font-size:.75rem;font-weight:600}.chat__file-preview-remove{position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#0009;color:#fff;border:none;cursor:pointer;transition:all .2s ease-in-out;opacity:0}.chat__file-preview-item:hover .chat__file-preview-remove{opacity:1}.chat__file-preview-remove:hover{background-color:#000c;transform:scale(1.1)}.chat__file-preview-remove svg{width:12px;height:12px}\n"] }]
-        }], propDecorators: { isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], sessionId: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }], messageInput: [{
-                type: ViewChild,
-                args: ['messageInput']
-            }], fileInput: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }] } });
-
-class ChatComponent {
-    // Using input() signals - automatically trigger change detection on updates
-    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
-    needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
-    assistantStatus = input('', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : []));
-    isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : []));
-    isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : []));
-    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : []));
-    sendMessageEvent = output();
-    chatMessagesContainer;
-    // Computed signal for first agent message index
-    firstAgentMessageIndex = computed(() => {
-        return this.messages().findIndex((message) => message.senderType === 2);
-    }, ...(ngDevMode ? [{ debugName: "firstAgentMessageIndex" }] : []));
-    previousMessagesLength = 0;
-    scrollTimeouts = [];
-    messagesEffectRef;
-    constructor() {
-        // Effect to handle scrolling when messages change
-        this.messagesEffectRef = effect(() => {
-            const messages = this.messages();
-            const currentLength = messages.length;
-            // Only scroll if messages array length changed (new message added)
-            if (currentLength !== this.previousMessagesLength) {
-                this.previousMessagesLength = currentLength;
-                // Use setTimeout to ensure DOM is updated
-                const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
-                this.scrollTimeouts.push(timeoutId);
-            }
-        }, ...(ngDevMode ? [{ debugName: "messagesEffectRef" }] : []));
-    }
-    ngOnInit() {
-        this.previousMessagesLength = this.messages().length;
-    }
-    ngAfterViewInit() {
-        // Initial scroll to bottom after view init
-        const timeoutId = setTimeout(() => this.scrollToBottom(), 0);
-        this.scrollTimeouts.push(timeoutId);
-    }
-    ngOnDestroy() {
-        // Clean up effect
-        if (this.messagesEffectRef) {
-            this.messagesEffectRef.destroy();
-            this.messagesEffectRef = undefined;
-        }
-        // Clear all pending scroll timeouts
-        this.scrollTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
-        this.scrollTimeouts = [];
-    }
-    handleSendMessage(event) {
-        this.sendMessageEvent.emit(event);
-    }
-    scrollToBottom() {
-        try {
-            this.chatMessagesContainer.nativeElement.scrollTop =
-                this.chatMessagesContainer.nativeElement.scrollHeight;
-        }
-        catch (err) {
-            console.error('Error scrolling to bottom:', err);
-        }
-    }
-    hasAgentMessageBeenSent(messages) {
-        return messages.some((message) => message.senderType === 2 || message.senderType === 3);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ChatComponent, isStandalone: true, selector: "app-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sendMessageEvent: "sendMessageEvent" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    @for (message of messages(); track message.id; let i = $index) {\n    <div class=\"chat__message-group\">\n      @if (i === firstAgentMessageIndex() && message.senderType === 2) {\n      <app-chat-separator />\n      }\n      <app-chat-message [message]=\"message\" [needsAgent]=\"needsAgent()\" [currentLang]=\"currentLang()\"\n        [isHidden]=\"i > 0 && messages()[i - 1].senderType === message.senderType\" />\n    </div>\n    }\n\n    @if (assistantStatus() === 'typing' && firstAgentMessageIndex() === -1) {\n    <app-chat-typing-indicator />\n    }\n    @if (loading()) {\n    <div class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n    }\n  </div>\n\n  <app-chat-input\n    [isChatClosed]=\"isChatClosed()\"\n    [assistantStatus]=\"assistantStatus()\"\n    [currentLang]=\"currentLang()\"\n    [sessionId]=\"sessionId()\"\n    (sendMessage)=\"handleSendMessage($event)\"\n  />\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:1rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "needsAgent", "currentLang", "isHidden"] }, { kind: "component", type: ChatSeparatorComponent, selector: "app-chat-separator" }, { kind: "component", type: ChatTypingIndicatorComponent, selector: "app-chat-typing-indicator" }, { kind: "component", type: ChatInputComponent, selector: "app-chat-input", inputs: ["isChatClosed", "assistantStatus", "currentLang", "sessionId"], outputs: ["sendMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-chat', standalone: true, imports: [
-                        CommonModule,
-                        LoadingComponent,
-                        ChatMessageComponent,
-                        ChatSeparatorComponent,
-                        ChatTypingIndicatorComponent,
-                        ChatInputComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat\">\n  <div class=\"chat__messages\" #chatMessagesContainer>\n    @for (message of messages(); track message.id; let i = $index) {\n    <div class=\"chat__message-group\">\n      @if (i === firstAgentMessageIndex() && message.senderType === 2) {\n      <app-chat-separator />\n      }\n      <app-chat-message [message]=\"message\" [needsAgent]=\"needsAgent()\" [currentLang]=\"currentLang()\"\n        [isHidden]=\"i > 0 && messages()[i - 1].senderType === message.senderType\" />\n    </div>\n    }\n\n    @if (assistantStatus() === 'typing' && firstAgentMessageIndex() === -1) {\n    <app-chat-typing-indicator />\n    }\n    @if (loading()) {\n    <div class=\"chat__loading\">\n      <app-loading variant=\"primary\" />\n    </div>\n    }\n  </div>\n\n  <app-chat-input\n    [isChatClosed]=\"isChatClosed()\"\n    [assistantStatus]=\"assistantStatus()\"\n    [currentLang]=\"currentLang()\"\n    [sessionId]=\"sessionId()\"\n    (sendMessage)=\"handleSendMessage($event)\"\n  />\n</div>\n", styles: [".chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat__messages{flex:1;overflow-y:auto;padding-bottom:1rem;display:flex;flex-direction:column;gap:1rem}.chat__message-group{display:flex;flex-direction:column;gap:.5rem}.chat__loading{display:flex;align-items:center;justify-content:center;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], sendMessageEvent: [{ type: i0.Output, args: ["sendMessageEvent"] }], chatMessagesContainer: [{
-                type: ViewChild,
-                args: ['chatMessagesContainer']
-            }] } });
-
-class BaseDialogComponent {
-    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
-    closeOnOverlayClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOverlayClick" }] : []));
-    ariaLabel = input('Dialog', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    close = output();
-    dialogContainer;
-    previousActiveElement = null;
-    tabKeyListener;
-    escapeKeyListener;
-    focusTimeouts = [];
-    focusEffectRef;
-    constructor() {
-        // Effect to handle focus trapping when dialog opens/closes
-        this.focusEffectRef = effect(() => {
-            if (this.isOpen()) {
-                // Use setTimeout to ensure DOM is fully rendered
-                const timeoutId = setTimeout(() => {
-                    if (this.dialogContainer?.nativeElement) {
-                        this.trapFocus();
-                    }
-                }, 0);
-                this.focusTimeouts.push(timeoutId);
-            }
-            else {
-                this.releaseFocus();
-            }
-        }, ...(ngDevMode ? [{ debugName: "focusEffectRef" }] : []));
-    }
-    ngOnInit() {
-        // Set up Escape key listener for closing dialog
-        this.escapeKeyListener = (event) => {
-            if (event.key === 'Escape' && this.isOpen() && this.closeOnEscape() && !this.isLoading()) {
-                this.handleClose();
-            }
-        };
-        document.addEventListener('keydown', this.escapeKeyListener);
-    }
-    ngAfterViewInit() {
-        if (this.isOpen()) {
-            const timeoutId = setTimeout(() => {
-                if (this.dialogContainer?.nativeElement) {
-                    this.trapFocus();
-                }
-            }, 0);
-            this.focusTimeouts.push(timeoutId);
-        }
-    }
-    ngOnDestroy() {
-        // Clean up effect
-        if (this.focusEffectRef) {
-            this.focusEffectRef.destroy();
-            this.focusEffectRef = undefined;
-        }
-        this.releaseFocus();
-        // Remove Escape key listener
-        if (this.escapeKeyListener) {
-            document.removeEventListener('keydown', this.escapeKeyListener);
-            this.escapeKeyListener = undefined;
-        }
-        // Clear all pending focus timeouts
-        this.focusTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
-        this.focusTimeouts = [];
-    }
-    onOverlayClick() {
-        if (this.closeOnOverlayClick() && !this.isLoading()) {
-            this.handleClose();
-        }
-    }
-    onDialogClick(event) {
-        // Prevent overlay click when clicking inside dialog
-        event.stopPropagation();
-    }
-    handleClose() {
-        if (!this.isLoading()) {
-            this.close.emit();
-        }
-    }
-    trapFocus() {
-        // Store the previously focused element
-        this.previousActiveElement = document.activeElement;
-        // Set up Tab key listener for focus trapping
-        this.tabKeyListener = (event) => {
-            if (event.key !== 'Tab' || !this.isOpen())
-                return;
-            const focusableElements = this.getFocusableElements();
-            if (focusableElements.length === 0) {
-                event.preventDefault();
-                return;
-            }
-            const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-            if (event.shiftKey) {
-                // Shift + Tab
-                if (document.activeElement === firstElement) {
-                    event.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else {
-                // Tab
-                if (document.activeElement === lastElement) {
-                    event.preventDefault();
-                    firstElement.focus();
-                }
-            }
-        };
-        document.addEventListener('keydown', this.tabKeyListener);
-        // Focus the first focusable element after a short delay to ensure DOM is ready
-        // If no focusable elements exist, focus the container itself
-        const timeoutId = setTimeout(() => {
-            const focusableElements = this.getFocusableElements();
-            if (focusableElements.length > 0) {
-                focusableElements[0].focus();
-            }
-            else if (this.dialogContainer?.nativeElement) {
-                // Fallback: focus the container itself if no focusable elements
-                this.dialogContainer.nativeElement.focus();
-            }
-        }, 0);
-        this.focusTimeouts.push(timeoutId);
-    }
-    releaseFocus() {
-        // Remove Tab key listener
-        if (this.tabKeyListener) {
-            document.removeEventListener('keydown', this.tabKeyListener);
-            this.tabKeyListener = undefined;
-        }
-        // Return focus to the previously active element
-        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
-            this.previousActiveElement.focus();
-            this.previousActiveElement = null;
+        this.selectedFiles().forEach((f) => {
+            if (f.previewUrl.startsWith('blob:')) {
+                URL.revokeObjectURL(f.previewUrl);
+            }
+        });
+        this.selectedFiles.set([]);
+        this.adjustTextareaHeight();
+    }
+    handlePreviewImage(index) {
+        const file = this.selectedFiles()[index];
+        if (file) {
+            this.previewImageUrl.set(file.previewUrl);
+            this.previewImageIndex.set(index);
         }
     }
-    getFocusableElements() {
-        if (!this.dialogContainer?.nativeElement)
-            return [];
-        const container = this.dialogContainer.nativeElement;
-        const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-        return Array.from(container.querySelectorAll(selector)).filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'));
+    closePreview() {
+        this.previewImageUrl.set(null);
+        this.previewImageIndex.set(-1);
+    }
+    adjustTextareaHeight() {
+        const textarea = this.messageInput?.nativeElement;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: BaseDialogComponent, isStandalone: true, selector: "app-base-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlayClick: { classPropertyName: "closeOnOverlayClick", publicName: "closeOnOverlayClick", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true }], ngImport: i0, template: "@if (isOpen()) {\n<div \n  class=\"dialog-overlay\" \n  (click)=\"onOverlayClick()\" \n  role=\"dialog\" \n  aria-modal=\"true\" \n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"dialog\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n    <ng-content></ng-content>\n    @if (isLoading()) {\n      <div class=\"dialog__loading-overlay\">\n        <app-loading variant=\"primary\"></app-loading>\n      </div>\n    }\n  </div>\n</div>\n}\n\n", styles: ["::ng-deep .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}::ng-deep .dialog{background-color:var(--card);border-radius:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 3px 0 var(--babylai-primary-color-200);position:relative}::ng-deep .dialog__content{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}::ng-deep .dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dialog__title{font-size:1rem;font-weight:700;color:var(--card-foreground);margin:0;margin-bottom:.5rem}::ng-deep .dialog__title--centered{text-align:center}::ng-deep .dialog__body,::ng-deep .dialog__description{color:var(--card-foreground)}::ng-deep .dialog__body--centered,::ng-deep .dialog__description--centered{text-align:center}::ng-deep .dialog__divider{height:1px;background-color:var(--border)}::ng-deep .dialog__actions{display:flex;gap:.75rem;justify-content:space-between;width:100%;padding:1rem}::ng-deep .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}::ng-deep .dialog__close:hover:not(:disabled){background-color:color-mix(in srgb,var(--card-foreground) 10%,transparent)}::ng-deep .dialog__close:disabled{opacity:.5;cursor:not-allowed}::ng-deep .dialog__loading-overlay{position:absolute;inset:0;background-color:color-mix(in srgb,var(--card) 90%,transparent);border-radius:1.5rem;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ChatInputComponent, isStandalone: true, selector: "app-chat-input", inputs: { isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { sendMessage: "sendMessage" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"chat__input-container relative w-full\">\n  @if (selectedFiles().length > 0) {\n  <div\n    class=\"chat__file-preview flex gap-2 mb-2 overflow-x-auto bg-card rounded-2xl p-3\"\n    style=\"scrollbar-width: thin\"\n  >\n    @for (file of selectedFiles(); track $index) {\n    <div\n      class=\"chat__file-preview-item relative w-[50px] h-[50px] rounded-md overflow-hidden flex-shrink-0 border border-black-white-200\"\n      [style.background-color]=\"'var(--muted)'\"\n    >\n      <img\n        [src]=\"file.previewUrl\"\n        [alt]=\"file.file.name\"\n        class=\"chat__file-preview-image w-full h-full object-cover cursor-pointer transition-opacity duration-200\"\n        [class.opacity-60]=\"file.uploading\"\n        [class.opacity-80]=\"!file.uploading\"\n        (click)=\"handlePreviewImage($index)\"\n      />\n      @if (file.uploading) {\n      <div\n        class=\"chat__file-preview-progress-overlay absolute inset-0 flex items-center justify-center bg-black/30 rounded-md\"\n      >\n        <svg\n          class=\"chat__file-preview-progress-circle w-8 h-8\"\n          viewBox=\"0 0 36 36\"\n          style=\"transform: rotate(-90deg)\"\n        >\n          <circle\n            class=\"chat__file-preview-progress-circle-bg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n            [style.stroke]=\"'rgba(255, 255, 255, 0.2)'\"\n            stroke-width=\"3\"\n          />\n          <circle\n            class=\"chat__file-preview-progress-circle-fg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n            [style.stroke]=\"'var(--primary-color)'\"\n            stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"100.48\"\n            stroke-dashoffset=\"100.48\"\n            style=\"animation: circular-progress 2s ease-in-out infinite\"\n          />\n        </svg>\n      </div>\n      } @if (file.error) {\n      <div\n        class=\"chat__file-preview-error absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center rounded-full text-white text-xs font-semibold\"\n        [style.background-color]=\"'var(--destructive)'\"\n        [title]=\"file.error\"\n      >\n        !\n      </div>\n      }\n      <button\n        type=\"button\"\n        class=\"chat__file-preview-remove absolute top-0.5 left-0.5 w-5 h-5 flex items-center justify-center rounded-full bg-black/60 text-white border-none cursor-pointer transition-all duration-200 opacity-0 hover:opacity-100 hover:bg-black/80 hover:scale-110\"\n        (click)=\"removeFile($index)\"\n        aria-label=\"Remove image\"\n      >\n        <svg\n          class=\"w-3 h-3\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <form\n    (ngSubmit)=\"handleSendMessage()\"\n    class=\"chat__input-form relative w-full\"\n  >\n    <input\n      type=\"file\"\n      #fileInput\n      accept=\"image/*\"\n      multiple\n      (change)=\"handleFileSelect($event)\"\n      class=\"chat__file-input absolute opacity-0 w-0 h-0 pointer-events-none\"\n      [disabled]=\"isChatClosed()\"\n    />\n\n    <div\n      class=\"chat__input-wrapper relative w-full flex items-center gap-2 bg-card rounded-full p-3\"\n    >\n      <div\n        class=\"border-e border-black-white-200 dark:border-e-black-white-600 pe-2\"\n      >\n        <button\n          type=\"button\"\n          class=\"chat__attach-button inline-flex items-center justify-center w-8 h-8 p-2 rounded-full bg-black-white-100 rounded-full border-none cursor-pointer transition-all duration-200 flex-shrink-0\"\n          [style.color]=\"'var(--muted-foreground)'\"\n          (click)=\"handleAttachClick()\"\n          [disabled]=\"isChatClosed()\"\n          aria-label=\"Attach image\"\n        >\n          <svg\n            class=\"w-full h-full\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M16.5 6.75L9.75 13.5C8.92157 14.3284 8.92157 15.6716 9.75 16.5C10.5784 17.3284 11.9216 17.3284 12.75 16.5L18.75 10.5C20.4069 8.84315 20.4069 6.15685 18.75 4.5C17.0931 2.84315 14.4069 2.84315 12.75 4.5L6 11.25C3.92893 13.3211 3.92893 16.6789 6 18.75C8.07107 20.8211 11.4289 20.8211 13.5 18.75L18 14.25\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      </div>\n      <input\n        type=\"text\"\n        [ngModel]=\"messageContent()\"\n        (ngModelChange)=\"messageContent.set($event)\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed()\"\n        [attr.aria-label]=\"'Chat input field'\"\n        [attr.aria-disabled]=\"isChatClosed()\"\n        role=\"textbox\"\n        class=\"flex-1 w-full text-sm transition-all duration-200 outline-none placeholder:text-black-white-400 dark:placeholder:text-black-white-600 px-2\"\n        dir=\"auto\"\n        #messageInput\n        (keydown.enter)=\"handleSendMessage()\"\n        (keydown.escape)=\"messageContent.set('')\"\n      />\n\n      <button\n        type=\"submit\"\n        [disabled]=\"!canSend()\"\n        [attr.aria-label]=\"'Send message'\"\n        class=\"cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 w-7 h-7 p-1.5 inline-flex items-center justify-center rounded-full transition-all duration-200 opacity-100 border-none bg-primary text-white\"\n      >\n        <svg\n          class=\"w-6 h-6\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.5\"\n            d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat__attach-button:hover:not(:disabled){color:var(--foreground);background-color:var(--muted)}.chat__attach-button:disabled{cursor:not-allowed;opacity:.5}.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__file-preview::-webkit-scrollbar{height:4px}.chat__file-preview::-webkit-scrollbar-track{background:var(--muted);border-radius:9999px}.chat__file-preview::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:9999px}.chat__file-preview-item:hover .chat__file-preview-remove{opacity:1}.chat__file-preview-image:hover{opacity:.8}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BaseDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-base-dialog', standalone: true, imports: [CommonModule, LoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n<div \n  class=\"dialog-overlay\" \n  (click)=\"onOverlayClick()\" \n  role=\"dialog\" \n  aria-modal=\"true\" \n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <div class=\"dialog\" #dialogContainer tabindex=\"-1\" (click)=\"onDialogClick($event)\">\n    <ng-content></ng-content>\n    @if (isLoading()) {\n      <div class=\"dialog__loading-overlay\">\n        <app-loading variant=\"primary\"></app-loading>\n      </div>\n    }\n  </div>\n</div>\n}\n\n", styles: ["::ng-deep .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}::ng-deep .dialog{background-color:var(--card);border-radius:1.5rem;max-width:384px;width:100%;margin:0 1rem;box-shadow:0 0 3px 0 var(--babylai-primary-color-200);position:relative}::ng-deep .dialog__content{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}::ng-deep .dialog__header{display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dialog__title{font-size:1rem;font-weight:700;color:var(--card-foreground);margin:0;margin-bottom:.5rem}::ng-deep .dialog__title--centered{text-align:center}::ng-deep .dialog__body,::ng-deep .dialog__description{color:var(--card-foreground)}::ng-deep .dialog__body--centered,::ng-deep .dialog__description--centered{text-align:center}::ng-deep .dialog__divider{height:1px;background-color:var(--border)}::ng-deep .dialog__actions{display:flex;gap:.75rem;justify-content:space-between;width:100%;padding:1rem}::ng-deep .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}::ng-deep .dialog__close:hover:not(:disabled){background-color:color-mix(in srgb,var(--card-foreground) 10%,transparent)}::ng-deep .dialog__close:disabled{opacity:.5;cursor:not-allowed}::ng-deep .dialog__loading-overlay{position:absolute;inset:0;background-color:color-mix(in srgb,var(--card) 90%,transparent);border-radius:1.5rem;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnOverlayClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOverlayClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], dialogContainer: [{
+            args: [{ selector: 'app-chat-input', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"chat__input-container relative w-full\">\n  @if (selectedFiles().length > 0) {\n  <div\n    class=\"chat__file-preview flex gap-2 mb-2 overflow-x-auto bg-card rounded-2xl p-3\"\n    style=\"scrollbar-width: thin\"\n  >\n    @for (file of selectedFiles(); track $index) {\n    <div\n      class=\"chat__file-preview-item relative w-[50px] h-[50px] rounded-md overflow-hidden flex-shrink-0 border border-black-white-200\"\n      [style.background-color]=\"'var(--muted)'\"\n    >\n      <img\n        [src]=\"file.previewUrl\"\n        [alt]=\"file.file.name\"\n        class=\"chat__file-preview-image w-full h-full object-cover cursor-pointer transition-opacity duration-200\"\n        [class.opacity-60]=\"file.uploading\"\n        [class.opacity-80]=\"!file.uploading\"\n        (click)=\"handlePreviewImage($index)\"\n      />\n      @if (file.uploading) {\n      <div\n        class=\"chat__file-preview-progress-overlay absolute inset-0 flex items-center justify-center bg-black/30 rounded-md\"\n      >\n        <svg\n          class=\"chat__file-preview-progress-circle w-8 h-8\"\n          viewBox=\"0 0 36 36\"\n          style=\"transform: rotate(-90deg)\"\n        >\n          <circle\n            class=\"chat__file-preview-progress-circle-bg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n            [style.stroke]=\"'rgba(255, 255, 255, 0.2)'\"\n            stroke-width=\"3\"\n          />\n          <circle\n            class=\"chat__file-preview-progress-circle-fg\"\n            cx=\"18\"\n            cy=\"18\"\n            r=\"16\"\n            fill=\"none\"\n            [style.stroke]=\"'var(--primary-color)'\"\n            stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"100.48\"\n            stroke-dashoffset=\"100.48\"\n            style=\"animation: circular-progress 2s ease-in-out infinite\"\n          />\n        </svg>\n      </div>\n      } @if (file.error) {\n      <div\n        class=\"chat__file-preview-error absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center rounded-full text-white text-xs font-semibold\"\n        [style.background-color]=\"'var(--destructive)'\"\n        [title]=\"file.error\"\n      >\n        !\n      </div>\n      }\n      <button\n        type=\"button\"\n        class=\"chat__file-preview-remove absolute top-0.5 left-0.5 w-5 h-5 flex items-center justify-center rounded-full bg-black/60 text-white border-none cursor-pointer transition-all duration-200 opacity-0 hover:opacity-100 hover:bg-black/80 hover:scale-110\"\n        (click)=\"removeFile($index)\"\n        aria-label=\"Remove image\"\n      >\n        <svg\n          class=\"w-3 h-3\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <form\n    (ngSubmit)=\"handleSendMessage()\"\n    class=\"chat__input-form relative w-full\"\n  >\n    <input\n      type=\"file\"\n      #fileInput\n      accept=\"image/*\"\n      multiple\n      (change)=\"handleFileSelect($event)\"\n      class=\"chat__file-input absolute opacity-0 w-0 h-0 pointer-events-none\"\n      [disabled]=\"isChatClosed()\"\n    />\n\n    <div\n      class=\"chat__input-wrapper relative w-full flex items-center gap-2 bg-card rounded-full p-3\"\n    >\n      <div\n        class=\"border-e border-black-white-200 dark:border-e-black-white-600 pe-2\"\n      >\n        <button\n          type=\"button\"\n          class=\"chat__attach-button inline-flex items-center justify-center w-8 h-8 p-2 rounded-full bg-black-white-100 rounded-full border-none cursor-pointer transition-all duration-200 flex-shrink-0\"\n          [style.color]=\"'var(--muted-foreground)'\"\n          (click)=\"handleAttachClick()\"\n          [disabled]=\"isChatClosed()\"\n          aria-label=\"Attach image\"\n        >\n          <svg\n            class=\"w-full h-full\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M16.5 6.75L9.75 13.5C8.92157 14.3284 8.92157 15.6716 9.75 16.5C10.5784 17.3284 11.9216 17.3284 12.75 16.5L18.75 10.5C20.4069 8.84315 20.4069 6.15685 18.75 4.5C17.0931 2.84315 14.4069 2.84315 12.75 4.5L6 11.25C3.92893 13.3211 3.92893 16.6789 6 18.75C8.07107 20.8211 11.4289 20.8211 13.5 18.75L18 14.25\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </button>\n      </div>\n      <input\n        type=\"text\"\n        [ngModel]=\"messageContent()\"\n        (ngModelChange)=\"messageContent.set($event)\"\n        name=\"messageContent\"\n        [placeholder]=\"'ChatPlaceholder' | translate\"\n        [disabled]=\"isChatClosed()\"\n        [attr.aria-label]=\"'Chat input field'\"\n        [attr.aria-disabled]=\"isChatClosed()\"\n        role=\"textbox\"\n        class=\"flex-1 w-full text-sm transition-all duration-200 outline-none placeholder:text-black-white-400 dark:placeholder:text-black-white-600 px-2\"\n        dir=\"auto\"\n        #messageInput\n        (keydown.enter)=\"handleSendMessage()\"\n        (keydown.escape)=\"messageContent.set('')\"\n      />\n\n      <button\n        type=\"submit\"\n        [disabled]=\"!canSend()\"\n        [attr.aria-label]=\"'Send message'\"\n        class=\"cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 w-7 h-7 p-1.5 inline-flex items-center justify-center rounded-full transition-all duration-200 opacity-100 border-none bg-primary text-white\"\n      >\n        <svg\n          class=\"w-6 h-6\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.5\"\n            d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </button>\n    </div>\n  </form>\n</div>\n", styles: [".chat__attach-button:hover:not(:disabled){color:var(--foreground);background-color:var(--muted)}.chat__attach-button:disabled{cursor:not-allowed;opacity:.5}.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__file-preview::-webkit-scrollbar{height:4px}.chat__file-preview::-webkit-scrollbar-track{background:var(--muted);border-radius:9999px}.chat__file-preview::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:9999px}.chat__file-preview-item:hover .chat__file-preview-remove{opacity:1}.chat__file-preview-image:hover{opacity:.8}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}\n"] }]
+        }], propDecorators: { isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], sessionId: [{
+                type: Input
+            }], sendMessage: [{
+                type: Output
+            }], messageInput: [{
                 type: ViewChild,
-                args: ['dialogContainer']
+                args: ['messageInput']
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
             }] } });
 
-class ConfirmationDialogComponent {
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    body = input('', ...(ngDevMode ? [{ debugName: "body" }] : []));
-    confirmText = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmText" }] : []));
-    cancelText = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelText" }] : []));
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    onConfirm = output();
-    onCancel = output();
-    disableActions = computed(() => this.isLoading(), ...(ngDevMode ? [{ debugName: "disableActions" }] : []));
-    onClose() {
-        this.onCancel.emit();
+class ChatScreenComponent {
+    showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
+    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+    needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
+    assistantStatus = input('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : []));
+    isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : []));
+    isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : []));
+    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    chatIsLoading = input(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : []));
+    sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : []));
+    selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    selectedNestedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : []));
+    isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : []));
+    endChat = output();
+    back = output();
+    onMinimize = output();
+    sendMessage = output();
+    reviewSubmit = output();
+    reviewSkip = output();
+    handleEndChat() {
+        this.endChat.emit();
+    }
+    handleBack() {
+        this.back.emit();
+    }
+    handleMinimize() {
+        this.onMinimize.emit();
+    }
+    handleSendMessage(event) {
+        this.sendMessage.emit(event);
+    }
+    handleReviewSubmit(reviewData) {
+        this.reviewSubmit.emit(reviewData);
+    }
+    handleReviewSkip() {
+        this.reviewSkip.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onConfirm: "onConfirm", onCancel: "onCancel" }, ngImport: i0, template: "<app-base-dialog\n  [isOpen]=\"true\"\n  [isLoading]=\"isLoading()\"\n  [ariaLabel]=\"title()\"\n  (close)=\"onClose()\"\n>\n  <div class=\"dialog__content\">\n    <h3 class=\"dialog__title dialog__title--centered\">{{ title() }}</h3>\n    <p class=\"dialog__body dialog__body--centered\">{{ body() }}</p>\n  </div>\n  <div class=\"dialog__actions\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onCancel.emit()\"\n    >\n      {{ cancelText() }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onConfirm.emit()\"\n    >\n      {{ confirmText() }}\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".dialog__content{padding-bottom:0}.dialog__actions app-button{flex:1;width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ChatScreenComponent, isStandalone: true, selector: "app-chat-screen", inputs: { showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, chatIsLoading: { classPropertyName: "chatIsLoading", publicName: "chatIsLoading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, selectedNestedOption: { classPropertyName: "selectedNestedOption", publicName: "selectedNestedOption", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endChat: "endChat", back: "back", onMinimize: "onMinimize", sendMessage: "sendMessage", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip" }, ngImport: i0, template: "<app-chat-header\n  [showBackButton]=\"showChat()\"\n  [selectedOptionTitle]=\"\n    selectedNestedOption()?.title || selectedOption()?.title || null\n  \"\n  (onClose)=\"handleEndChat()\"\n  (onBack)=\"handleBack()\"\n  (onMinimize)=\"handleMinimize()\"\n  [language]=\"currentLang()\"\n></app-chat-header>\n\n<app-chat\n  class=\"flex flex-col flex-1 overflow-hidden px-4 pt-6 pb-2\"\n  [messages]=\"messages()\"\n  [needsAgent]=\"needsAgent()\"\n  [assistantStatus]=\"assistantStatus()\"\n  [currentLang]=\"currentLang()\"\n  [loading]=\"chatIsLoading()\"\n  [isSubmittingReview]=\"isSubmittingReview()\"\n  (reviewSubmit)=\"handleReviewSubmit($event)\"\n  (reviewSkip)=\"handleReviewSkip()\"\n></app-chat>\n\n<app-chat-input\n  [isChatClosed]=\"isChatClosed()\"\n  [assistantStatus]=\"assistantStatus()\"\n  [currentLang]=\"currentLang()\"\n  [sessionId]=\"sessionId()\"\n  (sendMessage)=\"handleSendMessage($event)\"\n  class=\"px-4 mb-2\"\n/>\n\n<app-footer />\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChatHeaderComponent, selector: "app-chat-header", inputs: ["showBackButton", "language", "selectedOptionTitle"], outputs: ["onBack", "onClose", "onMinimize"] }, { kind: "component", type: ChatComponent, selector: "app-chat", inputs: ["messages", "needsAgent", "assistantStatus", "currentLang", "loading", "isSubmittingReview"], outputs: ["reviewSubmit", "reviewSkip"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }, { kind: "component", type: ChatInputComponent, selector: "app-chat-input", inputs: ["isChatClosed", "assistantStatus", "currentLang", "sessionId"], outputs: ["sendMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatScreenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirmation-dialog', standalone: true, imports: [CommonModule, ButtonComponent, BaseDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n  [isOpen]=\"true\"\n  [isLoading]=\"isLoading()\"\n  [ariaLabel]=\"title()\"\n  (close)=\"onClose()\"\n>\n  <div class=\"dialog__content\">\n    <h3 class=\"dialog__title dialog__title--centered\">{{ title() }}</h3>\n    <p class=\"dialog__body dialog__body--centered\">{{ body() }}</p>\n  </div>\n  <div class=\"dialog__actions\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onCancel.emit()\"\n    >\n      {{ cancelText() }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"disableActions()\"\n      (onClick)=\"onConfirm.emit()\"\n    >\n      {{ confirmText() }}\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".dialog__content{padding-bottom:0}.dialog__actions app-button{flex:1;width:100%;display:block}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], onConfirm: [{ type: i0.Output, args: ["onConfirm"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }] } });
+            args: [{ selector: 'app-chat-screen', standalone: true, imports: [
+                        CommonModule,
+                        ChatHeaderComponent,
+                        ChatComponent,
+                        FooterComponent,
+                        ChatInputComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-chat-header\n  [showBackButton]=\"showChat()\"\n  [selectedOptionTitle]=\"\n    selectedNestedOption()?.title || selectedOption()?.title || null\n  \"\n  (onClose)=\"handleEndChat()\"\n  (onBack)=\"handleBack()\"\n  (onMinimize)=\"handleMinimize()\"\n  [language]=\"currentLang()\"\n></app-chat-header>\n\n<app-chat\n  class=\"flex flex-col flex-1 overflow-hidden px-4 pt-6 pb-2\"\n  [messages]=\"messages()\"\n  [needsAgent]=\"needsAgent()\"\n  [assistantStatus]=\"assistantStatus()\"\n  [currentLang]=\"currentLang()\"\n  [loading]=\"chatIsLoading()\"\n  [isSubmittingReview]=\"isSubmittingReview()\"\n  (reviewSubmit)=\"handleReviewSubmit($event)\"\n  (reviewSkip)=\"handleReviewSkip()\"\n></app-chat>\n\n<app-chat-input\n  [isChatClosed]=\"isChatClosed()\"\n  [assistantStatus]=\"assistantStatus()\"\n  [currentLang]=\"currentLang()\"\n  [sessionId]=\"sessionId()\"\n  (sendMessage)=\"handleSendMessage($event)\"\n  class=\"px-4 mb-2\"\n/>\n\n<app-footer />\n" }]
+        }], propDecorators: { showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], chatIsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatIsLoading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], selectedNestedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNestedOption", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], endChat: [{ type: i0.Output, args: ["endChat"] }], back: [{ type: i0.Output, args: ["back"] }], onMinimize: [{ type: i0.Output, args: ["onMinimize"] }], sendMessage: [{ type: i0.Output, args: ["sendMessage"] }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }] } });
 
-class ReviewDialogComponent {
-    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
-    close = output();
-    submitReview = output();
-    skip = output();
-    rating = signal(0, ...(ngDevMode ? [{ debugName: "rating" }] : []));
-    comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : []));
-    // Validation errors
-    ratingError = signal('', ...(ngDevMode ? [{ debugName: "ratingError" }] : []));
-    commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : []));
-    onRatingClick(starIndex) {
-        this.rating.set(starIndex + 1);
-        this.clearRatingError();
+class ChatActionButtonsComponent {
+    selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    closeChat = output();
+    continueChat = output();
+    handleCloseChat() {
+        const option = this.selectedOption();
+        if (option) {
+            this.closeChat.emit(option);
+        }
     }
-    onCommentChange() {
-        this.clearCommentError();
+    handleContinueChat() {
+        this.continueChat.emit();
     }
-    onClose() {
-        if (!this.isSubmitting()) {
-            this.close.emit();
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ChatActionButtonsComponent, isStandalone: true, selector: "app-chat-action-buttons", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeChat: "closeChat", continueChat: "continueChat" }, ngImport: i0, template: "<section class=\"flex justify-between gap-3 px-4 py-6 absolute left-0 right-0 bottom-11 z-20 bg-gradient-to-t from-card to-transparent from-[28.32%] to-[112.59%]\">\n  <app-button\n    variant=\"outline\"\n    [fullWidth]=\"true\"\n    (onClick)=\"handleCloseChat()\"\n    class=\"w-full\"\n  >\n    {{ \"CloseChat\" | translate }}\n  </app-button>\n  <app-button\n    variant=\"default\"\n    [fullWidth]=\"true\"\n    (onClick)=\"handleContinueChat()\"\n    class=\"w-full\"\n  >\n    {{ \"Continue\" | translate }}\n    <svg\n      class=\"w-6 h-6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        opacity=\"0.5\"\n        d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </app-button>\n</section>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-action-buttons', standalone: true, imports: [CommonModule, TranslatePipe, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"flex justify-between gap-3 px-4 py-6 absolute left-0 right-0 bottom-11 z-20 bg-gradient-to-t from-card to-transparent from-[28.32%] to-[112.59%]\">\n  <app-button\n    variant=\"outline\"\n    [fullWidth]=\"true\"\n    (onClick)=\"handleCloseChat()\"\n    class=\"w-full\"\n  >\n    {{ \"CloseChat\" | translate }}\n  </app-button>\n  <app-button\n    variant=\"default\"\n    [fullWidth]=\"true\"\n    (onClick)=\"handleContinueChat()\"\n    class=\"w-full\"\n  >\n    {{ \"Continue\" | translate }}\n    <svg\n      class=\"w-6 h-6\"\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M5.79613 18.204L21.5121 2.48802C20.5241 1.49902 18.6521 2.12402 14.9061 3.37202L5.57513 6.48202C3.49313 7.17602 2.45213 7.52302 2.13613 8.28602C2.06146 8.46668 2.01713 8.65468 2.00313 8.85002C1.94413 9.67402 2.72013 10.45 4.27213 12.001L4.55513 12.284C4.80913 12.538 4.93713 12.666 5.03313 12.807C5.22313 13.087 5.33013 13.414 5.34313 13.752C5.35113 13.923 5.32413 14.102 5.27113 14.457C5.07513 15.761 4.97713 16.413 5.09213 16.915C5.20613 17.41 5.45413 17.853 5.79613 18.204Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        opacity=\"0.5\"\n        d=\"M17.4979 18.486L20.6279 9.09404C21.8779 5.34904 22.5009 3.47704 21.5129 2.48804L5.79688 18.204C6.14487 18.56 6.59088 18.821 7.09288 18.944C7.59288 19.066 8.24588 18.977 9.55288 18.8L9.62387 18.79C9.99287 18.74 10.1769 18.715 10.3539 18.726C10.6739 18.746 10.9839 18.85 11.2519 19.029C11.3989 19.128 11.5299 19.259 11.7929 19.522L12.0439 19.773C13.5539 21.283 14.3099 22.038 15.1109 21.999C15.3309 21.989 15.5489 21.937 15.7509 21.848C16.4849 21.525 16.8229 20.512 17.4979 18.486Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </app-button>\n</section>\n" }]
+        }], propDecorators: { selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], closeChat: [{ type: i0.Output, args: ["closeChat"] }], continueChat: [{ type: i0.Output, args: ["continueChat"] }] } });
+
+class HelpPopupComponent {
+    isPopupOpen = input(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : []));
+    showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : []));
+    showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
+    status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : []));
+    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+    needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
+    assistantStatus = input('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : []));
+    isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : []));
+    isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : []));
+    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    chatIsLoading = input(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : []));
+    sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : []));
+    selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    selectedNestedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : []));
+    showEndChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showEndChatConfirmation" }] : []));
+    showStartNewChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showStartNewChatConfirmation" }] : []));
+    showReviewDialog = input(false, ...(ngDevMode ? [{ debugName: "showReviewDialog" }] : []));
+    isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : []));
+    isStartingNewChat = input(false, ...(ngDevMode ? [{ debugName: "isStartingNewChat" }] : []));
+    closePopup = output();
+    minimizePopup = output();
+    back = output();
+    showChatEvent = output();
+    endChat = output();
+    confirmEndChat = output();
+    cancelEndChat = output();
+    closeEndChat = output();
+    confirmStartNewChat = output();
+    cancelStartNewChat = output();
+    closeStartNewChat = output();
+    reviewSubmit = output();
+    reviewSkip = output();
+    reviewClose = output();
+    reviewSubmitFromChat = output();
+    reviewSkipFromChat = output();
+    startNewChat = output();
+    navigateToUrl = output();
+    sendMessageEvent = output();
+    handleClosePopup() {
+        this.closePopup.emit();
     }
-    onDialogClose() {
-        this.onClose();
+    handleMinimizePopup() {
+        this.minimizePopup.emit();
     }
-    onSubmitReview() {
-        if (this.validateForm() && !this.isSubmitting()) {
-            this.submitReview.emit({
-                rating: this.rating(),
-                comment: this.comment().trim()
-            });
-        }
+    handleBack() {
+        this.back.emit();
     }
-    onSkip() {
-        if (!this.isSubmitting()) {
-            this.skip.emit();
-            this.resetForm();
-        }
+    handleShowChat() {
+        this.showChatEvent.emit();
     }
-    validateForm() {
-        let isValid = true;
-        // Validate rating
-        if (this.rating() < 1 || this.rating() > 5) {
-            this.ratingError.set('Rating must be between 1 and 5.');
-            isValid = false;
-        }
-        // Validate comment
-        const trimmedComment = this.comment().trim();
-        if (trimmedComment.length < 10) {
-            this.commentError.set('Comment must be at least 10 characters long.');
-            isValid = false;
-        }
-        else if (trimmedComment.length > 500) {
-            this.commentError.set('Comment must not exceed 500 characters.');
-            isValid = false;
-        }
-        return isValid;
+    handleEndChat() {
+        this.endChat.emit();
     }
-    clearRatingError() {
-        this.ratingError.set('');
+    handleConfirmEndChat() {
+        this.confirmEndChat.emit();
     }
-    clearCommentError() {
-        this.commentError.set('');
+    handleCancelEndChat() {
+        this.cancelEndChat.emit();
     }
-    resetForm() {
-        this.rating.set(0);
-        this.comment.set('');
-        this.ratingError.set('');
-        this.commentError.set('');
+    handleCloseEndChat() {
+        this.closeEndChat.emit();
     }
-    getStarsArray() {
-        return Array(5).fill(0).map((_, index) => index);
+    handleConfirmStartNewChat() {
+        this.confirmStartNewChat.emit();
     }
-    isStarFilled(starIndex) {
-        return starIndex < this.rating();
+    handleCancelStartNewChat() {
+        this.cancelStartNewChat.emit();
     }
-    getCommentLength() {
-        return this.comment().trim().length;
+    handleCloseStartNewChat() {
+        this.closeStartNewChat.emit();
     }
-    getCommentMaxLength() {
-        return 500;
+    handleReviewSubmit(reviewData) {
+        this.reviewSubmit.emit(reviewData);
     }
-    getCommentMinLength() {
-        return 10;
+    handleReviewSkip() {
+        this.reviewSkip.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ReviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ReviewDialogComponent, isStandalone: true, selector: "app-review-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", submitReview: "submitReview", skip: "skip" }, ngImport: i0, template: "<app-base-dialog\n  [isOpen]=\"isOpen()\"\n  [isLoading]=\"isSubmitting()\"\n  [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n  (close)=\"onDialogClose()\"\n>\n  <!-- Header -->\n  <div class=\"dialog__header\">\n    <h3 class=\"dialog__title\">{{ \"ReviewDialogTitle\" | translate }}</h3>\n    <button\n      class=\"dialog__close\"\n      (click)=\"onClose()\"\n      type=\"button\"\n      [disabled]=\"isSubmitting()\"\n      [attr.aria-label]=\"'Close' | translate\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Divider -->\n  <div class=\"dialog__divider\"></div>\n\n  <!-- Content -->\n  <div class=\"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\">{{\n        \"ReviewDialogRatingLabel\" | translate\n      }}</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          [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n          [attr.aria-pressed]=\"isStarFilled(star)\"\n          role=\"button\"\n          type=\"button\"\n          (keydown.enter)=\"onRatingClick(star)\"\n          (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              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            />\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\">{{\n        \"ReviewDialogCommentLabel\" | translate\n      }}</label>\n      <textarea\n        class=\"review-dialog__textarea\"\n        [class.review-dialog__textarea--error]=\"commentError()\"\n        [ngModel]=\"comment()\"\n        (ngModelChange)=\"comment.set($event); 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 @if\n          (getCommentLength() < getCommentMinLength()) { (minimum\n          {{ getCommentMinLength() }}) }\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=\"dialog__divider\"></div>\n\n  <!-- Actions -->\n  <div class=\"dialog__actions\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSkip()\"\n      class=\"review-dialog__skip-btn\"\n    >\n      {{ \"ReviewDialogSkipButton\" | translate }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSubmitReview()\"\n      class=\"review-dialog__submit-btn\"\n    >\n      @if (isSubmitting()) { Submitting... } @else {\n      {{ \"ReviewDialogSubmitButton\" | translate }}\n      }\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".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:600;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}.dialog__actions app-button{flex:1;width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.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: "component", type: BaseDialogComponent, selector: "app-base-dialog", inputs: ["isOpen", "isLoading", "closeOnEscape", "closeOnOverlayClick", "ariaLabel"], outputs: ["close"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ReviewDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-review-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonComponent, BaseDialogComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-base-dialog\n  [isOpen]=\"isOpen()\"\n  [isLoading]=\"isSubmitting()\"\n  [ariaLabel]=\"'ReviewDialogTitle' | translate\"\n  (close)=\"onDialogClose()\"\n>\n  <!-- Header -->\n  <div class=\"dialog__header\">\n    <h3 class=\"dialog__title\">{{ \"ReviewDialogTitle\" | translate }}</h3>\n    <button\n      class=\"dialog__close\"\n      (click)=\"onClose()\"\n      type=\"button\"\n      [disabled]=\"isSubmitting()\"\n      [attr.aria-label]=\"'Close' | translate\"\n    >\n      <svg\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M18 6L6 18M6 6L18 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Divider -->\n  <div class=\"dialog__divider\"></div>\n\n  <!-- Content -->\n  <div class=\"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\">{{\n        \"ReviewDialogRatingLabel\" | translate\n      }}</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          [attr.aria-label]=\"'Rate ' + (star + 1) + ' out of 5 stars'\"\n          [attr.aria-pressed]=\"isStarFilled(star)\"\n          role=\"button\"\n          type=\"button\"\n          (keydown.enter)=\"onRatingClick(star)\"\n          (keydown.space)=\"$event.preventDefault(); onRatingClick(star)\"\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              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            />\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\">{{\n        \"ReviewDialogCommentLabel\" | translate\n      }}</label>\n      <textarea\n        class=\"review-dialog__textarea\"\n        [class.review-dialog__textarea--error]=\"commentError()\"\n        [ngModel]=\"comment()\"\n        (ngModelChange)=\"comment.set($event); 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 @if\n          (getCommentLength() < getCommentMinLength()) { (minimum\n          {{ getCommentMinLength() }}) }\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=\"dialog__divider\"></div>\n\n  <!-- Actions -->\n  <div class=\"dialog__actions\">\n    <app-button\n      variant=\"outline\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSkip()\"\n      class=\"review-dialog__skip-btn\"\n    >\n      {{ \"ReviewDialogSkipButton\" | translate }}\n    </app-button>\n    <app-button\n      variant=\"default\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isSubmitting()\"\n      (onClick)=\"onSubmitReview()\"\n      class=\"review-dialog__submit-btn\"\n    >\n      @if (isSubmitting()) { Submitting... } @else {\n      {{ \"ReviewDialogSubmitButton\" | translate }}\n      }\n    </app-button>\n  </div>\n</app-base-dialog>\n", styles: [".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:600;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}.dialog__actions app-button{flex:1;width:100%;display:block}\n"] }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], submitReview: [{ type: i0.Output, args: ["submitReview"] }], skip: [{ type: i0.Output, args: ["skip"] }] } });
-
-class IntroSectionComponent {
-    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
-    showHelpScreenData = output();
-    navigateToUrl = output();
-    isRtl = computed(() => this.currentLang() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    handleShowHelpScreenData() {
-        this.showHelpScreenData.emit();
+    handleReviewClose() {
+        this.reviewClose.emit();
+    }
+    handleSendMessage(event) {
+        this.sendMessageEvent.emit(event);
+    }
+    handleStartNewChat(option) {
+        this.startNewChat.emit(option);
     }
     handleNavigateToUrl(url) {
         this.navigateToUrl.emit(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IntroSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: IntroSectionComponent, isStandalone: true, selector: "app-intro-section", inputs: { currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null } }, 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          (onClick)=\"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          (onClick)=\"handleNavigateToUrl('https://babylai.net/signup')\"\n        >\n          <svg\n            width=\"100%\"\n            height=\"100%\"\n            class=\"icon\"\n            [class.icon-rtl]=\"currentLang() === 'ar'\"\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          (onClick)=\"handleNavigateToUrl('https://babylai.net')\"\n        >\n          <svg\n            width=\"100%\"\n            height=\"100%\"\n            class=\"icon\"\n            [class.icon-rtl]=\"currentLang() === 'ar'\"\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: "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    handleReviewSubmitFromChat(reviewData) {
+        this.reviewSubmitFromChat.emit(reviewData);
+    }
+    handleReviewSkipFromChat() {
+        this.reviewSkipFromChat.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: HelpPopupComponent, isStandalone: true, selector: "app-help-popup", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, chatIsLoading: { classPropertyName: "chatIsLoading", publicName: "chatIsLoading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, selectedNestedOption: { classPropertyName: "selectedNestedOption", publicName: "selectedNestedOption", isSignal: true, isRequired: false, transformFunction: null }, showEndChatConfirmation: { classPropertyName: "showEndChatConfirmation", publicName: "showEndChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showStartNewChatConfirmation: { classPropertyName: "showStartNewChatConfirmation", publicName: "showStartNewChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showReviewDialog: { classPropertyName: "showReviewDialog", publicName: "showReviewDialog", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null }, isStartingNewChat: { classPropertyName: "isStartingNewChat", publicName: "isStartingNewChat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopup: "closePopup", minimizePopup: "minimizePopup", back: "back", showChatEvent: "showChatEvent", endChat: "endChat", confirmEndChat: "confirmEndChat", cancelEndChat: "cancelEndChat", closeEndChat: "closeEndChat", confirmStartNewChat: "confirmStartNewChat", cancelStartNewChat: "cancelStartNewChat", closeStartNewChat: "closeStartNewChat", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip", reviewClose: "reviewClose", reviewSubmitFromChat: "reviewSubmitFromChat", reviewSkipFromChat: "reviewSkipFromChat", startNewChat: "startNewChat", navigateToUrl: "navigateToUrl", sendMessageEvent: "sendMessageEvent" }, ngImport: i0, template: "@if (isPopupOpen()) {\n<div\n  class=\"help-popup\"\n  [class.is-open]=\"isPopupOpen()\"\n  [class.is-closed]=\"!isPopupOpen()\"\n  [class.babylai-bg-linear-to-b]=\"\n    isPopupOpen() && !showHelpScreenData() && !showChat()\n  \"\n>\n  @if (showEndChatConfirmation()) {\n  <app-confirmation-dialog\n    [title]=\"'LeavingDialogTitle' | translate\"\n    [body]=\"'LeavingDialogBody' | translate\"\n    [confirmText]=\"'CloseChat' | translate\"\n    [cancelText]=\"'Continue' | translate\"\n    (onConfirm)=\"handleConfirmEndChat()\"\n    (onCancel)=\"handleCancelEndChat()\"\n    (onClose)=\"handleCloseEndChat()\"\n  ></app-confirmation-dialog>\n  } @if (showStartNewChatConfirmation()) {\n  <app-confirmation-dialog\n    [title]=\"'StartNewChatDialogTitle' | translate\"\n    [body]=\"'StartNewChatDialogBody' | translate\"\n    [confirmText]=\"'CloseChat' | translate\"\n    [cancelText]=\"'Continue' | translate\"\n    [isLoading]=\"isStartingNewChat()\"\n    (onConfirm)=\"handleConfirmStartNewChat()\"\n    (onCancel)=\"handleCancelStartNewChat()\"\n    (onClose)=\"handleCloseStartNewChat()\"\n  ></app-confirmation-dialog>\n  }\n\n  <!-- Loading State -->\n  @if (status() === 'loading') {\n  <div class=\"loading-state flex items-center justify-center h-full p-8\">\n    <app-loading></app-loading>\n  </div>\n  }\n\n  <!-- Error State -->\n  @if (status() === 'failed') {\n  <div class=\"error-message flex items-center justify-center h-full p-8\">\n    <span class=\"text-sm\" [style.color]=\"'var(--destructive)'\"\n      >Error: {{ error() }}</span\n    >\n  </div>\n  }\n\n  @if (status() === 'succeeded') {\n\n  @if (!showChat()) { @if (sessionId()) {\n  <app-chat-action-buttons\n    [selectedOption]=\"selectedOption()\"\n    (closeChat)=\"handleEndChat()\"\n    (continueChat)=\"handleShowChat()\"\n  ></app-chat-action-buttons>\n  } }\n\n  <!-- Chat Screen -->\n  @if (showChat()) {\n  <app-chat-screen\n    [showChat]=\"showChat()\"\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    [selectedOption]=\"selectedOption()\"\n    [selectedNestedOption]=\"selectedNestedOption()\"\n    [isSubmittingReview]=\"isSubmittingReview()\"\n    (endChat)=\"handleEndChat()\"\n    (back)=\"handleBack()\"\n    (onMinimize)=\"handleMinimizePopup()\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    (reviewSubmit)=\"handleReviewSubmitFromChat($event)\"\n    (reviewSkip)=\"handleReviewSkipFromChat()\"\n    class=\"flex flex-col h-full\"\n  ></app-chat-screen>\n  }\n\n  <!-- Home Screen -->\n  @if (!showChat()) {\n  <app-home-screen\n    [helpScreenData]=\"helpScreenData()\"\n    [showHelpScreenData]=\"showHelpScreenData()\"\n    (startNewChat)=\"handleStartNewChat($event)\"\n    (onClose)=\"handleClosePopup()\"\n    (onMinimize)=\"handleMinimizePopup()\"\n    class=\"flex flex-col max-h-full\"\n  ></app-home-screen>\n  }\n\n  <!-- Review Dialog (shown when closing from home screen - stars only) -->\n  <app-review-dialog\n    [isOpen]=\"showReviewDialog()\"\n    [isSubmitting]=\"isSubmittingReview()\"\n    [showCommentField]=\"false\"\n    (close)=\"handleReviewClose()\"\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;border-radius:1.5rem;display:flex;flex-direction:column;z-index:1000;background-color:var(--secondary);overflow:hidden;height:calc(100vh - 12rem);max-height:800px;box-shadow:#64646f33 0 7px 29px}.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;height:100%;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--primary-color);background:linear-gradient(180deg,var(--primary-color) 1%,color-mix(in srgb,var(--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: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText", "isLoading"], outputs: ["onConfirm", "onCancel", "onClose"] }, { kind: "component", type: ReviewDialogComponent, selector: "app-review-dialog", inputs: ["isOpen", "isSubmitting", "showCommentField"], outputs: ["close", "submitReview", "skip"] }, { kind: "component", type: HomeScreenComponent, selector: "app-home-screen", inputs: ["helpScreenData", "showHelpScreenData"], outputs: ["startNewChat", "onClose", "onMinimize"] }, { kind: "component", type: ChatScreenComponent, selector: "app-chat-screen", inputs: ["showChat", "messages", "needsAgent", "assistantStatus", "isAblyConnected", "isChatClosed", "currentLang", "chatIsLoading", "sessionId", "selectedOption", "selectedNestedOption", "isSubmittingReview"], outputs: ["endChat", "back", "onMinimize", "sendMessage", "reviewSubmit", "reviewSkip"] }, { kind: "component", type: ChatActionButtonsComponent, selector: "app-chat-action-buttons", inputs: ["selectedOption"], outputs: ["closeChat", "continueChat"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IntroSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-intro-section', standalone: true, imports: [
+            args: [{ selector: 'app-help-popup', standalone: true, imports: [
                         CommonModule,
-                        TranslatePipe,
-                        CardComponent,
-                        CardContentComponent,
-                        ButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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          (onClick)=\"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          (onClick)=\"handleNavigateToUrl('https://babylai.net/signup')\"\n        >\n          <svg\n            width=\"100%\"\n            height=\"100%\"\n            class=\"icon\"\n            [class.icon-rtl]=\"currentLang() === 'ar'\"\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          (onClick)=\"handleNavigateToUrl('https://babylai.net')\"\n        >\n          <svg\n            width=\"100%\"\n            height=\"100%\"\n            class=\"icon\"\n            [class.icon-rtl]=\"currentLang() === 'ar'\"\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"] }]
-        }], propDecorators: { currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], showHelpScreenData: [{ type: i0.Output, args: ["showHelpScreenData"] }], navigateToUrl: [{ type: i0.Output, args: ["navigateToUrl"] }] } });
-
-class FooterComponent {
-    showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : []));
-    showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: FooterComponent, isStandalone: true, selector: "app-footer", inputs: { showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"footer\">\n  <a\n    href=\"https://babylai.net\"\n    target=\"_blank\"\n    class=\"footer-link\"\n    [class.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: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-footer', standalone: true, imports: [CommonModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"footer\">\n  <a\n    href=\"https://babylai.net\"\n    target=\"_blank\"\n    class=\"footer-link\"\n    [class.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"] }]
-        }], propDecorators: { showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }] } });
-
-class BackButtonComponent {
-    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    onBack = output();
-    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: BackButtonComponent, isStandalone: true, selector: "app-back-button", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBack: "onBack" }, ngImport: i0, template: "<app-button\n  [size]=\"size()\"\n  variant=\"icon-bg\"\n  className=\"button--light-bg\"\n  [direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n  (onClick)=\"onBack.emit()\"\n  [attr.aria-label]=\"'Back' | translate\"\n  type=\"button\"\n>\n  <svg\n    [style.transform]=\"isRtl() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n    class=\"back-button__icon\"\n    width=\"8\"\n    height=\"16\"\n    viewBox=\"0 0 8 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</app-button>\n", styles: [".back-button__icon{width:100%;height:100%;color:var(--babylai-primary-color-500, #ad49e1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-back-button', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-button\n  [size]=\"size()\"\n  variant=\"icon-bg\"\n  className=\"button--light-bg\"\n  [direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n  (onClick)=\"onBack.emit()\"\n  [attr.aria-label]=\"'Back' | translate\"\n  type=\"button\"\n>\n  <svg\n    [style.transform]=\"isRtl() ? 'rotate(180deg)' : 'rotate(0deg)'\"\n    class=\"back-button__icon\"\n    width=\"8\"\n    height=\"16\"\n    viewBox=\"0 0 8 16\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7 15L1 8L2.5 6.25M7 1L5 3.333\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</app-button>\n", styles: [".back-button__icon{width:100%;height:100%;color:var(--babylai-primary-color-500, #ad49e1)}\n"] }]
-        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onBack: [{ type: i0.Output, args: ["onBack"] }] } });
-
-class CloseButtonComponent {
-    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    onClose = output();
-    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<app-button\n  variant=\"icon-bg\"\n  [direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n  className=\"button--close-button\"\n  (onClick)=\"onClose.emit()\"\n  [attr.aria-label]=\"'Close' | translate\"\n  type=\"button\"\n>\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 55 55\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M33.8568 21.1458L21.1484 33.8541M21.1484 21.1458L33.8568 33.8541M14.7943 5.48404C18.6562 3.24921 23.0407 2.07593 27.5026 2.08329C41.5402 2.08329 52.9193 13.4623 52.9193 27.5C52.9193 41.5376 41.5402 52.9166 27.5026 52.9166C13.465 52.9166 2.08594 41.5376 2.08594 27.5C2.08594 22.8716 3.32373 18.5279 5.48669 14.7916\"\n      stroke=\"#fff\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</app-button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CloseButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-close-button', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-button\n  variant=\"icon-bg\"\n  [direction]=\"isRtl() ? 'rtl' : 'ltr'\"\n  className=\"button--close-button\"\n  (onClick)=\"onClose.emit()\"\n  [attr.aria-label]=\"'Close' | translate\"\n  type=\"button\"\n>\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 55 55\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M33.8568 21.1458L21.1484 33.8541M21.1484 21.1458L33.8568 33.8541M14.7943 5.48404C18.6562 3.24921 23.0407 2.07593 27.5026 2.08329C41.5402 2.08329 52.9193 13.4623 52.9193 27.5C52.9193 41.5376 41.5402 52.9166 27.5026 52.9166C13.465 52.9166 2.08594 41.5376 2.08594 27.5C2.08594 22.8716 3.32373 18.5279 5.48669 14.7916\"\n      stroke=\"#fff\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</app-button>\n" }]
-        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
-
-class SimpleCloseButtonComponent {
-    onClose = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SimpleCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: SimpleCloseButtonComponent, isStandalone: true, selector: "app-simple-close-button", outputs: { onClose: "onClose" }, ngImport: i0, template: "<app-button\n  variant=\"icon-only\"\n  class=\"simple-close-button\"\n  (onClick)=\"onClose.emit()\"\n  [attr.aria-label]=\"'Close' | translate\"\n  type=\"button\"\n>\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 55 55\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M33.8568 21.1458L21.1484 33.8541M21.1484 21.1458L33.8568 33.8541M14.7943 5.48404C18.6562 3.24921 23.0407 2.07593 27.5026 2.08329C41.5402 2.08329 52.9193 13.4623 52.9193 27.5C52.9193 41.5376 41.5402 52.9166 27.5026 52.9166C13.465 52.9166 2.08594 41.5376 2.08594 27.5C2.08594 22.8716 3.32373 18.5279 5.48669 14.7916\"\n      stroke=\"white\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</app-button>\n", styles: [".simple-close-button img{width:2.5rem;height:2.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SimpleCloseButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-simple-close-button', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-button\n  variant=\"icon-only\"\n  class=\"simple-close-button\"\n  (onClick)=\"onClose.emit()\"\n  [attr.aria-label]=\"'Close' | translate\"\n  type=\"button\"\n>\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 55 55\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M33.8568 21.1458L21.1484 33.8541M21.1484 21.1458L33.8568 33.8541M14.7943 5.48404C18.6562 3.24921 23.0407 2.07593 27.5026 2.08329C41.5402 2.08329 52.9193 13.4623 52.9193 27.5C52.9193 41.5376 41.5402 52.9166 27.5026 52.9166C13.465 52.9166 2.08594 41.5376 2.08594 27.5C2.08594 22.8716 3.32373 18.5279 5.48669 14.7916\"\n      stroke=\"white\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</app-button>\n", styles: [".simple-close-button img{width:2.5rem;height:2.5rem}\n"] }]
-        }], propDecorators: { onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+                        TranslatePipe,
+                        LoadingComponent,
+                        ConfirmationDialogComponent,
+                        ReviewDialogComponent,
+                        HomeScreenComponent,
+                        ChatScreenComponent,
+                        ChatActionButtonsComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPopupOpen()) {\n<div\n  class=\"help-popup\"\n  [class.is-open]=\"isPopupOpen()\"\n  [class.is-closed]=\"!isPopupOpen()\"\n  [class.babylai-bg-linear-to-b]=\"\n    isPopupOpen() && !showHelpScreenData() && !showChat()\n  \"\n>\n  @if (showEndChatConfirmation()) {\n  <app-confirmation-dialog\n    [title]=\"'LeavingDialogTitle' | translate\"\n    [body]=\"'LeavingDialogBody' | translate\"\n    [confirmText]=\"'CloseChat' | translate\"\n    [cancelText]=\"'Continue' | translate\"\n    (onConfirm)=\"handleConfirmEndChat()\"\n    (onCancel)=\"handleCancelEndChat()\"\n    (onClose)=\"handleCloseEndChat()\"\n  ></app-confirmation-dialog>\n  } @if (showStartNewChatConfirmation()) {\n  <app-confirmation-dialog\n    [title]=\"'StartNewChatDialogTitle' | translate\"\n    [body]=\"'StartNewChatDialogBody' | translate\"\n    [confirmText]=\"'CloseChat' | translate\"\n    [cancelText]=\"'Continue' | translate\"\n    [isLoading]=\"isStartingNewChat()\"\n    (onConfirm)=\"handleConfirmStartNewChat()\"\n    (onCancel)=\"handleCancelStartNewChat()\"\n    (onClose)=\"handleCloseStartNewChat()\"\n  ></app-confirmation-dialog>\n  }\n\n  <!-- Loading State -->\n  @if (status() === 'loading') {\n  <div class=\"loading-state flex items-center justify-center h-full p-8\">\n    <app-loading></app-loading>\n  </div>\n  }\n\n  <!-- Error State -->\n  @if (status() === 'failed') {\n  <div class=\"error-message flex items-center justify-center h-full p-8\">\n    <span class=\"text-sm\" [style.color]=\"'var(--destructive)'\"\n      >Error: {{ error() }}</span\n    >\n  </div>\n  }\n\n  @if (status() === 'succeeded') {\n\n  @if (!showChat()) { @if (sessionId()) {\n  <app-chat-action-buttons\n    [selectedOption]=\"selectedOption()\"\n    (closeChat)=\"handleEndChat()\"\n    (continueChat)=\"handleShowChat()\"\n  ></app-chat-action-buttons>\n  } }\n\n  <!-- Chat Screen -->\n  @if (showChat()) {\n  <app-chat-screen\n    [showChat]=\"showChat()\"\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    [selectedOption]=\"selectedOption()\"\n    [selectedNestedOption]=\"selectedNestedOption()\"\n    [isSubmittingReview]=\"isSubmittingReview()\"\n    (endChat)=\"handleEndChat()\"\n    (back)=\"handleBack()\"\n    (onMinimize)=\"handleMinimizePopup()\"\n    (sendMessage)=\"handleSendMessage($event)\"\n    (reviewSubmit)=\"handleReviewSubmitFromChat($event)\"\n    (reviewSkip)=\"handleReviewSkipFromChat()\"\n    class=\"flex flex-col h-full\"\n  ></app-chat-screen>\n  }\n\n  <!-- Home Screen -->\n  @if (!showChat()) {\n  <app-home-screen\n    [helpScreenData]=\"helpScreenData()\"\n    [showHelpScreenData]=\"showHelpScreenData()\"\n    (startNewChat)=\"handleStartNewChat($event)\"\n    (onClose)=\"handleClosePopup()\"\n    (onMinimize)=\"handleMinimizePopup()\"\n    class=\"flex flex-col max-h-full\"\n  ></app-home-screen>\n  }\n\n  <!-- Review Dialog (shown when closing from home screen - stars only) -->\n  <app-review-dialog\n    [isOpen]=\"showReviewDialog()\"\n    [isSubmitting]=\"isSubmittingReview()\"\n    [showCommentField]=\"false\"\n    (close)=\"handleReviewClose()\"\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;border-radius:1.5rem;display:flex;flex-direction:column;z-index:1000;background-color:var(--secondary);overflow:hidden;height:calc(100vh - 12rem);max-height:800px;box-shadow:#64646f33 0 7px 29px}.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;height:100%;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:#64646f33 0 7px 29px}.chat-button{position:absolute;bottom:1.25rem;right:1.25rem;padding:.75rem!important}.chat-button--icon{padding:.25rem!important}.icon-full{width:100%}.babylai-bg-linear-to-b{background:var(--primary-color);background:linear-gradient(180deg,var(--primary-color) 1%,color-mix(in srgb,var(--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"] }]
+        }], propDecorators: { isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], chatIsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatIsLoading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], selectedNestedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNestedOption", required: false }] }], showEndChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndChatConfirmation", required: false }] }], showStartNewChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStartNewChatConfirmation", required: false }] }], showReviewDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReviewDialog", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], isStartingNewChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStartingNewChat", required: false }] }], closePopup: [{ type: i0.Output, args: ["closePopup"] }], minimizePopup: [{ type: i0.Output, args: ["minimizePopup"] }], back: [{ type: i0.Output, args: ["back"] }], showChatEvent: [{ type: i0.Output, args: ["showChatEvent"] }], endChat: [{ type: i0.Output, args: ["endChat"] }], confirmEndChat: [{ type: i0.Output, args: ["confirmEndChat"] }], cancelEndChat: [{ type: i0.Output, args: ["cancelEndChat"] }], closeEndChat: [{ type: i0.Output, args: ["closeEndChat"] }], confirmStartNewChat: [{ type: i0.Output, args: ["confirmStartNewChat"] }], cancelStartNewChat: [{ type: i0.Output, args: ["cancelStartNewChat"] }], closeStartNewChat: [{ type: i0.Output, args: ["closeStartNewChat"] }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }], reviewClose: [{ type: i0.Output, args: ["reviewClose"] }], reviewSubmitFromChat: [{ type: i0.Output, args: ["reviewSubmitFromChat"] }], reviewSkipFromChat: [{ type: i0.Output, args: ["reviewSkipFromChat"] }], startNewChat: [{ type: i0.Output, args: ["startNewChat"] }], navigateToUrl: [{ type: i0.Output, args: ["navigateToUrl"] }], sendMessageEvent: [{ type: i0.Output, args: ["sendMessageEvent"] }] } });
 
 class ThemeService {
     primaryColor = '#ad49e1';
@@ -2080,17 +2413,17 @@ class ThemeService {
         // Generate color variations based on the primary color
         const colorVariations = this.generateColorVariations(this.primaryColor);
         // Set CSS custom properties
-        root.style.setProperty('--babylai-primary-color', this.primaryColor);
-        root.style.setProperty('--babylai-primary-color-100', colorVariations[100]);
-        root.style.setProperty('--babylai-primary-color-200', colorVariations[200]);
-        root.style.setProperty('--babylai-primary-color-300', colorVariations[300]);
-        root.style.setProperty('--babylai-primary-color-400', colorVariations[400]);
-        root.style.setProperty('--babylai-primary-color-500', colorVariations[500]);
-        root.style.setProperty('--babylai-primary-color-600', colorVariations[600]);
-        root.style.setProperty('--babylai-primary-color-700', colorVariations[700]);
-        root.style.setProperty('--babylai-primary-color-800', colorVariations[800]);
-        root.style.setProperty('--babylai-primary-color-900', colorVariations[900]);
-        root.style.setProperty('--babylai-primary-color-950', colorVariations[950]);
+        root.style.setProperty('--primary-color', this.primaryColor);
+        root.style.setProperty('--primary-color-100', colorVariations[100]);
+        root.style.setProperty('--primary-color-200', colorVariations[200]);
+        root.style.setProperty('--primary-color-300', colorVariations[300]);
+        root.style.setProperty('--primary-color-400', colorVariations[400]);
+        root.style.setProperty('--primary-color-500', colorVariations[500]);
+        root.style.setProperty('--primary-color-600', colorVariations[600]);
+        root.style.setProperty('--primary-color-700', colorVariations[700]);
+        root.style.setProperty('--primary-color-800', colorVariations[800]);
+        root.style.setProperty('--primary-color-900', colorVariations[900]);
+        root.style.setProperty('--primary-color-950', colorVariations[950]);
     }
     generateColorVariations(baseColor) {
         // Generate variations by adjusting lightness
@@ -2139,211 +2472,16 @@ class ThemeService {
         this.setPrimaryColor(primaryColor);
         this.setLogoUrl(logoUrl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
-class LogoComponent {
-    showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    themeService = inject(ThemeService);
-    effectiveLogoUrl = computed(() => this.themeService.getLogoUrl(), ...(ngDevMode ? [{ debugName: "effectiveLogoUrl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LogoComponent, isStandalone: true, selector: "app-logo", inputs: { showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLogo()) { @if (effectiveLogoUrl()) {\n<img\n  [src]=\"effectiveLogoUrl()\"\n  [alt]=\"'Logo'\"\n  class=\"logo\"\n  [class.logo--small]=\"size() === 'small'\"\n/>\n} @else {\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"624\"\n  height=\"203\"\n  viewBox=\"0 0 624 203\"\n  fill=\"none\"\n  class=\"logo\"\n  [class.logo--small]=\"size() === 'small'\"\n>\n  <path\n    d=\"M33 74.5C33 47.9903 54.4903 26.5 81 26.5H161C187.51 26.5 209 47.9903 209 74.5V202.5H81C54.4903 202.5 33 181.01 33 154.5V74.5Z\"\n    fill=\"#EBD3F8\"\n  />\n  <path\n    d=\"M0 48.5C0 21.9903 21.4903 0.5 48 0.5H128C154.51 0.5 176 21.9903 176 48.5V128.5C176 155.01 154.51 176.5 128 176.5H0V48.5Z\"\n    fill=\"#AD49E1\"\n  />\n  <path\n    d=\"M55.5647 59.3595C55.5692 59.3436 55.5714 59.3357 55.5725 59.332C56.2691 56.8893 59.7309 56.8893 60.4275 59.332C60.4286 59.3357 60.4308 59.3436 60.4353 59.3595C60.447 59.4012 60.4529 59.422 60.4584 59.4416C63.6952 70.8715 72.6285 79.8048 84.0584 83.0416C84.078 83.0471 84.0988 83.053 84.1405 83.0647C84.1564 83.0692 84.1643 83.0714 84.1679 83.0725C86.6107 83.7691 86.6107 87.2309 84.1679 87.9275C84.1643 87.9286 84.1564 87.9308 84.1405 87.9353C84.0988 87.947 84.078 87.9529 84.0584 87.9584C72.6285 91.1952 63.6952 100.129 60.4584 111.558C60.4529 111.578 60.447 111.599 60.4353 111.641C60.4308 111.656 60.4286 111.664 60.4275 111.668C59.7309 114.111 56.2691 114.111 55.5725 111.668C55.5714 111.664 55.5692 111.656 55.5647 111.641C55.553 111.599 55.5471 111.578 55.5416 111.558C52.3048 100.129 43.3715 91.1952 31.9416 87.9584C31.922 87.9529 31.9012 87.947 31.8595 87.9353C31.8436 87.9308 31.8357 87.9286 31.832 87.9275C29.3893 87.2309 29.3893 83.7691 31.832 83.0725C31.8357 83.0714 31.8436 83.0692 31.8595 83.0647C31.9012 83.053 31.922 83.0471 31.9416 83.0416C43.3715 79.8048 52.3048 70.8715 55.5416 59.4416C55.5471 59.422 55.553 59.4012 55.5647 59.3595Z\"\n    fill=\"#F9F9F9\"\n  />\n  <ellipse cx=\"121\" cy=\"85\" rx=\"21\" ry=\"21.5\" fill=\"#F9F9F9\" />\n  <path d=\"M504.878 93.808V28.24H518.126V93.808H504.878Z\" fill=\"#AD49E1\" />\n  <path\n    d=\"M446 93.808L462.704 28.24H485.84L502.448 93.808H489.2L485.552 80.56H462.608L459.152 93.808H446ZM464.72 69.904H483.632L476.24 38.992H472.208L464.72 69.904Z\"\n    fill=\"#AD49E1\"\n  />\n  <path d=\"M430.666 93.808V25.936H443.434V93.808H430.666Z\" fill=\"#18162C\" />\n  <path\n    d=\"M398.14 114.064L404.284 93.808H394.012L382.588 45.616H395.932L404.476 82.96H406.972L415.516 45.616H428.38L411.772 114.064H398.14Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M358.863 94.864C357.263 94.864 355.311 94.8 353.007 94.672C350.703 94.544 348.335 94.352 345.903 94.096C343.535 93.84 341.423 93.616 339.567 93.424V25.936H352.431V47.152C353.391 46.768 354.575 46.384 355.983 46C357.391 45.616 358.863 45.296 360.399 45.04C361.999 44.72 363.471 44.56 364.815 44.56C369.295 44.56 372.847 45.488 375.471 47.344C378.159 49.136 380.079 51.824 381.231 55.408C382.383 58.992 382.959 63.504 382.959 68.944C382.959 75.344 382.223 80.464 380.751 84.304C379.343 88.08 376.879 90.8 373.359 92.464C369.839 94.064 365.007 94.864 358.863 94.864ZM358.959 84.112C362.095 84.112 364.431 83.568 365.967 82.48C367.503 81.328 368.527 79.632 369.039 77.392C369.615 75.152 369.903 72.4 369.903 69.136C369.903 65.808 369.647 63.152 369.135 61.168C368.623 59.12 367.759 57.648 366.543 56.752C365.391 55.792 363.759 55.312 361.647 55.312C360.623 55.312 359.535 55.44 358.383 55.696C357.231 55.888 356.111 56.144 355.023 56.464C353.999 56.72 353.135 56.976 352.431 57.232V83.728C353.391 83.792 354.511 83.888 355.791 84.016C357.071 84.08 358.127 84.112 358.959 84.112Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M306.79 94.8639C301.798 94.8639 298.022 93.6159 295.462 91.1199C292.966 88.5599 291.718 84.7199 291.718 79.5999C291.718 76.0159 292.358 73.2319 293.638 71.2479C294.918 69.1999 296.806 67.7279 299.302 66.8319C301.862 65.8719 304.966 65.2959 308.614 65.1039L320.326 64.0479V61.1679C320.326 58.8639 319.75 57.2639 318.598 56.3679C317.446 55.4079 315.75 54.9279 313.51 54.9279C311.718 54.9279 309.638 54.9919 307.27 55.1199C304.966 55.2479 302.662 55.4079 300.358 55.5999C298.118 55.7919 296.166 55.9839 294.502 56.1759L294.118 47.1519C295.782 46.7679 297.766 46.3839 300.07 45.9999C302.438 45.5519 304.902 45.1999 307.462 44.9439C310.022 44.6879 312.39 44.5599 314.566 44.5599C318.662 44.5599 322.086 45.0719 324.838 46.0959C327.59 47.1199 329.67 48.8159 331.078 51.1839C332.486 53.4879 333.19 56.6239 333.19 60.5919V82.5759C333.318 83.4719 333.798 84.1759 334.63 84.6879C335.462 85.1359 336.422 85.4559 337.51 85.6479L337.222 94.4799C336.198 94.4799 335.174 94.4799 334.15 94.4799C333.19 94.5439 332.262 94.5439 331.366 94.4799C330.47 94.4799 329.67 94.4159 328.966 94.2879C327.494 94.0959 326.214 93.7119 325.126 93.1359C324.102 92.5599 323.27 91.9519 322.63 91.3119C321.606 91.7599 320.23 92.2719 318.502 92.8479C316.774 93.4239 314.886 93.9039 312.838 94.2879C310.854 94.6719 308.838 94.8639 306.79 94.8639ZM309.862 85.3599C311.078 85.3599 312.358 85.2319 313.702 84.9759C315.046 84.7199 316.294 84.4319 317.446 84.1119C318.662 83.7279 319.622 83.3759 320.326 83.0559V72.0159L310.534 72.8799C308.422 73.0719 306.886 73.7119 305.926 74.7999C305.03 75.8239 304.582 77.2959 304.582 79.2159C304.582 81.1359 304.998 82.6399 305.83 83.7279C306.726 84.8159 308.07 85.3599 309.862 85.3599Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M241 93.808V28.24H267.112C271.464 28.24 275.208 28.784 278.344 29.872C281.48 30.96 283.912 32.72 285.64 35.152C287.432 37.52 288.328 40.72 288.328 44.752C288.328 47.504 288.04 49.84 287.464 51.76C286.952 53.616 286.12 55.216 284.968 56.56C283.88 57.84 282.44 59.024 280.648 60.112C282.568 60.816 284.232 61.776 285.64 62.992C287.112 64.144 288.232 65.712 289 67.696C289.768 69.616 290.152 72.176 290.152 75.376C290.152 78.896 289.608 81.84 288.52 84.208C287.432 86.576 285.864 88.464 283.816 89.872C281.832 91.28 279.496 92.304 276.808 92.944C274.12 93.52 271.176 93.808 267.976 93.808H241ZM254.248 84.016H267.016C269.256 84.016 271.112 83.76 272.584 83.248C274.12 82.672 275.272 81.68 276.04 80.272C276.872 78.864 277.288 76.912 277.288 74.416C277.288 72.496 276.968 70.928 276.328 69.712C275.688 68.496 274.856 67.6 273.832 67.024C272.808 66.384 271.656 65.936 270.376 65.68C269.16 65.424 267.944 65.296 266.728 65.296H254.248V84.016ZM254.248 55.888H266.632C268.808 55.888 270.568 55.568 271.912 54.928C273.256 54.224 274.248 53.2 274.888 51.856C275.528 50.448 275.848 48.688 275.848 46.576C275.848 43.568 275.048 41.392 273.448 40.048C271.912 38.704 269.48 38.032 266.152 38.032H254.248V55.888Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M251.12 162.064V149.304L241.44 131.66H245.4L252.836 145.784L260.316 131.66H264.276L254.64 149.304V162.064H251.12ZM270.396 162.504C267.932 162.504 266.011 162.079 264.632 161.228C263.283 160.377 262.33 159.087 261.772 157.356C261.244 155.625 260.98 153.44 260.98 150.8C260.98 148.277 261.274 146.195 261.86 144.552C262.476 142.909 263.474 141.677 264.852 140.856C266.231 140.035 268.079 139.624 270.396 139.624C272.743 139.624 274.606 140.035 275.984 140.856C277.363 141.677 278.346 142.909 278.932 144.552C279.548 146.195 279.856 148.277 279.856 150.8C279.856 153.44 279.578 155.625 279.02 157.356C278.492 159.087 277.539 160.377 276.16 161.228C274.811 162.079 272.89 162.504 270.396 162.504ZM270.396 159.556C272.098 159.556 273.374 159.263 274.224 158.676C275.075 158.06 275.632 157.107 275.896 155.816C276.19 154.525 276.336 152.853 276.336 150.8C276.336 148.776 276.16 147.163 275.808 145.96C275.456 144.757 274.855 143.892 274.004 143.364C273.154 142.836 271.951 142.572 270.396 142.572C268.871 142.572 267.668 142.836 266.788 143.364C265.938 143.892 265.336 144.757 264.984 145.96C264.632 147.163 264.456 148.776 264.456 150.8C264.456 152.853 264.588 154.525 264.852 155.816C265.146 157.107 265.718 158.06 266.568 158.676C267.419 159.263 268.695 159.556 270.396 159.556ZM289.726 162.504C287.848 162.504 286.411 162.123 285.414 161.36C284.416 160.597 283.727 159.409 283.346 157.796C282.994 156.183 282.818 154.1 282.818 151.548V140.064H286.206V151.548C286.206 153.484 286.294 155.024 286.47 156.168C286.675 157.312 287.1 158.148 287.746 158.676C288.391 159.175 289.359 159.424 290.65 159.424C291.94 159.424 293.114 159.248 294.17 158.896C295.226 158.544 296.076 158.192 296.722 157.84V140.064H300.11V162.064H296.722V160.524C295.783 161.052 294.756 161.521 293.642 161.932C292.556 162.313 291.251 162.504 289.726 162.504ZM304.256 162.064V140.064H307.644V143.012C308.201 142.631 308.905 142.22 309.756 141.78C310.606 141.311 311.545 140.871 312.572 140.46C313.598 140.049 314.625 139.756 315.652 139.58V143.056C314.654 143.261 313.642 143.54 312.616 143.892C311.589 144.215 310.636 144.567 309.756 144.948C308.905 145.329 308.201 145.667 307.644 145.96V162.064H304.256ZM322.621 162.064L330.937 131.66H338.549L346.821 162.064H343.301L341.145 154.364H328.297L326.141 162.064H322.621ZM329.045 151.24H340.397L335.865 134.652H333.577L329.045 151.24ZM349.316 162.064V131.66H352.836V162.064H349.316ZM355.83 167.476L357.81 157.268H361.638L358.646 167.476H355.83ZM379.605 162.064V149.304L369.925 131.66H373.885L381.321 145.784L388.801 131.66H392.761L383.125 149.304V162.064H379.605ZM398.882 162.504C396.418 162.504 394.496 162.079 393.118 161.228C391.768 160.377 390.815 159.087 390.258 157.356C389.73 155.625 389.466 153.44 389.466 150.8C389.466 148.277 389.759 146.195 390.346 144.552C390.962 142.909 391.959 141.677 393.338 140.856C394.716 140.035 396.564 139.624 398.882 139.624C401.228 139.624 403.091 140.035 404.47 140.856C405.848 141.677 406.831 142.909 407.418 144.552C408.034 146.195 408.342 148.277 408.342 150.8C408.342 153.44 408.063 155.625 407.506 157.356C406.978 159.087 406.024 160.377 404.646 161.228C403.296 162.079 401.375 162.504 398.882 162.504ZM398.882 159.556C400.583 159.556 401.859 159.263 402.71 158.676C403.56 158.06 404.118 157.107 404.382 155.816C404.675 154.525 404.822 152.853 404.822 150.8C404.822 148.776 404.646 147.163 404.294 145.96C403.942 144.757 403.34 143.892 402.49 143.364C401.639 142.836 400.436 142.572 398.882 142.572C397.356 142.572 396.154 142.836 395.274 143.364C394.423 143.892 393.822 144.757 393.47 145.96C393.118 147.163 392.942 148.776 392.942 150.8C392.942 152.853 393.074 154.525 393.338 155.816C393.631 157.107 394.203 158.06 395.054 158.676C395.904 159.263 397.18 159.556 398.882 159.556ZM418.211 162.504C416.333 162.504 414.896 162.123 413.899 161.36C412.901 160.597 412.212 159.409 411.831 157.796C411.479 156.183 411.303 154.1 411.303 151.548V140.064H414.691V151.548C414.691 153.484 414.779 155.024 414.955 156.168C415.16 157.312 415.585 158.148 416.231 158.676C416.876 159.175 417.844 159.424 419.135 159.424C420.425 159.424 421.599 159.248 422.655 158.896C423.711 158.544 424.561 158.192 425.207 157.84V140.064H428.595V162.064H425.207V160.524C424.268 161.052 423.241 161.521 422.127 161.932C421.041 162.313 419.736 162.504 418.211 162.504ZM432.741 162.064V140.064H436.129V143.012C436.686 142.631 437.39 142.22 438.241 141.78C439.091 141.311 440.03 140.871 441.057 140.46C442.083 140.049 443.11 139.756 444.137 139.58V143.056C443.139 143.261 442.127 143.54 441.101 143.892C440.074 144.215 439.121 144.567 438.241 144.948C437.39 145.329 436.686 145.667 436.129 145.96V162.064H432.741ZM457.531 162.064L451.415 131.66H455.067L460.171 158.984H461.403L467.563 131.88H471.699L477.859 158.984H479.091L484.195 131.66H487.847L481.687 162.064H475.351L469.323 134.696H469.939L463.911 162.064H457.531ZM494.487 162.504C492.463 162.504 490.923 161.932 489.867 160.788C488.811 159.644 488.283 157.972 488.283 155.772C488.283 154.335 488.533 153.161 489.031 152.252C489.53 151.343 490.278 150.653 491.275 150.184C492.302 149.685 493.563 149.377 495.059 149.26L501.835 148.6V146.708C501.835 145.212 501.498 144.156 500.823 143.54C500.178 142.924 499.21 142.616 497.919 142.616C497.186 142.616 496.306 142.645 495.279 142.704C494.282 142.763 493.285 142.836 492.287 142.924C491.29 143.012 490.41 143.1 489.647 143.188L489.471 140.592C490.175 140.445 491.026 140.299 492.023 140.152C493.021 140.005 494.062 139.888 495.147 139.8C496.233 139.683 497.23 139.624 498.139 139.624C499.811 139.624 501.175 139.888 502.231 140.416C503.287 140.915 504.05 141.692 504.519 142.748C505.018 143.775 505.267 145.095 505.267 146.708V157.84C505.326 158.485 505.575 158.955 506.015 159.248C506.485 159.541 507.071 159.732 507.775 159.82L507.643 162.504C507.233 162.504 506.837 162.489 506.455 162.46C506.074 162.431 505.707 162.372 505.355 162.284C505.033 162.225 504.71 162.152 504.387 162.064C504.006 161.917 503.639 161.741 503.287 161.536C502.965 161.331 502.642 161.081 502.319 160.788C501.762 161.023 501.043 161.272 500.163 161.536C499.313 161.8 498.389 162.02 497.391 162.196C496.423 162.401 495.455 162.504 494.487 162.504ZM495.059 159.644C495.851 159.644 496.673 159.571 497.523 159.424C498.374 159.277 499.181 159.101 499.943 158.896C500.706 158.691 501.337 158.5 501.835 158.324V151.152L495.455 151.768C494.135 151.885 493.182 152.267 492.595 152.912C492.038 153.557 491.759 154.481 491.759 155.684C491.759 156.916 492.038 157.884 492.595 158.588C493.153 159.292 493.974 159.644 495.059 159.644ZM513.595 171.788L516.455 162.064H513.155L506.951 140.064H510.383L515.751 159.116H517.247L522.659 140.064H526.091L517.027 171.788H513.595Z\"\n    fill=\"#18162C\"\n  />\n</svg>\n} }\n", styles: [".logo{width:8rem;height:3rem;object-fit:contain}.logo--small{width:2.5rem;height:2.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-logo', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showLogo()) { @if (effectiveLogoUrl()) {\n<img\n  [src]=\"effectiveLogoUrl()\"\n  [alt]=\"'Logo'\"\n  class=\"logo\"\n  [class.logo--small]=\"size() === 'small'\"\n/>\n} @else {\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"624\"\n  height=\"203\"\n  viewBox=\"0 0 624 203\"\n  fill=\"none\"\n  class=\"logo\"\n  [class.logo--small]=\"size() === 'small'\"\n>\n  <path\n    d=\"M33 74.5C33 47.9903 54.4903 26.5 81 26.5H161C187.51 26.5 209 47.9903 209 74.5V202.5H81C54.4903 202.5 33 181.01 33 154.5V74.5Z\"\n    fill=\"#EBD3F8\"\n  />\n  <path\n    d=\"M0 48.5C0 21.9903 21.4903 0.5 48 0.5H128C154.51 0.5 176 21.9903 176 48.5V128.5C176 155.01 154.51 176.5 128 176.5H0V48.5Z\"\n    fill=\"#AD49E1\"\n  />\n  <path\n    d=\"M55.5647 59.3595C55.5692 59.3436 55.5714 59.3357 55.5725 59.332C56.2691 56.8893 59.7309 56.8893 60.4275 59.332C60.4286 59.3357 60.4308 59.3436 60.4353 59.3595C60.447 59.4012 60.4529 59.422 60.4584 59.4416C63.6952 70.8715 72.6285 79.8048 84.0584 83.0416C84.078 83.0471 84.0988 83.053 84.1405 83.0647C84.1564 83.0692 84.1643 83.0714 84.1679 83.0725C86.6107 83.7691 86.6107 87.2309 84.1679 87.9275C84.1643 87.9286 84.1564 87.9308 84.1405 87.9353C84.0988 87.947 84.078 87.9529 84.0584 87.9584C72.6285 91.1952 63.6952 100.129 60.4584 111.558C60.4529 111.578 60.447 111.599 60.4353 111.641C60.4308 111.656 60.4286 111.664 60.4275 111.668C59.7309 114.111 56.2691 114.111 55.5725 111.668C55.5714 111.664 55.5692 111.656 55.5647 111.641C55.553 111.599 55.5471 111.578 55.5416 111.558C52.3048 100.129 43.3715 91.1952 31.9416 87.9584C31.922 87.9529 31.9012 87.947 31.8595 87.9353C31.8436 87.9308 31.8357 87.9286 31.832 87.9275C29.3893 87.2309 29.3893 83.7691 31.832 83.0725C31.8357 83.0714 31.8436 83.0692 31.8595 83.0647C31.9012 83.053 31.922 83.0471 31.9416 83.0416C43.3715 79.8048 52.3048 70.8715 55.5416 59.4416C55.5471 59.422 55.553 59.4012 55.5647 59.3595Z\"\n    fill=\"#F9F9F9\"\n  />\n  <ellipse cx=\"121\" cy=\"85\" rx=\"21\" ry=\"21.5\" fill=\"#F9F9F9\" />\n  <path d=\"M504.878 93.808V28.24H518.126V93.808H504.878Z\" fill=\"#AD49E1\" />\n  <path\n    d=\"M446 93.808L462.704 28.24H485.84L502.448 93.808H489.2L485.552 80.56H462.608L459.152 93.808H446ZM464.72 69.904H483.632L476.24 38.992H472.208L464.72 69.904Z\"\n    fill=\"#AD49E1\"\n  />\n  <path d=\"M430.666 93.808V25.936H443.434V93.808H430.666Z\" fill=\"#18162C\" />\n  <path\n    d=\"M398.14 114.064L404.284 93.808H394.012L382.588 45.616H395.932L404.476 82.96H406.972L415.516 45.616H428.38L411.772 114.064H398.14Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M358.863 94.864C357.263 94.864 355.311 94.8 353.007 94.672C350.703 94.544 348.335 94.352 345.903 94.096C343.535 93.84 341.423 93.616 339.567 93.424V25.936H352.431V47.152C353.391 46.768 354.575 46.384 355.983 46C357.391 45.616 358.863 45.296 360.399 45.04C361.999 44.72 363.471 44.56 364.815 44.56C369.295 44.56 372.847 45.488 375.471 47.344C378.159 49.136 380.079 51.824 381.231 55.408C382.383 58.992 382.959 63.504 382.959 68.944C382.959 75.344 382.223 80.464 380.751 84.304C379.343 88.08 376.879 90.8 373.359 92.464C369.839 94.064 365.007 94.864 358.863 94.864ZM358.959 84.112C362.095 84.112 364.431 83.568 365.967 82.48C367.503 81.328 368.527 79.632 369.039 77.392C369.615 75.152 369.903 72.4 369.903 69.136C369.903 65.808 369.647 63.152 369.135 61.168C368.623 59.12 367.759 57.648 366.543 56.752C365.391 55.792 363.759 55.312 361.647 55.312C360.623 55.312 359.535 55.44 358.383 55.696C357.231 55.888 356.111 56.144 355.023 56.464C353.999 56.72 353.135 56.976 352.431 57.232V83.728C353.391 83.792 354.511 83.888 355.791 84.016C357.071 84.08 358.127 84.112 358.959 84.112Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M306.79 94.8639C301.798 94.8639 298.022 93.6159 295.462 91.1199C292.966 88.5599 291.718 84.7199 291.718 79.5999C291.718 76.0159 292.358 73.2319 293.638 71.2479C294.918 69.1999 296.806 67.7279 299.302 66.8319C301.862 65.8719 304.966 65.2959 308.614 65.1039L320.326 64.0479V61.1679C320.326 58.8639 319.75 57.2639 318.598 56.3679C317.446 55.4079 315.75 54.9279 313.51 54.9279C311.718 54.9279 309.638 54.9919 307.27 55.1199C304.966 55.2479 302.662 55.4079 300.358 55.5999C298.118 55.7919 296.166 55.9839 294.502 56.1759L294.118 47.1519C295.782 46.7679 297.766 46.3839 300.07 45.9999C302.438 45.5519 304.902 45.1999 307.462 44.9439C310.022 44.6879 312.39 44.5599 314.566 44.5599C318.662 44.5599 322.086 45.0719 324.838 46.0959C327.59 47.1199 329.67 48.8159 331.078 51.1839C332.486 53.4879 333.19 56.6239 333.19 60.5919V82.5759C333.318 83.4719 333.798 84.1759 334.63 84.6879C335.462 85.1359 336.422 85.4559 337.51 85.6479L337.222 94.4799C336.198 94.4799 335.174 94.4799 334.15 94.4799C333.19 94.5439 332.262 94.5439 331.366 94.4799C330.47 94.4799 329.67 94.4159 328.966 94.2879C327.494 94.0959 326.214 93.7119 325.126 93.1359C324.102 92.5599 323.27 91.9519 322.63 91.3119C321.606 91.7599 320.23 92.2719 318.502 92.8479C316.774 93.4239 314.886 93.9039 312.838 94.2879C310.854 94.6719 308.838 94.8639 306.79 94.8639ZM309.862 85.3599C311.078 85.3599 312.358 85.2319 313.702 84.9759C315.046 84.7199 316.294 84.4319 317.446 84.1119C318.662 83.7279 319.622 83.3759 320.326 83.0559V72.0159L310.534 72.8799C308.422 73.0719 306.886 73.7119 305.926 74.7999C305.03 75.8239 304.582 77.2959 304.582 79.2159C304.582 81.1359 304.998 82.6399 305.83 83.7279C306.726 84.8159 308.07 85.3599 309.862 85.3599Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M241 93.808V28.24H267.112C271.464 28.24 275.208 28.784 278.344 29.872C281.48 30.96 283.912 32.72 285.64 35.152C287.432 37.52 288.328 40.72 288.328 44.752C288.328 47.504 288.04 49.84 287.464 51.76C286.952 53.616 286.12 55.216 284.968 56.56C283.88 57.84 282.44 59.024 280.648 60.112C282.568 60.816 284.232 61.776 285.64 62.992C287.112 64.144 288.232 65.712 289 67.696C289.768 69.616 290.152 72.176 290.152 75.376C290.152 78.896 289.608 81.84 288.52 84.208C287.432 86.576 285.864 88.464 283.816 89.872C281.832 91.28 279.496 92.304 276.808 92.944C274.12 93.52 271.176 93.808 267.976 93.808H241ZM254.248 84.016H267.016C269.256 84.016 271.112 83.76 272.584 83.248C274.12 82.672 275.272 81.68 276.04 80.272C276.872 78.864 277.288 76.912 277.288 74.416C277.288 72.496 276.968 70.928 276.328 69.712C275.688 68.496 274.856 67.6 273.832 67.024C272.808 66.384 271.656 65.936 270.376 65.68C269.16 65.424 267.944 65.296 266.728 65.296H254.248V84.016ZM254.248 55.888H266.632C268.808 55.888 270.568 55.568 271.912 54.928C273.256 54.224 274.248 53.2 274.888 51.856C275.528 50.448 275.848 48.688 275.848 46.576C275.848 43.568 275.048 41.392 273.448 40.048C271.912 38.704 269.48 38.032 266.152 38.032H254.248V55.888Z\"\n    fill=\"#18162C\"\n  />\n  <path\n    d=\"M251.12 162.064V149.304L241.44 131.66H245.4L252.836 145.784L260.316 131.66H264.276L254.64 149.304V162.064H251.12ZM270.396 162.504C267.932 162.504 266.011 162.079 264.632 161.228C263.283 160.377 262.33 159.087 261.772 157.356C261.244 155.625 260.98 153.44 260.98 150.8C260.98 148.277 261.274 146.195 261.86 144.552C262.476 142.909 263.474 141.677 264.852 140.856C266.231 140.035 268.079 139.624 270.396 139.624C272.743 139.624 274.606 140.035 275.984 140.856C277.363 141.677 278.346 142.909 278.932 144.552C279.548 146.195 279.856 148.277 279.856 150.8C279.856 153.44 279.578 155.625 279.02 157.356C278.492 159.087 277.539 160.377 276.16 161.228C274.811 162.079 272.89 162.504 270.396 162.504ZM270.396 159.556C272.098 159.556 273.374 159.263 274.224 158.676C275.075 158.06 275.632 157.107 275.896 155.816C276.19 154.525 276.336 152.853 276.336 150.8C276.336 148.776 276.16 147.163 275.808 145.96C275.456 144.757 274.855 143.892 274.004 143.364C273.154 142.836 271.951 142.572 270.396 142.572C268.871 142.572 267.668 142.836 266.788 143.364C265.938 143.892 265.336 144.757 264.984 145.96C264.632 147.163 264.456 148.776 264.456 150.8C264.456 152.853 264.588 154.525 264.852 155.816C265.146 157.107 265.718 158.06 266.568 158.676C267.419 159.263 268.695 159.556 270.396 159.556ZM289.726 162.504C287.848 162.504 286.411 162.123 285.414 161.36C284.416 160.597 283.727 159.409 283.346 157.796C282.994 156.183 282.818 154.1 282.818 151.548V140.064H286.206V151.548C286.206 153.484 286.294 155.024 286.47 156.168C286.675 157.312 287.1 158.148 287.746 158.676C288.391 159.175 289.359 159.424 290.65 159.424C291.94 159.424 293.114 159.248 294.17 158.896C295.226 158.544 296.076 158.192 296.722 157.84V140.064H300.11V162.064H296.722V160.524C295.783 161.052 294.756 161.521 293.642 161.932C292.556 162.313 291.251 162.504 289.726 162.504ZM304.256 162.064V140.064H307.644V143.012C308.201 142.631 308.905 142.22 309.756 141.78C310.606 141.311 311.545 140.871 312.572 140.46C313.598 140.049 314.625 139.756 315.652 139.58V143.056C314.654 143.261 313.642 143.54 312.616 143.892C311.589 144.215 310.636 144.567 309.756 144.948C308.905 145.329 308.201 145.667 307.644 145.96V162.064H304.256ZM322.621 162.064L330.937 131.66H338.549L346.821 162.064H343.301L341.145 154.364H328.297L326.141 162.064H322.621ZM329.045 151.24H340.397L335.865 134.652H333.577L329.045 151.24ZM349.316 162.064V131.66H352.836V162.064H349.316ZM355.83 167.476L357.81 157.268H361.638L358.646 167.476H355.83ZM379.605 162.064V149.304L369.925 131.66H373.885L381.321 145.784L388.801 131.66H392.761L383.125 149.304V162.064H379.605ZM398.882 162.504C396.418 162.504 394.496 162.079 393.118 161.228C391.768 160.377 390.815 159.087 390.258 157.356C389.73 155.625 389.466 153.44 389.466 150.8C389.466 148.277 389.759 146.195 390.346 144.552C390.962 142.909 391.959 141.677 393.338 140.856C394.716 140.035 396.564 139.624 398.882 139.624C401.228 139.624 403.091 140.035 404.47 140.856C405.848 141.677 406.831 142.909 407.418 144.552C408.034 146.195 408.342 148.277 408.342 150.8C408.342 153.44 408.063 155.625 407.506 157.356C406.978 159.087 406.024 160.377 404.646 161.228C403.296 162.079 401.375 162.504 398.882 162.504ZM398.882 159.556C400.583 159.556 401.859 159.263 402.71 158.676C403.56 158.06 404.118 157.107 404.382 155.816C404.675 154.525 404.822 152.853 404.822 150.8C404.822 148.776 404.646 147.163 404.294 145.96C403.942 144.757 403.34 143.892 402.49 143.364C401.639 142.836 400.436 142.572 398.882 142.572C397.356 142.572 396.154 142.836 395.274 143.364C394.423 143.892 393.822 144.757 393.47 145.96C393.118 147.163 392.942 148.776 392.942 150.8C392.942 152.853 393.074 154.525 393.338 155.816C393.631 157.107 394.203 158.06 395.054 158.676C395.904 159.263 397.18 159.556 398.882 159.556ZM418.211 162.504C416.333 162.504 414.896 162.123 413.899 161.36C412.901 160.597 412.212 159.409 411.831 157.796C411.479 156.183 411.303 154.1 411.303 151.548V140.064H414.691V151.548C414.691 153.484 414.779 155.024 414.955 156.168C415.16 157.312 415.585 158.148 416.231 158.676C416.876 159.175 417.844 159.424 419.135 159.424C420.425 159.424 421.599 159.248 422.655 158.896C423.711 158.544 424.561 158.192 425.207 157.84V140.064H428.595V162.064H425.207V160.524C424.268 161.052 423.241 161.521 422.127 161.932C421.041 162.313 419.736 162.504 418.211 162.504ZM432.741 162.064V140.064H436.129V143.012C436.686 142.631 437.39 142.22 438.241 141.78C439.091 141.311 440.03 140.871 441.057 140.46C442.083 140.049 443.11 139.756 444.137 139.58V143.056C443.139 143.261 442.127 143.54 441.101 143.892C440.074 144.215 439.121 144.567 438.241 144.948C437.39 145.329 436.686 145.667 436.129 145.96V162.064H432.741ZM457.531 162.064L451.415 131.66H455.067L460.171 158.984H461.403L467.563 131.88H471.699L477.859 158.984H479.091L484.195 131.66H487.847L481.687 162.064H475.351L469.323 134.696H469.939L463.911 162.064H457.531ZM494.487 162.504C492.463 162.504 490.923 161.932 489.867 160.788C488.811 159.644 488.283 157.972 488.283 155.772C488.283 154.335 488.533 153.161 489.031 152.252C489.53 151.343 490.278 150.653 491.275 150.184C492.302 149.685 493.563 149.377 495.059 149.26L501.835 148.6V146.708C501.835 145.212 501.498 144.156 500.823 143.54C500.178 142.924 499.21 142.616 497.919 142.616C497.186 142.616 496.306 142.645 495.279 142.704C494.282 142.763 493.285 142.836 492.287 142.924C491.29 143.012 490.41 143.1 489.647 143.188L489.471 140.592C490.175 140.445 491.026 140.299 492.023 140.152C493.021 140.005 494.062 139.888 495.147 139.8C496.233 139.683 497.23 139.624 498.139 139.624C499.811 139.624 501.175 139.888 502.231 140.416C503.287 140.915 504.05 141.692 504.519 142.748C505.018 143.775 505.267 145.095 505.267 146.708V157.84C505.326 158.485 505.575 158.955 506.015 159.248C506.485 159.541 507.071 159.732 507.775 159.82L507.643 162.504C507.233 162.504 506.837 162.489 506.455 162.46C506.074 162.431 505.707 162.372 505.355 162.284C505.033 162.225 504.71 162.152 504.387 162.064C504.006 161.917 503.639 161.741 503.287 161.536C502.965 161.331 502.642 161.081 502.319 160.788C501.762 161.023 501.043 161.272 500.163 161.536C499.313 161.8 498.389 162.02 497.391 162.196C496.423 162.401 495.455 162.504 494.487 162.504ZM495.059 159.644C495.851 159.644 496.673 159.571 497.523 159.424C498.374 159.277 499.181 159.101 499.943 158.896C500.706 158.691 501.337 158.5 501.835 158.324V151.152L495.455 151.768C494.135 151.885 493.182 152.267 492.595 152.912C492.038 153.557 491.759 154.481 491.759 155.684C491.759 156.916 492.038 157.884 492.595 158.588C493.153 159.292 493.974 159.644 495.059 159.644ZM513.595 171.788L516.455 162.064H513.155L506.951 140.064H510.383L515.751 159.116H517.247L522.659 140.064H526.091L517.027 171.788H513.595Z\"\n    fill=\"#18162C\"\n  />\n</svg>\n} }\n", styles: [".logo{width:8rem;height:3rem;object-fit:contain}.logo--small{width:2.5rem;height:2.5rem}\n"] }]
-        }], propDecorators: { showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-class HeaderComponent {
-    headerType = input('standard', ...(ngDevMode ? [{ debugName: "headerType" }] : []));
-    showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
-    showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : []));
-    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    showCloseButton = input(false, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
-    onBack = output();
-    onClose = output();
-    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { headerType: { classPropertyName: "headerType", publicName: "headerType", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-header', standalone: true, imports: [
-                        CommonModule,
-                        BackButtonComponent,
-                        CloseButtonComponent,
-                        SimpleCloseButtonComponent,
-                        LogoComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], propDecorators: { headerType: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerType", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
-
-class MenuDropdownComponent {
-    isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
-    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    onClose = output();
-    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    documentClickListener;
-    ngOnInit() {
-        // Set up document click listener for closing menu when clicking outside
-        this.documentClickListener = (event) => {
-            const target = event.target;
-            const menuContainer = target.closest('[data-menu-container]');
-            if (!menuContainer && this.isMenuOpen()) {
-                this.isMenuOpen.set(false);
-                this.onClose.emit();
-            }
-        };
-        document.addEventListener('click', this.documentClickListener);
-    }
-    ngOnDestroy() {
-        // Clean up document click listener
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = undefined;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MenuDropdownComponent, isStandalone: true, selector: "app-menu-dropdown", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, 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    (onClick)=\"$event.stopPropagation(); isMenuOpen.set(!isMenuOpen())\"\n    [attr.aria-label]=\"'Menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    type=\"button\"\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      [class.rtl]=\"isRtl()\"\n      [class.ltr]=\"!isRtl()\"\n      role=\"menu\"\n      [attr.aria-label]=\"'Menu'\"\n    >\n      <div class=\"menu-dropdown__content\">\n        <button\n          (click)=\"onClose.emit(); isMenuOpen.set(false)\"\n          class=\"menu-dropdown__button-item\"\n          [class.rtl]=\"isRtl()\"\n          [class.ltr]=\"!isRtl()\"\n          role=\"menuitem\"\n          type=\"button\"\n          [attr.aria-label]=\"'EndChat' | translate\"\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: "component", type: ButtonComponent, selector: "app-button", inputs: ["variant", "type", "disabled", "fullWidth", "className", "size", "direction"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MenuDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-menu-dropdown', standalone: true, imports: [CommonModule, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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    (onClick)=\"$event.stopPropagation(); isMenuOpen.set(!isMenuOpen())\"\n    [attr.aria-label]=\"'Menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-haspopup]=\"true\"\n    type=\"button\"\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      [class.rtl]=\"isRtl()\"\n      [class.ltr]=\"!isRtl()\"\n      role=\"menu\"\n      [attr.aria-label]=\"'Menu'\"\n    >\n      <div class=\"menu-dropdown__content\">\n        <button\n          (click)=\"onClose.emit(); isMenuOpen.set(false)\"\n          class=\"menu-dropdown__button-item\"\n          [class.rtl]=\"isRtl()\"\n          [class.ltr]=\"!isRtl()\"\n          role=\"menuitem\"\n          type=\"button\"\n          [attr.aria-label]=\"'EndChat' | translate\"\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"] }]
-        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
-
-class ChatHeaderComponent {
-    showBackButton = input(false, ...(ngDevMode ? [{ debugName: "showBackButton" }] : []));
-    showLogo = input(true, ...(ngDevMode ? [{ debugName: "showLogo" }] : []));
-    language = input('en', ...(ngDevMode ? [{ debugName: "language" }] : []));
-    onBack = output();
-    onClose = output();
-    isRtl = computed(() => this.language() === 'ar', ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ChatHeaderComponent, isStandalone: true, selector: "app-chat-header", inputs: { showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-chat-header', standalone: true, imports: [
-                        CommonModule,
-                        BackButtonComponent,
-                        MenuDropdownComponent,
-                        LogoComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], propDecorators: { showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], onBack: [{ type: i0.Output, args: ["onBack"] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
-
-// Main header components
-
-class HelpPopupComponent {
-    isPopupOpen = input(false, ...(ngDevMode ? [{ debugName: "isPopupOpen" }] : []));
-    showHelpScreenData = input(false, ...(ngDevMode ? [{ debugName: "showHelpScreenData" }] : []));
-    showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
-    status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : []));
-    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    helpScreenData = input(null, ...(ngDevMode ? [{ debugName: "helpScreenData" }] : []));
-    messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
-    needsAgent = input(false, ...(ngDevMode ? [{ debugName: "needsAgent" }] : []));
-    assistantStatus = input('idle', ...(ngDevMode ? [{ debugName: "assistantStatus" }] : []));
-    isAblyConnected = input(false, ...(ngDevMode ? [{ debugName: "isAblyConnected" }] : []));
-    isChatClosed = input(false, ...(ngDevMode ? [{ debugName: "isChatClosed" }] : []));
-    currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
-    chatIsLoading = input(false, ...(ngDevMode ? [{ debugName: "chatIsLoading" }] : []));
-    sessionId = input(null, ...(ngDevMode ? [{ debugName: "sessionId" }] : []));
-    isIntroScreenEnabled = input(false, ...(ngDevMode ? [{ debugName: "isIntroScreenEnabled" }] : []));
-    selectedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
-    selectedNestedOption = input(null, ...(ngDevMode ? [{ debugName: "selectedNestedOption" }] : []));
-    showEndChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showEndChatConfirmation" }] : []));
-    showStartNewChatConfirmation = input(false, ...(ngDevMode ? [{ debugName: "showStartNewChatConfirmation" }] : []));
-    showReviewDialog = input(false, ...(ngDevMode ? [{ debugName: "showReviewDialog" }] : []));
-    isSubmittingReview = input(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : []));
-    isStartingNewChat = input(false, ...(ngDevMode ? [{ debugName: "isStartingNewChat" }] : []));
-    closePopup = output();
-    back = output();
-    showChatEvent = output();
-    endChat = output();
-    confirmEndChat = output();
-    cancelEndChat = output();
-    confirmStartNewChat = output();
-    cancelStartNewChat = output();
-    reviewSubmit = output();
-    reviewSkip = output();
-    startNewChat = output();
-    showHelpScreenDataEvent = output();
-    hideHelpScreenData = output();
-    navigateToUrl = output();
-    sendMessageEvent = output();
-    handleClosePopup() {
-        this.closePopup.emit();
-    }
-    handleBack() {
-        this.back.emit();
-    }
-    handleShowChat() {
-        this.showChatEvent.emit();
-    }
-    handleEndChat() {
-        this.endChat.emit();
-    }
-    handleConfirmEndChat() {
-        this.confirmEndChat.emit();
-    }
-    handleCancelEndChat() {
-        this.cancelEndChat.emit();
-    }
-    handleConfirmStartNewChat() {
-        this.confirmStartNewChat.emit();
-    }
-    handleCancelStartNewChat() {
-        this.cancelStartNewChat.emit();
-    }
-    handleReviewSubmit(reviewData) {
-        this.reviewSubmit.emit(reviewData);
-    }
-    handleReviewSkip() {
-        this.reviewSkip.emit();
-    }
-    handleSendMessage(event) {
-        this.sendMessageEvent.emit(event);
-    }
-    handleStartNewChat(option) {
-        this.startNewChat.emit(option);
-    }
-    handleShowHelpScreenData() {
-        this.showHelpScreenDataEvent.emit();
-    }
-    handleHideHelpScreenData() {
-        this.hideHelpScreenData.emit();
-    }
-    handleNavigateToUrl(url) {
-        this.navigateToUrl.emit(url);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: HelpPopupComponent, isStandalone: true, selector: "app-help-popup", inputs: { isPopupOpen: { classPropertyName: "isPopupOpen", publicName: "isPopupOpen", isSignal: true, isRequired: false, transformFunction: null }, showHelpScreenData: { classPropertyName: "showHelpScreenData", publicName: "showHelpScreenData", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, helpScreenData: { classPropertyName: "helpScreenData", publicName: "helpScreenData", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, needsAgent: { classPropertyName: "needsAgent", publicName: "needsAgent", isSignal: true, isRequired: false, transformFunction: null }, assistantStatus: { classPropertyName: "assistantStatus", publicName: "assistantStatus", isSignal: true, isRequired: false, transformFunction: null }, isAblyConnected: { classPropertyName: "isAblyConnected", publicName: "isAblyConnected", isSignal: true, isRequired: false, transformFunction: null }, isChatClosed: { classPropertyName: "isChatClosed", publicName: "isChatClosed", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, chatIsLoading: { classPropertyName: "chatIsLoading", publicName: "chatIsLoading", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null }, isIntroScreenEnabled: { classPropertyName: "isIntroScreenEnabled", publicName: "isIntroScreenEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, selectedNestedOption: { classPropertyName: "selectedNestedOption", publicName: "selectedNestedOption", isSignal: true, isRequired: false, transformFunction: null }, showEndChatConfirmation: { classPropertyName: "showEndChatConfirmation", publicName: "showEndChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showStartNewChatConfirmation: { classPropertyName: "showStartNewChatConfirmation", publicName: "showStartNewChatConfirmation", isSignal: true, isRequired: false, transformFunction: null }, showReviewDialog: { classPropertyName: "showReviewDialog", publicName: "showReviewDialog", isSignal: true, isRequired: false, transformFunction: null }, isSubmittingReview: { classPropertyName: "isSubmittingReview", publicName: "isSubmittingReview", isSignal: true, isRequired: false, transformFunction: null }, isStartingNewChat: { classPropertyName: "isStartingNewChat", publicName: "isStartingNewChat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closePopup: "closePopup", back: "back", showChatEvent: "showChatEvent", endChat: "endChat", confirmEndChat: "confirmEndChat", cancelEndChat: "cancelEndChat", confirmStartNewChat: "confirmStartNewChat", cancelStartNewChat: "cancelStartNewChat", reviewSubmit: "reviewSubmit", reviewSkip: "reviewSkip", startNewChat: "startNewChat", showHelpScreenDataEvent: "showHelpScreenDataEvent", hideHelpScreenData: "hideHelpScreenData", navigateToUrl: "navigateToUrl", sendMessageEvent: "sendMessageEvent" }, ngImport: i0, template: "@if (isPopupOpen()) {\n<div\n  class=\"help-popup\"\n  [class.is-open]=\"isPopupOpen()\"\n  [class.is-closed]=\"!isPopupOpen()\"\n  [class.babylai-bg-linear-to-b]=\"isPopupOpen() && !showHelpScreenData() && !showChat()\"\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    [isLoading]=\"isStartingNewChat()\"\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    (onClick)=\"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    [sessionId]=\"sessionId()\"\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: "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", "sessionId"], outputs: ["sendMessageEvent"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["variant"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["title", "body", "confirmText", "cancelText", "isLoading"], 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-help-popup', standalone: true, imports: [
-                        CommonModule,
-                        TranslatePipe,
-                        ButtonComponent,
-                        HelpScreenDataComponent,
-                        HeaderComponent,
-                        ChatHeaderComponent,
-                        ChatComponent,
-                        LoadingComponent,
-                        ConfirmationDialogComponent,
-                        ReviewDialogComponent,
-                        IntroSectionComponent,
-                        FooterComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPopupOpen()) {\n<div\n  class=\"help-popup\"\n  [class.is-open]=\"isPopupOpen()\"\n  [class.is-closed]=\"!isPopupOpen()\"\n  [class.babylai-bg-linear-to-b]=\"isPopupOpen() && !showHelpScreenData() && !showChat()\"\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    [isLoading]=\"isStartingNewChat()\"\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    (onClick)=\"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    [sessionId]=\"sessionId()\"\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"] }]
-        }], propDecorators: { isPopupOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPopupOpen", required: false }] }], showHelpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelpScreenData", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helpScreenData: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenData", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], needsAgent: [{ type: i0.Input, args: [{ isSignal: true, alias: "needsAgent", required: false }] }], assistantStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assistantStatus", required: false }] }], isAblyConnected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAblyConnected", required: false }] }], isChatClosed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChatClosed", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], chatIsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "chatIsLoading", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], isIntroScreenEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIntroScreenEnabled", required: false }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }], selectedNestedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNestedOption", required: false }] }], showEndChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndChatConfirmation", required: false }] }], showStartNewChatConfirmation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStartNewChatConfirmation", required: false }] }], showReviewDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReviewDialog", required: false }] }], isSubmittingReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmittingReview", required: false }] }], isStartingNewChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStartingNewChat", required: false }] }], closePopup: [{ type: i0.Output, args: ["closePopup"] }], back: [{ type: i0.Output, args: ["back"] }], showChatEvent: [{ type: i0.Output, args: ["showChatEvent"] }], endChat: [{ type: i0.Output, args: ["endChat"] }], confirmEndChat: [{ type: i0.Output, args: ["confirmEndChat"] }], cancelEndChat: [{ type: i0.Output, args: ["cancelEndChat"] }], confirmStartNewChat: [{ type: i0.Output, args: ["confirmStartNewChat"] }], cancelStartNewChat: [{ type: i0.Output, args: ["cancelStartNewChat"] }], reviewSubmit: [{ type: i0.Output, args: ["reviewSubmit"] }], reviewSkip: [{ type: i0.Output, args: ["reviewSkip"] }], startNewChat: [{ type: i0.Output, args: ["startNewChat"] }], showHelpScreenDataEvent: [{ type: i0.Output, args: ["showHelpScreenDataEvent"] }], hideHelpScreenData: [{ type: i0.Output, args: ["hideHelpScreenData"] }], navigateToUrl: [{ type: i0.Output, args: ["navigateToUrl"] }], sendMessageEvent: [{ type: i0.Output, args: ["sendMessageEvent"] }] } });
-
 // Note: Using namespace import for tree-shaking support
 // Modern bundlers (webpack, esbuild) should tree-shake unused exports
 // Only Realtime class and related types are used, so tree-shaking should work
@@ -2692,10 +2830,10 @@ class ChatSessionService {
     isConnectionActive() {
         return ClientAblyService.isConnectionActive();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatSessionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatSessionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatSessionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ChatSessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ChatSessionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2708,7 +2846,6 @@ class HelpCenterWidgetComponent {
     showArrow = input(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
     messageLabel = input(null, ...(ngDevMode ? [{ debugName: "messageLabel" }] : []));
     currentLang = input('en', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
-    isIntroScreenEnabled = input(false, ...(ngDevMode ? [{ debugName: "isIntroScreenEnabled" }] : []));
     primaryColor = input('#ad49e1', ...(ngDevMode ? [{ debugName: "primaryColor" }] : []));
     logoUrl = input('', ...(ngDevMode ? [{ debugName: "logoUrl" }] : []));
     chatMessagesContainer;
@@ -2740,6 +2877,8 @@ class HelpCenterWidgetComponent {
     isSubmittingReview = signal(false, ...(ngDevMode ? [{ debugName: "isSubmittingReview" }] : []));
     isStartingNewChat = signal(false, ...(ngDevMode ? [{ debugName: "isStartingNewChat" }] : []));
     pendingNewChatOption = signal(null, ...(ngDevMode ? [{ debugName: "pendingNewChatOption" }] : []));
+    hasUserSentMessages = signal(false, ...(ngDevMode ? [{ debugName: "hasUserSentMessages" }] : []));
+    closedSessionIdForReview = signal(null, ...(ngDevMode ? [{ debugName: "closedSessionIdForReview" }] : []));
     apiService = inject(ApiService);
     translationService = inject(TranslationService);
     themeService = inject(ThemeService);
@@ -2779,9 +2918,6 @@ class HelpCenterWidgetComponent {
     }
     ngOnInit() {
         this.showArrowAnimation.set(this.showArrow());
-        if (!this.isIntroScreenEnabled()) {
-            this.showHelpScreenData.set(true);
-        }
     }
     ngOnDestroy() {
         // Clean up effects
@@ -2807,9 +2943,6 @@ class HelpCenterWidgetComponent {
         this.showArrowAnimation.set(this.isPopupOpen());
         if (this.isPopupOpen()) {
             // Reset the state when opening the popup
-            if (!this.isIntroScreenEnabled()) {
-                this.showHelpScreenData.set(true);
-            }
             await this.fetchHelpScreenData();
         }
     }
@@ -2822,6 +2955,8 @@ class HelpCenterWidgetComponent {
             });
             this.helpScreenData.set(await response.json());
             this.status.set('succeeded');
+            // Automatically show the option screen when data is loaded (since intro section is removed)
+            this.showHelpScreenData.set(true);
         }
         catch (error) {
             console.error('Error fetching help screen data:', error);
@@ -2890,6 +3025,21 @@ class HelpCenterWidgetComponent {
         if (this.isChatClosed())
             return;
         try {
+            // Add user message first so it appears in UI immediately
+            this.messages.update((msgs) => [
+                ...msgs,
+                {
+                    id: Date.now(),
+                    sender: 'user',
+                    senderType: 1,
+                    messageContent: hasContent ? textToSend : '',
+                    sentAt: new Date(),
+                    isSeen: false,
+                    ...(attachmentIds.length > 0 ? { attachmentIds } : {}),
+                },
+            ]);
+            // Track that user has sent a message
+            this.hasUserSentMessages.set(true);
             this.assistantStatus.set('typing');
             // Create session only when user sends first message (if not already exists)
             if (!this.sessionId()) {
@@ -2897,6 +3047,9 @@ class HelpCenterWidgetComponent {
                 if (!selectedOption) {
                     this.error.set(this.translationService.translate('ErrorCreatingSession'));
                     this.assistantStatus.set('idle');
+                    this.chatIsLoading.set(false);
+                    // Remove the message that was just added
+                    this.messages.update((msgs) => msgs.slice(0, -1));
                     return;
                 }
                 await this.createChatSession(selectedOption);
@@ -2916,19 +3069,6 @@ class HelpCenterWidgetComponent {
                     // Continue without the failed uploads
                 }
             }
-            // Add user message (allow attachments-only by keeping content empty)
-            this.messages.update((msgs) => [
-                ...msgs,
-                {
-                    id: Date.now(),
-                    sender: 'user',
-                    senderType: 1,
-                    messageContent: hasContent ? textToSend : '',
-                    sentAt: new Date(),
-                    isSeen: false,
-                    ...(attachmentIds.length > 0 ? { attachmentIds } : {}),
-                },
-            ]);
             // Send message via API
             const freshSessionId = this.sessionId();
             if (freshSessionId) {
@@ -2942,6 +3082,7 @@ class HelpCenterWidgetComponent {
         catch (error) {
             console.error('Error sending message:', error);
             this.assistantStatus.set('idle');
+            this.chatIsLoading.set(false);
             const errorMessage = this.translationService.translate('ErrorSendingMessage');
             this.messages.update((msgs) => [
                 ...msgs,
@@ -2976,6 +3117,7 @@ class HelpCenterWidgetComponent {
             },
         ]);
         this.assistantStatus.set('idle');
+        this.chatIsLoading.set(false);
         this.scrollToBottom();
     }
     getSenderType(senderType) {
@@ -3021,9 +3163,9 @@ class HelpCenterWidgetComponent {
         // If there are only welcome messages but no session, clear them and start fresh
         if (this.messages().length > 0 && !this.sessionId()) {
             this.messages.set([]);
+            this.hasUserSentMessages.set(false);
         }
         this.selectedOption.set(option);
-        this.chatIsLoading.set(true);
         try {
             // Update UI state - session will be created when the user sends the first message
             this.showChat.set(true);
@@ -3060,9 +3202,6 @@ class HelpCenterWidgetComponent {
                 },
             ]);
         }
-        finally {
-            this.chatIsLoading.set(false);
-        }
     }
     async startNewChatSession(option) {
         try {
@@ -3089,46 +3228,79 @@ class HelpCenterWidgetComponent {
         }
     }
     async handleEndChat() {
+        // If called from home screen and user has sent messages, close session and show review dialog
+        if (!this.showChat() && this.sessionId() && this.hasUserSentMessages()) {
+            // Store session ID before closing
+            const currentSessionId = this.sessionId();
+            // Close the chat session first
+            await this.endChatSession();
+            // Store the closed session ID for review submission
+            this.closedSessionIdForReview.set(currentSessionId);
+            // Show review dialog
+            this.showReviewDialog.set(true);
+            return;
+        }
+        // Otherwise, show confirmation dialog (when called from chat screen)
         this.showEndChatConfirmation.set(true);
     }
     async confirmEndChat() {
         this.showEndChatConfirmation.set(false);
-        // Only show review dialog if there was an active chat session with meaningful interaction
-        // Read sessionId fresh to ensure we have the current value
-        if (this.sessionId() && this.hasActiveChatSession()) {
-            this.showReviewDialog.set(true);
+        // Only show review if user has sent messages
+        if (this.hasUserSentMessages()) {
+            // Store session ID before closing
+            const currentSessionId = this.sessionId();
+            // Close the chat session on backend only (don't change UI state)
+            await this.closeSessionOnly();
+            // Store the closed session ID for review submission
+            this.closedSessionIdForReview.set(currentSessionId);
+            // Add review message to chat
+            this.addReviewMessageToChat();
         }
         else {
-            // No meaningful interaction, just end the chat directly
+            // No messages sent, just end the chat directly
             await this.endChatSession();
         }
     }
     async handleReviewSubmit(reviewData) {
         try {
             this.isSubmittingReview.set(true);
-            // Store session ID before closing chat
-            const currentSessionId = this.sessionId();
-            // Close chat session first
-            await this.endChatSession();
-            // Then submit review to API endpoint
-            if (currentSessionId) {
-                await this.chatSessionService.submitReview(currentSessionId, reviewData.rating, reviewData.comment, this.currentLang());
+            // Use the stored closed session ID for review submission
+            const sessionIdForReview = this.closedSessionIdForReview();
+            // Submit review to API endpoint using the closed session ID
+            if (sessionIdForReview) {
+                await this.chatSessionService.submitReview(sessionIdForReview, reviewData.rating, reviewData.comment || '', this.currentLang());
             }
             // Close review dialog
             this.showReviewDialog.set(false);
             this.isSubmittingReview.set(false);
+            // Clear the stored session ID
+            this.closedSessionIdForReview.set(null);
+            // Don't close popup after review submission - keep it open showing help screen
+            this.hasUserSentMessages.set(false);
         }
         catch (error) {
             console.error('Error submitting review:', error);
             this.isSubmittingReview.set(false);
             // Still close the dialog even if review submission fails
             this.showReviewDialog.set(false);
+            // Clear the stored session ID even on error
+            this.closedSessionIdForReview.set(null);
+            this.hasUserSentMessages.set(false);
         }
     }
+    handleReviewClose() {
+        // Only close the review dialog without triggering any actions
+        this.showReviewDialog.set(false);
+        // Clear the stored session ID
+        this.closedSessionIdForReview.set(null);
+    }
     async handleReviewSkip() {
-        // Close review dialog and end chat
+        // Close review dialog
         this.showReviewDialog.set(false);
-        await this.endChatSession();
+        // Clear the stored session ID without submitting review
+        this.closedSessionIdForReview.set(null);
+        // Don't close popup after skipping review - keep it open showing help screen
+        this.hasUserSentMessages.set(false);
     }
     async endChatSession() {
         // Read sessionId fresh to ensure we have the current value before async operations
@@ -3150,10 +3322,29 @@ class HelpCenterWidgetComponent {
         this.assistantStatus.set('idle');
         this.selectedOption.set(null);
         this.selectedNestedOption.set(null);
+        this.hasUserSentMessages.set(false);
+    }
+    async closeSessionOnly() {
+        // Read sessionId fresh to ensure we have the current value before async operations
+        const currentSessionId = this.sessionId();
+        if (currentSessionId) {
+            await this.chatSessionService.closeSession(currentSessionId, this.currentLang());
+            // Read again after async operation to ensure we're clearing the correct session
+            if (this.sessionId() === currentSessionId) {
+                this.sessionId.set(null);
+            }
+        }
+        // Stop Ably connection
+        await this.chatSessionService.stopConnection();
+        this.isAblyConnected.set(false);
     }
     cancelEndChat() {
         this.showEndChatConfirmation.set(false);
     }
+    closeEndChat() {
+        // Only close the dialog without triggering any actions
+        this.showEndChatConfirmation.set(false);
+    }
     async confirmStartNewChat() {
         const pendingOption = this.pendingNewChatOption();
         if (!pendingOption) {
@@ -3185,6 +3376,18 @@ class HelpCenterWidgetComponent {
         }
         this.showStartNewChatConfirmation.set(false);
         this.pendingNewChatOption.set(null);
+        // Show the already opened chat
+        this.showChat.set(true);
+        this.showHelpScreenData.set(false);
+    }
+    closeStartNewChat() {
+        // Only close the dialog without triggering any actions
+        // Don't allow closing while loading
+        if (this.isStartingNewChat()) {
+            return;
+        }
+        this.showStartNewChatConfirmation.set(false);
+        this.pendingNewChatOption.set(null);
     }
     async clearCurrentChat() {
         // Read sessionId fresh to ensure we have the current value before async operations
@@ -3205,10 +3408,11 @@ class HelpCenterWidgetComponent {
         this.assistantStatus.set('idle');
         this.selectedOption.set(null);
         this.selectedNestedOption.set(null);
+        this.hasUserSentMessages.set(false);
     }
     async startNewChatWithOption(option) {
         this.selectedOption.set(option);
-        this.chatIsLoading.set(true);
+        this.hasUserSentMessages.set(false);
         try {
             // Create chat session (includes Ably connection setup)
             await this.createChatSession(option);
@@ -3232,11 +3436,9 @@ class HelpCenterWidgetComponent {
                     isSeen: true,
                 },
             ]);
-            this.chatIsLoading.set(false);
         }
         catch (error) {
             console.error('Error starting new chat:', error);
-            this.chatIsLoading.set(false);
             // Show error message to user
             const errorMessage = this.translationService.translate('ErrorStartingChat');
             this.messages.update((msgs) => [
@@ -3252,15 +3454,14 @@ class HelpCenterWidgetComponent {
             ]);
         }
     }
-    /**
-     * Closes a chat session.
-     * @deprecated Use chatSessionService.closeSession() instead
-     * @private
-     */
-    async closeChatSession(chatSessionId) {
-        return await this.chatSessionService.closeSession(chatSessionId, this.currentLang());
-    }
-    handleClosePopup() {
+    async handleClosePopup() {
+        // If there's an active session with messages, show stars-only review dialog
+        if (this.sessionId() && this.hasUserSentMessages()) {
+            this.showReviewDialog.set(true);
+            // Don't close yet - wait for review submission/skip
+            return;
+        }
+        // No messages or no session, close normally
         this.showHelpScreenData.set(false);
         this.showChat.set(false);
         this.isPopupOpen.set(false);
@@ -3268,6 +3469,11 @@ class HelpCenterWidgetComponent {
         this.selectedNestedOption.set(null);
         // Clear messages when closing popup to ensure fresh start next time
         this.messages.set([]);
+        this.hasUserSentMessages.set(false);
+    }
+    handleMinimizePopup() {
+        // Only close the popup, preserve all state (messages, sessionId, selectedOption, etc.)
+        this.isPopupOpen.set(false);
     }
     handleCloseArrowAnimation() {
         this.showArrowAnimation.set(false);
@@ -3302,9 +3508,6 @@ class HelpCenterWidgetComponent {
     handleShowHelpScreenData() {
         this.showHelpScreenData.set(true);
     }
-    handleHideHelpScreenData() {
-        this.showHelpScreenData.set(false);
-    }
     scrollTimeout;
     scrollToBottom() {
         // Clear any existing timeout
@@ -3338,10 +3541,76 @@ class HelpCenterWidgetComponent {
     navigateToUrl(url) {
         window.open(url, '_blank');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpCenterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: { classPropertyName: "getToken", publicName: "getToken", isSignal: true, isRequired: true, transformFunction: null }, helpScreenId: { classPropertyName: "helpScreenId", publicName: "helpScreenId", isSignal: true, isRequired: true, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, isIntroScreenEnabled: { classPropertyName: "isIntroScreenEnabled", publicName: "isIntroScreenEnabled", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: 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 [isPopupOpen]=\"isPopupOpen()\" (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    [isStartingNewChat]=\"isStartingNewChat()\"\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", inputs: ["isPopupOpen"], 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", "isStartingNewChat"], outputs: ["closePopup", "back", "showChatEvent", "endChat", "confirmEndChat", "cancelEndChat", "confirmStartNewChat", "cancelStartNewChat", "reviewSubmit", "reviewSkip", "startNewChat", "showHelpScreenDataEvent", "hideHelpScreenData", "navigateToUrl", "sendMessageEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    addReviewMessageToChat() {
+        // Add review message as an agent message
+        this.messages.update((msgs) => [
+            ...msgs,
+            {
+                id: Date.now(),
+                sender: 'agent',
+                senderType: 2,
+                messageContent: '',
+                sentAt: new Date(),
+                isSeen: true,
+                isReviewMessage: true,
+            },
+        ]);
+    }
+    async handleReviewSubmitFromChat(reviewData) {
+        try {
+            this.isSubmittingReview.set(true);
+            // Use the stored closed session ID for review submission
+            const sessionIdForReview = this.closedSessionIdForReview();
+            // Submit review to API endpoint using the closed session ID
+            if (sessionIdForReview) {
+                await this.chatSessionService.submitReview(sessionIdForReview, reviewData.rating, reviewData.comment || '', this.currentLang());
+            }
+            // Clear the stored session ID
+            this.closedSessionIdForReview.set(null);
+            this.isSubmittingReview.set(false);
+            // Clean up UI state after review submission
+            this.showChat.set(false);
+            this.showHelpScreenData.set(true);
+            this.messages.set([]);
+            this.needsAgent.set(false);
+            this.assistantStatus.set('idle');
+            this.selectedOption.set(null);
+            this.selectedNestedOption.set(null);
+            this.hasUserSentMessages.set(false);
+        }
+        catch (error) {
+            console.error('Error submitting review:', error);
+            this.isSubmittingReview.set(false);
+            // Clear the stored session ID even on error
+            this.closedSessionIdForReview.set(null);
+            // Clean up UI state even on error
+            this.showChat.set(false);
+            this.showHelpScreenData.set(true);
+            this.messages.set([]);
+            this.needsAgent.set(false);
+            this.assistantStatus.set('idle');
+            this.selectedOption.set(null);
+            this.selectedNestedOption.set(null);
+            this.hasUserSentMessages.set(false);
+        }
+    }
+    async handleReviewSkipFromChat() {
+        // Clear the stored session ID and clean up UI state
+        this.closedSessionIdForReview.set(null);
+        // Clean up UI state when skipping review
+        this.showChat.set(false);
+        this.showHelpScreenData.set(true);
+        this.messages.set([]);
+        this.needsAgent.set(false);
+        this.assistantStatus.set('idle');
+        this.selectedOption.set(null);
+        this.selectedNestedOption.set(null);
+        this.hasUserSentMessages.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpCenterWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: HelpCenterWidgetComponent, isStandalone: true, selector: "app-help-center-widget", inputs: { getToken: { classPropertyName: "getToken", publicName: "getToken", isSignal: true, isRequired: true, transformFunction: null }, helpScreenId: { classPropertyName: "helpScreenId", publicName: "helpScreenId", isSignal: true, isRequired: true, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, messageLabel: { classPropertyName: "messageLabel", publicName: "messageLabel", isSignal: true, isRequired: false, transformFunction: null }, currentLang: { classPropertyName: "currentLang", publicName: "currentLang", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null }, logoUrl: { classPropertyName: "logoUrl", publicName: "logoUrl", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessagesContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex flex-col items-end h-auto w-auto fixed bottom-6 right-6 z-[9998]\"\n  [dir]=\"getDirection()\"\n>\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\n    [isPopupOpen]=\"isPopupOpen()\"\n    (togglePopup)=\"handleTogglePopup()\"\n  ></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    [selectedOption]=\"selectedOption()\"\n    [selectedNestedOption]=\"selectedNestedOption()\"\n    [showEndChatConfirmation]=\"showEndChatConfirmation()\"\n    [showStartNewChatConfirmation]=\"showStartNewChatConfirmation()\"\n    [showReviewDialog]=\"showReviewDialog()\"\n    [isSubmittingReview]=\"isSubmittingReview()\"\n    [isStartingNewChat]=\"isStartingNewChat()\"\n    (closePopup)=\"handleClosePopup()\"\n    (minimizePopup)=\"handleMinimizePopup()\"\n    (back)=\"handleBack()\"\n    (showChatEvent)=\"handleShowChat()\"\n    (endChat)=\"handleEndChat()\"\n    (confirmEndChat)=\"confirmEndChat()\"\n    (cancelEndChat)=\"cancelEndChat()\"\n    (closeEndChat)=\"closeEndChat()\"\n    (confirmStartNewChat)=\"confirmStartNewChat()\"\n    (cancelStartNewChat)=\"cancelStartNewChat()\"\n    (closeStartNewChat)=\"closeStartNewChat()\"\n    (reviewSubmit)=\"handleReviewSubmit($event)\"\n    (reviewSkip)=\"handleReviewSkip()\"\n    (reviewClose)=\"handleReviewClose()\"\n    (reviewSubmitFromChat)=\"handleReviewSubmitFromChat($event)\"\n    (reviewSkipFromChat)=\"handleReviewSkipFromChat()\"\n    (sendMessageEvent)=\"sendMessage($event)\"\n    (startNewChat)=\"handleStartNewChat($event)\"\n    (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n    (navigateToUrl)=\"navigateToUrl($event)\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: \"Cairo\", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-gray-100: oklch(96.7% .003 264.542);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-xs: 20rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--text-2xl: 1.5rem;--text-2xl--line-height: calc(2 / 1.5);--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tight: -.025em;--radius-md: .375rem;--radius-lg: .5rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--animate-spin: spin 1s linear infinite;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--color-primary: var(--primary-color);--color-foreground: var(--foreground);--color-card: var(--card);--color-card-foreground: var(--card-foreground);--color-muted: var(--muted);--color-muted-foreground: var(--muted-foreground);--color-border: var(--border);--color-ring: var(--ring);--color-black-white-50: var(--black-white-50);--color-black-white-100: var(--black-white-100);--color-black-white-200: var(--black-white-200);--color-black-white-300: var(--black-white-300);--color-black-white-400: var(--black-white-400);--color-black-white-600: var(--black-white-600)}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.top-0\\.5{top:calc(var(--spacing) * .5)}.top-1\\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:calc(var(--spacing) * 0)}.right-0\\.5{right:calc(var(--spacing) * .5)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.right-6{right:calc(var(--spacing) * 6)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-11{bottom:calc(var(--spacing) * 11)}.bottom-24{bottom:calc(var(--spacing) * 24)}.bottom-\\[-8px\\]{bottom:-8px}.left-0{left:calc(var(--spacing) * 0)}.left-0\\.5{left:calc(var(--spacing) * .5)}.left-1\\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-\\[1\\]{z-index:1}.z-\\[9997\\]{z-index:9997}.z-\\[9998\\]{z-index:9998}.z-\\[9999\\]{z-index:9999}.z-\\[10001\\]{z-index:10001}.container{width:100%}@media(width>=40rem){.container{max-width:40rem}}@media(width>=48rem){.container{max-width:48rem}}@media(width>=64rem){.container{max-width:64rem}}@media(width>=80rem){.container{max-width:80rem}}@media(width>=96rem){.container{max-width:96rem}}.my-5{margin-block:calc(var(--spacing) * 5)}.ms-6{margin-inline-start:calc(var(--spacing) * 6)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.h-0{height:calc(var(--spacing) * 0)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-20{height:calc(var(--spacing) * 20)}.h-\\[50px\\]{height:50px}.h-\\[600px\\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\\[90vh\\]{max-height:90vh}.max-h-full{max-height:100%}.w-0{width:calc(var(--spacing) * 0)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-15{width:calc(var(--spacing) * 15)}.w-20{width:calc(var(--spacing) * 20)}.w-\\[50px\\]{width:50px}.w-auto{width:auto}.w-auto\\!{width:auto!important}.w-full{width:100%}.max-w-\\[80\\%\\]{max-width:80%}.max-w-\\[90vw\\]{max-width:90vw}.max-w-\\[800px\\]{max-width:800px}.max-w-full{max-width:100%}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-8{border-top-style:var(--tw-border-style);border-top-width:8px}.border-r-8{border-right-style:var(--tw-border-style);border-right-width:8px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-8{border-left-style:var(--tw-border-style);border-left-width:8px}.border-none{--tw-border-style: none;border-style:none}.border-black-white-200{border-color:var(--color-black-white-200)}.border-border{border-color:var(--color-border)}.border-primary{border-color:var(--color-primary)}.border-white\\/20{border-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.border-t-primary{border-top-color:var(--color-primary)}.border-r-transparent{border-right-color:transparent}.border-l-transparent{border-left-color:transparent}.bg-black-white-50{background-color:var(--color-black-white-50)}.bg-black-white-100{background-color:var(--color-black-white-100)}.bg-black\\/30{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\\/60{background-color:color-mix(in srgb,#000 60%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-black\\/90{background-color:color-mix(in srgb,#000 90%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/90{background-color:color-mix(in oklab,var(--color-black) 90%,transparent)}}.bg-card{background-color:var(--color-card)}.bg-muted{background-color:var(--color-muted)}.bg-primary{background-color:var(--color-primary)}.bg-primary\\/15{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.bg-primary\\/15{background-color:color-mix(in oklab,var(--color-primary) 15%,transparent)}}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-white\\/10{background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\\/10{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.bg-gradient-to-t{--tw-gradient-position: to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-card{--tw-gradient-from: var(--color-card);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\\[28\\.32\\%\\]{--tw-gradient-from-position: 28.32%}.to-transparent{--tw-gradient-to: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\\[112\\.59\\%\\]{--tw-gradient-to-position: 112.59%}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\\!{padding:calc(var(--spacing) * 3)!important}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-5\\!{padding:calc(var(--spacing) * 5)!important}.p-6{padding:calc(var(--spacing) * 6)}.p-6\\!{padding:calc(var(--spacing) * 6)!important}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.pe-2{padding-inline-end:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.leading-none{--tw-leading: 1;line-height:1}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight: var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-black-white-200{color:var(--color-black-white-200)}.text-black-white-300{color:var(--color-black-white-300)}.text-card-foreground{color:var(--color-card-foreground)}.text-foreground{color:var(--color-foreground)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.no-underline{text-decoration-line:none}.opacity-0{opacity:0%}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.opacity-100{opacity:100%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-ring{--tw-ring-color: var(--color-ring)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style: none;outline-style:none}.placeholder\\:text-black-white-400::placeholder{color:var(--color-black-white-400)}@media(hover:hover){.hover\\:translate-y-\\[-2px\\]:hover{--tw-translate-y: -2px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(hover:hover){.hover\\:scale-110:hover{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media(hover:hover){.hover\\:bg-black\\/80:hover{background-color:color-mix(in srgb,#000 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\\:bg-black\\/80:hover{background-color:color-mix(in oklab,var(--color-black) 80%,transparent)}}}@media(hover:hover){.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}}@media(hover:hover){.hover\\:bg-white\\/20:hover{background-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\\:bg-white\\/20:hover{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}}@media(hover:hover){.hover\\:text-primary:hover{color:var(--color-primary)}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}@media(hover:hover){.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:border-black-white-300:disabled{border-color:var(--color-black-white-300)}.disabled\\:bg-black-white-300:disabled{background-color:var(--color-black-white-300)}.disabled\\:text-white:disabled{color:var(--color-white)}.disabled\\:opacity-50:disabled{opacity:50%}@media(prefers-color-scheme:dark){.dark\\:border-e-black-white-600{border-inline-end-color:var(--color-black-white-600)}}@media(prefers-color-scheme:dark){.dark\\:text-muted-foreground{color:var(--color-muted-foreground)}}@media(prefers-color-scheme:dark){.dark\\:placeholder\\:text-black-white-600::placeholder{color:var(--color-black-white-600)}}}: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;--storm-dust: #3d3d3d;--storm-dust-950: #262626;--primary-color: #ad49e1;--primary-color-100: #f6ecfc;--primary-color-200: #deb6f3;--primary-color-300: #d49cee;--primary-color-400: #c57fea;--primary-color-500: #ad49e1;--primary-color-600: #672b87;--primary-color-700: #451d5a;--primary-color-800: #220e2d;--primary-color-900: #110716;--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: var(--primary-color);--radius: .5rem}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)}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;--storm-dust: #262626;--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: var(--primary-color)}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}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)}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}}html,body{font-family:var(--font-sans)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}.animate-float{animation:float 3s infinite ease-in-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.bg-header{background:linear-gradient(171deg,var(--primary-color) -131.06%,var(--black-white-50) 89.82%)}@supports (color: color-mix(in lab,red,red)){.bg-header{background:linear-gradient(171deg,color-mix(in srgb,var(--primary-color) 25%,transparent) -131.06%,color-mix(in srgb,var(--black-white-50) 25%,transparent) 89.82%)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-rotate-x{syntax: \"*\"; inherits: false;}@property --tw-rotate-y{syntax: \"*\"; inherits: false;}@property --tw-rotate-z{syntax: \"*\"; inherits: false;}@property --tw-skew-x{syntax: \"*\"; inherits: false;}@property --tw-skew-y{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: \"*\"; inherits: false;}@property --tw-gradient-from{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-via-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-from-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-duration: initial;--tw-ease: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\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", inputs: ["isPopupOpen"], 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", "selectedOption", "selectedNestedOption", "showEndChatConfirmation", "showStartNewChatConfirmation", "showReviewDialog", "isSubmittingReview", "isStartingNewChat"], outputs: ["closePopup", "minimizePopup", "back", "showChatEvent", "endChat", "confirmEndChat", "cancelEndChat", "closeEndChat", "confirmStartNewChat", "cancelStartNewChat", "closeStartNewChat", "reviewSubmit", "reviewSkip", "reviewClose", "reviewSubmitFromChat", "reviewSkipFromChat", "startNewChat", "navigateToUrl", "sendMessageEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpCenterWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-help-center-widget', standalone: true, imports: [
                         CommonModule,
@@ -3349,8 +3618,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         ArrowAnimationComponent,
                         HelpButtonComponent,
                         HelpPopupComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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 [isPopupOpen]=\"isPopupOpen()\" (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    [isStartingNewChat]=\"isStartingNewChat()\"\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"] }]
-        }], ctorParameters: () => [], propDecorators: { getToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "getToken", required: true }] }], helpScreenId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenId", required: true }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], messageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageLabel", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], isIntroScreenEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isIntroScreenEnabled", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], chatMessagesContainer: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-col items-end h-auto w-auto fixed bottom-6 right-6 z-[9998]\"\n  [dir]=\"getDirection()\"\n>\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\n    [isPopupOpen]=\"isPopupOpen()\"\n    (togglePopup)=\"handleTogglePopup()\"\n  ></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    [selectedOption]=\"selectedOption()\"\n    [selectedNestedOption]=\"selectedNestedOption()\"\n    [showEndChatConfirmation]=\"showEndChatConfirmation()\"\n    [showStartNewChatConfirmation]=\"showStartNewChatConfirmation()\"\n    [showReviewDialog]=\"showReviewDialog()\"\n    [isSubmittingReview]=\"isSubmittingReview()\"\n    [isStartingNewChat]=\"isStartingNewChat()\"\n    (closePopup)=\"handleClosePopup()\"\n    (minimizePopup)=\"handleMinimizePopup()\"\n    (back)=\"handleBack()\"\n    (showChatEvent)=\"handleShowChat()\"\n    (endChat)=\"handleEndChat()\"\n    (confirmEndChat)=\"confirmEndChat()\"\n    (cancelEndChat)=\"cancelEndChat()\"\n    (closeEndChat)=\"closeEndChat()\"\n    (confirmStartNewChat)=\"confirmStartNewChat()\"\n    (cancelStartNewChat)=\"cancelStartNewChat()\"\n    (closeStartNewChat)=\"closeStartNewChat()\"\n    (reviewSubmit)=\"handleReviewSubmit($event)\"\n    (reviewSkip)=\"handleReviewSkip()\"\n    (reviewClose)=\"handleReviewClose()\"\n    (reviewSubmitFromChat)=\"handleReviewSubmitFromChat($event)\"\n    (reviewSkipFromChat)=\"handleReviewSkipFromChat()\"\n    (sendMessageEvent)=\"sendMessage($event)\"\n    (startNewChat)=\"handleStartNewChat($event)\"\n    (showHelpScreenDataEvent)=\"handleShowHelpScreenData()\"\n    (navigateToUrl)=\"navigateToUrl($event)\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";@layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: \"Cairo\", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-gray-100: oklch(96.7% .003 264.542);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-xs: 20rem;--text-xs: .75rem;--text-xs--line-height: calc(1 / .75);--text-sm: .875rem;--text-sm--line-height: calc(1.25 / .875);--text-base: 1rem;--text-base--line-height: 1.5 ;--text-lg: 1.125rem;--text-lg--line-height: calc(1.75 / 1.125);--text-xl: 1.25rem;--text-xl--line-height: calc(1.75 / 1.25);--text-2xl: 1.5rem;--text-2xl--line-height: calc(2 / 1.5);--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tight: -.025em;--radius-md: .375rem;--radius-lg: .5rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--animate-spin: spin 1s linear infinite;--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--color-primary: var(--primary-color);--color-foreground: var(--foreground);--color-card: var(--card);--color-card-foreground: var(--card-foreground);--color-muted: var(--muted);--color-muted-foreground: var(--muted-foreground);--color-border: var(--border);--color-ring: var(--ring);--color-black-white-50: var(--black-white-50);--color-black-white-100: var(--black-white-100);--color-black-white-200: var(--black-white-200);--color-black-white-300: var(--black-white-300);--color-black-white-400: var(--black-white-400);--color-black-white-600: var(--black-white-600)}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:currentcolor}@supports (color: color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.top-0\\.5{top:calc(var(--spacing) * .5)}.top-1\\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:calc(var(--spacing) * 0)}.right-0\\.5{right:calc(var(--spacing) * .5)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.right-6{right:calc(var(--spacing) * 6)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-11{bottom:calc(var(--spacing) * 11)}.bottom-24{bottom:calc(var(--spacing) * 24)}.bottom-\\[-8px\\]{bottom:-8px}.left-0{left:calc(var(--spacing) * 0)}.left-0\\.5{left:calc(var(--spacing) * .5)}.left-1\\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-\\[1\\]{z-index:1}.z-\\[9997\\]{z-index:9997}.z-\\[9998\\]{z-index:9998}.z-\\[9999\\]{z-index:9999}.z-\\[10001\\]{z-index:10001}.container{width:100%}@media(width>=40rem){.container{max-width:40rem}}@media(width>=48rem){.container{max-width:48rem}}@media(width>=64rem){.container{max-width:64rem}}@media(width>=80rem){.container{max-width:80rem}}@media(width>=96rem){.container{max-width:96rem}}.my-5{margin-block:calc(var(--spacing) * 5)}.ms-6{margin-inline-start:calc(var(--spacing) * 6)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.h-0{height:calc(var(--spacing) * 0)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-20{height:calc(var(--spacing) * 20)}.h-\\[50px\\]{height:50px}.h-\\[600px\\]{height:600px}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-\\[90vh\\]{max-height:90vh}.max-h-full{max-height:100%}.w-0{width:calc(var(--spacing) * 0)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-15{width:calc(var(--spacing) * 15)}.w-20{width:calc(var(--spacing) * 20)}.w-\\[50px\\]{width:50px}.w-auto{width:auto}.w-auto\\!{width:auto!important}.w-full{width:100%}.max-w-\\[80\\%\\]{max-width:80%}.max-w-\\[90vw\\]{max-width:90vw}.max-w-\\[800px\\]{max-width:800px}.max-w-full{max-width:100%}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-8{border-top-style:var(--tw-border-style);border-top-width:8px}.border-r-8{border-right-style:var(--tw-border-style);border-right-width:8px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-8{border-left-style:var(--tw-border-style);border-left-width:8px}.border-none{--tw-border-style: none;border-style:none}.border-black-white-200{border-color:var(--color-black-white-200)}.border-border{border-color:var(--color-border)}.border-primary{border-color:var(--color-primary)}.border-white\\/20{border-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.border-t-primary{border-top-color:var(--color-primary)}.border-r-transparent{border-right-color:transparent}.border-l-transparent{border-left-color:transparent}.bg-black-white-50{background-color:var(--color-black-white-50)}.bg-black-white-100{background-color:var(--color-black-white-100)}.bg-black\\/30{background-color:color-mix(in srgb,#000 30%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\\/60{background-color:color-mix(in srgb,#000 60%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-black\\/90{background-color:color-mix(in srgb,#000 90%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-black\\/90{background-color:color-mix(in oklab,var(--color-black) 90%,transparent)}}.bg-card{background-color:var(--color-card)}.bg-muted{background-color:var(--color-muted)}.bg-primary{background-color:var(--color-primary)}.bg-primary\\/15{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){.bg-primary\\/15{background-color:color-mix(in oklab,var(--color-primary) 15%,transparent)}}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-white\\/10{background-color:color-mix(in srgb,#fff 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.bg-white\\/10{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.bg-gradient-to-t{--tw-gradient-position: to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-card{--tw-gradient-from: var(--color-card);--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\\[28\\.32\\%\\]{--tw-gradient-from-position: 28.32%}.to-transparent{--tw-gradient-to: transparent;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\\[112\\.59\\%\\]{--tw-gradient-to-position: 112.59%}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\\!{padding:calc(var(--spacing) * 3)!important}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-5\\!{padding:calc(var(--spacing) * 5)!important}.p-6{padding:calc(var(--spacing) * 6)}.p-6\\!{padding:calc(var(--spacing) * 6)!important}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.pe-2{padding-inline-end:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading, var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading, var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.leading-none{--tw-leading: 1;line-height:1}.font-bold{--tw-font-weight: var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight: var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking: var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-black-white-200{color:var(--color-black-white-200)}.text-black-white-300{color:var(--color-black-white-300)}.text-card-foreground{color:var(--color-card-foreground)}.text-foreground{color:var(--color-foreground)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.no-underline{text-decoration-line:none}.opacity-0{opacity:0%}.opacity-30{opacity:30%}.opacity-60{opacity:60%}.opacity-80{opacity:80%}.opacity-100{opacity:100%}.shadow-lg{--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-ring{--tw-ring-color: var(--color-ring)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.ease-in-out{--tw-ease: var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style: none;outline-style:none}.placeholder\\:text-black-white-400::placeholder{color:var(--color-black-white-400)}@media(hover:hover){.hover\\:translate-y-\\[-2px\\]:hover{--tw-translate-y: -2px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(hover:hover){.hover\\:scale-110:hover{--tw-scale-x: 110%;--tw-scale-y: 110%;--tw-scale-z: 110%;scale:var(--tw-scale-x) var(--tw-scale-y)}}@media(hover:hover){.hover\\:bg-black\\/80:hover{background-color:color-mix(in srgb,#000 80%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\\:bg-black\\/80:hover{background-color:color-mix(in oklab,var(--color-black) 80%,transparent)}}}@media(hover:hover){.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}}@media(hover:hover){.hover\\:bg-white\\/20:hover{background-color:color-mix(in srgb,#fff 20%,transparent)}@supports (color: color-mix(in lab,red,red)){.hover\\:bg-white\\/20:hover{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}}@media(hover:hover){.hover\\:text-primary:hover{color:var(--color-primary)}}@media(hover:hover){.hover\\:opacity-80:hover{opacity:80%}}@media(hover:hover){.hover\\:opacity-100:hover{opacity:100%}}@media(hover:hover){.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:border-black-white-300:disabled{border-color:var(--color-black-white-300)}.disabled\\:bg-black-white-300:disabled{background-color:var(--color-black-white-300)}.disabled\\:text-white:disabled{color:var(--color-white)}.disabled\\:opacity-50:disabled{opacity:50%}@media(prefers-color-scheme:dark){.dark\\:border-e-black-white-600{border-inline-end-color:var(--color-black-white-600)}}@media(prefers-color-scheme:dark){.dark\\:text-muted-foreground{color:var(--color-muted-foreground)}}@media(prefers-color-scheme:dark){.dark\\:placeholder\\:text-black-white-600::placeholder{color:var(--color-black-white-600)}}}: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;--storm-dust: #3d3d3d;--storm-dust-950: #262626;--primary-color: #ad49e1;--primary-color-100: #f6ecfc;--primary-color-200: #deb6f3;--primary-color-300: #d49cee;--primary-color-400: #c57fea;--primary-color-500: #ad49e1;--primary-color-600: #672b87;--primary-color-700: #451d5a;--primary-color-800: #220e2d;--primary-color-900: #110716;--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: var(--primary-color);--radius: .5rem}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)}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;--storm-dust: #262626;--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: var(--primary-color)}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}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)}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}}html,body{font-family:var(--font-sans)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%,60%,to{transform:initial}30%{transform:translateY(-10px)}}@keyframes circular-progress{0%{stroke-dashoffset:100.48}50%{stroke-dashoffset:25.12}to{stroke-dashoffset:100.48}}.animate-float{animation:float 3s infinite ease-in-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.bg-header{background:linear-gradient(171deg,var(--primary-color) -131.06%,var(--black-white-50) 89.82%)}@supports (color: color-mix(in lab,red,red)){.bg-header{background:linear-gradient(171deg,color-mix(in srgb,var(--primary-color) 25%,transparent) -131.06%,color-mix(in srgb,var(--black-white-50) 25%,transparent) 89.82%)}}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-rotate-x{syntax: \"*\"; inherits: false;}@property --tw-rotate-y{syntax: \"*\"; inherits: false;}@property --tw-rotate-z{syntax: \"*\"; inherits: false;}@property --tw-skew-x{syntax: \"*\"; inherits: false;}@property --tw-skew-y{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-gradient-position{syntax: \"*\"; inherits: false;}@property --tw-gradient-from{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-via{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-to{syntax: \"<color>\"; inherits: false; initial-value: #0000;}@property --tw-gradient-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-via-stops{syntax: \"*\"; inherits: false;}@property --tw-gradient-from-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}@property --tw-gradient-via-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 50%;}@property --tw-gradient-to-position{syntax: \"<length-percentage>\"; inherits: false; initial-value: 100%;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-border-style: solid;--tw-gradient-position: initial;--tw-gradient-from: #0000;--tw-gradient-via: #0000;--tw-gradient-to: #0000;--tw-gradient-stops: initial;--tw-gradient-via-stops: initial;--tw-gradient-from-position: 0%;--tw-gradient-via-position: 50%;--tw-gradient-to-position: 100%;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-outline-style: solid;--tw-duration: initial;--tw-ease: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { getToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "getToken", required: true }] }], helpScreenId: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpScreenId", required: true }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], messageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageLabel", required: false }] }], currentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLang", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }], logoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoUrl", required: false }] }], chatMessagesContainer: [{
                 type: ViewChild,
                 args: ['chatMessagesContainer']
             }] } });
@@ -3378,10 +3647,10 @@ class HelpCenterConfigService {
     getTokenFn() {
         return this._getTokenFn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpCenterConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpCenterConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HelpCenterConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HelpCenterConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3417,10 +3686,10 @@ class TokenService {
         // Otherwise, return error that getTokenFn is not provided
         throw new Error('getTokenFn is not provided');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TokenService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TokenService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TokenService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'