@aakash58/chatbot 1.0.89 → 1.0.91

package/fesm2022/aakash58-chatbot.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ViewChild, HostListener, Directive, signal, Injectable, Inject, inject, InjectionToken, computed, effect, ElementRef, ChangeDetectionStrategy, provideAppInitializer, ContentChildren } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewChild, HostListener, Directive, signal, Injectable, Inject, inject, InjectionToken, computed, effect, ElementRef, ChangeDetectionStrategy, provideAppInitializer, ContentChildren, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/material/icon';
@@ -1044,7 +1044,7 @@ class ChatWindowComponent {
     }
     ngOnDestroy() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ChatWindowComponent, isStandalone: true, selector: "app-chat-window", inputs: { isChatOpen: "isChatOpen", enableDrag: "enableDrag", enableResize: "enableResize", isFullScreen: "isFullScreen", isAuthenticated: "isAuthenticated", appTitle: "appTitle", appLogoUrl: "appLogoUrl", appTextLogoUrl: "appTextLogoUrl", appHeaderLogoUrl: "appHeaderLogoUrl", moreIcon: "moreIcon", minimizeIcon: "minimizeIcon", messages: "messages", isBotTyping: "isBotTyping", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", userName: "userName", trackByMessageId: "trackByMessageId", hintText: "hintText", sendIcon: "sendIcon", messageError: "messageError", showSuggestionChips: "showSuggestionChips", isHistorySidebarOpen: "isHistorySidebarOpen", chatSessions: "chatSessions", chatHistoryUserName: "chatHistoryUserName", isGuestUser: "isGuestUser", isGuestMode: "isGuestMode", isLoggingIn: "isLoggingIn", authError: "authError", authSuccess: "authSuccess", themeConfig: "themeConfig" }, outputs: { toggleChat: "toggleChat", toggleFullScreen: "toggleFullScreen", toggleHistorySidebar: "toggleHistorySidebar", openSettings: "openSettings", suggestionClick: "suggestionClick", send: "send", clearMessageError: "clearMessageError", clearChat: "clearChat", sessionSelected: "sessionSelected", sessionDeleted: "sessionDeleted", continueAsGuest: "continueAsGuest", loginClick: "loginClick", loginSubmit: "loginSubmit", logout: "logout" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"isChatOpen\"\r\n  draggableDialog\r\n  [enableDrag]=\"enableDrag\"\r\n  [dragHandle]=\"'.chat-header'\"\r\n  resizableDialog\r\n  [enableResize]=\"enableResize\"\r\n  class=\"chat-window\"\r\n  [class.fullscreen]=\"isFullScreen\"\r\n>\r\n  <!-- chat window -->\r\n  <div class=\"chat-header\">\r\n    <div class=\"chat-title\">\r\n      <img\r\n        class=\"chat-logo\"\r\n        style=\"width: 150px; height: 50px; margin-left: 0px\"\r\n        [src]=\"appHeaderLogoUrl\"\r\n        alt=\"Text-Logo\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"chat-header-buttons\">\r\n      <!-- New Chat Button -->\r\n      <!-- <button class=\"header-button\" (click)=\"createNewChat()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button> -->\r\n\r\n      <!-- <app-dropdown-menu>\r\n        <span trigger>\u2630</span>\r\n\r\n        <app-menu-item (selected)=\"onToggleFullScreen()\"> My Profile </app-menu-item>\r\n\r\n        <app-menu-item> Settings </app-menu-item>\r\n\r\n        <app-menu-item> Logout </app-menu-item>\r\n      </app-dropdown-menu> -->\r\n\r\n      <!-- History Button -->\r\n      <button\r\n        class=\"header-button\"\r\n        *ngIf=\"isAuthenticated\"\r\n        (click)=\"onToggleHistorySidebar()\"\r\n        title=\"Chat History\"\r\n      >\r\n        <mat-icon>history</mat-icon>\r\n      </button>\r\n\r\n      <!-- settings Button -->\r\n      <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n        <mat-icon>{{ moreIcon }}</mat-icon>\r\n      </button>\r\n\r\n      <!-- minimize Button -->\r\n      <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n        <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area: Toggle between Messages and History -->\r\n  <!-- <popout-window\r\n    #popout\r\n    [windowTitle]=\"appTitle || 'Chat'\"\r\n    [windowWidth]=\"400\"\r\n    [windowHeight]=\"620\"\r\n    (shown)=\"onPopoutShown($event)\"\r\n  > -->\r\n  <div class=\"chat-content-wrapper\">\r\n    <!-- Chat History View -->\r\n    <app-chat-history-sidebar\r\n      [sessions]=\"chatSessions\"\r\n      [isOpen]=\"isHistorySidebarOpen\"\r\n      [userName]=\"chatHistoryUserName\"\r\n      (sessionSelected)=\"onSessionSelected($event)\"\r\n      (sessionDeleted)=\"onSessionDeleted($event)\"\r\n      (closed)=\"onToggleHistorySidebar()\"\r\n    >\r\n    </app-chat-history-sidebar>\r\n\r\n    <!-- Messages View -->\r\n    <div class=\"messages-view\" [class.hidden]=\"isHistorySidebarOpen\">\r\n      <!-- Messages / Welcome Screen -->\r\n      <app-message-list\r\n        *ngIf=\"!showLoginForm\"\r\n        [messages]=\"messages\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [appLogoUrl]=\"appLogoUrl\"\r\n        [appSubtitle]=\"appSubtitle\"\r\n        [welcomeDesc]=\"welcomeDesc\"\r\n        [predefinedMessages]=\"predefinedMessages\"\r\n        [botAvatarUrl]=\"botAvatarUrl\"\r\n        [userAvatarUrl]=\"userAvatarUrl\"\r\n        [userName]=\"userName\"\r\n        [trackByMessageId]=\"trackByMessageId\"\r\n        [isAuthenticated]=\"isAuthenticated\"\r\n        [isGuestMode]=\"isGuestMode\"\r\n        (suggestionClick)=\"onSuggestionClick($event)\"\r\n        (loginClick)=\"onLoginClick()\"\r\n        (continueAsGuest)=\"onContinueAsGuest()\"\r\n      ></app-message-list>\r\n\r\n      <!--  SUGGESTED CHIPS: Show only if last bot message was fallback AND user is authenticated -->\r\n      <app-chips\r\n        *ngIf=\"showSuggestionChips && (isAuthenticated || isGuestMode)\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!-- Chat Input: Only show when authenticated or guest mode -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated || isGuestMode\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [hintText]=\"hintText\"\r\n        [sendIcon]=\"sendIcon\"\r\n        (send)=\"onSend($event)\"\r\n      ></app-message-input>\r\n\r\n      <!-- Login Form -->\r\n\r\n      <form\r\n        *ngIf=\"showLoginForm && !isAuthenticated\"\r\n        class=\"login-form-container\"\r\n        (ngSubmit)=\"onLoginSubmit()\"\r\n        autocomplete=\"on\"\r\n        #loginForm=\"ngForm\"\r\n      >\r\n        <h3 class=\"login-title\">Login to Doohbot</h3>\r\n\r\n        <div class=\"login-fields\">\r\n          <!-- Username Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Username</label>\r\n            <input\r\n              type=\"text\"\r\n              name=\"username\"\r\n              [(ngModel)]=\"loginUsername\"\r\n              #username=\"ngModel\"\r\n              placeholder=\"Enter your username\"\r\n              class=\"login-input\"\r\n              required\r\n              autocomplete=\"username\"\r\n            />\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"username.invalid && (username.dirty || username.touched)\"\r\n            >\r\n              Username is required\r\n            </span>\r\n          </div>\r\n\r\n          <!-- Password Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Password</label>\r\n            <div class=\"password-wrapper\">\r\n              <input\r\n                [type]=\"showPassword ? 'text' : 'password'\"\r\n                name=\"password\"\r\n                [(ngModel)]=\"loginPassword\"\r\n                #password=\"ngModel\"\r\n                placeholder=\"Enter your password\"\r\n                class=\"login-input password-input\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n              />\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn\"\r\n                (click)=\"togglePasswordVisibility()\"\r\n                tabindex=\"-1\"\r\n              >\r\n                <mat-icon>\r\n                  {{ showPassword ? 'visibility' : 'visibility_off' }}\r\n                </mat-icon>\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"password.invalid && (password.dirty || password.touched)\"\r\n            >\r\n              Password is required\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"login-actions\">\r\n          <button type=\"button\" (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"loginForm.invalid || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Login' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n\r\n      <!--  Auth error snackbar (login/logout errors only) -->\r\n      <app-snackbar\r\n        *ngIf=\"authError\"\r\n        [message]=\"authError\"\r\n        (closed)=\"onClearAuthError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- footer -->\r\n      <div class=\"terms-conditions\">\r\n        <a href=\"#\">Terms and Conditions</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- </popout-window> -->\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\">\r\n  <!-- Change Theme -->\r\n  <div class=\"theme-selector\">\r\n    <!-- Auto Theme (inherits from parent app) -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'auto'\"\r\n      (click)=\"themeService.setTheme('auto')\"\r\n    >\r\n      <mat-icon>brightness_auto</mat-icon>\r\n    </button>\r\n\r\n    <!-- Light Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'light'\"\r\n      (click)=\"themeService.setTheme('light')\"\r\n    >\r\n      <mat-icon>light_mode</mat-icon>\r\n    </button>\r\n\r\n    <!-- Dark Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'dark'\"\r\n      (click)=\"themeService.setTheme('dark')\"\r\n    >\r\n      <mat-icon>dark_mode</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Popout Button -->\r\n  <!-- <button mat-menu-item (click)=\"popout.popOut()\" style=\"display: flex; align-items: center\">\r\n      <mat-icon>open_in_new</mat-icon>\r\n      <span>Popout Widget</span>\r\n    </button> -->\r\n\r\n  <!-- Full-Screen Button -->\r\n  <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n  </button>\r\n\r\n  <!-- Clear Chat -->\r\n  <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>clear_all</mat-icon>\r\n    <span>Clear Chat</span>\r\n  </button>\r\n\r\n  <!-- Logout -->\r\n  <button\r\n    mat-menu-item\r\n    *ngIf=\"isAuthenticated\"\r\n    (click)=\"onLogout()\"\r\n    style=\"display: flex; align-items: center\"\r\n  >\r\n    <mat-icon>logout</mat-icon>\r\n    <span>Logout</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel{background-color:#8b8b8b!important;color:#fff!important;border-radius:8px!important;padding:4px 0!important;box-shadow:0 4px 16px #00000040!important;border-color:#ccc!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item mat-icon{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover{background-color:#5c5c5c!important;color:#f5f5f5!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover mat-icon{color:#f5f5f5!important}.doohbot-container{position:fixed;bottom:20px;right:20px;z-index:1000}.chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none;z-index:2147483647!important}@keyframes slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--button-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.chat-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.messages-view{display:flex;flex-direction:column;height:100%;width:100%}.messages-view.hidden{display:none}.messages-view app-message-list{flex:1;min-height:0}.messages-view app-snackbar{flex-shrink:0;margin-top:auto}.messages-view app-message-input{flex-shrink:0}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:var(--white);transition:color .2s ease}.theme-btn.selected{color:var(--black)}.auth-prompt-container{padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;text-align:center;height:100%}.auth-prompt-container .auth-prompt-text{margin:0;font-size:.95em;opacity:.8;color:var(--text-color)}.auth-prompt-container .auth-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.auth-btn{padding:8px 18px;border-radius:20px;cursor:pointer;font-size:.9em;font-weight:500;transition:all .2s ease}.auth-btn.primary{background:var(--primary-color);color:var(--white);border:1px solid var(--primary-color)}.auth-btn.primary:hover{opacity:.9}.auth-btn.primary:disabled{opacity:.5;cursor:not-allowed}.auth-btn.secondary{background:transparent;color:var(--re);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}.login-form-container{padding:30px;display:flex;flex-direction:column;gap:20px;height:100%;justify-content:center;align-items:center;margin:0 auto;box-sizing:border-box;max-width:400px;width:100%;animation:fadeIn .3s ease-in-out}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.5em;color:var(--text-color);font-family:var(--font-family);font-weight:600}.login-form-container .login-fields{display:flex;flex-direction:column;gap:15px;width:100%}.login-form-container .login-fields .login-input{padding:10px 12px;border-radius:8px;border:1px solid var(--border-color);font-size:.9em;background:var(--background-color);color:var(--text-color);width:100%;box-sizing:border-box}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-fields .password-wrapper{position:relative;display:flex;align-items:center}.login-form-container .login-fields .password-wrapper .login-input{width:100%;padding-right:40px;box-sizing:border-box}.login-form-container .login-fields .password-wrapper .password-toggle-btn{position:absolute;right:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color);opacity:.6;transition:opacity .2s}.login-form-container .login-fields .password-wrapper .password-toggle-btn:hover{opacity:1}.login-form-container .login-fields .password-wrapper .password-toggle-btn mat-icon{font-size:20px;width:20px;height:20px}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.login-form-container .input-group{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}.login-form-container .input-label{font-size:.85em;color:var(--text-color);font-family:var(--font-family);font-weight:500;margin-left:2px}.login-form-container .error-text{font-size:.6em;color:var(--red);margin-top:2px;margin-left:2px;font-family:var(--font-family)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "component", type: MessageListComponent, selector: "app-message-list", inputs: ["messages", "isBotTyping", "appLogoUrl", "appSubtitle", "welcomeDesc", "predefinedMessages", "botAvatarUrl", "userAvatarUrl", "userName", "isAuthenticated", "isGuestMode", "trackByMessageId"], outputs: ["suggestionClick", "loginClick", "continueAsGuest"] }, { kind: "component", type: MessageInputComponent, selector: "app-message-input", inputs: ["isBotTyping", "hintText", "sendIcon"], outputs: ["send"] }, { kind: "component", type: SnackBar, selector: "app-snackbar", inputs: ["message", "autoDismiss", "dismissDelay", "show"], outputs: ["closed"] }, { kind: "directive", type: DraggableDialogDirective, selector: "[draggableDialog]", inputs: ["dragHandle", "enableDrag"] }, { kind: "directive", type: ResizableDialogDirective, selector: "[resizableDialog]", inputs: ["enableResize"] }, { kind: "component", type: ChatHistorySidebarComponent, selector: "app-chat-history-sidebar", inputs: ["sessions", "isOpen", "userName"], outputs: ["sessionSelected", "sessionDeleted", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ChatWindowComponent, isStandalone: true, selector: "app-chat-window", inputs: { isChatOpen: "isChatOpen", enableDrag: "enableDrag", enableResize: "enableResize", isFullScreen: "isFullScreen", isAuthenticated: "isAuthenticated", appTitle: "appTitle", appLogoUrl: "appLogoUrl", appTextLogoUrl: "appTextLogoUrl", appHeaderLogoUrl: "appHeaderLogoUrl", moreIcon: "moreIcon", minimizeIcon: "minimizeIcon", messages: "messages", isBotTyping: "isBotTyping", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", userName: "userName", trackByMessageId: "trackByMessageId", hintText: "hintText", sendIcon: "sendIcon", messageError: "messageError", showSuggestionChips: "showSuggestionChips", isHistorySidebarOpen: "isHistorySidebarOpen", chatSessions: "chatSessions", chatHistoryUserName: "chatHistoryUserName", isGuestUser: "isGuestUser", isGuestMode: "isGuestMode", isLoggingIn: "isLoggingIn", authError: "authError", authSuccess: "authSuccess", themeConfig: "themeConfig" }, outputs: { toggleChat: "toggleChat", toggleFullScreen: "toggleFullScreen", toggleHistorySidebar: "toggleHistorySidebar", openSettings: "openSettings", suggestionClick: "suggestionClick", send: "send", clearMessageError: "clearMessageError", clearChat: "clearChat", sessionSelected: "sessionSelected", sessionDeleted: "sessionDeleted", continueAsGuest: "continueAsGuest", loginClick: "loginClick", loginSubmit: "loginSubmit", logout: "logout" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"isChatOpen\"\r\n  draggableDialog\r\n  [enableDrag]=\"enableDrag\"\r\n  [dragHandle]=\"'.chat-header'\"\r\n  resizableDialog\r\n  [enableResize]=\"enableResize\"\r\n  class=\"chat-window\"\r\n  [class.fullscreen]=\"isFullScreen\"\r\n>\r\n  <!-- chat window -->\r\n  <div class=\"chat-header\">\r\n    <div class=\"chat-title\">\r\n      <img\r\n        class=\"chat-logo\"\r\n        style=\"width: 150px; height: 50px; margin-left: 0px\"\r\n        [src]=\"appHeaderLogoUrl\"\r\n        alt=\"Text-Logo\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"chat-header-buttons\">\r\n      <!-- New Chat Button -->\r\n      <!-- <button class=\"header-button\" (click)=\"createNewChat()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button> -->\r\n\r\n      <!-- <app-dropdown-menu>\r\n        <span trigger>\u2630</span>\r\n\r\n        <app-menu-item (selected)=\"onToggleFullScreen()\"> My Profile </app-menu-item>\r\n\r\n        <app-menu-item> Settings </app-menu-item>\r\n\r\n        <app-menu-item> Logout </app-menu-item>\r\n      </app-dropdown-menu> -->\r\n\r\n      <!-- History Button -->\r\n      <button\r\n        class=\"header-button\"\r\n        *ngIf=\"isAuthenticated\"\r\n        (click)=\"onToggleHistorySidebar()\"\r\n        title=\"Chat History\"\r\n      >\r\n        <mat-icon>history</mat-icon>\r\n      </button>\r\n\r\n      <!-- settings Button -->\r\n      <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n        <mat-icon>{{ moreIcon }}</mat-icon>\r\n      </button>\r\n\r\n      <!-- minimize Button -->\r\n      <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n        <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area: Toggle between Messages and History -->\r\n  <!-- <popout-window\r\n    #popout\r\n    [windowTitle]=\"appTitle || 'Chat'\"\r\n    [windowWidth]=\"400\"\r\n    [windowHeight]=\"620\"\r\n    (shown)=\"onPopoutShown($event)\"\r\n  > -->\r\n  <div class=\"chat-content-wrapper\">\r\n    <!-- Chat History View -->\r\n    <app-chat-history-sidebar\r\n      [sessions]=\"chatSessions\"\r\n      [isOpen]=\"isHistorySidebarOpen\"\r\n      [userName]=\"chatHistoryUserName\"\r\n      (sessionSelected)=\"onSessionSelected($event)\"\r\n      (sessionDeleted)=\"onSessionDeleted($event)\"\r\n      (closed)=\"onToggleHistorySidebar()\"\r\n    >\r\n    </app-chat-history-sidebar>\r\n\r\n    <!-- Messages View -->\r\n    <div class=\"messages-view\" [class.hidden]=\"isHistorySidebarOpen\">\r\n      <!-- Messages / Welcome Screen -->\r\n      <app-message-list\r\n        *ngIf=\"!showLoginForm\"\r\n        [messages]=\"messages\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [appLogoUrl]=\"appLogoUrl\"\r\n        [appSubtitle]=\"appSubtitle\"\r\n        [welcomeDesc]=\"welcomeDesc\"\r\n        [predefinedMessages]=\"predefinedMessages\"\r\n        [botAvatarUrl]=\"botAvatarUrl\"\r\n        [userAvatarUrl]=\"userAvatarUrl\"\r\n        [userName]=\"userName\"\r\n        [trackByMessageId]=\"trackByMessageId\"\r\n        [isAuthenticated]=\"isAuthenticated\"\r\n        [isGuestMode]=\"isGuestMode\"\r\n        (suggestionClick)=\"onSuggestionClick($event)\"\r\n        (loginClick)=\"onLoginClick()\"\r\n        (continueAsGuest)=\"onContinueAsGuest()\"\r\n      ></app-message-list>\r\n\r\n      <!--  SUGGESTED CHIPS: Show only if last bot message was fallback AND user is authenticated -->\r\n      <app-chips\r\n        *ngIf=\"showSuggestionChips && (isAuthenticated || isGuestMode)\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!-- Chat Input: Only show when authenticated or guest mode -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated || isGuestMode\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [hintText]=\"hintText\"\r\n        [sendIcon]=\"sendIcon\"\r\n        (send)=\"onSend($event)\"\r\n      ></app-message-input>\r\n\r\n      <!-- Login Form -->\r\n\r\n      <form\r\n        *ngIf=\"showLoginForm && !isAuthenticated\"\r\n        class=\"login-form-container\"\r\n        (ngSubmit)=\"onLoginSubmit()\"\r\n        autocomplete=\"on\"\r\n        #loginForm=\"ngForm\"\r\n      >\r\n        <h3 class=\"login-title\">Login to Doohbot</h3>\r\n\r\n        <div class=\"login-fields\">\r\n          <!-- Username Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Username</label>\r\n            <input\r\n              type=\"text\"\r\n              name=\"username\"\r\n              [(ngModel)]=\"loginUsername\"\r\n              #username=\"ngModel\"\r\n              placeholder=\"Enter your username\"\r\n              class=\"login-input\"\r\n              required\r\n              autocomplete=\"username\"\r\n            />\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"username.invalid && (username.dirty || username.touched)\"\r\n            >\r\n              Username is required\r\n            </span>\r\n          </div>\r\n\r\n          <!-- Password Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Password</label>\r\n            <div class=\"password-wrapper\">\r\n              <input\r\n                [type]=\"showPassword ? 'text' : 'password'\"\r\n                name=\"password\"\r\n                [(ngModel)]=\"loginPassword\"\r\n                #password=\"ngModel\"\r\n                placeholder=\"Enter your password\"\r\n                class=\"login-input password-input\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n              />\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn\"\r\n                (click)=\"togglePasswordVisibility()\"\r\n                tabindex=\"-1\"\r\n              >\r\n                <mat-icon>\r\n                  {{ showPassword ? 'visibility' : 'visibility_off' }}\r\n                </mat-icon>\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"password.invalid && (password.dirty || password.touched)\"\r\n            >\r\n              Password is required\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"login-actions\">\r\n          <button type=\"button\" (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"loginForm.invalid || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Login' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n\r\n      <!--  Auth error snackbar (login/logout errors only) -->\r\n      <app-snackbar\r\n        *ngIf=\"authError\"\r\n        [message]=\"authError\"\r\n        (closed)=\"onClearAuthError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- footer -->\r\n      <div class=\"terms-conditions\">\r\n        <a href=\"#\">Terms and Conditions</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- </popout-window> -->\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\">\r\n  <!-- Change Theme -->\r\n  <div class=\"theme-selector\">\r\n    <!-- Auto Theme (inherits from parent app) -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'auto'\"\r\n      (click)=\"themeService.setTheme('auto')\"\r\n    >\r\n      <mat-icon>brightness_auto</mat-icon>\r\n    </button>\r\n\r\n    <!-- Light Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'light'\"\r\n      (click)=\"themeService.setTheme('light')\"\r\n    >\r\n      <mat-icon>light_mode</mat-icon>\r\n    </button>\r\n\r\n    <!-- Dark Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'dark'\"\r\n      (click)=\"themeService.setTheme('dark')\"\r\n    >\r\n      <mat-icon>dark_mode</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Popout Button -->\r\n  <!-- <button mat-menu-item (click)=\"popout.popOut()\" style=\"display: flex; align-items: center\">\r\n      <mat-icon>open_in_new</mat-icon>\r\n      <span>Popout Widget</span>\r\n    </button> -->\r\n\r\n  <!-- Full-Screen Button -->\r\n  <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n  </button>\r\n\r\n  <!-- Clear Chat -->\r\n  <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>clear_all</mat-icon>\r\n    <span>Clear Chat</span>\r\n  </button>\r\n\r\n  <!-- Logout -->\r\n  <button\r\n    mat-menu-item\r\n    *ngIf=\"isAuthenticated\"\r\n    (click)=\"onLogout()\"\r\n    style=\"display: flex; align-items: center\"\r\n  >\r\n    <mat-icon>logout</mat-icon>\r\n    <span>Logout</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel{background-color:#8b8b8b!important;color:#fff!important;border-radius:8px!important;padding:4px 0!important;box-shadow:0 4px 16px #00000040!important;border-color:#ccc!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;position:relative}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item mat-icon{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover{background-color:#5c5c5c!important;color:#f5f5f5!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover mat-icon{color:#f5f5f5!important}.doohbot-container{position:fixed;bottom:20px;right:20px;z-index:1000}.chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--button-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.chat-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.messages-view{display:flex;flex-direction:column;height:100%;width:100%}.messages-view.hidden{display:none}.messages-view app-message-list{flex:1;min-height:0}.messages-view app-snackbar{flex-shrink:0;margin-top:auto}.messages-view app-message-input{flex-shrink:0}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:var(--white);transition:color .2s ease}.theme-btn.selected{color:var(--black)}.auth-prompt-container{padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;text-align:center;height:100%}.auth-prompt-container .auth-prompt-text{margin:0;font-size:.95em;opacity:.8;color:var(--text-color)}.auth-prompt-container .auth-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.auth-btn{padding:8px 18px;border-radius:20px;cursor:pointer;font-size:.9em;font-weight:500;transition:all .2s ease}.auth-btn.primary{background:var(--primary-color);color:var(--white);border:1px solid var(--primary-color)}.auth-btn.primary:hover{opacity:.9}.auth-btn.primary:disabled{opacity:.5;cursor:not-allowed}.auth-btn.secondary{background:transparent;color:var(--re);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}.login-form-container{padding:30px;display:flex;flex-direction:column;gap:20px;height:100%;justify-content:center;align-items:center;margin:0 auto;box-sizing:border-box;max-width:400px;width:100%;animation:fadeIn .3s ease-in-out}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.5em;color:var(--text-color);font-family:var(--font-family);font-weight:600}.login-form-container .login-fields{display:flex;flex-direction:column;gap:15px;width:100%}.login-form-container .login-fields .login-input{padding:10px 12px;border-radius:8px;border:1px solid var(--border-color);font-size:.9em;background:var(--background-color);color:var(--text-color);width:100%;box-sizing:border-box}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-fields .password-wrapper{position:relative;display:flex;align-items:center}.login-form-container .login-fields .password-wrapper .login-input{width:100%;padding-right:40px;box-sizing:border-box}.login-form-container .login-fields .password-wrapper .password-toggle-btn{position:absolute;right:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color);opacity:.6;transition:opacity .2s}.login-form-container .login-fields .password-wrapper .password-toggle-btn:hover{opacity:1}.login-form-container .login-fields .password-wrapper .password-toggle-btn mat-icon{font-size:20px;width:20px;height:20px}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.login-form-container .input-group{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}.login-form-container .input-label{font-size:.85em;color:var(--text-color);font-family:var(--font-family);font-weight:500;margin-left:2px}.login-form-container .error-text{font-size:.6em;color:var(--red);margin-top:2px;margin-left:2px;font-family:var(--font-family)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "component", type: MessageListComponent, selector: "app-message-list", inputs: ["messages", "isBotTyping", "appLogoUrl", "appSubtitle", "welcomeDesc", "predefinedMessages", "botAvatarUrl", "userAvatarUrl", "userName", "isAuthenticated", "isGuestMode", "trackByMessageId"], outputs: ["suggestionClick", "loginClick", "continueAsGuest"] }, { kind: "component", type: MessageInputComponent, selector: "app-message-input", inputs: ["isBotTyping", "hintText", "sendIcon"], outputs: ["send"] }, { kind: "component", type: SnackBar, selector: "app-snackbar", inputs: ["message", "autoDismiss", "dismissDelay", "show"], outputs: ["closed"] }, { kind: "directive", type: DraggableDialogDirective, selector: "[draggableDialog]", inputs: ["dragHandle", "enableDrag"] }, { kind: "directive", type: ResizableDialogDirective, selector: "[resizableDialog]", inputs: ["enableResize"] }, { kind: "component", type: ChatHistorySidebarComponent, selector: "app-chat-history-sidebar", inputs: ["sessions", "isOpen", "userName"], outputs: ["sessionSelected", "sessionDeleted", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatWindowComponent, decorators: [{
             type: Component,
@@ -1060,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ResizableDialogDirective,
                         ChatHistorySidebarComponent,
                         FormsModule,
-                    ], template: "<div\r\n  *ngIf=\"isChatOpen\"\r\n  draggableDialog\r\n  [enableDrag]=\"enableDrag\"\r\n  [dragHandle]=\"'.chat-header'\"\r\n  resizableDialog\r\n  [enableResize]=\"enableResize\"\r\n  class=\"chat-window\"\r\n  [class.fullscreen]=\"isFullScreen\"\r\n>\r\n  <!-- chat window -->\r\n  <div class=\"chat-header\">\r\n    <div class=\"chat-title\">\r\n      <img\r\n        class=\"chat-logo\"\r\n        style=\"width: 150px; height: 50px; margin-left: 0px\"\r\n        [src]=\"appHeaderLogoUrl\"\r\n        alt=\"Text-Logo\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"chat-header-buttons\">\r\n      <!-- New Chat Button -->\r\n      <!-- <button class=\"header-button\" (click)=\"createNewChat()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button> -->\r\n\r\n      <!-- <app-dropdown-menu>\r\n        <span trigger>\u2630</span>\r\n\r\n        <app-menu-item (selected)=\"onToggleFullScreen()\"> My Profile </app-menu-item>\r\n\r\n        <app-menu-item> Settings </app-menu-item>\r\n\r\n        <app-menu-item> Logout </app-menu-item>\r\n      </app-dropdown-menu> -->\r\n\r\n      <!-- History Button -->\r\n      <button\r\n        class=\"header-button\"\r\n        *ngIf=\"isAuthenticated\"\r\n        (click)=\"onToggleHistorySidebar()\"\r\n        title=\"Chat History\"\r\n      >\r\n        <mat-icon>history</mat-icon>\r\n      </button>\r\n\r\n      <!-- settings Button -->\r\n      <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n        <mat-icon>{{ moreIcon }}</mat-icon>\r\n      </button>\r\n\r\n      <!-- minimize Button -->\r\n      <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n        <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area: Toggle between Messages and History -->\r\n  <!-- <popout-window\r\n    #popout\r\n    [windowTitle]=\"appTitle || 'Chat'\"\r\n    [windowWidth]=\"400\"\r\n    [windowHeight]=\"620\"\r\n    (shown)=\"onPopoutShown($event)\"\r\n  > -->\r\n  <div class=\"chat-content-wrapper\">\r\n    <!-- Chat History View -->\r\n    <app-chat-history-sidebar\r\n      [sessions]=\"chatSessions\"\r\n      [isOpen]=\"isHistorySidebarOpen\"\r\n      [userName]=\"chatHistoryUserName\"\r\n      (sessionSelected)=\"onSessionSelected($event)\"\r\n      (sessionDeleted)=\"onSessionDeleted($event)\"\r\n      (closed)=\"onToggleHistorySidebar()\"\r\n    >\r\n    </app-chat-history-sidebar>\r\n\r\n    <!-- Messages View -->\r\n    <div class=\"messages-view\" [class.hidden]=\"isHistorySidebarOpen\">\r\n      <!-- Messages / Welcome Screen -->\r\n      <app-message-list\r\n        *ngIf=\"!showLoginForm\"\r\n        [messages]=\"messages\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [appLogoUrl]=\"appLogoUrl\"\r\n        [appSubtitle]=\"appSubtitle\"\r\n        [welcomeDesc]=\"welcomeDesc\"\r\n        [predefinedMessages]=\"predefinedMessages\"\r\n        [botAvatarUrl]=\"botAvatarUrl\"\r\n        [userAvatarUrl]=\"userAvatarUrl\"\r\n        [userName]=\"userName\"\r\n        [trackByMessageId]=\"trackByMessageId\"\r\n        [isAuthenticated]=\"isAuthenticated\"\r\n        [isGuestMode]=\"isGuestMode\"\r\n        (suggestionClick)=\"onSuggestionClick($event)\"\r\n        (loginClick)=\"onLoginClick()\"\r\n        (continueAsGuest)=\"onContinueAsGuest()\"\r\n      ></app-message-list>\r\n\r\n      <!--  SUGGESTED CHIPS: Show only if last bot message was fallback AND user is authenticated -->\r\n      <app-chips\r\n        *ngIf=\"showSuggestionChips && (isAuthenticated || isGuestMode)\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!-- Chat Input: Only show when authenticated or guest mode -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated || isGuestMode\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [hintText]=\"hintText\"\r\n        [sendIcon]=\"sendIcon\"\r\n        (send)=\"onSend($event)\"\r\n      ></app-message-input>\r\n\r\n      <!-- Login Form -->\r\n\r\n      <form\r\n        *ngIf=\"showLoginForm && !isAuthenticated\"\r\n        class=\"login-form-container\"\r\n        (ngSubmit)=\"onLoginSubmit()\"\r\n        autocomplete=\"on\"\r\n        #loginForm=\"ngForm\"\r\n      >\r\n        <h3 class=\"login-title\">Login to Doohbot</h3>\r\n\r\n        <div class=\"login-fields\">\r\n          <!-- Username Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Username</label>\r\n            <input\r\n              type=\"text\"\r\n              name=\"username\"\r\n              [(ngModel)]=\"loginUsername\"\r\n              #username=\"ngModel\"\r\n              placeholder=\"Enter your username\"\r\n              class=\"login-input\"\r\n              required\r\n              autocomplete=\"username\"\r\n            />\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"username.invalid && (username.dirty || username.touched)\"\r\n            >\r\n              Username is required\r\n            </span>\r\n          </div>\r\n\r\n          <!-- Password Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Password</label>\r\n            <div class=\"password-wrapper\">\r\n              <input\r\n                [type]=\"showPassword ? 'text' : 'password'\"\r\n                name=\"password\"\r\n                [(ngModel)]=\"loginPassword\"\r\n                #password=\"ngModel\"\r\n                placeholder=\"Enter your password\"\r\n                class=\"login-input password-input\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n              />\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn\"\r\n                (click)=\"togglePasswordVisibility()\"\r\n                tabindex=\"-1\"\r\n              >\r\n                <mat-icon>\r\n                  {{ showPassword ? 'visibility' : 'visibility_off' }}\r\n                </mat-icon>\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"password.invalid && (password.dirty || password.touched)\"\r\n            >\r\n              Password is required\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"login-actions\">\r\n          <button type=\"button\" (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"loginForm.invalid || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Login' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n\r\n      <!--  Auth error snackbar (login/logout errors only) -->\r\n      <app-snackbar\r\n        *ngIf=\"authError\"\r\n        [message]=\"authError\"\r\n        (closed)=\"onClearAuthError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- footer -->\r\n      <div class=\"terms-conditions\">\r\n        <a href=\"#\">Terms and Conditions</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- </popout-window> -->\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\">\r\n  <!-- Change Theme -->\r\n  <div class=\"theme-selector\">\r\n    <!-- Auto Theme (inherits from parent app) -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'auto'\"\r\n      (click)=\"themeService.setTheme('auto')\"\r\n    >\r\n      <mat-icon>brightness_auto</mat-icon>\r\n    </button>\r\n\r\n    <!-- Light Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'light'\"\r\n      (click)=\"themeService.setTheme('light')\"\r\n    >\r\n      <mat-icon>light_mode</mat-icon>\r\n    </button>\r\n\r\n    <!-- Dark Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'dark'\"\r\n      (click)=\"themeService.setTheme('dark')\"\r\n    >\r\n      <mat-icon>dark_mode</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Popout Button -->\r\n  <!-- <button mat-menu-item (click)=\"popout.popOut()\" style=\"display: flex; align-items: center\">\r\n      <mat-icon>open_in_new</mat-icon>\r\n      <span>Popout Widget</span>\r\n    </button> -->\r\n\r\n  <!-- Full-Screen Button -->\r\n  <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n  </button>\r\n\r\n  <!-- Clear Chat -->\r\n  <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>clear_all</mat-icon>\r\n    <span>Clear Chat</span>\r\n  </button>\r\n\r\n  <!-- Logout -->\r\n  <button\r\n    mat-menu-item\r\n    *ngIf=\"isAuthenticated\"\r\n    (click)=\"onLogout()\"\r\n    style=\"display: flex; align-items: center\"\r\n  >\r\n    <mat-icon>logout</mat-icon>\r\n    <span>Logout</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel{background-color:#8b8b8b!important;color:#fff!important;border-radius:8px!important;padding:4px 0!important;box-shadow:0 4px 16px #00000040!important;border-color:#ccc!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item mat-icon{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover{background-color:#5c5c5c!important;color:#f5f5f5!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover mat-icon{color:#f5f5f5!important}.doohbot-container{position:fixed;bottom:20px;right:20px;z-index:1000}.chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none;z-index:2147483647!important}@keyframes slide-in{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--button-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.chat-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.messages-view{display:flex;flex-direction:column;height:100%;width:100%}.messages-view.hidden{display:none}.messages-view app-message-list{flex:1;min-height:0}.messages-view app-snackbar{flex-shrink:0;margin-top:auto}.messages-view app-message-input{flex-shrink:0}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:var(--white);transition:color .2s ease}.theme-btn.selected{color:var(--black)}.auth-prompt-container{padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;text-align:center;height:100%}.auth-prompt-container .auth-prompt-text{margin:0;font-size:.95em;opacity:.8;color:var(--text-color)}.auth-prompt-container .auth-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.auth-btn{padding:8px 18px;border-radius:20px;cursor:pointer;font-size:.9em;font-weight:500;transition:all .2s ease}.auth-btn.primary{background:var(--primary-color);color:var(--white);border:1px solid var(--primary-color)}.auth-btn.primary:hover{opacity:.9}.auth-btn.primary:disabled{opacity:.5;cursor:not-allowed}.auth-btn.secondary{background:transparent;color:var(--re);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}.login-form-container{padding:30px;display:flex;flex-direction:column;gap:20px;height:100%;justify-content:center;align-items:center;margin:0 auto;box-sizing:border-box;max-width:400px;width:100%;animation:fadeIn .3s ease-in-out}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.5em;color:var(--text-color);font-family:var(--font-family);font-weight:600}.login-form-container .login-fields{display:flex;flex-direction:column;gap:15px;width:100%}.login-form-container .login-fields .login-input{padding:10px 12px;border-radius:8px;border:1px solid var(--border-color);font-size:.9em;background:var(--background-color);color:var(--text-color);width:100%;box-sizing:border-box}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-fields .password-wrapper{position:relative;display:flex;align-items:center}.login-form-container .login-fields .password-wrapper .login-input{width:100%;padding-right:40px;box-sizing:border-box}.login-form-container .login-fields .password-wrapper .password-toggle-btn{position:absolute;right:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color);opacity:.6;transition:opacity .2s}.login-form-container .login-fields .password-wrapper .password-toggle-btn:hover{opacity:1}.login-form-container .login-fields .password-wrapper .password-toggle-btn mat-icon{font-size:20px;width:20px;height:20px}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.login-form-container .input-group{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}.login-form-container .input-label{font-size:.85em;color:var(--text-color);font-family:var(--font-family);font-weight:500;margin-left:2px}.login-form-container .error-text{font-size:.6em;color:var(--red);margin-top:2px;margin-left:2px;font-family:var(--font-family)}\n"] }]
+                    ], template: "<div\r\n  *ngIf=\"isChatOpen\"\r\n  draggableDialog\r\n  [enableDrag]=\"enableDrag\"\r\n  [dragHandle]=\"'.chat-header'\"\r\n  resizableDialog\r\n  [enableResize]=\"enableResize\"\r\n  class=\"chat-window\"\r\n  [class.fullscreen]=\"isFullScreen\"\r\n>\r\n  <!-- chat window -->\r\n  <div class=\"chat-header\">\r\n    <div class=\"chat-title\">\r\n      <img\r\n        class=\"chat-logo\"\r\n        style=\"width: 150px; height: 50px; margin-left: 0px\"\r\n        [src]=\"appHeaderLogoUrl\"\r\n        alt=\"Text-Logo\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"chat-header-buttons\">\r\n      <!-- New Chat Button -->\r\n      <!-- <button class=\"header-button\" (click)=\"createNewChat()\">\r\n        <mat-icon>add</mat-icon>\r\n      </button> -->\r\n\r\n      <!-- <app-dropdown-menu>\r\n        <span trigger>\u2630</span>\r\n\r\n        <app-menu-item (selected)=\"onToggleFullScreen()\"> My Profile </app-menu-item>\r\n\r\n        <app-menu-item> Settings </app-menu-item>\r\n\r\n        <app-menu-item> Logout </app-menu-item>\r\n      </app-dropdown-menu> -->\r\n\r\n      <!-- History Button -->\r\n      <button\r\n        class=\"header-button\"\r\n        *ngIf=\"isAuthenticated\"\r\n        (click)=\"onToggleHistorySidebar()\"\r\n        title=\"Chat History\"\r\n      >\r\n        <mat-icon>history</mat-icon>\r\n      </button>\r\n\r\n      <!-- settings Button -->\r\n      <button class=\"header-button\" [matMenuTriggerFor]=\"settingsMenu\">\r\n        <mat-icon>{{ moreIcon }}</mat-icon>\r\n      </button>\r\n\r\n      <!-- minimize Button -->\r\n      <button class=\"header-button\" (click)=\"onToggleChat()\">\r\n        <mat-icon>{{ minimizeIcon }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area: Toggle between Messages and History -->\r\n  <!-- <popout-window\r\n    #popout\r\n    [windowTitle]=\"appTitle || 'Chat'\"\r\n    [windowWidth]=\"400\"\r\n    [windowHeight]=\"620\"\r\n    (shown)=\"onPopoutShown($event)\"\r\n  > -->\r\n  <div class=\"chat-content-wrapper\">\r\n    <!-- Chat History View -->\r\n    <app-chat-history-sidebar\r\n      [sessions]=\"chatSessions\"\r\n      [isOpen]=\"isHistorySidebarOpen\"\r\n      [userName]=\"chatHistoryUserName\"\r\n      (sessionSelected)=\"onSessionSelected($event)\"\r\n      (sessionDeleted)=\"onSessionDeleted($event)\"\r\n      (closed)=\"onToggleHistorySidebar()\"\r\n    >\r\n    </app-chat-history-sidebar>\r\n\r\n    <!-- Messages View -->\r\n    <div class=\"messages-view\" [class.hidden]=\"isHistorySidebarOpen\">\r\n      <!-- Messages / Welcome Screen -->\r\n      <app-message-list\r\n        *ngIf=\"!showLoginForm\"\r\n        [messages]=\"messages\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [appLogoUrl]=\"appLogoUrl\"\r\n        [appSubtitle]=\"appSubtitle\"\r\n        [welcomeDesc]=\"welcomeDesc\"\r\n        [predefinedMessages]=\"predefinedMessages\"\r\n        [botAvatarUrl]=\"botAvatarUrl\"\r\n        [userAvatarUrl]=\"userAvatarUrl\"\r\n        [userName]=\"userName\"\r\n        [trackByMessageId]=\"trackByMessageId\"\r\n        [isAuthenticated]=\"isAuthenticated\"\r\n        [isGuestMode]=\"isGuestMode\"\r\n        (suggestionClick)=\"onSuggestionClick($event)\"\r\n        (loginClick)=\"onLoginClick()\"\r\n        (continueAsGuest)=\"onContinueAsGuest()\"\r\n      ></app-message-list>\r\n\r\n      <!--  SUGGESTED CHIPS: Show only if last bot message was fallback AND user is authenticated -->\r\n      <app-chips\r\n        *ngIf=\"showSuggestionChips && (isAuthenticated || isGuestMode)\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!-- Chat Input: Only show when authenticated or guest mode -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated || isGuestMode\"\r\n        [isBotTyping]=\"isBotTyping\"\r\n        [hintText]=\"hintText\"\r\n        [sendIcon]=\"sendIcon\"\r\n        (send)=\"onSend($event)\"\r\n      ></app-message-input>\r\n\r\n      <!-- Login Form -->\r\n\r\n      <form\r\n        *ngIf=\"showLoginForm && !isAuthenticated\"\r\n        class=\"login-form-container\"\r\n        (ngSubmit)=\"onLoginSubmit()\"\r\n        autocomplete=\"on\"\r\n        #loginForm=\"ngForm\"\r\n      >\r\n        <h3 class=\"login-title\">Login to Doohbot</h3>\r\n\r\n        <div class=\"login-fields\">\r\n          <!-- Username Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Username</label>\r\n            <input\r\n              type=\"text\"\r\n              name=\"username\"\r\n              [(ngModel)]=\"loginUsername\"\r\n              #username=\"ngModel\"\r\n              placeholder=\"Enter your username\"\r\n              class=\"login-input\"\r\n              required\r\n              autocomplete=\"username\"\r\n            />\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"username.invalid && (username.dirty || username.touched)\"\r\n            >\r\n              Username is required\r\n            </span>\r\n          </div>\r\n\r\n          <!-- Password Field -->\r\n          <div class=\"input-group\">\r\n            <label class=\"input-label\">Password</label>\r\n            <div class=\"password-wrapper\">\r\n              <input\r\n                [type]=\"showPassword ? 'text' : 'password'\"\r\n                name=\"password\"\r\n                [(ngModel)]=\"loginPassword\"\r\n                #password=\"ngModel\"\r\n                placeholder=\"Enter your password\"\r\n                class=\"login-input password-input\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n              />\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"password-toggle-btn\"\r\n                (click)=\"togglePasswordVisibility()\"\r\n                tabindex=\"-1\"\r\n              >\r\n                <mat-icon>\r\n                  {{ showPassword ? 'visibility' : 'visibility_off' }}\r\n                </mat-icon>\r\n              </button>\r\n            </div>\r\n            <span\r\n              class=\"error-text\"\r\n              *ngIf=\"password.invalid && (password.dirty || password.touched)\"\r\n            >\r\n              Password is required\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"login-actions\">\r\n          <button type=\"button\" (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n\r\n          <button\r\n            type=\"submit\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"loginForm.invalid || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Login' }}\r\n          </button>\r\n        </div>\r\n      </form>\r\n\r\n      <!--  Auth error snackbar (login/logout errors only) -->\r\n      <app-snackbar\r\n        *ngIf=\"authError\"\r\n        [message]=\"authError\"\r\n        (closed)=\"onClearAuthError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- footer -->\r\n      <div class=\"terms-conditions\">\r\n        <a href=\"#\">Terms and Conditions</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- </popout-window> -->\r\n</div>\r\n\r\n<mat-menu #settingsMenu=\"matMenu\">\r\n  <!-- Change Theme -->\r\n  <div class=\"theme-selector\">\r\n    <!-- Auto Theme (inherits from parent app) -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'auto'\"\r\n      (click)=\"themeService.setTheme('auto')\"\r\n    >\r\n      <mat-icon>brightness_auto</mat-icon>\r\n    </button>\r\n\r\n    <!-- Light Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'light'\"\r\n      (click)=\"themeService.setTheme('light')\"\r\n    >\r\n      <mat-icon>light_mode</mat-icon>\r\n    </button>\r\n\r\n    <!-- Dark Theme -->\r\n    <button\r\n      mat-icon-button\r\n      class=\"theme-btn\"\r\n      [class.selected]=\"themeService.theme() === 'dark'\"\r\n      (click)=\"themeService.setTheme('dark')\"\r\n    >\r\n      <mat-icon>dark_mode</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Popout Button -->\r\n  <!-- <button mat-menu-item (click)=\"popout.popOut()\" style=\"display: flex; align-items: center\">\r\n      <mat-icon>open_in_new</mat-icon>\r\n      <span>Popout Widget</span>\r\n    </button> -->\r\n\r\n  <!-- Full-Screen Button -->\r\n  <button mat-menu-item (click)=\"onToggleFullScreen()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>\r\n    <span> {{ isFullScreen ? 'Minimize' : 'Expand' }}</span>\r\n  </button>\r\n\r\n  <!-- Clear Chat -->\r\n  <button mat-menu-item (click)=\"onClearChat()\" style=\"display: flex; align-items: center\">\r\n    <mat-icon>clear_all</mat-icon>\r\n    <span>Clear Chat</span>\r\n  </button>\r\n\r\n  <!-- Logout -->\r\n  <button\r\n    mat-menu-item\r\n    *ngIf=\"isAuthenticated\"\r\n    (click)=\"onLogout()\"\r\n    style=\"display: flex; align-items: center\"\r\n  >\r\n    <mat-icon>logout</mat-icon>\r\n    <span>Logout</span>\r\n  </button>\r\n</mat-menu>\r\n", styles: ["::ng-deep .mat-mdc-menu-panel{background-color:#8b8b8b!important;color:#fff!important;border-radius:8px!important;padding:4px 0!important;box-shadow:0 4px 16px #00000040!important;border-color:#ccc!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;position:relative}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item mat-icon{color:#fff!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover{background-color:#5c5c5c!important;color:#f5f5f5!important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-item:hover mat-icon{color:#f5f5f5!important}.doohbot-container{position:fixed;bottom:20px;right:20px;z-index:1000}.chat-window{width:clamp(400px,30vw,450px);height:clamp(620px,70vh,660px);background-color:var(--background-color);border-radius:20px;border-color:var(--border-color);box-shadow:var(--border-shadow-color);display:flex;flex-direction:column;overflow:hidden;animation:slide-in .5s ease;position:fixed;right:20px;bottom:20px;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.chat-window{width:95%;height:calc(100vh - 20px)}}@media (max-width: 480px){.chat-window{width:90%;height:calc(100vh - 40px)}}.chat-window.fullscreen{width:98vw;height:96vh;border-radius:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background-color:var(--background-color);color:var(--text-alt-color);cursor:move;-webkit-user-select:none;user-select:none}.chat-header:active{cursor:grabbing}.chat-title{display:flex;align-items:center;gap:6px;font-family:var(--font-family)}.chat-logo{width:45px;height:45px;object-fit:contain}.chat-header h2{margin:0;font-size:1.2rem;color:var(--text-alt-color);font-family:var(--font-family);font-weight:700}.header-button{background:none;border:none;color:var(--button-color);cursor:pointer;font-size:1.5rem}.header-button :hover{transform:scale(1.1)}.terms-conditions{font-size:.8rem;color:var(--text-color);margin-top:5px;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.terms-conditions a{color:var(--grey);text-decoration:underline;font-family:var(--font-family)}.terms-conditions a:hover{color:var(--primary-color)}.chat-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.messages-view{display:flex;flex-direction:column;height:100%;width:100%}.messages-view.hidden{display:none}.messages-view app-message-list{flex:1;min-height:0}.messages-view app-snackbar{flex-shrink:0;margin-top:auto}.messages-view app-message-input{flex-shrink:0}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:var(--white);transition:color .2s ease}.theme-btn.selected{color:var(--black)}.auth-prompt-container{padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;text-align:center;height:100%}.auth-prompt-container .auth-prompt-text{margin:0;font-size:.95em;opacity:.8;color:var(--text-color)}.auth-prompt-container .auth-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.auth-btn{padding:8px 18px;border-radius:20px;cursor:pointer;font-size:.9em;font-weight:500;transition:all .2s ease}.auth-btn.primary{background:var(--primary-color);color:var(--white);border:1px solid var(--primary-color)}.auth-btn.primary:hover{opacity:.9}.auth-btn.primary:disabled{opacity:.5;cursor:not-allowed}.auth-btn.secondary{background:transparent;color:var(--re);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}.login-form-container{padding:30px;display:flex;flex-direction:column;gap:20px;height:100%;justify-content:center;align-items:center;margin:0 auto;box-sizing:border-box;max-width:400px;width:100%;animation:fadeIn .3s ease-in-out}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.5em;color:var(--text-color);font-family:var(--font-family);font-weight:600}.login-form-container .login-fields{display:flex;flex-direction:column;gap:15px;width:100%}.login-form-container .login-fields .login-input{padding:10px 12px;border-radius:8px;border:1px solid var(--border-color);font-size:.9em;background:var(--background-color);color:var(--text-color);width:100%;box-sizing:border-box}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-fields .password-wrapper{position:relative;display:flex;align-items:center}.login-form-container .login-fields .password-wrapper .login-input{width:100%;padding-right:40px;box-sizing:border-box}.login-form-container .login-fields .password-wrapper .password-toggle-btn{position:absolute;right:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;color:var(--text-color);opacity:.6;transition:opacity .2s}.login-form-container .login-fields .password-wrapper .password-toggle-btn:hover{opacity:1}.login-form-container .login-fields .password-wrapper .password-toggle-btn mat-icon{font-size:20px;width:20px;height:20px}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.login-form-container .input-group{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}.login-form-container .input-label{font-size:.85em;color:var(--text-color);font-family:var(--font-family);font-weight:500;margin-left:2px}.login-form-container .error-text{font-size:.6em;color:var(--red);margin-top:2px;margin-left:2px;font-family:var(--font-family)}\n"] }]
         }], propDecorators: { isChatOpen: [{
                 type: Input
             }], enableDrag: [{
@@ -3196,6 +3196,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: [MenuItem]
             }] } });
 
