tin-spa 20.6.4 → 20.6.6

package/fesm2022/tin-spa.mjs

@@ -15,7 +15,7 @@ import { mergeMap, filter, startWith, map, catchError, finalize as finalize$1, t
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1$2 from '@angular/router';
-import { Router, RouterModule, NavigationEnd } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import * as i2$2 from '@abacritt/angularx-social-login';
 import { SocialLoginModule } from '@abacritt/angularx-social-login';
 import * as i1$1 from '@angular/common/http';
@@ -1514,18 +1514,20 @@ class SignalRService {
         // Changed: Single connection state observable — used by real-time table indicators
         this.dataHubConnected = new BehaviorSubject(false);
         this.dataHubConnected$ = this.dataHubConnected.asObservable();
+        this.currentToken = ''; // Changed: Live token reference for SignalR reconnection
     }
     // Changed: Single startConnection method handles both notification and entity change listeners
     startConnection(hubUrl, token) {
         // Changed: Allow disabling real-time via localStorage flag (used by E2E tests)
         if (localStorage.getItem('disableRealTime') === 'true')
             return;
+        this.currentToken = token; // Changed: Store token so it can be updated after refresh
         if (this.hubConnection && this.hubConnection.state !== signalR.HubConnectionState.Disconnected)
             return;
         if (this.hubConnection)
             this.stopConnection();
         this.hubConnection = new signalR.HubConnectionBuilder()
-            .withUrl(hubUrl, { accessTokenFactory: () => token })
+            .withUrl(hubUrl, { accessTokenFactory: () => this.currentToken }) // Changed: Use live reference so reconnections use the latest token
             .withAutomaticReconnect([0, 2000, 5000, 10000, 30000, 60000, 60000, 60000, 60000, 60000]) // Changed: Extended retry policy for entity broadcast reliability
             .build();
         // Changed: Notification count listener (previously on separate notification hub)
@@ -1580,6 +1582,10 @@ class SignalRService {
             console.error('SignalR connection error:', err);
         });
     }
