http-request-manager 18.16.3 → 18.16.4

package/fesm2022/http-request-manager.mjs

@@ -1868,6 +1868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class WebSocketManagerService {
     constructor() {
+        this.isConnecting$ = WebSocketManagerService.isConnectingSubject.asObservable();
         this.retryCount$ = WebSocketManagerService.retryCountSubject.asObservable();
         this.maxRetries$ = WebSocketManagerService.maxRetriesSubject.asObservable();
         this.messages$ = WebSocketManagerService.messages.asObservable();
@@ -1880,8 +1881,9 @@ class WebSocketManagerService {
     // STATIC SINGLETON STATE (Shared across ALL instances)
     // ═══════════════════════════════════════════════════════════════════════════
     static { this.socket = null; }
-    static { this.isConnecting = false; }
+    static { this.isConnectingSubject = new BehaviorSubject(false); }
     static { this.connectionInitialized = false; }
+    static { this.shouldRetry = true; }
     // Store last options for reconnection
     static { this.lastOptions = null; }
     static { this.lastJwtToken = ''; }
@@ -1961,7 +1963,7 @@ class WebSocketManagerService {
             }
         }
         // Prevent duplicate connection attempts
-        if (WebSocketManagerService.isConnecting) {
+        if (WebSocketManagerService.isConnectingSubject.value) {
             console.log('⏳ Connection already in progress...');
             return;
         }
@@ -1983,12 +1985,15 @@ class WebSocketManagerService {
         else {
             WebSocketManagerService.retryDelay = 5000;
         }
-        // Mark as connecting — connectionStatus true while connecting/retrying, false only when exhausted
-        WebSocketManagerService.isConnecting = true;
+        // Reset shouldRetry flag for new connection attempts
+        WebSocketManagerService.shouldRetry = true;
+        // Mark as connecting — connectionStatus false while connecting, true only when connected
+        WebSocketManagerService.isConnectingSubject.next(true);
         WebSocketManagerService.isSubscribed = false;
         WebSocketManagerService.connectionReadyNotified = false;
         WebSocketManagerService.subscribedChannels.next(new Set());
-        WebSocketManagerService.connectionStatus.next(true);
+        // Don't set connectionStatus to true here - only set to true when connection is actually established
+        // WebSocketManagerService.connectionStatus.next(true);
         const sessionId = this.getSessionId();
         const URL = (jwtToken) ? `${options.wsServer}?token=${jwtToken}&sessionId=${sessionId}` : `${options.wsServer}?sessionId=${sessionId}`;
         console.log(`🔌 Initiating WebSocket connection to: ${options.wsServer}`);
@@ -2002,8 +2007,9 @@ class WebSocketManagerService {
             // Do NOT reset retryCount here — reset happens only on confirmed stable connection
             // (onmessage first valid response). Resetting here would cause the counter to always
             // show 1/N because onopen fires before onclose increments the counter.
-            WebSocketManagerService.isConnecting = false;
+            WebSocketManagerService.isConnectingSubject.next(false);
             WebSocketManagerService.connectionInitialized = true;
+            // Do NOT set connectionStatus to true here - wait for server to confirm authentication via onmessage
         };
         WebSocketManagerService.socket.onmessage = (event) => {
             try {
@@ -2015,6 +2021,8 @@ class WebSocketManagerService {
                         WebSocketManagerService.lastOptions = null;
                         WebSocketManagerService.connectionError.next('Invalid or Expired JWT');
                         WebSocketManagerService.connectionStatus.next(false);
+                        // Stop retrying for authentication errors
+                        WebSocketManagerService.shouldRetry = false;
                     }
                     else {
                         console.error(`❌ Server error: ${data.error} — will retry`);
@@ -2032,6 +2040,8 @@ class WebSocketManagerService {
                         WebSocketManagerService.retryCountSubject.next(0);
                     }
                     WebSocketManagerService.connectionReadyNotified = true;
+                    // Set connection status to true only when server confirms authentication
+                    WebSocketManagerService.connectionStatus.next(true);
                     console.log(`🔄 Emitting reconnect event for MessageTrackerService`);
                     WebSocketManagerService.onReconnect.next();
                 }
@@ -2043,18 +2053,21 @@ class WebSocketManagerService {
         };
         WebSocketManagerService.socket.onclose = (event) => {
             console.log(`🔴 WebSocket closed (code: ${event.code})`);
-            WebSocketManagerService.isConnecting = false;
+            WebSocketManagerService.isConnectingSubject.next(false);
             WebSocketManagerService.connectionReadyNotified = false;
             WebSocketManagerService.socket = null;
             WebSocketManagerService.subscribedChannels.next(new Set());
             if (event.code === 4000 || event.code === 4001 || event.code === 4003) {
                 WebSocketManagerService.connectionError.next('Invalid or Expired JWT');
                 WebSocketManagerService.connectionStatus.next(false);
+                // Stop retrying for authentication errors
+                WebSocketManagerService.shouldRetry = false;
                 return;
             }
             const maxRetries = WebSocketManagerService.maxRetries;
             const retryDelay = WebSocketManagerService.retryDelay;
-            if (WebSocketManagerService.lastOptions && WebSocketManagerService.retryCount < maxRetries) {
+            // Only retry if shouldRetry is true and we haven't exceeded max retries
+            if (WebSocketManagerService.shouldRetry && WebSocketManagerService.lastOptions && WebSocketManagerService.retryCount < maxRetries) {
                 WebSocketManagerService.retryCount++;
                 WebSocketManagerService.retryCountSubject.next(WebSocketManagerService.retryCount);
                 console.log(`🔄 Reconnect attempt ${WebSocketManagerService.retryCount}/${maxRetries}...`);
@@ -2064,13 +2077,19 @@ class WebSocketManagerService {
             else {
                 console.error(`❌ WebSocket failed after ${maxRetries} retries. Giving up.`);
                 WebSocketManagerService.connectionStatus.next(false);
+                // Set error message if not already set
+                if (!WebSocketManagerService.connectionError.value) {
+                    WebSocketManagerService.connectionError.next('Connection failed after maximum retries');
+                }
                 WebSocketManagerService.retryCount = maxRetries;
                 WebSocketManagerService.retryCountSubject.next(maxRetries);
+                // Reset shouldRetry flag for future connection attempts
+                WebSocketManagerService.shouldRetry = true;
             }
         };
         WebSocketManagerService.socket.onerror = (error) => {
             console.error('❌ WebSocket error:', error);
-            WebSocketManagerService.isConnecting = false;
+            WebSocketManagerService.isConnectingSubject.next(false);
             // onclose will fire after onerror and drive retry/give-up logic
         };
     }
@@ -3794,6 +3813,7 @@ class HTTPManagerService extends RequestService {
         this.connectionStatus$ = this.wsManager.connectionStatus$;
         this.messages$ = this.messageTracker.messages$; // Messages flow through MessageTrackerService
         this.subscribedChannels$ = this.wsManager.subscribedChannels$;
+        this.isConnecting$ = this.wsManager.isConnecting$;
         this.retryCount$ = this.wsManager.retryCount$;
         this.maxRetries$ = this.wsManager.maxRetries$;
         this.connectionError$ = this.wsManager.connectionError$;
@@ -6658,6 +6678,7 @@ class HTTPManagerStateService extends ComponentStore {
         this.wsOptions = WSOptions.adapt();
         // Expose raw WS connection status directly to UI (from singleton WebSocketManagerService)
         this.connectionStatus$ = this.httpManagerService.connectionStatus$;
+        this.isConnecting$ = this.httpManagerService.isConnecting$;
         this.wsRetryCount$ = this.httpManagerService.retryCount$;
         this.wsMaxRetries$ = this.httpManagerService.maxRetries$;
         this.connectionError$ = this.httpManagerService.connectionError$;
@@ -12419,6 +12440,7 @@ class RequestManagerWsDemoComponent {
         this.retryCount$ = this.stateService.wsRetryCount$;
         this.maxRetries$ = this.stateService.wsMaxRetries$;
         this.connectionStatus$ = this.stateService.connectionStatus$;
+        this.isConnecting$ = this.stateService.isConnecting$;
         this.connectionError$ = this.stateService.connectionError$;
         this.data$ = this.stateService.data$;
         this.isPending$ = this.stateService.isPending$;
@@ -12427,11 +12449,11 @@ class RequestManagerWsDemoComponent {
         this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ retryCount$ | async }} / {{ maxRetries$ | async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if (!(connectionStatus$ | async) && !(connectionError$ | async) && ((retryCount$ | async) ?? 0) < ((maxRetries$ | async) ?? 0)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    @if (connectionError$ | async; as errorMsg) {\n      <div style=\"padding: 0.75rem 1rem; background: #fdecea; color: #b00020; border-left: 4px solid #b00020; border-radius: 2px; margin-bottom: 0.5rem;\">\n        {{ errorMsg }}\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"!(connectionStatus$ | async)\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else if (connectionError$ | async) {\n      <span style=\"color: red;\">{{ connectionError$ | async }}</span>\n    } @else if (isConnecting$ | async) {\n      <span style=\"color: orange;\">Connecting... {{ retryCount$ | async }} / {{ maxRetries$ | async }}</span>\n    } @else {\n      <span style=\"color: red;\">Disconnected</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isConnecting$ | async) && !(connectionStatus$ | async) && !(connectionError$ | async)) {\n      <div style=\"display: flex; align-items: center; gap: 1rem; padding: 0.5rem; background: #e3f2fd; border-radius: 4px; margin-bottom: 0.5rem;\">\n        <span>Connecting to WebSocket...</span>\n        <mat-progress-bar mode=\"indeterminate\" style=\"flex: 1;\"></mat-progress-bar>\n      </div>\n    }\n\n    @if (connectionError$ | async; as errorMsg) {\n      <div style=\"padding: 0.75rem 1rem; background: #fdecea; color: #b00020; border-left: 4px solid #b00020; border-radius: 2px; margin-bottom: 0.5rem;\">\n        {{ errorMsg }}\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"!(connectionStatus$ | async)\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user", "path"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ retryCount$ | async }} / {{ maxRetries$ | async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if (!(connectionStatus$ | async) && !(connectionError$ | async) && ((retryCount$ | async) ?? 0) < ((maxRetries$ | async) ?? 0)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    @if (connectionError$ | async; as errorMsg) {\n      <div style=\"padding: 0.75rem 1rem; background: #fdecea; color: #b00020; border-left: 4px solid #b00020; border-radius: 2px; margin-bottom: 0.5rem;\">\n        {{ errorMsg }}\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"!(connectionStatus$ | async)\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
+            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else if (connectionError$ | async) {\n      <span style=\"color: red;\">{{ connectionError$ | async }}</span>\n    } @else if (isConnecting$ | async) {\n      <span style=\"color: orange;\">Connecting... {{ retryCount$ | async }} / {{ maxRetries$ | async }}</span>\n    } @else {\n      <span style=\"color: red;\">Disconnected</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isConnecting$ | async) && !(connectionStatus$ | async) && !(connectionError$ | async)) {\n      <div style=\"display: flex; align-items: center; gap: 1rem; padding: 0.5rem; background: #e3f2fd; border-radius: 4px; margin-bottom: 0.5rem;\">\n        <span>Connecting to WebSocket...</span>\n        <mat-progress-bar mode=\"indeterminate\" style=\"flex: 1;\"></mat-progress-bar>\n      </div>\n    }\n\n    @if (connectionError$ | async; as errorMsg) {\n      <div style=\"padding: 0.75rem 1rem; background: #fdecea; color: #b00020; border-left: 4px solid #b00020; border-radius: 2px; margin-bottom: 0.5rem;\">\n        {{ errorMsg }}\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\" [disabled]=\"!(connectionStatus$ | async)\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"!(connectionStatus$ | async)\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{