@aakash58/chatbot 1.0.84 → 1.0.85

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, ContentChildren, inject, InjectionToken, computed, effect, ElementRef, APP_INITIALIZER, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewChild, HostListener, Directive, signal, Injectable, Inject, inject, InjectionToken, computed, effect, ElementRef, APP_INITIALIZER, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/material/icon';
@@ -11,6 +11,8 @@ import * as i1$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { Subject, throwError, timer, of, firstValueFrom, delay, retry as retry$1, map as map$1, catchError as catchError$1, Observable } from 'rxjs';
 import * as i1$4 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
@@ -45,7 +47,6 @@ class DoohbotInput {
     password = '';
     authToken;
     DOOHBOT_API_URL;
-    skipAuthentication;
     // inputs
     userAvatarUrl = appConst.USER_AVATAR;
     // Application Constants Text
@@ -151,8 +152,11 @@ class MessageListComponent {
     userAvatarUrl = '';
     userName = '';
     isAuthenticated = false;
+    isGuestMode = false;
     trackByMessageId = (index, item) => item.id ?? index;
     suggestionClick = new EventEmitter();
+    loginClick = new EventEmitter();
+    continueAsGuest = new EventEmitter();
     chatMessagesContainer;
     mutationObserver;
     appEmoji = {
@@ -187,11 +191,11 @@ class MessageListComponent {
         this.suggestionClick.emit(text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MessageListComponent, isStandalone: true, selector: "app-message-list", inputs: { messages: "messages", isBotTyping: "isBotTyping", appLogoUrl: "appLogoUrl", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", userName: "userName", isAuthenticated: "isAuthenticated", trackByMessageId: "trackByMessageId" }, outputs: { suggestionClick: "suggestionClick" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessages"], descendants: true }], ngImport: i0, template: "<div #chatMessages class=\"chat-messages\">\r\n  <!-- Welcome Screen -->\r\n  <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n    <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 0px\" />\r\n\r\n    <!-- Only show greeting if authenticated -->\r\n    <h2 class=\"welcome-greeting\" *ngIf=\"userName && isAuthenticated\">\r\n      Hi, {{ userName }}!\r\n      <!-- <span class=\"emoji\">&#128075;</span> -->\r\n      <span class=\"emoji\">{{ appEmoji.waveHand }}</span>\r\n    </h2>\r\n\r\n    <h3>{{ appSubtitle }}</h3>\r\n    <p>{{ welcomeDesc }}</p>\r\n\r\n    <!-- Predefined messages chips: Only show when authenticated -->\r\n    <app-chips\r\n      *ngIf=\"isAuthenticated\"\r\n      [messages]=\"predefinedMessages\"\r\n      [disabled]=\"isBotTyping\"\r\n      (chipClick)=\"onPredefinedClick($event)\"\r\n    ></app-chips>\r\n  </div>\r\n\r\n  <!-- Chat Messages -->\r\n  <div\r\n    *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n    class=\"message-wrapper\"\r\n    [class.user]=\"message.sender === 'user'\"\r\n    [class.bot]=\"message.sender === 'bot'\"\r\n  >\r\n    <!-- Bot Avatar -->\r\n    <img\r\n      *ngIf=\"message.sender === 'bot'\"\r\n      class=\"bot-avatar\"\r\n      [src]=\"botAvatarUrl\"\r\n      alt=\"Bot Avatar\"\r\n    />\r\n\r\n    <!-- Message Bubble -->\r\n    <div\r\n      class=\"message\"\r\n      [class.user]=\"message.sender === 'user'\"\r\n      [class.bot]=\"message.sender === 'bot'\"\r\n    >\r\n      {{ message.text }}\r\n      <!--  Show time below message -->\r\n      <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n        {{ message.timestamp | date: 'shortTime' }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- User Avatar -->\r\n    <div class=\"user-avatar-container\" *ngIf=\"message.sender === 'user'\">\r\n      <img class=\"user-avatar\" [src]=\"userAvatarUrl\" alt=\"User Avatar\" />\r\n      <!-- <span class=\"user-name\" *ngIf=\"userName\">{{ userName }}</span> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Typing Indicator -->\r\n  <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n    <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n    <div class=\"message bot\">\r\n      <div class=\"typing-indicator\">\r\n        <span></span>\r\n        <span></span>\r\n        <span></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-greeting{margin:0 0 12px;color:var(--text-color);font-family:var(--font-family);font-size:24px;font-weight:600;background:var(--text-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-greeting .emoji{background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:18px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end;border-radius:20px 20px 0}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start;border-radius:20px 20px 20px 0}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.user-avatar-container{display:flex;flex-direction:column;align-items:center;gap:4px}.user-name{font-size:10px;color:var(--secondary-text-color);font-family:var(--font-family);text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MessageListComponent, isStandalone: true, selector: "app-message-list", inputs: { messages: "messages", isBotTyping: "isBotTyping", appLogoUrl: "appLogoUrl", appSubtitle: "appSubtitle", welcomeDesc: "welcomeDesc", predefinedMessages: "predefinedMessages", botAvatarUrl: "botAvatarUrl", userAvatarUrl: "userAvatarUrl", userName: "userName", isAuthenticated: "isAuthenticated", isGuestMode: "isGuestMode", trackByMessageId: "trackByMessageId" }, outputs: { suggestionClick: "suggestionClick", loginClick: "loginClick", continueAsGuest: "continueAsGuest" }, viewQueries: [{ propertyName: "chatMessagesContainer", first: true, predicate: ["chatMessages"], descendants: true }], ngImport: i0, template: "<div #chatMessages class=\"chat-messages\">\r\n  <!-- Welcome Screen -->\r\n  <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n    <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 0px\" />\r\n\r\n    <!-- Only show greeting if authenticated -->\r\n    <h2 class=\"welcome-greeting\" *ngIf=\"userName && isAuthenticated\">\r\n      Hi, {{ userName }}!\r\n      <!-- <span class=\"emoji\">&#128075;</span> -->\r\n      <span class=\"emoji\">{{ appEmoji.waveHand }}</span>\r\n    </h2>\r\n\r\n    <h3>{{ appSubtitle }}</h3>\r\n    <p>{{ welcomeDesc }}</p>\r\n\r\n    <!-- Predefined messages chips: Only show when authenticated -->\r\n    <app-chips\r\n      *ngIf=\"isAuthenticated\"\r\n      [messages]=\"predefinedMessages\"\r\n      [disabled]=\"isBotTyping\"\r\n      (chipClick)=\"onPredefinedClick($event)\"\r\n    ></app-chips>\r\n\r\n    <!-- Guest Mode Login Button -->\r\n    <div *ngIf=\"isGuestMode\" style=\"margin-top: 10px\">\r\n      <button class=\"login-btn\" (click)=\"loginClick.emit()\">Login</button>\r\n    </div>\r\n\r\n    <!-- Fallback / Login Prompts (Below Welcome Text) -->\r\n    <div\r\n      *ngIf=\"!isAuthenticated && !isGuestMode\"\r\n      class=\"auth-buttons-container\"\r\n      style=\"margin-top: 20px\"\r\n    >\r\n      <button (click)=\"loginClick.emit()\" class=\"auth-btn primary\" style=\"margin-right: 10px\">\r\n        Login\r\n      </button>\r\n      <button (click)=\"continueAsGuest.emit()\" class=\"auth-btn secondary\">Continue as Guest</button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chat Messages -->\r\n  <div\r\n    *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n    class=\"message-wrapper\"\r\n    [class.user]=\"message.sender === 'user'\"\r\n    [class.bot]=\"message.sender === 'bot'\"\r\n  >\r\n    <!-- Bot Avatar -->\r\n    <img\r\n      *ngIf=\"message.sender === 'bot'\"\r\n      class=\"bot-avatar\"\r\n      [src]=\"botAvatarUrl\"\r\n      alt=\"Bot Avatar\"\r\n    />\r\n\r\n    <!-- Message Bubble -->\r\n    <div\r\n      class=\"message\"\r\n      [class.user]=\"message.sender === 'user'\"\r\n      [class.bot]=\"message.sender === 'bot'\"\r\n    >\r\n      {{ message.text }}\r\n      <!--  Show time below message -->\r\n      <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n        {{ message.timestamp | date: 'shortTime' }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- User Avatar -->\r\n    <div class=\"user-avatar-container\" *ngIf=\"message.sender === 'user'\">\r\n      <img class=\"user-avatar\" [src]=\"userAvatarUrl\" alt=\"User Avatar\" />\r\n      <!-- <span class=\"user-name\" *ngIf=\"userName\">{{ userName }}</span> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Typing Indicator -->\r\n  <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n    <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n    <div class=\"message bot\">\r\n      <div class=\"typing-indicator\">\r\n        <span></span>\r\n        <span></span>\r\n        <span></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.login-btn{padding:10px 15px;border:none;border-radius:20px;background-color:var(--primary-color);color:var(--user-text-color);font-size:1em;cursor:pointer;transition:background-color .2s ease}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-greeting{margin:0 0 12px;color:var(--text-color);font-family:var(--font-family);font-size:24px;font-weight:600;background:var(--text-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-greeting .emoji{background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:18px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end;border-radius:20px 20px 0}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start;border-radius:20px 20px 20px 0}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.user-avatar-container{display:flex;flex-direction:column;align-items:center;gap:4px}.user-name{font-size:10px;color:var(--secondary-text-color);font-family:var(--font-family);text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}.auth-buttons-container{display:flex;flex-direction:row;justify-content:center;gap:10px}.auth-btn{padding:8px 16px;border-radius:20px;font-size:.9em;font-weight:500;cursor:pointer;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(--primary-color);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Chips, selector: "app-chips", inputs: ["messages", "disabled"], outputs: ["chipClick"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-message-list', standalone: true, imports: [CommonModule, Chips], template: "<div #chatMessages class=\"chat-messages\">\r\n  <!-- Welcome Screen -->\r\n  <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n    <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 0px\" />\r\n\r\n    <!-- Only show greeting if authenticated -->\r\n    <h2 class=\"welcome-greeting\" *ngIf=\"userName && isAuthenticated\">\r\n      Hi, {{ userName }}!\r\n      <!-- <span class=\"emoji\">&#128075;</span> -->\r\n      <span class=\"emoji\">{{ appEmoji.waveHand }}</span>\r\n    </h2>\r\n\r\n    <h3>{{ appSubtitle }}</h3>\r\n    <p>{{ welcomeDesc }}</p>\r\n\r\n    <!-- Predefined messages chips: Only show when authenticated -->\r\n    <app-chips\r\n      *ngIf=\"isAuthenticated\"\r\n      [messages]=\"predefinedMessages\"\r\n      [disabled]=\"isBotTyping\"\r\n      (chipClick)=\"onPredefinedClick($event)\"\r\n    ></app-chips>\r\n  </div>\r\n\r\n  <!-- Chat Messages -->\r\n  <div\r\n    *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n    class=\"message-wrapper\"\r\n    [class.user]=\"message.sender === 'user'\"\r\n    [class.bot]=\"message.sender === 'bot'\"\r\n  >\r\n    <!-- Bot Avatar -->\r\n    <img\r\n      *ngIf=\"message.sender === 'bot'\"\r\n      class=\"bot-avatar\"\r\n      [src]=\"botAvatarUrl\"\r\n      alt=\"Bot Avatar\"\r\n    />\r\n\r\n    <!-- Message Bubble -->\r\n    <div\r\n      class=\"message\"\r\n      [class.user]=\"message.sender === 'user'\"\r\n      [class.bot]=\"message.sender === 'bot'\"\r\n    >\r\n      {{ message.text }}\r\n      <!--  Show time below message -->\r\n      <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n        {{ message.timestamp | date: 'shortTime' }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- User Avatar -->\r\n    <div class=\"user-avatar-container\" *ngIf=\"message.sender === 'user'\">\r\n      <img class=\"user-avatar\" [src]=\"userAvatarUrl\" alt=\"User Avatar\" />\r\n      <!-- <span class=\"user-name\" *ngIf=\"userName\">{{ userName }}</span> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Typing Indicator -->\r\n  <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n    <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n    <div class=\"message bot\">\r\n      <div class=\"typing-indicator\">\r\n        <span></span>\r\n        <span></span>\r\n        <span></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-greeting{margin:0 0 12px;color:var(--text-color);font-family:var(--font-family);font-size:24px;font-weight:600;background:var(--text-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-greeting .emoji{background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:18px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end;border-radius:20px 20px 0}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start;border-radius:20px 20px 20px 0}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.user-avatar-container{display:flex;flex-direction:column;align-items:center;gap:4px}.user-name{font-size:10px;color:var(--secondary-text-color);font-family:var(--font-family);text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}\n"] }]
+            args: [{ selector: 'app-message-list', standalone: true, imports: [CommonModule, Chips], template: "<div #chatMessages class=\"chat-messages\">\r\n  <!-- Welcome Screen -->\r\n  <div class=\"welcome-screen\" *ngIf=\"messages.length === 0 && !isBotTyping\">\r\n    <img [src]=\"appLogoUrl\" alt=\"Welcome\" class=\"welcome-image\" style=\"border-radius: 0px\" />\r\n\r\n    <!-- Only show greeting if authenticated -->\r\n    <h2 class=\"welcome-greeting\" *ngIf=\"userName && isAuthenticated\">\r\n      Hi, {{ userName }}!\r\n      <!-- <span class=\"emoji\">&#128075;</span> -->\r\n      <span class=\"emoji\">{{ appEmoji.waveHand }}</span>\r\n    </h2>\r\n\r\n    <h3>{{ appSubtitle }}</h3>\r\n    <p>{{ welcomeDesc }}</p>\r\n\r\n    <!-- Predefined messages chips: Only show when authenticated -->\r\n    <app-chips\r\n      *ngIf=\"isAuthenticated\"\r\n      [messages]=\"predefinedMessages\"\r\n      [disabled]=\"isBotTyping\"\r\n      (chipClick)=\"onPredefinedClick($event)\"\r\n    ></app-chips>\r\n\r\n    <!-- Guest Mode Login Button -->\r\n    <div *ngIf=\"isGuestMode\" style=\"margin-top: 10px\">\r\n      <button class=\"login-btn\" (click)=\"loginClick.emit()\">Login</button>\r\n    </div>\r\n\r\n    <!-- Fallback / Login Prompts (Below Welcome Text) -->\r\n    <div\r\n      *ngIf=\"!isAuthenticated && !isGuestMode\"\r\n      class=\"auth-buttons-container\"\r\n      style=\"margin-top: 20px\"\r\n    >\r\n      <button (click)=\"loginClick.emit()\" class=\"auth-btn primary\" style=\"margin-right: 10px\">\r\n        Login\r\n      </button>\r\n      <button (click)=\"continueAsGuest.emit()\" class=\"auth-btn secondary\">Continue as Guest</button>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Chat Messages -->\r\n  <div\r\n    *ngFor=\"let message of messages; trackBy: trackByMessageId\"\r\n    class=\"message-wrapper\"\r\n    [class.user]=\"message.sender === 'user'\"\r\n    [class.bot]=\"message.sender === 'bot'\"\r\n  >\r\n    <!-- Bot Avatar -->\r\n    <img\r\n      *ngIf=\"message.sender === 'bot'\"\r\n      class=\"bot-avatar\"\r\n      [src]=\"botAvatarUrl\"\r\n      alt=\"Bot Avatar\"\r\n    />\r\n\r\n    <!-- Message Bubble -->\r\n    <div\r\n      class=\"message\"\r\n      [class.user]=\"message.sender === 'user'\"\r\n      [class.bot]=\"message.sender === 'bot'\"\r\n    >\r\n      {{ message.text }}\r\n      <!--  Show time below message -->\r\n      <div *ngIf=\"message.sender === 'bot'\" class=\"message-time\">\r\n        {{ message.timestamp | date: 'shortTime' }}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- User Avatar -->\r\n    <div class=\"user-avatar-container\" *ngIf=\"message.sender === 'user'\">\r\n      <img class=\"user-avatar\" [src]=\"userAvatarUrl\" alt=\"User Avatar\" />\r\n      <!-- <span class=\"user-name\" *ngIf=\"userName\">{{ userName }}</span> -->\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Typing Indicator -->\r\n  <div class=\"message-wrapper bot\" *ngIf=\"isBotTyping\">\r\n    <img class=\"bot-avatar\" [src]=\"botAvatarUrl\" alt=\"Bot Avatar\" />\r\n    <div class=\"message bot\">\r\n      <div class=\"typing-indicator\">\r\n        <span></span>\r\n        <span></span>\r\n        <span></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.login-btn{padding:10px 15px;border:none;border-radius:20px;background-color:var(--primary-color);color:var(--user-text-color);font-size:1em;cursor:pointer;transition:background-color .2s ease}.chat-messages{flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:var(--grey);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.chat-messages::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.welcome-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:100%;padding:0 20px}.welcome-image{width:80px;margin-bottom:30px}.welcome-greeting{margin:0 0 12px;color:var(--text-color);font-family:var(--font-family);font-size:24px;font-weight:600;background:var(--text-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-greeting .emoji{background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial}.welcome-screen h3{margin:0 0 5px;color:var(--text-color);font-family:var(--font-family);font-size:18px}.welcome-screen p{margin:0 0 30px;color:var(--secondary-text-color);font-size:14px;font-family:var(--font-family)}.message-wrapper{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px}.message-wrapper.user{justify-content:flex-end}.message-wrapper.bot{justify-content:flex-start}.message{padding:10px 15px;max-width:80%;overflow-y:auto;word-wrap:break-word;font-family:var(--font-family)}.message .message-time{font-size:11px;color:var(--grey);text-align:right;margin-top:4px}.message.user{background-color:var(--primary-color);color:var(--user-text-color);align-self:flex-end;border-radius:20px 20px 0}.message.bot{background-color:var(--bot-message-color);color:var(--bot-text-color);align-self:flex-start;border-radius:20px 20px 20px 0}.bot-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color);filter:var(--avatar-filter)}.user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border-color)}.user-avatar.placeholder{filter:var(--avatar-filter)}.user-avatar-container{display:flex;flex-direction:column;align-items:center;gap:4px}.user-name{font-size:10px;color:var(--secondary-text-color);font-family:var(--font-family);text-align:center;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:4px}.typing-indicator span{width:8px;height:8px;background-color:var(--typing-indicator-color);border-radius:50%;animation:blink 1.4s infinite both}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}.auth-buttons-container{display:flex;flex-direction:row;justify-content:center;gap:10px}.auth-btn{padding:8px 16px;border-radius:20px;font-size:.9em;font-weight:500;cursor:pointer;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(--primary-color);border:1px solid var(--primary-color)}.auth-btn.secondary:hover{opacity:.9}\n"] }]
         }], propDecorators: { messages: [{
                 type: Input
             }], isBotTyping: [{
@@ -212,10 +216,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], isAuthenticated: [{
                 type: Input
+            }], isGuestMode: [{
+                type: Input
             }], trackByMessageId: [{
                 type: Input
             }], suggestionClick: [{
                 type: Output
+            }], loginClick: [{
+                type: Output
+            }], continueAsGuest: [{
+                type: Output
             }], chatMessagesContainer: [{
                 type: ViewChild,
                 args: ['chatMessages']
@@ -528,31 +538,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['document:mouseup']
             }] } });
 