+// src/lib/chatbot-initializer.ts
+function initializeChatbot() {
+    const appConst = inject(AppConst);
+    return appConst.load(); // must return Promise<void> or void
+}
+// This is a standard Angular provider — no fake APIs!
+const DOOHBOT_INITIALIZER = {
+    provide: APP_INITIALIZER,
+    useFactory: initializeChatbot,
+    multi: true,
+};
+
 class StorageService {
 }
 class LocalStorageService extends StorageService {
@@ -3237,6 +3249,167 @@ function provideStorage() {
     };
 }
 
+class PopoutWindowDirective {
+    renderer2;
+    elementRef;
+    innerWrapper;
+    windowWidth = 400;
+    windowHeight = 400;
+    windowLeft = 200;
+    windowTop = 200;
+    windowTitle = 'Popout Window';
+    windowStyle = '';
+    windowStyleUrl = '';
+    suppressCloneStyles = false;
+    get isPoppedOut() {
+        return this.isOut;
+    }
+    closed = new EventEmitter();
+    shown = new EventEmitter();
+    popoutWindow = null;
+    isOut = false;
+    observer;
+    beforeunloadHandler() {
+        this.close();
+    }
+    constructor(renderer2, elementRef) {
+        this.renderer2 = renderer2;
+        this.elementRef = elementRef;
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+        this.close();
+    }
+    close() {
+        if (this.popoutWindow) {
+            this.popoutWindow.close();
+            this.popoutWindow = null;
+            this.isOut = false;
+            this.closed.next(true);
+        }
+    }
+    popIn() {
+        if (this.elementRef.nativeElement && this.innerWrapper.nativeElement) {
+            this.renderer2.appendChild(this.elementRef.nativeElement, this.innerWrapper.nativeElement);
+            this.close();
+        }
+    }
+    popOut() {
+        if (!this.popoutWindow) {
+            const elmRect = this.innerWrapper.nativeElement.getBoundingClientRect();
+            const navHeight = window.outerHeight - window.innerHeight;
+            const navWidth = window.outerWidth - window.innerWidth;
+            const winLeft = this.windowLeft || window.screenX + navWidth + elmRect.left;
+            const winTop = this.windowTop || window.screenY + navHeight + elmRect.top - 60;
+            this.popoutWindow = window.open('', `popoutWindow${Date.now()}`, `width=${this.windowWidth > 99 ? this.windowWidth : elmRect.width},
+        height=${this.windowHeight > 99 ? this.windowHeight : elmRect.height + 1},
+        left=${winLeft},
+        top=${winTop}`);
+            if (!this.popoutWindow) {
+                console.error('Popup blocked or failed to open');
+                return;
+            }
+            this.popoutWindow.document.title = this.windowTitle
+                ? this.windowTitle
+                : window.document.title;
+            this.popoutWindow.document.body.style.margin = '0';
+            if (!this.suppressCloneStyles) {
+                document.head.querySelectorAll('style').forEach((node) => {
+                    this.popoutWindow?.document.head.appendChild(node.cloneNode(true));
+                });
+                this.observeStyleChanges();
+                document.head.querySelectorAll('link[rel="stylesheet"]').forEach((node) => {
+                    this.popoutWindow?.document.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" type="${node.type}" href="${node.href}">`);
+                });
+                // Safe check for document.fonts
+                const doc = document;
+                const targetDoc = this.popoutWindow.document;
+                if (doc.fonts && targetDoc.fonts) {
+                    doc.fonts.forEach((node) => {
+                        targetDoc.fonts.add(node);
+                    });
+                }
+            }
+            if (this.windowStyleUrl) {
+                this.popoutWindow.document.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" type="text/css" href="${window.location.origin}/${this.windowStyleUrl}">`);
+            }
+            if (this.windowStyle) {
+                this.popoutWindow.document.head.insertAdjacentHTML('beforeend', `<style>${this.windowStyle}</style>`);
+            }
+            this.renderer2.appendChild(this.popoutWindow.document.body, this.innerWrapper.nativeElement);
+            this.isOut = true;
+            this.shown.emit(this.popoutWindow);
+            this.popoutWindow.addEventListener('unload', () => {
+                this.popIn();
+            });
+        }
+        else {
+            this.popoutWindow.focus();
+        }
+    }
+    observeStyleChanges() {
+        const docHead = document.querySelector('head');
+        if (!docHead)
+            return;
+        this.observer?.disconnect();
+        this.observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeName === 'STYLE' && this.popoutWindow) {
+                        this.popoutWindow.document.head.appendChild(node.cloneNode(true));
+                    }
+                });
+            });
+        });
+        this.observer.observe(docHead, { childList: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PopoutWindowDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PopoutWindowDirective, isStandalone: true, selector: "popout-window", inputs: { windowWidth: "windowWidth", windowHeight: "windowHeight", windowLeft: "windowLeft", windowTop: "windowTop", windowTitle: "windowTitle", windowStyle: "windowStyle", windowStyleUrl: "windowStyleUrl", suppressCloneStyles: "suppressCloneStyles", isPoppedOut: "isPoppedOut" }, outputs: { closed: "closed", shown: "shown" }, host: { listeners: { "window:beforeunload": "beforeunloadHandler()" } }, viewQueries: [{ propertyName: "innerWrapper", first: true, predicate: ["innerWrapper"], descendants: true }], ngImport: i0, template: `
+    <div #innerWrapper style="width: 100%; height: 100%; overflow: auto;">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PopoutWindowDirective, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'popout-window',
+                    template: `
+    <div #innerWrapper style="width: 100%; height: 100%; overflow: auto;">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { innerWrapper: [{
+                type: ViewChild,
+                args: ['innerWrapper']
+            }], windowWidth: [{
+                type: Input
+            }], windowHeight: [{
+                type: Input
+            }], windowLeft: [{
+                type: Input
+            }], windowTop: [{
+                type: Input
+            }], windowTitle: [{
+                type: Input
+            }], windowStyle: [{
+                type: Input
+            }], windowStyleUrl: [{
+                type: Input
+            }], suppressCloneStyles: [{
+                type: Input
+            }], isPoppedOut: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], shown: [{
+                type: Output
+            }], beforeunloadHandler: [{
+                type: HostListener,
+                args: ['window:beforeunload']
+            }] } });
+
 /*
  * Public API Surface of chatbot
  */
@@ -3246,5 +3419,5 @@ function provideStorage() {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AuthService, ChatFacadeService, ChatHistoryService, ChatWindowComponent, ChatbotApiService, Chips, DOOHBOT_API_CONFIG, DOOHBOT_API_URL, DialogComponent, DialogService, Doohbot, DoohbotInput, DropdownMenu, LocalStorageService, MenuItem, MessageListComponent, SnackBar, StorageService, ThemeService, appConst, initializeApp, provideStorage };
+export { AccountService, AuthService, ChatButtonComponent, ChatFacadeService, ChatHistoryService, ChatHistorySidebarComponent, ChatWindowComponent, ChatbotApiService, Chips, DOOHBOT_API_CONFIG, DOOHBOT_API_URL, DOOHBOT_INITIALIZER, DialogComponent, DialogService, Doohbot, DoohbotInput, DraggableDialogDirective, DropdownMenu, FullscreenDirective, LocalStorageService, MenuItem, MessageInputComponent, MessageListComponent, PopoutWindowDirective, PredefinedMessages, ResizableDialogDirective, SnackBar, StorageService, ThemeService, appConst, initializeApp, provideStorage };
 //# sourceMappingURL=aakash58-chatbot.mjs.map