mesauth-angular 1.18.0 → 1.19.0

package/fesm2022/mesauth-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, afterNextRender, input, booleanAttribute, computed, HostBinding, Component, output, effect, HostListener, ViewChild, ElementRef, DestroyRef, Directive } from '@angular/core';
+import { signal, Injectable, InjectionToken, makeEnvironmentProviders, provideAppInitializer, inject, NgModule, afterNextRender, input, booleanAttribute, computed, HostBinding, Component, output, effect, HostListener, Injector, viewChild, ViewChild, ElementRef, DestroyRef, Directive } from '@angular/core';
 import { toObservable, toSignal, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { catchError, of, Subject, EMPTY, timer, throwError, firstValueFrom, distinctUntilChanged, switchMap as switchMap$1, forkJoin } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
@@ -7,10 +7,10 @@ import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import { map, tap, catchError as catchError$1, switchMap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
-import { DatePipe } from '@angular/common';
+import { DatePipe, JsonPipe } from '@angular/common';
 
 /** Current installed package version — keep in sync with package.json. */
-const PACKAGE_VERSION = '1.18.0';
+const PACKAGE_VERSION = '1.19.0';
 /**
  * Provides server-driven UI configuration loaded from the hosted manifest.
  * Components read `labels()` and `features()` signals instead of hardcoded strings.
@@ -693,15 +693,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 args: ['class']
             }] } });
 
+const MES_AUTH_AI_CONFIG = new InjectionToken('MES_AUTH_AI_CONFIG');
+/** Default configuration when the consumer doesn't call provideMesAuthAi(). */
+const DEFAULT_AI_CONFIG = {
+    enabled: true,
+    tools: [],
+    systemPromptExtensions: [],
+    appName: undefined
+};
+/**
+ * Provide AI assistant configuration to mesauth-angular.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   provideMesAuth(...),
+ *   provideMesAuthAi({
+ *     enabled: true,
+ *     appName: 'MesExtensionSite',
+ *     tools: [
+ *       {
+ *         name: 'spc_open_chart',
+ *         description: 'Open the SPC chart for a given product line',
+ *         parameters: {
+ *           type: 'object',
+ *           properties: { lineId: { type: 'string' } },
+ *           required: ['lineId']
+ *         },
+ *         readOnly: true,
+ *         handler: (args) => inject(Router).navigateByUrl(`/spc/${args.lineId}`)
+ *       }
+ *     ]
+ *   })
+ * ]
+ * ```
+ */
+function provideMesAuthAi(config) {
+    return makeEnvironmentProviders([
+        { provide: MES_AUTH_AI_CONFIG, useValue: { ...DEFAULT_AI_CONFIG, ...config } }
+    ]);
+}
+
+class MaAiButtonComponent {
+    config = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
+    enabled = computed(() => this.config.enabled !== false, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    clicked = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiButtonComponent, isStandalone: true, selector: "ma-ai-button", outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    @if (enabled()) {
+      <button class="ai-btn" (click)="clicked.emit()" title="Ask AI" aria-label="Ask AI">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z"/>
+          <path d="M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z"/>
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex}.ai-btn{background:none;border:none;cursor:pointer;color:var(--cui-body-color, #6e6e9a);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.ai-btn:hover{background:var(--cui-tertiary-bg, rgba(120,120,200,.12));color:#7c3aed}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-ai-button', template: `
+    @if (enabled()) {
+      <button class="ai-btn" (click)="clicked.emit()" title="Ask AI" aria-label="Ask AI">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z"/>
+          <path d="M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z"/>
+        </svg>
+      </button>
+    }
+  `, styles: [":host{display:inline-flex}.ai-btn{background:none;border:none;cursor:pointer;color:var(--cui-body-color, #6e6e9a);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.ai-btn:hover{background:var(--cui-tertiary-bg, rgba(120,120,200,.12));color:#7c3aed}\n"] }]
+        }], propDecorators: { clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+
 class UserProfileComponent {
     inputAvatarShape = input('circle', ...(ngDevMode ? [{ debugName: "inputAvatarShape" }] : /* istanbul ignore next */ []));
     showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
     showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
     showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
+    showAi = input(true, ...(ngDevMode ? [{ debugName: "showAi" }] : /* istanbul ignore next */ []));
     showSignature = input([false, false], ...(ngDevMode ? [{ debugName: "showSignature" }] : /* istanbul ignore next */ []));
     signatureHeight = input(40, ...(ngDevMode ? [{ debugName: "signatureHeight" }] : /* istanbul ignore next */ []));
     notificationClick = output();
     approvalClick = output();
+    aiClick = output();
     get themeClass() {
         return `theme-${this.themeService.currentTheme()}`;
     }
@@ -783,6 +858,9 @@ class UserProfileComponent {
     onApprovalClick() {
         this.approvalClick.emit();
     }
+    onAiClick() {
+        this.aiClick.emit();
+    }
     getAvatarUrl(user) {
         // Use the refresh signal to force update
         const refresh = this.avatarRefresh();
@@ -870,12 +948,12 @@ class UserProfileComponent {
         this.signatureBroken.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, signatureHeight: { classPropertyName: "signatureHeight", publicName: "signatureHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: UserProfileComponent, isStandalone: true, selector: "ma-user-profile", inputs: { inputAvatarShape: { classPropertyName: "inputAvatarShape", publicName: "inputAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showAi: { classPropertyName: "showAi", publicName: "showAi", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, signatureHeight: { classPropertyName: "signatureHeight", publicName: "signatureHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick", approvalClick: "approvalClick", aiClick: "aiClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, properties: { "class": "this.themeClass" } }, ngImport: i0, template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"], dependencies: [{ kind: "component", type: MaAvatarComponent, selector: "ma-avatar", inputs: ["src", "alt", "initials", "size", "shape", "frame", "ratio", "scale", "ring", "ringActive"] }, { kind: "component", type: MaAiButtonComponent, selector: "ma-ai-button", outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], signatureHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureHeight", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], themeClass: [{
+            args: [{ selector: 'ma-user-profile', imports: [MaAvatarComponent, MaAiButtonComponent], template: "<div class=\"user-profile-container\">\n  @if (!currentUser()) {\n    <!-- Not logged in -->\n    <button class=\"login-btn\" (click)=\"onLogin()\">Login</button>\n  } @else {\n    <!-- Logged in -->\n    <div class=\"user-header\">\n      <!-- Ask AI -->\n      @if (showAi()) {\n        <ma-ai-button (clicked)=\"onAiClick()\"></ma-ai-button>\n      }\n\n      <!-- Notification Bell -->\n       @if (showBell()) {\n        <button class=\"notification-btn\" [class.has-unread]=\"unreadCount() > 0\" (click)=\"onNotificationClick()\" title=\"Notifications\" aria-label=\"Notifications\">\n          <svg class=\"bell-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"/>\n            <path d=\"M13.73 21a2 2 0 0 1-3.46 0\"/>\n          </svg>\n          @if (unreadCount() > 0) {\n            <span class=\"badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</span>\n          }\n        </button>\n       }\n      \n\n      <!-- Approval Button -->\n       @if (showApproval()) {\n         <button class=\"notification-btn\" [class.has-unread]=\"pendingApprovalCount() > 0\" (click)=\"onApprovalClick()\" title=\"Approvals\" aria-label=\"Approvals\">\n           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n             <path d=\"M9 11l3 3L22 4\"/>\n             <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n           </svg>\n           @if (pendingApprovalCount() > 0) {\n             <span class=\"badge\">{{ pendingApprovalCount() > 99 ? '99+' : pendingApprovalCount() }}</span>\n           }\n         </button>\n       }      \n\n      <!-- User Avatar + Dropdown -->\n      <div class=\"user-menu-wrapper\">\n        <button class=\"user-menu-btn\" (click)=\"toggleDropdown()\" [attr.aria-label]=\"'User menu for ' + (currentUser().fullName || currentUser().userName)\" aria-haspopup=\"true\" [attr.aria-expanded]=\"dropdownOpen()\">\n          <ma-avatar\n            [src]=\"getAvatarUrl(currentUser())\"\n            [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n            [initials]=\"getLastNameInitial(currentUser())\"\n            [size]=\"navAvatarSize()\"\n            [shape]=\"avatarShape()\"\n            [ratio]=\"avatarRatio()\"\n            [frame]=\"avatarFrame()\"            \n            [ring]=\"true\"\n            [ringActive]=\"dropdownOpen()\" />          \n        </button>\n\n        @if (dropdownOpen()) {\n          <div class=\"mes-dropdown-menu\">\n            <!-- User info header -->\n            <div class=\"mes-dropdown-header\">\n              <div class=\"dropdown-avatar-wrap\">\n                <ma-avatar\n                  [src]=\"getAvatarUrl(currentUser())\"\n                  [alt]=\"currentUser().fullName || currentUser().userName || ''\"\n                  [initials]=\"getLastNameInitial(currentUser())\"\n                  [size]=\"dropAvatarSize()\"\n                  [shape]=\"avatarShape()\"\n                  [ratio]=\"avatarRatio()\"\n                  [frame]=\"avatarFrame()\"\n                  [scale]=\"1.5\" />                \n              </div>             \n              <div class=\"dropdown-info-col\">\n                <div class=\"dropdown-user-info\">\n                  <span class=\"dropdown-user-name\">{{ currentUser().fullName || currentUser().userName }}</span>                  \n                    <span class=\"dropdown-user-sub\">\n                      @if (currentUser().position || currentUser().department) {\n                        {{ currentUser().position || currentUser().department }}                      \n                      }\n                      @if (currentUser().givenTitle) {\n                        <span class=\"given-title-badge given-title\"\n                          [class]=\"'given-color-' + givenStyle()\">{{ currentUser().givenTitle }}</span>\n                      }\n                    </span>\n                </div>\n                <div class=\"dropdown-user-actions\">\n                  @if (showSignature()[1] && signatureUrl(); as sigUrl) {\n                      <img class=\"ma-ux-signature\"\n                          [src]=\"sigUrl\"\n                          [style.height.px]=\"signatureHeight()\"\n                          (error)=\"onSigErr($event)\"\n                          alt=\"signature\" />\n                  }\n                  <button class=\"icon-action profile-link\" (click)=\"onViewProfile()\" title=\"View Profile\" aria-label=\"View Profile\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>\n                    </svg>\n                  </button>\n                  <button class=\"icon-action logout-item\" (click)=\"onLogout()\" title=\"Logout\" aria-label=\"Logout\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><polyline points=\"16 17 21 12 16 7\"/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mes-dropdown-items\">\n              <ng-content></ng-content>\n            </div>\n          </div>\n        }\n      </div>\n\n       @if (showName()){\n          <div class=\"mes-user-header\">\n            {{currentUser().fullName || currentUser().userName}}\n          </div>\n        }\n       @if (showSignature()[0] && signatureUrl(); as sigUrl) {\n            <img class=\"ma-ux-signature\"\n                 [src]=\"sigUrl\"\n                 [style.height.px]=\"signatureHeight()\"\n                 (error)=\"onSigErr($event)\"\n                 alt=\"signature\" />\n        }\n    </div>\n  }\n</div>\n", styles: [".user-profile-container{display:flex;align-items:center;gap:4px}.login-btn{padding:7px 18px;background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.2px;transition:background-color .2s,transform .15s}.login-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.user-header{display:flex;align-items:center;gap:4px}.mes-user-header{margin-left:10px;font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-btn{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.notification-btn:hover{background-color:var(--primary-light);color:var(--primary-color)}.notification-btn.has-unread{color:var(--primary-color)}.bell-icon{display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.notification-btn:hover .bell-icon{transform:rotate(-20deg) scale(1.15)}.badge{position:absolute;top:2px;right:2px;background-color:var(--error-color);color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-primary);animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.user-menu-wrapper{position:relative}.user-menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.user-menu-btn:hover{transform:scale(1.06)}.mes-dropdown-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:14px;box-shadow:0 8px 32px var(--shadow-lg),0 2px 8px var(--shadow);min-width:220px;z-index:1000;overflow:hidden;animation:dropdown-in .16s cubic-bezier(.16,1,.3,1)}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mes-dropdown-header{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary)}.dropdown-avatar-wrap{flex-shrink:0}.mes-dropdown-header .dropdown-avatar-wrap{margin-right:5px}.dropdown-user-info{display:flex;flex-direction:column;gap:3px;min-width:0}.dropdown-user-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px;min-width:180px}.dropdown-user-sub{font-size:11px;color:var(--primary-color);font-weight:500;white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px}.given-title{float:inline-end}.mes-dropdown-divider{height:1px;background:var(--border-color)}.dropdown-info-col{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}.dropdown-user-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.icon-action{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text-secondary);transition:background-color .15s,color .15s,transform .15s}.icon-action:hover{transform:translateY(-1px)}.icon-action.profile-link{color:var(--primary-color)}.icon-action.profile-link:hover{background-color:var(--primary-light)}.icon-action.logout-item{color:var(--error-color)}.icon-action.logout-item:hover{background-color:var(--error-light)}.mes-dropdown-items:not(:empty){border-top:1px solid var(--border-color)}.ma-ux-signature{object-fit:contain;max-width:160px;vertical-align:middle;background:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAvatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showAi: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAi", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], signatureHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "signatureHeight", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }], approvalClick: [{ type: i0.Output, args: ["approvalClick"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], themeClass: [{
                 type: HostBinding,
                 args: ['class']
             }], onDocumentClick: [{
@@ -1368,12 +1446,555 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ selector: 'ma-approval-panel', imports: [DatePipe], template: "<div class=\"approval-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"approval-panel\" [class.open]=\"isOpen()\">\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 11l3 3L22 4\"/>\n        <path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/>\n      </svg>\n      <h3>Approvals</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs\">\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'processing'\" (click)=\"switchTab('processing')\">\n      Processing\n      @if (processingItems().length > 0) {\n        <span class=\"tab-badge\">{{ processingItems().length }}</span>\n      }\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'approved'\" (click)=\"switchTab('approved')\">\n      Approved\n    </button>\n    <button class=\"tab-btn\" [class.active]=\"activeTab() === 'rejected'\" (click)=\"switchTab('rejected')\">\n      Rejected\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Loading -->\n    @if (loading()) {\n      <div class=\"loading-state\">\n        <div class=\"spinner\"></div>\n        <span>Loading...</span>\n      </div>\n    }\n\n    <!-- Processing tab -->\n    @if (!loading() && activeTab() === 'processing') {\n      @if (processingItems().length === 0) {\n        <div class=\"empty-state\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.4\"><path d=\"M9 11l3 3L22 4\"/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"/></svg>\n          <p>No pending approvals</p>\n        </div>\n      }\n      @for (item of processingItems(); track item.id) {\n        <div class=\"approval-item\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n            @if (item.currentStepName) {\n              <span class=\"item-step\">\u00B7 {{ item.currentStepName }}</span>\n            }\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"item-time\">{{ item.createdAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n    }\n\n    <!-- Approved tab -->\n    @if (!loading() && activeTab() === 'approved') {\n      @if (approvedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No approved documents</p>\n        </div>\n      }\n      @for (item of approvedItems(); track item.id) {\n        <div class=\"approval-item approved\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge approved-badge\">Approved</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (approvedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('approved')\">Show more &rarr;</div>\n      }\n    }\n\n    <!-- Rejected tab -->\n    @if (!loading() && activeTab() === 'rejected') {\n      @if (rejectedItems().length === 0) {\n        <div class=\"empty-state\">\n          <p>No rejected documents</p>\n        </div>\n      }\n      @for (item of rejectedItems(); track item.id) {\n        <div class=\"approval-item rejected\" (click)=\"navigateToDetail(item.id)\">\n          <div class=\"item-title\">{{ item.title }}</div>\n          <div class=\"item-meta\">\n            <span class=\"item-requester\">By {{ item.requestedByUserName }}</span>\n          </div>\n          <div class=\"item-footer\">\n            <span class=\"status-badge rejected-badge\">Rejected</span>\n            <span class=\"item-time\">{{ item.completedAt | date:'shortDate' }}</span>\n            <span class=\"item-link\">View &rarr;</span>\n          </div>\n        </div>\n      }\n      @if (rejectedItems().length >= 10) {\n        <div class=\"show-more\" (click)=\"showMore('rejected')\">Show more &rarr;</div>\n      }\n    }\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #90caf9;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #1565c0;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-hover: #e8eaf6;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.approval-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.approval-backdrop.open{display:block}.approval-panel{position:fixed;top:0;right:-380px;width:380px;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transition:right .3s cubic-bezier(.16,1,.3,1)}.approval-panel.open{right:0}.panel-content{flex:1;overflow-y:auto;padding:8px 0}.approval-item{padding:14px 18px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.approval-item:hover{background:var(--bg-hover)}.approval-item:last-child{border-bottom:none}.item-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;gap:4px;flex-wrap:wrap}.item-footer{display:flex;align-items:center;gap:8px}.item-time{font-size:11px;color:var(--text-muted);margin-right:auto}.item-link{font-size:12px;color:var(--primary);font-weight:500}.status-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}.approved-badge{background:#66bb6a26;color:var(--success)}.rejected-badge{background:#ef53501f;color:var(--error)}.show-more{text-align:center;padding:14px;font-size:13px;color:var(--primary);cursor:pointer;font-weight:500}.show-more:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [], propDecorators: { approvalActioned: [{ type: i0.Output, args: ["approvalActioned"] }] } });
 
+/**
+ * Resolves the full set of client tools available to the AI: built-ins + consumer-registered.
+ * Handlers are invoked through `runTool(name, args)` which automatically threads the Injector
+ * so consumer handlers can use inject() patterns.
+ */
+class MaAiToolsRegistry {
+    config = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
+    injector = inject(Injector);
+    /** Built-in client tools shipped by the library. */
+    builtIn = [
+        {
+            name: 'navigate',
+            description: 'Navigate the user to a path within the application. Use relative paths starting with /.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    path: { type: 'string', description: 'Path to navigate to, e.g. "/auth/users"' }
+                },
+                required: ['path']
+            },
+            readOnly: true,
+            handler: (args) => {
+                const router = this.injector.get(Router, null);
+                if (!router)
+                    return 'Router is not available in this app.';
+                router.navigateByUrl(args.path);
+                return `Navigated to ${args.path}`;
+            }
+        },
+        {
+            name: 'toggle_theme',
+            description: 'Toggle between light and dark theme.',
+            parameters: { type: 'object', properties: {} },
+            readOnly: true,
+            handler: () => {
+                const theme = this.injector.get(ThemeService);
+                const next = theme.currentTheme() === 'light' ? 'dark' : 'light';
+                theme.setFixTheme(next);
+                return `Theme switched to ${next}.`;
+            }
+        },
+        {
+            name: 'show_toast',
+            description: 'Show a small toast notification at the top of the screen.',
+            parameters: {
+                type: 'object',
+                properties: {
+                    message: { type: 'string', description: 'Toast body text' },
+                    title: { type: 'string', description: 'Optional title' },
+                    severity: { type: 'string', enum: ['info', 'success', 'warning', 'error'], description: 'Toast severity' }
+                },
+                required: ['message']
+            },
+            readOnly: true,
+            handler: (args) => {
+                const toast = this.injector.get(ToastService);
+                toast.show(args.message, args.title, args.severity ?? 'info');
+                return 'Toast shown.';
+            }
+        },
+        {
+            name: 'who_am_i_client',
+            description: 'Get the currently signed-in user as seen by the browser (id, name, roles loaded so far).',
+            parameters: { type: 'object', properties: {} },
+            readOnly: true,
+            handler: () => {
+                const auth = this.injector.get(MesAuthService);
+                const u = auth.currentUser;
+                if (!u)
+                    return 'No user signed in.';
+                return JSON.stringify({
+                    id: u.userId ?? u.id,
+                    userName: u.userName,
+                    fullName: u.fullName,
+                    department: u.department,
+                    position: u.position,
+                    email: u.email
+                });
+            }
+        },
+        {
+            name: 'reload_page',
+            description: 'Reload the current browser page. Use as a last resort if state seems stuck.',
+            parameters: { type: 'object', properties: {} },
+            readOnly: false,
+            handler: () => {
+                window.location.reload();
+                return 'Reloading page…';
+            }
+        }
+    ];
+    /** All tools, deduplicated by name (consumer wins on conflict). */
+    list() {
+        const fromConfig = this.config.tools ?? [];
+        const byName = new Map();
+        for (const t of this.builtIn)
+            byName.set(t.name, t);
+        for (const t of fromConfig)
+            byName.set(t.name, t);
+        return Array.from(byName.values());
+    }
+    resolve(name) {
+        return this.list().find(t => t.name === name);
+    }
+    /** Run a registered client tool and serialize its result for posting back to the agent loop. */
+    async runTool(name, args) {
+        const tool = this.resolve(name);
+        if (!tool)
+            return { ok: false, result: `Unknown client tool: ${name}` };
+        try {
+            const raw = await Promise.resolve(tool.handler(args ?? {}));
+            const result = typeof raw === 'string' ? raw : JSON.stringify(raw ?? null);
+            return { ok: true, result };
+        }
+        catch (err) {
+            return { ok: false, result: err?.message ?? String(err) };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiToolsRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Drives the chat panel.
+ *
+ * Uses `fetch` + `ReadableStream` (not `EventSource`, which can't POST a body) to talk to
+ * `/ai/chat` SSE. State lives in signals so the panel can re-render reactively.
+ */
+class MaAiService {
+    auth = inject(MesAuthService);
+    aiConfig = inject(MES_AUTH_AI_CONFIG, { optional: true }) ?? DEFAULT_AI_CONFIG;
+    tools = inject(MaAiToolsRegistry);
+    messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    streaming = signal(false, ...(ngDevMode ? [{ debugName: "streaming" }] : /* istanbul ignore next */ []));
+    /** When non-null, a write-class client tool is awaiting user confirmation. */
+    pendingApproval = signal(null, ...(ngDevMode ? [{ debugName: "pendingApproval" }] : /* istanbul ignore next */ []));
+    lastError = signal(null, ...(ngDevMode ? [{ debugName: "lastError" }] : /* istanbul ignore next */ []));
+    sessionId = null;
+    /** Verbs the user already chose "always approve" for in this session. */
+    alwaysApproved = new Set();
+    abortController = null;
+    /** ID of the current assistant bubble we're streaming tokens into. */
+    currentAssistantId = null;
+    get enabled() {
+        return this.aiConfig.enabled !== false;
+    }
+    /** Start a brand-new conversation. */
+    resetSession() {
+        this.cancel();
+        this.sessionId = null;
+        this.messages.set([]);
+        this.pendingApproval.set(null);
+        this.lastError.set(null);
+        this.alwaysApproved.clear();
+    }
+    /** Cancel the in-flight stream (if any). The session id is preserved so the user can resume. */
+    cancel() {
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+        this.streaming.set(false);
+        this.currentAssistantId = null;
+        // If a client-tool call was awaiting the user, clearing it lets them start over.
+        this.pendingApproval.set(null);
+    }
+    /** User typed and submitted a message. */
+    async send(text, currentRoute) {
+        if (!text.trim())
+            return;
+        this.lastError.set(null);
+        this.appendBubble({ id: this.uid(), role: 'user', text });
+        await this.runStream({ message: text }, currentRoute);
+    }
+    /**
+     * Approve (or decline) a pending client tool call. If approved (and alwaysApprove),
+     * remember the verb so we skip the prompt next time in this session.
+     */
+    async resolvePendingApproval(decision) {
+        const pending = this.pendingApproval();
+        if (!pending)
+            return;
+        this.pendingApproval.set(null);
+        if (decision === 'decline') {
+            await this.continueWithToolResult(pending.callId, false, 'User declined this tool call.');
+            this.markToolStatus(pending.callId, 'declined');
+            return;
+        }
+        if (decision === 'always') {
+            this.alwaysApproved.add(this.verbOf(pending.name));
+        }
+        await this.executeClientTool(pending.callId, pending.name, pending.args);
+    }
+    // ── private ────────────────────────────────────────────────────────────────
+    async runStream(payload, currentRoute) {
+        if (!this.enabled) {
+            this.lastError.set('AI assistant is disabled.');
+            return;
+        }
+        const config = this.auth.getConfig();
+        const base = config?.apiBaseUrl?.replace(/\/$/, '') ?? '';
+        if (!base) {
+            this.lastError.set('MesAuth is not configured.');
+            return;
+        }
+        // Start a fresh assistant bubble that we stream tokens into.
+        const assistantId = this.uid();
+        this.currentAssistantId = assistantId;
+        this.appendBubble({ id: assistantId, role: 'assistant', text: '', pending: true, toolEvents: [] });
+        this.streaming.set(true);
+        this.abortController = new AbortController();
+        try {
+            const res = await fetch(`${base}/ai/chat`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+                credentials: config?.withCredentials !== false ? 'include' : 'same-origin',
+                body: JSON.stringify({
+                    sessionId: this.sessionId,
+                    message: payload.message,
+                    toolResult: payload.toolResult,
+                    clientTools: this.tools.list().map(t => ({
+                        name: t.name,
+                        description: t.description,
+                        parameters: t.parameters,
+                        readOnly: t.readOnly === true
+                    })),
+                    context: { currentRoute, appName: this.aiConfig.appName }
+                }),
+                signal: this.abortController.signal
+            });
+            if (!res.ok || !res.body) {
+                const detail = await res.text().catch(() => '');
+                throw new Error(`AI request failed (${res.status}). ${detail}`);
+            }
+            await this.readSse(res.body);
+        }
+        catch (err) {
+            if (err?.name === 'AbortError') {
+                // user cancelled
+            }
+            else {
+                this.lastError.set(err?.message ?? String(err));
+                this.finalizeAssistant(`[error: ${err?.message ?? err}]`);
+            }
+        }
+        finally {
+            this.streaming.set(false);
+            this.abortController = null;
+        }
+    }
+    async readSse(body) {
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done)
+                break;
+            buffer += decoder.decode(value, { stream: true });
+            // SSE events are separated by a blank line.
+            let idx;
+            while ((idx = buffer.indexOf('\n\n')) !== -1) {
+                const rawEvent = buffer.slice(0, idx);
+                buffer = buffer.slice(idx + 2);
+                const dataLine = rawEvent.split('\n').find(l => l.startsWith('data:'));
+                if (!dataLine)
+                    continue;
+                const json = dataLine.slice(5).trim();
+                if (!json)
+                    continue;
+                let ev;
+                try {
+                    ev = JSON.parse(json);
+                }
+                catch {
+                    continue;
+                }
+                await this.handleEvent(ev);
+            }
+        }
+    }
+    async handleEvent(ev) {
+        switch (ev.type) {
+            case 'session':
+                this.sessionId = ev.sessionId;
+                break;
+            case 'token':
+                this.appendToken(ev.text);
+                break;
+            case 'tool_call_started':
+                this.appendToolEvent({
+                    id: ev.id,
+                    name: ev.name,
+                    side: ev.side,
+                    status: 'running',
+                    args: ev.args,
+                    readOnly: ev.readOnly
+                });
+                break;
+            case 'tool_call_completed':
+                this.markToolStatus(ev.id, ev.ok ? 'ok' : 'error', ev.summary);
+                break;
+            case 'client_tool_call':
+                this.appendToolEvent({
+                    id: ev.id,
+                    name: ev.name,
+                    side: 'client',
+                    status: ev.readOnly ? 'running' : 'awaiting-approval',
+                    args: ev.args,
+                    readOnly: ev.readOnly
+                });
+                if (ev.readOnly || this.alwaysApproved.has(this.verbOf(ev.name))) {
+                    // Auto-run; the next /ai/chat call will deliver the result.
+                    await this.executeClientTool(ev.id, ev.name, ev.args);
+                }
+                else {
+                    this.pendingApproval.set({ callId: ev.id, name: ev.name, args: ev.args, side: 'client' });
+                }
+                break;
+            case 'error':
+                this.lastError.set(ev.message);
+                this.finalizeAssistant(`[error: ${ev.message}]`);
+                break;
+            case 'done':
+                this.finalizeAssistant();
+                break;
+        }
+    }
+    async executeClientTool(callId, name, args) {
+        this.markToolStatus(callId, 'running');
+        const { ok, result } = await this.tools.runTool(name, args);
+        this.markToolStatus(callId, ok ? 'ok' : 'error', this.summarize(result));
+        await this.continueWithToolResult(callId, ok, result);
+    }
+    async continueWithToolResult(callId, ok, result) {
+        // Open a new SSE stream that delivers the tool result.
+        await this.runStream({ toolResult: { callId, ok, result } });
+    }
+    // ── bubble helpers ────────────────────────────────────────────────────────
+    appendBubble(b) {
+        this.messages.update(arr => [...arr, b]);
+    }
+    appendToken(text) {
+        if (!this.currentAssistantId) {
+            const id = this.uid();
+            this.currentAssistantId = id;
+            this.appendBubble({ id, role: 'assistant', text, pending: true, toolEvents: [] });
+            return;
+        }
+        const id = this.currentAssistantId;
+        this.messages.update(arr => arr.map(m => m.id === id ? { ...m, text: m.text + text } : m));
+    }
+    appendToolEvent(ev) {
+        if (!this.currentAssistantId) {
+            const id = this.uid();
+            this.currentAssistantId = id;
+            this.appendBubble({ id, role: 'assistant', text: '', pending: true, toolEvents: [ev] });
+            return;
+        }
+        const id = this.currentAssistantId;
+        this.messages.update(arr => arr.map(m => m.id === id
+            ? { ...m, toolEvents: [...(m.toolEvents ?? []), ev] }
+            : m));
+    }
+    markToolStatus(callId, status, summary) {
+        this.messages.update(arr => arr.map(m => ({
+            ...m,
+            toolEvents: m.toolEvents?.map(t => t.id === callId ? { ...t, status, summary: summary ?? t.summary } : t)
+        })));
+    }
+    finalizeAssistant(extra) {
+        const id = this.currentAssistantId;
+        if (!id)
+            return;
+        this.messages.update(arr => arr.map(m => m.id === id
+            ? { ...m, pending: false, text: extra ? (m.text + (m.text ? '\n' : '') + extra) : m.text }
+            : m));
+        this.currentAssistantId = null;
+    }
+    verbOf(name) {
+        return name.split('_')[0] ?? name;
+    }
+    summarize(s) {
+        const flat = s.replace(/\s+/g, ' ').trim();
+        return flat.length <= 80 ? flat : flat.slice(0, 80) + '…';
+    }
+    uid() {
+        return Math.random().toString(36).slice(2) + Date.now().toString(36);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const STORAGE_KEY = 'ma-ai-panel-width';
+const MIN_WIDTH = 320;
+const MAX_WIDTH = 800;
+const DEFAULT_WIDTH = 420;
+/**
+ * Right-side, resizable chat drawer. Open/close via the public open/close/toggle methods.
+ * Uses panel-shared.css for the header/empty-state styling so it looks like the approval
+ * and notification panels.
+ */
+class MaAiChatPanelComponent {
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    width = signal(this.loadWidth(), ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    ai = inject(MaAiService);
+    router = inject(Router, { optional: true });
+    themeService = inject(ThemeService);
+    scrollContainer = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
+    textArea = viewChild('textArea', ...(ngDevMode ? [{ debugName: "textArea" }] : /* istanbul ignore next */ []));
+    get themeClass() {
+        return `theme-${this.themeService.currentTheme()}`;
+    }
+    messages = this.ai.messages;
+    streaming = this.ai.streaming;
+    pendingApproval = this.ai.pendingApproval;
+    lastError = this.ai.lastError;
+    hasMessages = computed(() => this.messages().length > 0, ...(ngDevMode ? [{ debugName: "hasMessages" }] : /* istanbul ignore next */ []));
+    // Resize state
+    isDragging = false;
+    dragStartX = 0;
+    dragStartWidth = 0;
+    constructor() {
+        // Auto-scroll on new content
+        effect(() => {
+            this.messages(); // dep
+            this.streaming();
+            queueMicrotask(() => this.scrollToBottom());
+        });
+    }
+    ngAfterViewInit() {
+        // pointer listeners attached on demand during drag
+    }
+    open() {
+        this.isOpen.set(true);
+        queueMicrotask(() => this.textArea()?.nativeElement.focus());
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    newConversation() {
+        this.ai.resetSession();
+    }
+    send() {
+        const text = this.draft().trim();
+        if (!text || this.streaming())
+            return;
+        this.draft.set('');
+        const route = this.router?.url;
+        this.ai.send(text, route);
+    }
+    cancel() {
+        this.ai.cancel();
+    }
+    onTextareaKey(ev) {
+        if (ev.key === 'Enter' && !ev.shiftKey) {
+            ev.preventDefault();
+            this.send();
+        }
+    }
+    onTextareaInput(ev) {
+        const t = ev.target;
+        this.draft.set(t.value);
+        // auto-grow
+        t.style.height = 'auto';
+        t.style.height = Math.min(t.scrollHeight, 160) + 'px';
+    }
+    approve() { this.ai.resolvePendingApproval('approve'); }
+    alwaysApprove() { this.ai.resolvePendingApproval('always'); }
+    decline() { this.ai.resolvePendingApproval('decline'); }
+    // ── resize handle ─────────────────────────────────────────────────────────
+    startResize(ev) {
+        this.isDragging = true;
+        this.dragStartX = ev.clientX;
+        this.dragStartWidth = this.width();
+        ev.target.setPointerCapture(ev.pointerId);
+        ev.preventDefault();
+    }
+    onResizeMove(ev) {
+        if (!this.isDragging)
+            return;
+        const dx = this.dragStartX - ev.clientX; // drag-left = wider
+        const next = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, this.dragStartWidth + dx));
+        this.width.set(next);
+    }
+    endResize(ev) {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        try {
+            ev.target.releasePointerCapture(ev.pointerId);
+        }
+        catch { }
+        try {
+            localStorage.setItem(STORAGE_KEY, String(this.width()));
+        }
+        catch { }
+    }
+    // ── helpers ───────────────────────────────────────────────────────────────
+    loadWidth() {
+        try {
+            const raw = typeof localStorage !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null;
+            const n = raw ? parseInt(raw, 10) : NaN;
+            return isFinite(n) ? Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, n)) : DEFAULT_WIDTH;
+        }
+        catch {
+            return DEFAULT_WIDTH;
+        }
+    }
+    scrollToBottom() {
+        const el = this.scrollContainer()?.nativeElement;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiChatPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MaAiChatPanelComponent, isStandalone: true, selector: "ma-ai-chat-panel", host: { properties: { "class": "this.themeClass" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ai-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          <button class=\"quick-prompt\" (click)=\"draft.set('Who am I?')\">Who am I?</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('List my pending approvals')\">My approvals</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('What unread notifications do I have?')\">Unread notifications</button>\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          <div class=\"bubble-text\">{{ m.text }}</div>\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.ai-backdrop.open{display:block}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width}.ai-panel.open{transform:translate(0)}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaAiChatPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ma-ai-chat-panel', imports: [JsonPipe], template: "<div class=\"ai-backdrop\" [class.open]=\"isOpen()\" (click)=\"close()\"></div>\n<div class=\"ai-panel\" [class.open]=\"isOpen()\" [style.width.px]=\"width()\">\n\n  <!-- Resize handle (left edge) -->\n  <div class=\"ai-resize-handle\"\n       (pointerdown)=\"startResize($event)\"\n       (pointermove)=\"onResizeMove($event)\"\n       (pointerup)=\"endResize($event)\"\n       (pointercancel)=\"endResize($event)\"\n       aria-label=\"Resize panel\"\n       title=\"Drag to resize\"></div>\n\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"\n           fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        <path d=\"M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z\"/>\n      </svg>\n      <h3>AI Assistant</h3>\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"icon-btn\" (click)=\"newConversation()\" title=\"New conversation\" aria-label=\"New conversation\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 12a9 9 0 1 1-3-6.7L21 8\"/><path d=\"M21 3v5h-5\"/>\n        </svg>\n      </button>\n      <button class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Conversation -->\n  <div class=\"panel-content\" #scrollContainer>\n    @if (!hasMessages()) {\n      <div class=\"empty-state\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"\n             fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" opacity=\"0.5\">\n          <path d=\"M12 2 L13.5 7.5 L19 9 L13.5 10.5 L12 16 L10.5 10.5 L5 9 L10.5 7.5 Z\"/>\n        </svg>\n        <p>Ask anything about your account, approvals, notifications, or how to use the app.</p>\n        <div class=\"quick-prompts\">\n          <button class=\"quick-prompt\" (click)=\"draft.set('Who am I?')\">Who am I?</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('List my pending approvals')\">My approvals</button>\n          <button class=\"quick-prompt\" (click)=\"draft.set('What unread notifications do I have?')\">Unread notifications</button>\n        </div>\n      </div>\n    }\n\n    @for (m of messages(); track m.id) {\n      <div class=\"bubble\" [class.user]=\"m.role === 'user'\" [class.assistant]=\"m.role === 'assistant'\">\n        @if (m.role === 'assistant' && m.toolEvents && m.toolEvents.length > 0) {\n          <div class=\"tool-strip\">\n            @for (t of m.toolEvents; track t.id) {\n              <div class=\"tool-chip\" [class.ok]=\"t.status === 'ok'\" [class.err]=\"t.status === 'error'\"\n                   [class.running]=\"t.status === 'running'\" [class.await]=\"t.status === 'awaiting-approval'\"\n                   [class.declined]=\"t.status === 'declined'\"\n                   [title]=\"t.summary ?? ''\">\n                <span class=\"dot\"></span>\n                <span class=\"tool-name\">{{ t.side === 'server' ? '\u2699' : '\u2318' }} {{ t.name }}</span>\n                @if (t.status === 'running') { <span class=\"muted\">\u2026</span> }\n                @if (t.status === 'ok' && t.summary) { <span class=\"muted\">\u00B7 {{ t.summary }}</span> }\n                @if (t.status === 'error') { <span class=\"muted\">\u00B7 failed</span> }\n                @if (t.status === 'awaiting-approval') { <span class=\"muted\">\u00B7 awaiting approval</span> }\n                @if (t.status === 'declined') { <span class=\"muted\">\u00B7 declined</span> }\n              </div>\n            }\n          </div>\n        }\n        @if (m.text) {\n          <div class=\"bubble-text\">{{ m.text }}</div>\n        }\n        @if (m.pending && !m.text) {\n          <div class=\"thinking\"><span class=\"spinner-small\"></span> Thinking\u2026</div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pending approval card -->\n  @if (pendingApproval(); as p) {\n    <div class=\"approval-card\">\n      <div class=\"approval-card-head\">\n        <strong>Approve action?</strong>\n        <code class=\"tool-name\">{{ p.name }}</code>\n      </div>\n      @if (p.args && (p.args | json) !== '{}') {\n        <pre class=\"approval-args\">{{ p.args | json }}</pre>\n      }\n      <div class=\"approval-actions\">\n        <button class=\"btn primary\" (click)=\"approve()\">Approve</button>\n        <button class=\"btn\" (click)=\"alwaysApprove()\">Always</button>\n        <button class=\"btn danger\" (click)=\"decline()\">Decline</button>\n      </div>\n    </div>\n  }\n\n  <!-- Composer -->\n  <div class=\"composer\">\n    @if (lastError()) {\n      <div class=\"composer-error\">{{ lastError() }}</div>\n    }\n    <div class=\"composer-row\">\n      <textarea #textArea\n                rows=\"1\"\n                placeholder=\"Ask the AI\u2026\"\n                [value]=\"draft()\"\n                (input)=\"onTextareaInput($event)\"\n                (keydown)=\"onTextareaKey($event)\"\n                [disabled]=\"streaming()\"></textarea>\n      @if (streaming()) {\n        <button class=\"send-btn cancel\" (click)=\"cancel()\" title=\"Cancel\" aria-label=\"Cancel\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\"/></svg>\n        </button>\n      } @else {\n        <button class=\"send-btn\" (click)=\"send()\" [disabled]=\"!draft().trim()\" title=\"Send\" aria-label=\"Send\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"/></svg>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.panel-header-left{display:flex;align-items:center;gap:9px;color:var(--primary)}.panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}.close-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tabs{display:flex;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;transition:color .15s,border-color .15s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--text-secondary)}.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;border-radius:9px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:12px;color:var(--text-muted)}.empty-state p{margin:0;font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--text-muted);font-size:13px}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n", ":host{--primary: #c4b5fd;--primary-strong: #a78bfa;--success: #66bb6a;--error: #ef5350;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #757575;--bg-primary: #1e1e2e;--bg-secondary: #27273a;--bg-hover: #2a2d4a;--bg-bubble-user: #312e81;--bg-bubble-assistant: #232336;--border-color: #383850;--shadow: rgba(0,0,0,.4)}:host(.theme-light){--primary: #7c3aed;--primary-strong: #6d28d9;--success: #2e7d32;--error: #c62828;--text-primary: #212121;--text-secondary: #616161;--text-muted: #9e9e9e;--bg-primary: #ffffff;--bg-secondary: #f5f3ff;--bg-hover: #ede9fe;--bg-bubble-user: #ede9fe;--bg-bubble-assistant: #f5f5f5;--border-color: #e0e0e0;--shadow: rgba(0,0,0,.15)}.ai-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:1029}.ai-backdrop.open{display:block}.ai-panel{position:fixed;top:0;right:0;height:100vh;background:var(--bg-primary);box-shadow:-4px 0 24px var(--shadow);display:flex;flex-direction:column;z-index:1030;transform:translate(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform,width}.ai-panel.open{transform:translate(0)}.ai-resize-handle{position:absolute;top:0;left:-4px;width:8px;height:100%;cursor:ew-resize;z-index:1;background:transparent}.ai-resize-handle:hover{background:linear-gradient(to right,transparent,rgba(124,58,237,.25),transparent)}.header-actions{display:flex;align-items:center;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.quick-prompt{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 10px;border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.quick-prompt:hover{background:var(--bg-hover);color:var(--text-primary)}.bubble{max-width:90%;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--bg-bubble-user);color:var(--text-primary)}.bubble.assistant{align-self:flex-start;background:var(--bg-bubble-assistant);color:var(--text-primary)}.bubble-text{display:block}.thinking{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px}.spinner-small{width:12px;height:12px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.tool-strip{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.tool-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:12px;background:var(--bg-hover);font-size:11.5px;color:var(--text-secondary);border:1px solid var(--border-color);align-self:flex-start}.tool-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted)}.tool-chip.running .dot{background:var(--primary);animation:pulse 1s ease-in-out infinite}.tool-chip.ok .dot{background:var(--success)}.tool-chip.err .dot{background:var(--error)}.tool-chip.await .dot{background:#f59e0b}.tool-chip.declined .dot{background:var(--text-muted)}.tool-chip .tool-name{font-weight:600;color:var(--text-primary)}.tool-chip .muted{color:var(--text-muted)}@keyframes pulse{50%{opacity:.4}}.approval-card{flex-shrink:0;margin:8px 14px;padding:12px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--bg-secondary)}.approval-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--text-primary)}.approval-card-head code{background:var(--bg-hover);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--primary)}.approval-args{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:8px;font-size:11.5px;max-height:100px;overflow:auto;margin:0 0 8px;color:var(--text-secondary)}.approval-actions{display:flex;gap:6px;flex-wrap:wrap}.btn{flex:1;padding:6px 10px;font-size:12.5px;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-hover)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn.primary:hover{background:var(--primary-strong)}.btn.danger{color:var(--error)}.btn.danger:hover{background:#ef53501a}.composer{flex-shrink:0;border-top:1px solid var(--border-color);padding:10px 12px;background:var(--bg-secondary)}.composer-error{color:var(--error);font-size:12px;margin-bottom:6px}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;resize:none;padding:8px 10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;min-height:36px;max-height:160px;line-height:1.4}.composer textarea:focus{border-color:var(--primary)}.composer textarea:disabled{opacity:.6}.send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s}.send-btn:hover:not(:disabled){background:var(--primary-strong)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.send-btn.cancel{background:var(--error)}.send-btn.cancel:hover{filter:brightness(1.1)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], textArea: [{ type: i0.ViewChild, args: ['textArea', { isSignal: true }] }], themeClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class MaUserComponent {
     userProfile;
     approvalPanel;
+    aiPanel;
     avatarShape = input('rounded', ...(ngDevMode ? [{ debugName: "avatarShape" }] : /* istanbul ignore next */ []));
     showBell = input(true, ...(ngDevMode ? [{ debugName: "showBell" }] : /* istanbul ignore next */ []));
     showApproval = input(true, ...(ngDevMode ? [{ debugName: "showApproval" }] : /* istanbul ignore next */ []));
+    showAi = input(true, ...(ngDevMode ? [{ debugName: "showAi" }] : /* istanbul ignore next */ []));
     showName = input(false, ...(ngDevMode ? [{ debugName: "showName" }] : /* istanbul ignore next */ []));
     showSignature = input([false, true], ...(ngDevMode ? [{ debugName: "showSignature" }] : /* istanbul ignore next */ []));
     theme = input(null, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
@@ -1403,18 +2024,21 @@ class MaUserComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MaUserComponent, isStandalone: true, selector: "ma-user", inputs: { avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }], ngImport: i0, template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showName]=\"showName()\"\n    [showSignature]=\"showSignature()\">\n    <ng-content></ng-content>\n  </ma-user-profile>   \n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", inputs: ["inputAvatarShape", "showBell", "showApproval", "showName", "showSignature", "signatureHeight"], outputs: ["notificationClick", "approvalClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: MaUserComponent, isStandalone: true, selector: "ma-user", inputs: { avatarShape: { classPropertyName: "avatarShape", publicName: "avatarShape", isSignal: true, isRequired: false, transformFunction: null }, showBell: { classPropertyName: "showBell", publicName: "showBell", isSignal: true, isRequired: false, transformFunction: null }, showApproval: { classPropertyName: "showApproval", publicName: "showApproval", isSignal: true, isRequired: false, transformFunction: null }, showAi: { classPropertyName: "showAi", publicName: "showAi", isSignal: true, isRequired: false, transformFunction: null }, showName: { classPropertyName: "showName", publicName: "showName", isSignal: true, isRequired: false, transformFunction: null }, showSignature: { classPropertyName: "showSignature", publicName: "showSignature", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "userProfile", first: true, predicate: UserProfileComponent, descendants: true }, { propertyName: "approvalPanel", first: true, predicate: MaApprovalPanelComponent, descendants: true }, { propertyName: "aiPanel", first: true, predicate: MaAiChatPanelComponent, descendants: true }], ngImport: i0, template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    (aiClick)=\"aiPanel?.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showAi]=\"showAi()\"\n    [showName]=\"showName()\"\n    [showSignature]=\"showSignature()\">\n    <ng-content></ng-content>\n  </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n<ma-ai-chat-panel #aiPanel></ma-ai-chat-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: ToastContainerComponent, selector: "ma-toast-container" }, { kind: "component", type: UserProfileComponent, selector: "ma-user-profile", inputs: ["inputAvatarShape", "showBell", "showApproval", "showName", "showAi", "showSignature", "signatureHeight"], outputs: ["notificationClick", "approvalClick", "aiClick"] }, { kind: "component", type: NotificationPanelComponent, selector: "ma-notification-panel", outputs: ["notificationRead"] }, { kind: "component", type: MaApprovalPanelComponent, selector: "ma-approval-panel", outputs: ["approvalActioned"] }, { kind: "component", type: MaAiChatPanelComponent, selector: "ma-ai-chat-panel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MaUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showName]=\"showName()\"\n    [showSignature]=\"showSignature()\">\n    <ng-content></ng-content>\n  </ma-user-profile>   \n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'ma-user', imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent, MaApprovalPanelComponent, MaAiChatPanelComponent], template: "<ma-toast-container></ma-toast-container>\n<div class=\"user-header\">\n  <ma-user-profile\n    (notificationClick)=\"notificationPanel.open()\"\n    (approvalClick)=\"approvalPanel.open()\"\n    (aiClick)=\"aiPanel?.open()\"\n    [inputAvatarShape]=\"avatarShape()\"\n    [showBell]=\"showBell()\"\n    [showApproval]=\"showApproval()\"\n    [showAi]=\"showAi()\"\n    [showName]=\"showName()\"\n    [showSignature]=\"showSignature()\">\n    <ng-content></ng-content>\n  </ma-user-profile>\n</div>\n<ma-notification-panel #notificationPanel (notificationRead)=\"onNotificationRead()\"></ma-notification-panel>\n<ma-approval-panel #approvalPanel (approvalActioned)=\"onApprovalActioned()\"></ma-approval-panel>\n<ma-ai-chat-panel #aiPanel></ma-ai-chat-panel>\n", styles: [".user-header{display:flex;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { userProfile: [{
                 type: ViewChild,
                 args: [UserProfileComponent]
             }], approvalPanel: [{
                 type: ViewChild,
                 args: [MaApprovalPanelComponent]
-            }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
+            }], aiPanel: [{
+                type: ViewChild,
+                args: [MaAiChatPanelComponent]
+            }], avatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarShape", required: false }] }], showBell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBell", required: false }] }], showApproval: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApproval", required: false }] }], showAi: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAi", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], showSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSignature", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
 
 class MaUserXComponent {
     userId = input(null, ...(ngDevMode ? [{ debugName: "userId" }] : /* istanbul ignore next */ []));
@@ -2423,6 +3047,16 @@ async function runReturnViaPostMessageIfRequested(authService) {
     return true;
 }
 
+/**
+ * Public AI types exported from mesauth-angular.
+ *
+ * The library ships a chat panel that talks to MesAuth.Api's /ai/chat SSE endpoint.
+ * Consumer apps may register additional client-side tools that the AI can invoke
+ * to drive their UI (navigation, dialogs, etc.) via provideMesAuthAi().
+ */
+
+// Public surface of the AI module inside mesauth-angular.
+
 // mesauth-angular — primary entry point (backward compatible)
 // Re-exports everything so existing imports from 'mesauth-angular' continue to work.
 // Prefer importing from 'mesauth-angular/core' or 'mesauth-angular/ui' for
@@ -2432,5 +3066,5 @@ async function runReturnViaPostMessageIfRequested(authService) {
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, MES_AUTH_CONFIG, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
+export { ALL_ACTIONS, AVATAR_FRAMES, ApprovalActionType, ApprovalDocumentStatus, ApprovalStepMode, ApprovalStepStatus, DEFAULT_AI_CONFIG, MES_AUTH_AI_CONFIG, MES_AUTH_CONFIG, MaAiButtonComponent, MaAiChatPanelComponent, MaAiService, MaAiToolsRegistry, MaApprovalPanelComponent, MaApprovalService, MaArvContainerComponent, MaAvatarComponent, MaIconComponent, MaThemeDirective, MaUiConfigService, MaUserComponent, MaUserMenuColor, MaUserMenuComponent, MaUserXComponent, MesAuthModule, MesAuthService, NotificationBadgeComponent, NotificationPanelComponent, NotificationType, PACKAGE_VERSION, ThemeService, ToastContainerComponent, ToastService, UserProfileComponent, extractXMaPerm, mesAuthInterceptor, provideMesAuth, provideMesAuthAi, runReturnViaPostMessageIfRequested, runSsoCheckHandshake, withXMaPerm, xMaResource };
 //# sourceMappingURL=mesauth-angular.mjs.map