+    // Changed: Update the token used for SignalR reconnection (called after silent refresh)
+    updateToken(token) {
+        this.currentToken = token;
+    }
     stopConnection() {
         if (this.hubConnection) {
             this.hubConnection.stop();
@@ -1607,6 +1613,7 @@ class AuthService {
         this.signalRService = signalRService;
         this.googleAuthInitialized = false;
         this.isRefreshing = false; // Changed: Guard to prevent concurrent refresh calls
+        this.refreshTimer = null; // Changed: Proactive token refresh timer
         this.socialUserSource = new BehaviorSubject(null);
         this.socialUserObserv = this.socialUserSource.asObservable();
         //Logged in
@@ -1644,6 +1651,7 @@ class AuthService {
         this.tenantNameSource = new BehaviorSubject("Tenant Name");
         this.tenantNameObserv = this.tenantNameSource.asObservable();
         this.initializeGoogleAuth();
+        this.initVisibilityRefresh(); // Changed: Refresh token when tab becomes visible after being hidden
     }
     initializeGoogleAuth() {
         if (this.googleAuthInitialized) {
@@ -1670,6 +1678,10 @@ class AuthService {
                 });
             }
         }
+        if (this.refreshTimer) {
+            clearTimeout(this.refreshTimer);
+            this.refreshTimer = null;
+        } // Changed: Cancel proactive refresh timer
         this.signalRService.stopConnection(); // Changed: Stop consolidated SignalR connection before clearing session
         this.Updateloggedin(false);
         this.UpdateAutoLogin(false);
@@ -1757,6 +1769,7 @@ class AuthService {
         this.Updateloggedin(true);
         this.UpdateToken(data.token);
         this.UpdateTokenExpire(data.expiration);
+        this.signalRService.updateToken(data.token); // Changed: Keep SignalR reconnection token in sync
         this.UpdateRole(data.role);
         this.updateLoggedUserFullName(data.firstName);
         this.updateTenantName(data.tenantName);
@@ -1771,6 +1784,45 @@ class AuthService {
             this.storage.storePersistent(Constants.AUTH_REFRESH_TOKEN, data.refreshToken);
             this.storage.storePersistent(Constants.AUTH_REFRESH_TOKEN_EXPIRE, data.refreshTokenExpiry);
         }
+        this.scheduleTokenRefresh(data.expiration); // Changed: Schedule proactive refresh before token expires
+    }
+    // Changed: Schedule a silent refresh 5 minutes before the access token expires
+    scheduleTokenRefresh(expiration) {
+        if (this.refreshTimer)
+            clearTimeout(this.refreshTimer); // Clear any existing timer
+        const expiresAt = new Date(expiration).getTime();
+        const now = Date.now();
+        const refreshIn = expiresAt - now - (5 * 60 * 1000); // 5 minutes before expiry
+        if (refreshIn <= 0)
+            return; // Token already expired or about to — reactive refresh will handle it
+        this.refreshTimer = setTimeout(() => {
+            this.silentRefresh().then(success => {
+                if (!success)
+                    this.sessionExpired();
+            });
+        }, refreshIn);
+    }
+    // Changed: When tab becomes visible, check if token needs immediate refresh
+    initVisibilityRefresh() {
+        document.addEventListener('visibilitychange', () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            if (!this.loggedin)
+                return;
+            const expire = this.tokenExpireSource.value;
+            if (!expire)
+                return;
+            const expiresAt = new Date(expire).getTime();
+            const now = Date.now();
+            const minutesLeft = (expiresAt - now) / 60000;
+            // If token expires in less than 10 minutes or is already expired, refresh immediately
+            if (minutesLeft < 10 && this.hasRefreshToken()) {
+                this.silentRefresh().then(success => {
+                    if (!success)
+                        this.sessionExpired();
+                });
+            }
+        });
     }
     // Changed: Non-destructive check — only returns true if token is genuinely valid (not expired)
     hasValidSession() {
@@ -6494,6 +6546,8 @@ class AgentService {
         this.currentConversationId$ = this.currentConversationId.asObservable();
         this.greeting$ = this.greeting.asObservable();
         this.suggestedQuestions$ = this.suggestedQuestions.asObservable();
+        // Changed: Load the most recent conversation's messages on first open
+        this.hasLoadedInitial = false;
         this.initListeners();
     }
     // App name derived from the existing appConfig
@@ -6568,15 +6622,13 @@ class AgentService {
             error: () => this.typing.next(false)
         });
     }
-    // Start a new conversation
+    // Start a new conversation — only when user explicitly clicks "New conversation"
     newConversation() {
         this.messages.next([]);
         this.currentConversationId.next(null);
-        this.dataService.CallApi({ url: 'agent/conversations', method: 'post' }, // Changed: was assistant/conversations
-        { appName: this.appName }).subscribe(res => {
+        this.dataService.CallApi({ url: 'agent/conversations', method: 'post' }, { appName: this.appName }).subscribe(res => {
             if (res.success && res.data) {
                 this.currentConversationId.next(res.data.conversationID);
-                this.loadConversations();
             }
         });
     }
@@ -6593,9 +6645,33 @@ class AgentService {
         });
     }
     // Toggle chat window open/closed
-    toggle() { this.isOpen.next(!this.isOpen.value); }
-    open() { this.isOpen.next(true); }
+    toggle() {
+        const opening = !this.isOpen.value;
+        this.isOpen.next(opening);
+        if (opening && !this.hasLoadedInitial) {
+            this.hasLoadedInitial = true;
+            this.restoreLastConversation(); // Changed: Load previous chat on first open
+        }
+    }
+    open() {
+        this.isOpen.next(true);
+        if (!this.hasLoadedInitial) {
+            this.hasLoadedInitial = true;
+            this.restoreLastConversation();
+        }
+    }
     close() { this.isOpen.next(false); }
+    // Changed: Fetch conversation list and load the most recent one's messages
+    restoreLastConversation() {
+        this.dataService.CallApi({ url: 'agent/conversations' }).subscribe(res => {
+            if (res.success && res.data?.length > 0) {
+                this.conversations.next(res.data);
+                const latest = res.data[0]; // Backend returns ordered by CreatedDate desc
+                this.currentConversationId.next(latest.conversationID);
+                this.loadMessages(latest.conversationID);
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, deps: [{ token: DataServiceLib }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, providedIn: 'root' }); }
 }
@@ -6604,6 +6680,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: DataServiceLib }, { type: SignalRService }] });
 