-const DEFAULT_THEME_CONFIG = {
-    fontFamily: "'Roboto', Arial, sans-serif",
-    primaryColor: '#2800ff',
-    secondaryColor: '#08dacf',
-    backgroundColor: '#f8f9fa, #1a1717',
-    chatInputColor: 'var(--background-color)',
-    textAltColor: '#000000, #ffffff',
-    buttonColor: '#000000, #ffffff',
-    textColor: '#333, #f5f5f5',
-    secondaryTextColor: '#858585, #a1a1a1',
-    hintTextColor: '#858585, #a1a1a1',
-    userMessageColor: 'var(--primary-color)',
-    botMessageColor: '#e9ecef, #333',
-    userTextColor: '#fff',
-    botTextColor: '#333, #fff',
-    borderColor: '#ccc, #444',
-    borderShadowColor: '0 4px 16px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.75)',
-    borderTopColor: '#dddddd00, #44444400',
-    typingIndicatorColor: '#999, #bbb',
-    white: '#ffffff',
-    black: '#000000',
-    grey: '#6c757d, #9ca3af',
-    red: '#ff0000',
-    lightRed: '#f28b8b',
-};
+// const DEFAULT_THEME_CONFIG: DoohbotThemeConfig = {
+//   fontFamily: "'Roboto', Arial, sans-serif",
+//   primaryColor: '#2800ff',
+//   secondaryColor: '#08dacf',
+//   backgroundColor: '#f8f9fa, #1a1717',
+//   chatInputColor: '#f8f9fa, #1a1717',
+//   textAltColor: '#000000, #ffffff',
+//   buttonColor: '#000000, #ffffff',
+//   textColor: '#333, #f5f5f5',
+//   secondaryTextColor: '#858585, #a1a1a1',
+//   hintTextColor: '#858585, #a1a1a1',
+//   userMessageColor: '#2800ff',
+//   botMessageColor: '#e9ecef, #333',
+//   userTextColor: '#fff',
+//   botTextColor: '#333, #fff',
+//   borderColor: '#ccc, #444',
+//   borderShadowColor: '0 4px 16px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.75)',
+//   borderTopColor: '#dddddd00, #44444400',
+//   typingIndicatorColor: '#999, #bbb',
+//   white: '#ffffff',
+//   black: '#000000',
+//   grey: '#6c757d, #9ca3af',
+//   red: '#ff0000',
+//   lightRed: '#f28b8b',
+// };
 class ThemeService {
     overlay;
     renderer;
@@ -897,215 +907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
-class MenuItem {
-    href = '#';
-    selected = new EventEmitter();
-    onClick(event) {
-        // Optional: prevent default if used for actions, not navigation
-        // event.preventDefault();
-        this.selected.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MenuItem, isStandalone: true, selector: "app-menu-item", inputs: { href: "href" }, outputs: { selected: "selected" }, ngImport: i0, template: "<li>\r\n  <a [href]=\"href\" (click)=\"onClick($event)\">\r\n    <ng-content></ng-content>\r\n  </a>\r\n</li>\r\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MenuItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-menu-item', imports: [], template: "<li>\r\n  <a [href]=\"href\" (click)=\"onClick($event)\">\r\n    <ng-content></ng-content>\r\n  </a>\r\n</li>\r\n" }]
-        }], propDecorators: { href: [{
-                type: Input
-            }], selected: [{
-                type: Output
-            }] } });
-
-class DropdownMenu {
-    detailsRef;
-    menuItems;
-    ngAfterContentInit() {
-        // Subscribe to all menu item selections
-        this.menuItems.forEach((item) => {
-            item.selected.subscribe(() => {
-                this.close();
-            });
-        });
-    }
-    close() {
-        this.detailsRef.nativeElement.open = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DropdownMenu, isStandalone: true, selector: "app-dropdown-menu", queries: [{ propertyName: "menuItems", predicate: MenuItem }], viewQueries: [{ propertyName: "detailsRef", first: true, predicate: ["details"], descendants: true }], ngImport: i0, template: "<details class=\"dropdown-menu\" #details>\r\n  <summary role=\"button\" class=\"dropdown-trigger\">\r\n    <ng-content select=\"[trigger]\"></ng-content>\r\n  </summary>\r\n  <ul class=\"dropdown-list\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</details>\r\n\r\n<!-- ussage example:\r\n<app-dropdown-menu>\r\n  <span trigger>\u2630 Menu</span>\r\n\r\n  <app-menu-item href=\"/profile\" (selected)=\"doSomething('profile')\">\r\n    My Profile\r\n  </app-menu-item>\r\n  \r\n  <app-menu-item href=\"/settings\" (selected)=\"doSomething('settings')\">\r\n    Settings\r\n  </app-menu-item>\r\n  \r\n  <app-menu-item href=\"#\" (selected)=\"logout()\">\r\n    Logout\r\n  </app-menu-item>\r\n</app-dropdown-menu> -->\r\n\r\n<!-- \r\n  Note: The above usage example is commented out to avoid rendering issues.\r\n  It demonstrates how to use the DropdownMenu component with MenuItem components as options.\r\n-->\r\n", styles: [".dropdown-menu{position:relative;display:inline-block;margin:0;padding:0}.dropdown-menu summary{list-style:none;cursor:pointer;outline:none}.dropdown-menu summary::-webkit-details-marker{display:none}.dropdown-list{position:absolute;top:100%;left:0;margin:8px 0 0;padding:8px 0;width:180px;background:var(--background-color);border-radius:6px;box-shadow:var(--border-shadow-color);z-index:1000;list-style:none}.dropdown-list:before{content:\"\";position:absolute;top:-6px;left:16px;width:0;height:0;border:6px solid transparent;border-bottom-color:var(--background-color)}.dropdown-list li a{display:block;padding:8px 16px;color:var(--primary-color);text-decoration:none}.dropdown-list li a:hover{background:var(--red);color:var(--secondary-color)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DropdownMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-dropdown-menu', imports: [], template: "<details class=\"dropdown-menu\" #details>\r\n  <summary role=\"button\" class=\"dropdown-trigger\">\r\n    <ng-content select=\"[trigger]\"></ng-content>\r\n  </summary>\r\n  <ul class=\"dropdown-list\">\r\n    <ng-content></ng-content>\r\n  </ul>\r\n</details>\r\n\r\n<!-- ussage example:\r\n<app-dropdown-menu>\r\n  <span trigger>\u2630 Menu</span>\r\n\r\n  <app-menu-item href=\"/profile\" (selected)=\"doSomething('profile')\">\r\n    My Profile\r\n  </app-menu-item>\r\n  \r\n  <app-menu-item href=\"/settings\" (selected)=\"doSomething('settings')\">\r\n    Settings\r\n  </app-menu-item>\r\n  \r\n  <app-menu-item href=\"#\" (selected)=\"logout()\">\r\n    Logout\r\n  </app-menu-item>\r\n</app-dropdown-menu> -->\r\n\r\n<!-- \r\n  Note: The above usage example is commented out to avoid rendering issues.\r\n  It demonstrates how to use the DropdownMenu component with MenuItem components as options.\r\n-->\r\n", styles: [".dropdown-menu{position:relative;display:inline-block;margin:0;padding:0}.dropdown-menu summary{list-style:none;cursor:pointer;outline:none}.dropdown-menu summary::-webkit-details-marker{display:none}.dropdown-list{position:absolute;top:100%;left:0;margin:8px 0 0;padding:8px 0;width:180px;background:var(--background-color);border-radius:6px;box-shadow:var(--border-shadow-color);z-index:1000;list-style:none}.dropdown-list:before{content:\"\";position:absolute;top:-6px;left:16px;width:0;height:0;border:6px solid transparent;border-bottom-color:var(--background-color)}.dropdown-list li a{display:block;padding:8px 16px;color:var(--primary-color);text-decoration:none}.dropdown-list li a:hover{background:var(--red);color:var(--secondary-color)}\n"] }]
-        }], propDecorators: { detailsRef: [{
-                type: ViewChild,
-                args: ['details']
-            }], menuItems: [{
-                type: ContentChildren,
-                args: [MenuItem]
-            }] } });
-
-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']
-            }] } });
-
 class ChatWindowComponent {
     isChatOpen = false;
     enableDrag = false;
@@ -1135,6 +936,10 @@ class ChatWindowComponent {
     chatSessions = [];
     chatHistoryUserName = 'User';
     isGuestUser = false;
+    isGuestMode = false;
+    isLoggingIn = false;
+    authError = null;
+    authSuccess = null;
     themeConfig;
     toggleChat = new EventEmitter();
     toggleFullScreen = new EventEmitter();
@@ -1146,7 +951,14 @@ class ChatWindowComponent {
     clearChat = new EventEmitter();
     sessionSelected = new EventEmitter();
     sessionDeleted = new EventEmitter();
+    continueAsGuest = new EventEmitter();
+    loginClick = new EventEmitter();
+    loginSubmit = new EventEmitter();
     themeService = inject(ThemeService);
+    // Login form state
+    loginUsername = '';
+    loginPassword = '';
+    showLoginForm = false;
     onToggleChat() {
         this.toggleChat.emit();
     }
@@ -1154,6 +966,21 @@ class ChatWindowComponent {
         console.log('History button clicked!');
         this.toggleHistorySidebar.emit();
     }
+    onLoginClick() {
+        this.loginClick.emit();
+        this.showLoginForm = true;
+    }
+    onLoginSubmit() {
+        if (this.loginUsername && this.loginPassword) {
+            this.loginSubmit.emit({
+                username: this.loginUsername,
+                password: this.loginPassword,
+            });
+        }
+    }
+    onCancelLogin() {
+        this.showLoginForm = false;
+    }
     onToggleFullScreen() {
         this.toggleFullScreen.emit();
     }
@@ -1167,6 +994,7 @@ class ChatWindowComponent {
         this.send.emit(text);
     }
     onClearMessageError() {
+        this.messageError = null;
         this.clearMessageError.emit();
     }
     onClearChat() {
@@ -1178,6 +1006,9 @@ class ChatWindowComponent {
     onSessionDeleted(sessionId) {
         this.sessionDeleted.emit(sessionId);
     }
+    onContinueAsGuest() {
+        this.continueAsGuest.emit();
+    }
     onPopoutShown(win) {
         // Apply theme classes
         const activeTheme = this.themeService.activeTheme();
@@ -1190,8 +1021,22 @@ class ChatWindowComponent {
         // Apply CSS variables
         this.themeService.applyCssVariables(body, this.themeConfig);
     }
+    ngOnInit() {
+        // Initialization logic if needed
+    }
+    ngOnChanges(changes) {
+        // If authError input changes, update messageError to show snackbar
+        if (changes['authError'] && this.authError) {
+            this.messageError = this.authError;
+        }
+        // If authSuccess input changes, update messageError (used for all snackbar messages currently) to show success
+        if (changes['authSuccess'] && this.authSuccess) {
+            this.messageError = this.authSuccess;
+        }
+    }
+    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", themeConfig: "themeConfig" }, outputs: { toggleChat: "toggleChat", toggleFullScreen: "toggleFullScreen", toggleHistorySidebar: "toggleHistorySidebar", openSettings: "openSettings", suggestionClick: "suggestionClick", send: "send", clearMessageError: "clearMessageError", clearChat: "clearChat", sessionSelected: "sessionSelected", sessionDeleted: "sessionDeleted" }, 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        [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        (suggestionClick)=\"onSuggestionClick($event)\"\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\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!--  Inline error message -->\r\n      <app-snackbar\r\n        *ngIf=\"messageError\"\r\n        [message]=\"messageError\"\r\n        [show]=\"!messageError\"\r\n        (closed)=\"onClearMessageError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- Chat Input: Only show when authenticated -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated\"\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      <!-- 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</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}@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}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:#fff;transition:color .2s ease}.theme-btn.selected{color:#000}\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", "trackByMessageId"], outputs: ["suggestionClick"] }, { 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"] }] });
+    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" }, 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      <!--  Inline error message -->\r\n      <app-snackbar\r\n        *ngIf=\"messageError\"\r\n        [message]=\"messageError\"\r\n        [show]=\"true\"\r\n        (closed)=\"onClearMessageError()\"\r\n      ></app-snackbar>\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      <div *ngIf=\"showLoginForm && !isAuthenticated\" class=\"login-form-container\">\r\n        <h3 class=\"login-title\">Login</h3>\r\n        <div class=\"login-fields\">\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"loginUsername\"\r\n            placeholder=\"Username\"\r\n            class=\"login-input\"\r\n          />\r\n          <input\r\n            type=\"password\"\r\n            [(ngModel)]=\"loginPassword\"\r\n            placeholder=\"Password\"\r\n            class=\"login-input\"\r\n            (keydown.enter)=\"onLoginSubmit()\"\r\n          />\r\n        </div>\r\n        <div class=\"login-actions\">\r\n          <button (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n          <button\r\n            (click)=\"onLoginSubmit()\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"!loginUsername || !loginPassword || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Submit' }}\r\n          </button>\r\n        </div>\r\n      </div>\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</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}@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}.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:20px;display:flex;flex-direction:column;gap:15px;height:100%;justify-content:center}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.2em;color:var(--text-color);font-family:var(--font-family)}.login-form-container .login-fields{display:flex;flex-direction:column;gap:10px}.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)}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}\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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChatWindowComponent, decorators: [{
             type: Component,
@@ -1206,10 +1051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         DraggableDialogDirective,
                         ResizableDialogDirective,
                         ChatHistorySidebarComponent,
-                        DropdownMenu,
-                        MenuItem,
-                        PopoutWindowDirective,
-                    ], 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        [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        (suggestionClick)=\"onSuggestionClick($event)\"\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\"\r\n        [messages]=\"predefinedMessages\"\r\n        [disabled]=\"isBotTyping\"\r\n        (chipClick)=\"onSuggestionClick($event)\"\r\n      ></app-chips>\r\n\r\n      <!--  Inline error message -->\r\n      <app-snackbar\r\n        *ngIf=\"messageError\"\r\n        [message]=\"messageError\"\r\n        [show]=\"!messageError\"\r\n        (closed)=\"onClearMessageError()\"\r\n      ></app-snackbar>\r\n\r\n      <!-- Chat Input: Only show when authenticated -->\r\n      <app-message-input\r\n        *ngIf=\"isAuthenticated\"\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      <!-- 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</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}@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}.theme-selector{display:flex;align-items:center;padding:4px 12px;gap:8px}.theme-btn{background:none;border:none;color:#fff;transition:color .2s ease}.theme-btn.selected{color:#000}\n"] }]
+                        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      <!--  Inline error message -->\r\n      <app-snackbar\r\n        *ngIf=\"messageError\"\r\n        [message]=\"messageError\"\r\n        [show]=\"true\"\r\n        (closed)=\"onClearMessageError()\"\r\n      ></app-snackbar>\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      <div *ngIf=\"showLoginForm && !isAuthenticated\" class=\"login-form-container\">\r\n        <h3 class=\"login-title\">Login</h3>\r\n        <div class=\"login-fields\">\r\n          <input\r\n            type=\"text\"\r\n            [(ngModel)]=\"loginUsername\"\r\n            placeholder=\"Username\"\r\n            class=\"login-input\"\r\n          />\r\n          <input\r\n            type=\"password\"\r\n            [(ngModel)]=\"loginPassword\"\r\n            placeholder=\"Password\"\r\n            class=\"login-input\"\r\n            (keydown.enter)=\"onLoginSubmit()\"\r\n          />\r\n        </div>\r\n        <div class=\"login-actions\">\r\n          <button (click)=\"onCancelLogin()\" class=\"auth-btn secondary\">Cancel</button>\r\n          <button\r\n            (click)=\"onLoginSubmit()\"\r\n            class=\"auth-btn primary\"\r\n            [disabled]=\"!loginUsername || !loginPassword || isLoggingIn\"\r\n          >\r\n            {{ isLoggingIn ? 'Logging in...' : 'Submit' }}\r\n          </button>\r\n        </div>\r\n      </div>\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</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}@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}.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:20px;display:flex;flex-direction:column;gap:15px;height:100%;justify-content:center}.login-form-container .login-title{text-align:center;margin:0 0 10px;font-size:1.2em;color:var(--text-color);font-family:var(--font-family)}.login-form-container .login-fields{display:flex;flex-direction:column;gap:10px}.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)}.login-form-container .login-fields .login-input:focus{outline:none;border-color:var(--primary-color)}.login-form-container .login-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}\n"] }]
         }], propDecorators: { isChatOpen: [{
                 type: Input
             }], enableDrag: [{
@@ -1266,6 +1109,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], isGuestUser: [{
                 type: Input
+            }], isGuestMode: [{
+                type: Input
+            }], isLoggingIn: [{
+                type: Input
+            }], authError: [{
+                type: Input
+            }], authSuccess: [{
+                type: Input
             }], themeConfig: [{
                 type: Input
             }], toggleChat: [{
@@ -1288,6 +1139,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }], sessionDeleted: [{
                 type: Output
+            }], continueAsGuest: [{
+                type: Output
+            }], loginClick: [{
+                type: Output
+            }], loginSubmit: [{
+                type: Output
             }] } });
 
 class FullscreenDirective {
@@ -1948,9 +1805,13 @@ class MessageService {
     isLoadingApi = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingApi" }] : []));
     apiError = signal(null, ...(ngDevMode ? [{ debugName: "apiError" }] : []));
     isBotTyping = signal(false, ...(ngDevMode ? [{ debugName: "isBotTyping" }] : []));
+    isGuestMode = signal(false, ...(ngDevMode ? [{ debugName: "isGuestMode" }] : []));
     constructor() {
         // Start with empty messages - no auto-load
     }
+    setGuestMode(isGuest) {
+        this.isGuestMode.set(isGuest);
+    }
     /**
      * Switch to a new context
      */
@@ -2033,6 +1894,10 @@ class MessageService {
      * Get bot reply - supports both API and local modes
      */
     async getBotReply(userText) {
+        // If in guest mode, force local logic
+        if (this.isGuestMode()) {
+            return this.getBotReplyLocal(userText);
+        }
         // Check if API mode is enabled
         if (this.apiService?.isApiEnabled()) {
             return this.getBotReplyFromApi(userText);
@@ -2448,15 +2313,26 @@ class ChatFacadeService {
     accountService = inject(AccountService);
     authService = inject(AuthService);
     tenantContextService = inject(TenantContextService);
-    // Expose state from services
+    // Chat State
     messages = this.messageService.messages;
     isBotTyping = this.messageService.isBotTyping;
     chatSessions = signal([], ...(ngDevMode ? [{ debugName: "chatSessions" }] : []));
     isAuthenticated = signal(false, ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+    isGuestMode = signal(false, ...(ngDevMode ? [{ debugName: "isGuestMode" }] : []));
     messageError = signal(null, ...(ngDevMode ? [{ debugName: "messageError" }] : []));
+    // API / Auth State
+    apiError = signal(null, ...(ngDevMode ? [{ debugName: "apiError" }] : []));
+    authError = signal(null, ...(ngDevMode ? [{ debugName: "authError" }] : []));
+    authSuccess = signal(null, ...(ngDevMode ? [{ debugName: "authSuccess" }] : []));
+    isLoggingIn = signal(false, ...(ngDevMode ? [{ debugName: "isLoggingIn" }] : []));
     constructor() {
         // Set initial authentication status
         this.isAuthenticated.set(this.authService.isAuthenticated());
+        // Check if we should default to guest mode (missing API config)
+        if (!this.authService.apiUrl || !this.authService.companyCode) {
+            console.log('ChatFacade: No API config detected, defaulting to Guest Mode');
+            this.isGuestMode.set(true);
+        }
     }
     // ============================================================================
     // SESSION MANAGEMENT
@@ -2544,29 +2420,47 @@ class ChatFacadeService {
     // AUTHENTICATION
     // ============================================================================
     /**
-     * Authenticate user with credentials or skip authentication for testing
+     * Enable guest mode explicitly
      */
-    async login(credentials, skipAuth = false) {
-        //Todo: Remove this in production
-        if (skipAuth) {
-            console.log('Authentication skipped - Mock mode enabled');
-            this.isAuthenticated.set(true);
-            return true;
-        }
+    enableGuestMode() {
+        this.isGuestMode.set(true);
+        this.messageService.setGuestMode(true);
+    }
+    /**
+     * Disable guest mode explicitly
+     */
+    disableGuestMode() {
+        this.isGuestMode.set(false);
+        this.messageService.setGuestMode(false);
+    }
+    /**
+     * Authenticate user with credentials
+     */
+    async login(credentials) {
+        this.isLoggingIn.set(true);
+        this.authError.set(null);
+        this.authSuccess.set(null);
         try {
             const response = await firstValueFrom(this.accountService.login(credentials));
             if (response && response.success) {
                 this.isAuthenticated.set(true);
+                this.disableGuestMode(); // Ensure guest mode is off
+                this.authSuccess.set('Login successful!');
+                this.isLoggingIn.set(false);
                 return true;
             }
             else {
                 this.isAuthenticated.set(false);
+                this.authError.set('Login failed. Please check your credentials.');
+                this.isLoggingIn.set(false);
                 return false;
             }
         }
         catch (error) {
             console.error('Login failed:', error);
             this.isAuthenticated.set(false);
+            this.authError.set('An error occurred during login.');
+            this.isLoggingIn.set(false);
             return false;
         }
     }
@@ -2864,6 +2758,10 @@ class Doohbot extends DoohbotInput {
     chatSessions = this.chatFacade.chatSessions;
     messageError = this.chatFacade.messageError;
     showSuggestionChips = this.chatFacade.showSuggestionChips;
+    isGuestMode = this.chatFacade.isGuestMode;
+    isLoggingIn = this.chatFacade.isLoggingIn;
+    authError = this.chatFacade.authError;
+    authSuccess = this.chatFacade.authSuccess;
     // ============================================================================
     // COMPONENT-SPECIFIC STATE
     // ============================================================================
@@ -2969,7 +2867,16 @@ class Doohbot extends DoohbotInput {
             username: this.config.username || AppConst.data?.username,
             password: this.config.password || AppConst.data?.password,
         };
-        this.chatFacade.login(credentials, this.config.skipAuthentication);
+        this.chatFacade.login(credentials);
+    }
+    performLoginWithCredentials(credentials) {
+        this.chatFacade.login(credentials);
+    }
+    continueAsGuest() {
+        this.chatFacade.enableGuestMode();
+    }
+    disableGuestMode() {
+        this.chatFacade.disableGuestMode();
     }
     // ============================================================================
     // CHAT OPERATIONS
@@ -3033,7 +2940,7 @@ class Doohbot extends DoohbotInput {
                 deps: [AppConst],
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "chatWindowRef", first: true, predicate: ChatWindowComponent, descendants: true, read: ElementRef }, { propertyName: "fullscreenDirective", first: true, predicate: FullscreenDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-chat-button\r\n  [buttonStyle]=\"buttonStyle\"\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [unreadCount]=\"unreadCount()\"\r\n  [chatIcon]=\"chatIcon ?? ''\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  (toggle)=\"toggleChat()\"\r\n></app-chat-button>\r\n\r\n<app-chat-window\r\n  *ngIf=\"isChatOpen()\"\r\n  appFullscreen\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [enableDrag]=\"enableDrag\"\r\n  [enableResize]=\"enableResize\"\r\n  [isFullScreen]=\"isFullScreen()\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  [appHeaderLogoUrl]=\"appHeaderLogoUrl ?? ''\"\r\n  [moreIcon]=\"moreIcon ?? ''\"\r\n  [minimizeIcon]=\"minimizeIcon ?? ''\"\r\n  [messages]=\"messages()\"\r\n  [isBotTyping]=\"isBotTyping()\"\r\n  [isAuthenticated]=\"isAuthenticated()\"\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  [hintText]=\"hintText ?? ''\"\r\n  [sendIcon]=\"sendIcon ?? ''\"\r\n  [messageError]=\"messageError()\"\r\n  [showSuggestionChips]=\"showSuggestionChips()\"\r\n  [isHistorySidebarOpen]=\"isHistorySidebarOpen()\"\r\n  [chatSessions]=\"chatSessions()\"\r\n  [chatHistoryUserName]=\"userName\"\r\n  [isGuestUser]=\"isGuestUser()\"\r\n  (toggleChat)=\"toggleChat()\"\r\n  (toggleFullScreen)=\"toggleFullScreen()\"\r\n  (toggleHistorySidebar)=\"toggleHistorySidebar()\"\r\n  (sessionSelected)=\"loadChatSession($event)\"\r\n  (sessionDeleted)=\"deleteSession($event)\"\r\n  (suggestionClick)=\"sendMessage($event)\"\r\n  (send)=\"sendMessage($event)\"\r\n  (clearMessageError)=\"clearMessageError()\"\r\n  (clearChat)=\"clearChat()\"\r\n></app-chat-window>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host(.light-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #f8f9fa;--chat-input-color: var(--background-color);--text-alt-color: #000000;--button-color: #000000;--text-color: #333;--secondary-text-color: #858585;--hint-text-color: #858585;--user-message-color: var(--primary-color);--bot-message-color: #e9ecef;--user-text-color: #fff;--bot-text-color: #333;--border-color: #ccc;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .25);--border-top-color: #dddddd00;--typing-indicator-color: #999;--avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);--white: #ffffff;--black: #000000;--grey: #6c757d;--red: #ff0000;--light-red: #f28b8b}:host(.dark-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #1a1717;--chat-input-color: var(--background-color);--text-alt-color: #ffffff;--button-color: #ffffff;--text-color: #f5f5f5;--secondary-text-color: #a1a1a1;--hint-text-color: #a1a1a1;--user-message-color: var(--primary-color);--bot-message-color: #333;--user-text-color: #fff;--bot-text-color: #fff;--border-color: #444;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .75);--border-top-color: #44444400;--typing-indicator-color: #bbb;--avatar-filter: invert(100%) brightness(100%);--white: #ffffff;--black: #000000;--grey: #9ca3af;--red: #ff0000;--light-red: #f28b8b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChatButtonComponent, selector: "app-chat-button", inputs: ["buttonStyle", "isChatOpen", "unreadCount", "chatIcon", "appTitle", "appLogoUrl", "appTextLogoUrl"], outputs: ["toggle"] }, { kind: "component", type: ChatWindowComponent, selector: "app-chat-window", inputs: ["isChatOpen", "enableDrag", "enableResize", "isFullScreen", "isAuthenticated", "appTitle", "appLogoUrl", "appTextLogoUrl", "appHeaderLogoUrl", "moreIcon", "minimizeIcon", "messages", "isBotTyping", "appSubtitle", "welcomeDesc", "predefinedMessages", "botAvatarUrl", "userAvatarUrl", "userName", "trackByMessageId", "hintText", "sendIcon", "messageError", "showSuggestionChips", "isHistorySidebarOpen", "chatSessions", "chatHistoryUserName", "isGuestUser", "themeConfig"], outputs: ["toggleChat", "toggleFullScreen", "toggleHistorySidebar", "openSettings", "suggestionClick", "send", "clearMessageError", "clearChat", "sessionSelected", "sessionDeleted"] }, { kind: "directive", type: FullscreenDirective, selector: "[appFullscreen]", inputs: ["fullscreenTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "chatWindowRef", first: true, predicate: ChatWindowComponent, descendants: true, read: ElementRef }, { propertyName: "fullscreenDirective", first: true, predicate: FullscreenDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-chat-button\r\n  [buttonStyle]=\"buttonStyle\"\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [unreadCount]=\"unreadCount()\"\r\n  [chatIcon]=\"chatIcon ?? ''\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  (toggle)=\"toggleChat()\"\r\n></app-chat-button>\r\n\r\n<app-chat-window\r\n  *ngIf=\"isChatOpen()\"\r\n  appFullscreen\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [enableDrag]=\"enableDrag\"\r\n  [enableResize]=\"enableResize\"\r\n  [isFullScreen]=\"isFullScreen()\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  [appHeaderLogoUrl]=\"appHeaderLogoUrl ?? ''\"\r\n  [moreIcon]=\"moreIcon ?? ''\"\r\n  [minimizeIcon]=\"minimizeIcon ?? ''\"\r\n  [messages]=\"messages()\"\r\n  [isBotTyping]=\"isBotTyping()\"\r\n  [isAuthenticated]=\"isAuthenticated()\"\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  [hintText]=\"hintText ?? ''\"\r\n  [sendIcon]=\"sendIcon ?? ''\"\r\n  [messageError]=\"messageError()\"\r\n  [showSuggestionChips]=\"showSuggestionChips()\"\r\n  [isHistorySidebarOpen]=\"isHistorySidebarOpen()\"\r\n  [chatSessions]=\"chatSessions()\"\r\n  [chatHistoryUserName]=\"userName\"\r\n  [isGuestUser]=\"isGuestUser()\"\r\n  [isGuestMode]=\"isGuestMode()\"\r\n  [isLoggingIn]=\"isLoggingIn()\"\r\n  [authError]=\"authError()\"\r\n  [authSuccess]=\"authSuccess()\"\r\n  (toggleChat)=\"toggleChat()\"\r\n  (continueAsGuest)=\"continueAsGuest()\"\r\n  (loginClick)=\"disableGuestMode()\"\r\n  (loginSubmit)=\"performLoginWithCredentials($event)\"\r\n  (toggleFullScreen)=\"toggleFullScreen()\"\r\n  (toggleHistorySidebar)=\"toggleHistorySidebar()\"\r\n  (sessionSelected)=\"loadChatSession($event)\"\r\n  (sessionDeleted)=\"deleteSession($event)\"\r\n  (suggestionClick)=\"sendMessage($event)\"\r\n  (send)=\"sendMessage($event)\"\r\n  (clearMessageError)=\"clearMessageError()\"\r\n  (clearChat)=\"clearChat()\"\r\n></app-chat-window>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host(.light-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #f8f9fa;--chat-input-color: var(--background-color);--text-alt-color: #000000;--button-color: #000000;--text-color: #333;--secondary-text-color: #858585;--hint-text-color: #858585;--user-message-color: var(--primary-color);--bot-message-color: #e9ecef;--user-text-color: #fff;--bot-text-color: #333;--border-color: #ccc;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .25);--border-top-color: #dddddd00;--typing-indicator-color: #999;--avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);--white: #ffffff;--black: #000000;--grey: #6c757d;--red: #ff0000;--light-red: #f28b8b}:host(.dark-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #1a1717;--chat-input-color: var(--background-color);--text-alt-color: #ffffff;--button-color: #ffffff;--text-color: #f5f5f5;--secondary-text-color: #a1a1a1;--hint-text-color: #a1a1a1;--user-message-color: var(--primary-color);--bot-message-color: #333;--user-text-color: #fff;--bot-text-color: #fff;--border-color: #444;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .75);--border-top-color: #44444400;--typing-indicator-color: #bbb;--avatar-filter: invert(100%) brightness(100%);--white: #ffffff;--black: #000000;--grey: #9ca3af;--red: #ff0000;--light-red: #f28b8b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChatButtonComponent, selector: "app-chat-button", inputs: ["buttonStyle", "isChatOpen", "unreadCount", "chatIcon", "appTitle", "appLogoUrl", "appTextLogoUrl"], outputs: ["toggle"] }, { kind: "component", type: ChatWindowComponent, selector: "app-chat-window", inputs: ["isChatOpen", "enableDrag", "enableResize", "isFullScreen", "isAuthenticated", "appTitle", "appLogoUrl", "appTextLogoUrl", "appHeaderLogoUrl", "moreIcon", "minimizeIcon", "messages", "isBotTyping", "appSubtitle", "welcomeDesc", "predefinedMessages", "botAvatarUrl", "userAvatarUrl", "userName", "trackByMessageId", "hintText", "sendIcon", "messageError", "showSuggestionChips", "isHistorySidebarOpen", "chatSessions", "chatHistoryUserName", "isGuestUser", "isGuestMode", "isLoggingIn", "authError", "authSuccess", "themeConfig"], outputs: ["toggleChat", "toggleFullScreen", "toggleHistorySidebar", "openSettings", "suggestionClick", "send", "clearMessageError", "clearChat", "sessionSelected", "sessionDeleted", "continueAsGuest", "loginClick", "loginSubmit"] }, { kind: "directive", type: FullscreenDirective, selector: "[appFullscreen]", inputs: ["fullscreenTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: Doohbot, decorators: [{
             type: Component,
@@ -3045,7 +2952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                             deps: [AppConst],
                             multi: true,
                         },
-                    ], template: "<app-chat-button\r\n  [buttonStyle]=\"buttonStyle\"\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [unreadCount]=\"unreadCount()\"\r\n  [chatIcon]=\"chatIcon ?? ''\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  (toggle)=\"toggleChat()\"\r\n></app-chat-button>\r\n\r\n<app-chat-window\r\n  *ngIf=\"isChatOpen()\"\r\n  appFullscreen\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [enableDrag]=\"enableDrag\"\r\n  [enableResize]=\"enableResize\"\r\n  [isFullScreen]=\"isFullScreen()\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  [appHeaderLogoUrl]=\"appHeaderLogoUrl ?? ''\"\r\n  [moreIcon]=\"moreIcon ?? ''\"\r\n  [minimizeIcon]=\"minimizeIcon ?? ''\"\r\n  [messages]=\"messages()\"\r\n  [isBotTyping]=\"isBotTyping()\"\r\n  [isAuthenticated]=\"isAuthenticated()\"\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  [hintText]=\"hintText ?? ''\"\r\n  [sendIcon]=\"sendIcon ?? ''\"\r\n  [messageError]=\"messageError()\"\r\n  [showSuggestionChips]=\"showSuggestionChips()\"\r\n  [isHistorySidebarOpen]=\"isHistorySidebarOpen()\"\r\n  [chatSessions]=\"chatSessions()\"\r\n  [chatHistoryUserName]=\"userName\"\r\n  [isGuestUser]=\"isGuestUser()\"\r\n  (toggleChat)=\"toggleChat()\"\r\n  (toggleFullScreen)=\"toggleFullScreen()\"\r\n  (toggleHistorySidebar)=\"toggleHistorySidebar()\"\r\n  (sessionSelected)=\"loadChatSession($event)\"\r\n  (sessionDeleted)=\"deleteSession($event)\"\r\n  (suggestionClick)=\"sendMessage($event)\"\r\n  (send)=\"sendMessage($event)\"\r\n  (clearMessageError)=\"clearMessageError()\"\r\n  (clearChat)=\"clearChat()\"\r\n></app-chat-window>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host(.light-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #f8f9fa;--chat-input-color: var(--background-color);--text-alt-color: #000000;--button-color: #000000;--text-color: #333;--secondary-text-color: #858585;--hint-text-color: #858585;--user-message-color: var(--primary-color);--bot-message-color: #e9ecef;--user-text-color: #fff;--bot-text-color: #333;--border-color: #ccc;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .25);--border-top-color: #dddddd00;--typing-indicator-color: #999;--avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);--white: #ffffff;--black: #000000;--grey: #6c757d;--red: #ff0000;--light-red: #f28b8b}:host(.dark-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #1a1717;--chat-input-color: var(--background-color);--text-alt-color: #ffffff;--button-color: #ffffff;--text-color: #f5f5f5;--secondary-text-color: #a1a1a1;--hint-text-color: #a1a1a1;--user-message-color: var(--primary-color);--bot-message-color: #333;--user-text-color: #fff;--bot-text-color: #fff;--border-color: #444;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .75);--border-top-color: #44444400;--typing-indicator-color: #bbb;--avatar-filter: invert(100%) brightness(100%);--white: #ffffff;--black: #000000;--grey: #9ca3af;--red: #ff0000;--light-red: #f28b8b}\n"] }]
+                    ], template: "<app-chat-button\r\n  [buttonStyle]=\"buttonStyle\"\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [unreadCount]=\"unreadCount()\"\r\n  [chatIcon]=\"chatIcon ?? ''\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  (toggle)=\"toggleChat()\"\r\n></app-chat-button>\r\n\r\n<app-chat-window\r\n  *ngIf=\"isChatOpen()\"\r\n  appFullscreen\r\n  [isChatOpen]=\"isChatOpen()\"\r\n  [enableDrag]=\"enableDrag\"\r\n  [enableResize]=\"enableResize\"\r\n  [isFullScreen]=\"isFullScreen()\"\r\n  [appTitle]=\"appTitle ?? ''\"\r\n  [appLogoUrl]=\"appLogoUrl ?? ''\"\r\n  [appTextLogoUrl]=\"appTextLogoUrl ?? ''\"\r\n  [appHeaderLogoUrl]=\"appHeaderLogoUrl ?? ''\"\r\n  [moreIcon]=\"moreIcon ?? ''\"\r\n  [minimizeIcon]=\"minimizeIcon ?? ''\"\r\n  [messages]=\"messages()\"\r\n  [isBotTyping]=\"isBotTyping()\"\r\n  [isAuthenticated]=\"isAuthenticated()\"\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  [hintText]=\"hintText ?? ''\"\r\n  [sendIcon]=\"sendIcon ?? ''\"\r\n  [messageError]=\"messageError()\"\r\n  [showSuggestionChips]=\"showSuggestionChips()\"\r\n  [isHistorySidebarOpen]=\"isHistorySidebarOpen()\"\r\n  [chatSessions]=\"chatSessions()\"\r\n  [chatHistoryUserName]=\"userName\"\r\n  [isGuestUser]=\"isGuestUser()\"\r\n  [isGuestMode]=\"isGuestMode()\"\r\n  [isLoggingIn]=\"isLoggingIn()\"\r\n  [authError]=\"authError()\"\r\n  [authSuccess]=\"authSuccess()\"\r\n  (toggleChat)=\"toggleChat()\"\r\n  (continueAsGuest)=\"continueAsGuest()\"\r\n  (loginClick)=\"disableGuestMode()\"\r\n  (loginSubmit)=\"performLoginWithCredentials($event)\"\r\n  (toggleFullScreen)=\"toggleFullScreen()\"\r\n  (toggleHistorySidebar)=\"toggleHistorySidebar()\"\r\n  (sessionSelected)=\"loadChatSession($event)\"\r\n  (sessionDeleted)=\"deleteSession($event)\"\r\n  (suggestionClick)=\"sendMessage($event)\"\r\n  (send)=\"sendMessage($event)\"\r\n  (clearMessageError)=\"clearMessageError()\"\r\n  (clearChat)=\"clearChat()\"\r\n></app-chat-window>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";:host(.light-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #f8f9fa;--chat-input-color: var(--background-color);--text-alt-color: #000000;--button-color: #000000;--text-color: #333;--secondary-text-color: #858585;--hint-text-color: #858585;--user-message-color: var(--primary-color);--bot-message-color: #e9ecef;--user-text-color: #fff;--bot-text-color: #333;--border-color: #ccc;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .25);--border-top-color: #dddddd00;--typing-indicator-color: #999;--avatar-filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(96%) contrast(91%);--white: #ffffff;--black: #000000;--grey: #6c757d;--red: #ff0000;--light-red: #f28b8b}:host(.dark-theme){--font-family: \"Roboto\", Arial, sans-serif;--primary-color: #2800ff;--secondary-color: #08dacf;--background-color: #1a1717;--chat-input-color: var(--background-color);--text-alt-color: #ffffff;--button-color: #ffffff;--text-color: #f5f5f5;--secondary-text-color: #a1a1a1;--hint-text-color: #a1a1a1;--user-message-color: var(--primary-color);--bot-message-color: #333;--user-text-color: #fff;--bot-text-color: #fff;--border-color: #444;--border-shadow-color: 0 4px 16px rgba(0, 0, 0, .75);--border-top-color: #44444400;--typing-indicator-color: #bbb;--avatar-filter: invert(100%) brightness(100%);--white: #ffffff;--black: #000000;--grey: #9ca3af;--red: #ff0000;--light-red: #f28b8b}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { config: [{
                 type: Input
             }], platformTenant: [{