+class AnalyticsService {
+    constructor(router) {
+        this.router = router;
+        this.initialized = false;
+    }
+    // Changed: Accept production flag and measurement ID — only loads GA in production
+    init(production, measurementId) {
+        if (!production || !measurementId || this.initialized)
+            return; // Changed: Skip GA on non-production environments
+        this.initialized = true;
+        this.loadGtagScript(measurementId); // Changed: Dynamically inject gtag script
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
+            const url = event.urlAfterRedirects || event.url;
+            // Strip hash prefix so GA sees clean paths (e.g. /home/invoices instead of #/home/invoices)
+            const pagePath = url.replace(/^#/, '') || '/';
+            this.sendPageView(pagePath);
+        });
+    }
+    // Changed: Dynamically load the gtag.js script and configure the measurement ID
+    loadGtagScript(measurementId) {
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+        document.head.appendChild(script);
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = function () { window.dataLayer.push(arguments); };
+        gtag('js', new Date());
+        gtag('config', measurementId, { send_page_view: false }); // Changed: Disable auto page_view — route tracking sends them
+    }
+    // Send page_view event to GA4
+    sendPageView(pagePath) {
+        if (typeof gtag === 'function') {
+            gtag('event', 'page_view', {
+                page_path: pagePath,
+                page_location: window.location.origin + pagePath
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AnalyticsService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AnalyticsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.Router }] });
+
 // Functional guard for Angular 15+ (replaces deprecated class-based CanActivate)
 // Changed: Returns Promise<boolean> to properly await token refresh before allowing navigation
 const authGuard = async (route, state) => {
@@ -9846,12 +9968,14 @@ class AgentComponent {
         this.isOnline = false;
         this.subs = [];
         this.shouldScroll = false;
+        this.viewportHandler = null; // Changed: visualViewport resize handler reference
     } // Changed: was assistantService
     get agentName() {
         return this.agentService.agentName;
     }
     ngOnInit() {
         this.agentService.loadConfig();
+        this.initMobileViewport(); // Changed: Listen for keyboard resize on mobile
         this.subs.push(this.agentService.messages$.subscribe(msgs => {
             this.messages = msgs;
             this.shouldScroll = true;
@@ -9873,6 +9997,15 @@ class AgentComponent {
     toggleChat() {
         this.agentService.toggle();
     }
+    // Changed: Close chat when clicking outside the chat window and FAB button
+    onDocumentClick(event) {
+        if (!this.isOpen)
+            return;
+        const target = event.target;
+        if (target.closest('.agent-window') || target.closest('.agent-fab'))
+            return; // Click inside chat or FAB
+        this.agentService.close();
+    }
     sendMessage() {
         if (!this.inputText.trim())
             return;
@@ -9909,11 +10042,25 @@ class AgentComponent {
     trackMessage(index, msg) {
         return `${index}-${msg.role}-${msg.createdDate}`;
     }
+    // Changed: Set --agent-vh CSS variable from visualViewport so the chat resizes when the mobile keyboard opens
+    initMobileViewport() {
+        if (!window.visualViewport)
+            return;
+        this.viewportHandler = () => {
+            const vh = window.visualViewport.height;
+            document.documentElement.style.setProperty('--agent-vh', `${vh}px`);
+        };
+        window.visualViewport.addEventListener('resize', this.viewportHandler);
+        this.viewportHandler(); // Set initial value
+    }
     ngOnDestroy() {
         this.subs.forEach(s => s.unsubscribe());
+        if (this.viewportHandler && window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.viewportHandler);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentComponent, deps: [{ token: AgentService }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AgentComponent, isStandalone: false, selector: "spa-agent", viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0;width:100%;height:100%;border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AgentComponent, isStandalone: false, selector: "spa-agent", host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
             trigger('slideUp', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }),
@@ -9937,13 +10084,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                                 animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }))
                             ])
                         ])
-                    ], template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0;width:100%;height:100%;border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"] }]
+                    ], template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"] }]
         }], ctorParameters: () => [{ type: AgentService }, { type: SignalRService }], propDecorators: { messageContainer: [{
                 type: ViewChild,
                 args: ['messageContainer']
             }], messageInput: [{
                 type: ViewChild,
                 args: ['messageInput']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class NavMenuComponent {
@@ -10158,10 +10308,14 @@ class LoaderInterceptor {
         });
     }
     intercept(request, next) {
-        let requestClone = this.addToken(request);
-        // Changed: Skip loader tracking for SignalR hub requests — they're background infrastructure
-        // and should never show the loading spinner or block UI interactions
-        if (request.url.includes('/hubs/')) {
+        // Changed: Don't attach Bearer token to refresh/revoke — they use AllowAnonymous and authenticate via body
+        const url = request.url || '';
+        let requestClone = (url.includes('User/refresh') || url.includes('User/revoke'))
+            ? request.clone()
+            : this.addToken(request);
+        // Changed: Skip loader tracking for SignalR hub and agent chat requests — they're background
+        // infrastructure and should never show the loading spinner or block UI interactions
+        if (request.url.includes('/hubs/') || url.includes('/agent/')) {
             return next.handle(requestClone).pipe(catchError((error) => throwError(() => error)));
         }
         this.requests.push(requestClone);
@@ -14124,7 +14278,8 @@ class TinSpaModule {
             LoansService,
             TabService, // Changed: Added TabService to providers
             provideCharts(withDefaultRegisterables()), // Changed: Register Chart.js with all default chart types
-            SubscriptionService // Added: Subscription feature-checking service
+            SubscriptionService, // Added: Subscription feature-checking service
+            AnalyticsService // Changed: GA4 route tracking for SPA page views
         ], imports: [SpaMatModule,
             HttpClientModule,
             CurrencyInputModule,
@@ -14221,7 +14376,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         LoansService,
                         TabService, // Changed: Added TabService to providers
                         provideCharts(withDefaultRegisterables()), // Changed: Register Chart.js with all default chart types
-                        SubscriptionService // Added: Subscription feature-checking service
+                        SubscriptionService, // Added: Subscription feature-checking service
+                        AnalyticsService // Changed: GA4 route tracking for SPA page views
                     ],
                 }]
         }] });
@@ -21938,5 +22094,5 @@ const ALSQUARE_SVG_WHITE = `<svg viewBox="0 0 80 80" fill="none" xmlns="http://w
  * Generated bundle index. Do not edit.
  */
 
-export { ALSQUARE_SVG_DARK, ALSQUARE_SVG_WHITE, Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, AccountingModule, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AgentComponent, AgentService, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AssetsService, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralModule, GeneralService, GradesComponent, GroupsComponent, HRModule, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryModule, InventoryService, InvitationsTableComponent, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansModule, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, ManufacturingModule, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, OverviewModule, PageComponent, PageConfig, PayrollDashboardComponent, PayrollModule, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchaseStatus, PurchasingDashboardComponent, PurchasingModule, PushNotificationService, ReceiptStatus, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SalesModule, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaHomeModule, SpaIndexModule, SpaLandingComponent, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TasksComponent, TenancyModule, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, WorkflowModule, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
+export { ALSQUARE_SVG_DARK, ALSQUARE_SVG_WHITE, Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, AccountingModule, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AgentComponent, AgentService, AlertComponent, AlertConfig, AlertMessage, AnalyticsService, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AssetsService, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralModule, GeneralService, GradesComponent, GroupsComponent, HRModule, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryModule, InventoryService, InvitationsTableComponent, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansModule, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, ManufacturingModule, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, OverviewModule, PageComponent, PageConfig, PayrollDashboardComponent, PayrollModule, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchaseStatus, PurchasingDashboardComponent, PurchasingModule, PushNotificationService, ReceiptStatus, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SalesModule, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaHomeModule, SpaIndexModule, SpaLandingComponent, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TasksComponent, TenancyModule, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, WorkflowModule, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map