http-request-manager 18.5.18 → 18.5.20

package/fesm2022/http-request-manager.mjs

@@ -4,7 +4,7 @@ import { ComponentStore } from '@ngrx/component-store';
 import { map, catchError, filter, finalize, takeWhile, retry, startWith, tap, mergeMap, takeUntil, withLatestFrom, switchMap, delay, concatMap, take, scan, distinctUntilChanged } from 'rxjs/operators';
 import { HttpClient, HttpHeaders, HttpEventType, HttpHeaderResponse, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as CryptoJS from 'crypto-js';
-import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, merge, of, Subscription, take as take$1, catchError as catchError$1, switchMap as switchMap$1, map as map$1, startWith as startWith$1, combineLatest, tap as tap$1, ReplaySubject } from 'rxjs';
+import { from, BehaviorSubject, EMPTY, throwError, defer, interval, timer, Subject, merge, of, Subscription, take as take$1, catchError as catchError$1, switchMap as switchMap$1, map as map$1, startWith as startWith$1, combineLatest, filter as filter$1, takeUntil as takeUntil$1, tap as tap$1, ReplaySubject } from 'rxjs';
 import { ToastMessageDisplayService, ToastDisplay, ToastColors, ToastMessageDisplayModule } from 'toast-message-display';
 import Dexie from 'dexie';
 import * as i1 from '@ngx-translate/core';
@@ -736,12 +736,23 @@ class ChannelInfo {
 }
 
 class WSUser {
-    constructor(sessionId, content) {
+    constructor(sessionId = '', ldap = '', name = '', email = '') {
         this.sessionId = sessionId;
-        this.content = content;
+        this.ldap = ldap;
+        this.name = name;
+        this.email = email;
     }
     static adapt(item) {
-        return new WSUser(item?.sessionId, item?.content);
+        const user = new WSUser(item?.sessionId, item?.ldap, item?.name, item?.email);
+        // Copy any additional properties
+        if (item) {
+            Object.keys(item).forEach(key => {
+                if (!['sessionId', 'ldap', 'name', 'email'].includes(key)) {
+                    user[key] = item[key];
+                }
+            });
+        }
+        return user;
     }
 }
 
@@ -760,6 +771,11 @@ class WebsocketService {
         this.connectionStatus = new BehaviorSubject(false);
         this.connectionStatus$ = this.connectionStatus.asObservable();
         this.isSubscribed = false;
+        // Track currently subscribed channels
+        this.subscribedChannels = new BehaviorSubject(new Set());
+        this.subscribedChannels$ = this.subscribedChannels.asObservable();
+        // Store last options for reconnection
+        this.lastOptions = null;
     }
     getSessionId() {
         return sessionStorage.getItem('WSID') ?? (() => {
@@ -806,7 +822,26 @@ class WebsocketService {
         this.socket.onopen = () => {
             console.log(`📡 Connected to WebSocket`);
             this.connectionStatus.next(true);
+            this.lastOptions = options;
+            // Subscribe to primary channel
             this.sendSubscribe(options.id, options.user);
+            // Auto-subscribe to additional channels from options.channels[]
+            if (options.channels && options.channels.length > 0) {
+                options.channels.forEach(channel => {
+                    if (channel !== options.id) {
+                        this.subscribeToChannel(channel);
+                    }
+                });
+            }
+            // Re-subscribe to any previously subscribed channels (reconnection scenario)
+            const previousChannels = this.subscribedChannels.value;
+            if (previousChannels.size > 0) {
+                previousChannels.forEach(channel => {
+                    if (channel !== options.id && (!options.channels || !options.channels.includes(channel))) {
+                        this.subscribeToChannel(channel);
+                    }
+                });
+            }
         };
         this.socket.onmessage = (event) => {
             try {
@@ -848,20 +883,44 @@ class WebsocketService {
                 content: {}
             };
             this.socket.send(JSON.stringify(message));
+            // Track locally
+            const current = this.subscribedChannels.value;
+            current.add(channelName);
+            this.subscribedChannels.next(current);
+            console.log(`📝 Subscribed to channel: ${channelName}`);
         }
         else {
             console.warn('Cannot subscribe: WebSocket not yet open.');
         }
     }
-    unsubscribeToChannel(channel) {
+    subscribeToChannels(channelNames) {
+        if (this.socket?.readyState === WebSocket.OPEN) {
+            channelNames.forEach(channel => this.subscribeToChannel(channel));
+        }
+        else {
+            console.warn('Cannot subscribe: WebSocket not yet open.');
+        }
+    }
+    unsubscribeFromChannel(channel) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'unsubscribe', subscribedChannel: channel }));
-            console.log(`💬 Unsubscribed to channel: ${channel}`);
+            // Remove from local tracking
+            const current = this.subscribedChannels.value;
+            current.delete(channel);
+            this.subscribedChannels.next(current);
+            console.log(`💬 Unsubscribed from channel: ${channel}`);
         }
         else {
-            console.error('WebSocket is not open. Cannot unsubscribed to channel.');
+            console.error('WebSocket is not open. Cannot unsubscribe from channel.');
         }
     }
+    unsubscribeToChannel(channel) {
+        // Deprecated: Use unsubscribeFromChannel instead
+        this.unsubscribeFromChannel(channel);
+    }
+    getSubscribedChannels() {
+        return this.subscribedChannels.value;
+    }
     sendBroadcast(content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'broadcast', content }));
@@ -880,6 +939,19 @@ class WebsocketService {
             console.error('WebSocket is not open. Cannot send message.');
         }
     }
+    /**
+     * Send a message to a specific channel for channel-based messaging
+     * This uses the 'message' type which broadcasts to all subscribers in the channel
+     */
+    sendChannelMessage(channel, content) {
+        if (this.socket?.readyState === WebSocket.OPEN) {
+            this.socket.send(JSON.stringify({ type: 'message', subscribedChannel: channel, content }));
+            console.log(`💬 Send channel message to [${channel}]:`, content);
+        }
+        else {
+            console.error('WebSocket is not open. Cannot send channel message.');
+        }
+    }
     sendMessageToUser(user, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'userMessage', subscribedChannel: user, content }));
@@ -2812,15 +2884,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [] });
 
 class ChannelMessage {
-    constructor(sessionId = '', content, message = '', users = [], issued = Math.floor(new Date().getTime() / 1000)) {
+    constructor(sessionId = '', content = null) {
         this.sessionId = sessionId;
         this.content = content;
-        this.message = message;
-        this.users = users;
-        this.issued = issued;
     }
     static adapt(item) {
-        return new ChannelMessage(item?.sessionId, item?.content, item?.message, (item?.users) ? item?.users.map((userItem) => WSUser.adapt(userItem)) : [], item?.issued);
+        return new ChannelMessage(item?.sessionId, item?.content);
     }
 }
 
@@ -2869,6 +2938,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.userAction$ = this.userAction.asObservable();
         this.wsConnection = false;
         this.wsOptions = WSOptions.adapt();
+        // Expose raw WS connection status directly to UI
+        this.connectionStatus$ = this.httpManagerService.connectionStatus$;
         // WebSocket
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(
         // tap((wsOptions) => { debugger
@@ -2904,6 +2975,16 @@ class HTTPManagerStateService extends ComponentStore {
                     // }
                     this.channels.next(message.channels);
                     break;
+                case 'subscribed':
+                    console.log(`✅ Subscription confirmed: ${message.channel}`);
+                    break;
+                case 'unsubscribed':
+                    console.log(`🔓 Unsubscription confirmed: ${message.channel}`);
+                    break;
+                case 'info':
+                    // Already subscribed or other info messages
+                    console.log(`ℹ️ Info: ${message.message}`);
+                    break;
                 case 'stateMangerMessage':
                     ;
                     if (message.data.sessionId !== this.user.value?.sessionId) {
@@ -2912,17 +2993,22 @@ class HTTPManagerStateService extends ComponentStore {
                         this.fetchRecord(RequestOptions.adapt({ path: message.data.content.path }), message.data.content.method);
                     }
                     break;
-                // case 'channelMessage':
-                //   console.log('💬 Message:', message.data)
-                //   this.fetchRecord(RequestOptions.adapt({ path: message.content.path }), message.content.method)
-                //   break;
-                // case 'channelCommunication':
-                //   console.log('💬 Message Communication:', message.data)
-                //   this.appendMessages(message.data)
-                //   break;
-                // case 'channelAlerts':
-                //   console.log('💬 Message Alerts:', message.data)
-                //   break;
+                case 'channelMessage':
+                    // Handle channel-based messages (from sendChannelMessage)
+                    // Structure: { type: 'channelMessage', channel, data: { sessionId, content: ChannelMessage } }
+                    // Skip messages from self
+                    const senderSessionId = message.data?.content?.sessionId?.sessionId || message.data?.sessionId;
+                    if (senderSessionId === this.user.value?.sessionId) {
+                        break;
+                    }
+                    console.log('💬 Channel Message received:', message);
+                    if (message.data?.content) {
+                        this.appendMessages(ChannelMessage.adapt({
+                            sessionId: message.data.content.sessionId,
+                            content: message.data.content.content,
+                        }));
+                    }
+                    break;
                 case 'usersInChannel':
                     console.log('👥 Users:', message.data.users);
                     this.userList.next(message.data.users);
@@ -3227,7 +3313,8 @@ class HTTPManagerStateService extends ComponentStore {
         this.databaseOptions = database;
         this.maxRetries = this.apiOptions.ws?.retry?.times || 3;
         this.retryDelay = (this.apiOptions.ws?.retry?.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
-        this.wsNextRetry = new BehaviorSubject(this.retryDelay);
+        // Start next retry countdown at 0 to avoid showing 5000 pre-connection
+        this.wsNextRetry = new BehaviorSubject(0);
         this.wsNextRetry$ = this.wsNextRetry.asObservable();
         this.setApiRequestOptions(apiOptions, dataType, database);
         if (this.databaseOptions && this.databaseOptions.table) {
@@ -3262,8 +3349,8 @@ class HTTPManagerStateService extends ComponentStore {
                 console.error('WSOptions invalid: wsServer is missing or empty');
                 return;
             }
-            // Setup connection status monitoring
-            this.connectionStatus$ = this.setupConnectionStatus();
+            // Setup connection status monitoring (internal subscription to drive retry counters)
+            this.setupConnectionStatus().subscribe();
             // Make initial connection attempt
             console.log('🔄 Initial WebSocket connection attempt...');
             this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
@@ -3293,6 +3380,9 @@ class HTTPManagerStateService extends ComponentStore {
             if (!this.shouldRetry)
                 return of(false);
             const countdownEnder$ = new Subject();
+            // Immediately reflect upcoming retry delay in seconds on UI
+            const seconds = this.retryDelay / 1000;
+            this.wsNextRetry.next(seconds);
             return timer(0, this.retryDelay)
                 .pipe(take(this.maxRetries), tap(i => {
                 const attempt = i + 1;
@@ -3398,17 +3488,119 @@ class HTTPManagerStateService extends ComponentStore {
         }
     }
     wsMessaging(message, channels) {
-        const user = this.user.value || this.user.value;
+        const user = this.user.value;
         const messageInfo = ChannelMessage.adapt({ ...message, fromUser: user });
+        console.log('📤 wsMessaging called with channels:', channels);
         if (this.wsConnection && this.apiOptions.ws) {
-            const wsServer = (channels) ? channels : this.apiOptions.ws.id;
-            // if(messageInfo.toUser === 'allChannels') {
-            //   this.httpManagerService.sendBroadcast(messageInfo)
-            // } else if(messageInfo.toUser === 'allInChannel') {
-            //   this.httpManagerService.sendMessageInChannel(wsServer, messageInfo)
-            // } else {
-            //   this.httpManagerService.sendMessageToUser(wsServer, messageInfo)
-            // }
+            // If specific channels provided, send to each channel
+            if (channels && channels.length > 0) {
+                console.log(`📤 Sending to ${channels.length} channel(s):`, channels);
+                channels.forEach(channel => {
+                    if (channel === 'allChannels') {
+                        this.httpManagerService.sendBroadcast(messageInfo);
+                    }
+                    else {
+                        this.httpManagerService.sendChannelMessage(channel, messageInfo);
+                    }
+                });
+            }
+            else {
+                // Fallback to the primary WS channel
+                const wsChannel = this.apiOptions.ws.id;
+                console.log(`📤 Sending to fallback channel:`, wsChannel);
+                this.httpManagerService.sendChannelMessage(wsChannel, messageInfo);
+            }
+        }
+    }
+    // --------------------------------------------------------------------------------------------------
+    // CHANNEL MANAGEMENT
+    /**
+     * Subscribe to a single channel
+     */
+    subscribeToChannel(channel) {
+        if (this.wsConnection) {
+            this.httpManagerService.subscribeToChannel(channel);
+        }
+        else {
+            console.warn('Cannot subscribe: WebSocket not connected.');
+        }
+    }
+    /**
+     * Subscribe to multiple channels at once
+     */
+    subscribeToChannels(channels) {
+        if (this.wsConnection) {
+            this.httpManagerService.subscribeToChannels(channels);
+        }
+        else {
+            console.warn('Cannot subscribe: WebSocket not connected.');
+        }
+    }
+    /**
+     * Unsubscribe from a channel
+     */
+    unsubscribeFromChannel(channel) {
+        if (this.wsConnection) {
+            this.httpManagerService.unsubscribeFromChannel(channel);
+        }
+        else {
+            console.warn('Cannot unsubscribe: WebSocket not connected.');
+        }
+    }
+    /**
+     * Get observable of currently subscribed channels
+     */
+    get subscribedChannels$() {
+        return this.httpManagerService.subscribedChannels$;
+    }
+    /**
+     * Get current subscribed channels synchronously
+     */
+    getSubscribedChannels() {
+        return this.httpManagerService.getSubscribedChannels();
+    }
+    /**
+     * Create a new channel on the server
+     */
+    createChannel(channel) {
+        if (this.wsConnection) {
+            this.httpManagerService.createChannel(channel);
+        }
+        else {
+            console.warn('Cannot create channel: WebSocket not connected.');
+        }
+    }
+    /**
+     * Delete a channel from the server
+     */
+    deleteChannel(channel) {
+        if (this.wsConnection) {
+            this.httpManagerService.deleteChannel(channel);
+        }
+        else {
+            console.warn('Cannot delete channel: WebSocket not connected.');
+        }
+    }
+    /**
+     * Request list of all channels from server
+     */
+    getAllChannels() {
+        if (this.wsConnection) {
+            this.httpManagerService.getAllChannels();
+        }
+        else {
+            console.warn('Cannot get channels: WebSocket not connected.');
+        }
+    }
+    /**
+     * Get users in a specific channel
+     */
+    getUsersInChannel(channel) {
+        if (this.wsConnection) {
+            this.httpManagerService.getUsersInChannel(channel);
+        }
+        else {
+            console.warn('Cannot get users: WebSocket not connected.');
         }
     }
     // --------------------------------------------------------------------------------------------------
@@ -4103,10 +4295,9 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
             console.log('User Action:', user);
         });
     }
-    sendMessage(data) {
-        debugger;
-        console.log('sendMessage', data);
-        this.wsMessaging(data);
+    sendMessage(data, channels) {
+        console.log('sendMessage', data, 'to channels:', channels);
+        this.wsMessaging(data, channels);
     }
     getAllChannels() {
         this.httpManagerService.getAllChannels();
@@ -4194,7 +4385,6 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.createRecord(newData, RequestOptions.adapt({ path: this.path }));
     }
     sendMessage(data) {
-        debugger;
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
@@ -4261,11 +4451,11 @@ class WsDataControlComponent {
         this.stateDataRequestService.deleteData(lastRec);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.content.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content.user.name }} has {{ userAction?.content.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user.sessionId) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i3$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsDataControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.content.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content.user.name }} has {{ userAction?.content.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
+            args: [{ selector: 'app-ws-data-control', standalone: false, template: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem;\">\n    @if ((users$ |async); as users) {\n      <div>\n        @if (users.length > 0) {\n          <h3 style=\"margin: 0;\">Connected Users</h3>\n        } @else {\n          <h3 style=\"margin: 0;\">No Users</h3>\n        }\n        <mat-chip-set>\n          @for (user of users; track user.sessionId) {\n            <mat-chip\n              [class.user-chip--primary]=\"isUser(user, (user$ | async))\"\n              [style.color]=\"isUser(user, (user$ | async)) ? '#fff' : null\"\n              [disableRipple]=\"true\"\n            >\n              {{ user.name }}\n            </mat-chip>\n          }\n        </mat-chip-set>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n\n    <div class=\"box\" style=\"margin-bottom: 1rem;\" *ngIf=\"(userAction$ | async) as userAction\">\n      {{ userAction?.content?.user?.name }} has {{ userAction?.content?.method }}\n    </div>\n\n    <h3 style=\"margin: 0;\">Data Actions</h3>\n    <div style=\"display: flex; gap: 1rem; margin-bottom: 1rem;\">\n      <button mat-stroked-button (click)=\"onGetData()\">Get Data</button>\n      <div style=\"flex:1\"></div>\n      <button mat-stroked-button color=\"accent\" (click)=\"onUpdateData(data)\">Update Data</button>\n      <button mat-stroked-button color=\"warn\" (click)=\"onRemoveData(data)\">Remove Data</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"onAddData()\">Add Data</button>\n    </div>\n    @if (data.length > 0) {\n      <div>\n        <table mat-table [dataSource]=\"data\" style=\"border: 1px solid grey;\">\n          <ng-container matColumnDef=\"id\">\n            <th mat-header-cell *matHeaderCellDef> ID </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.id}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"spiffe\">\n            <th mat-header-cell *matHeaderCellDef> Spiffe </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.spiffe}} </td>\n          </ng-container>\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef> Name </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.first_name}} {{element.last_name}}</td>\n          </ng-container>\n          <ng-container matColumnDef=\"email\">\n            <th mat-header-cell *matHeaderCellDef> Email </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n          </ng-container>\n          <tr mat-header-row *matHeaderRowDef=\"['id', 'spiffe', 'name', 'email']\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: ['id', 'spiffe', 'name', 'email'];\"></tr>\n        </table>\n        <div style=\"border: 1px solid grey; padding: .5rem; border-top: none;\">\n          <h3 style=\"margin: 0;\">Total Records {{ data.length }}</h3>\n        </div>\n      </div>\n    } @else {\n      <div style=\"margin-top: 1rem; font-style: italic;\">\n        No Data Available\n      </div>\n    }\n  </div>\n}\n\n", styles: [".user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}.user-chip--primary :is(.mdc-evolution-chip__text-label,.mdc-evolution-chip__action,.mdc-evolution-chip__cell,.mat-mdc-chip-action-label){color:#fff!important}.user-chip--primary,.user-chip--primary *{color:#fff!important}:host ::ng-deep .user-chip--primary{background-color:var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5))!important;color:#fff!important;--mdc-evolution-chip-container-color: var(--mdc-theme-primary, var(--md-sys-color-primary, #3f51b5));--mdc-evolution-chip-label-text-color: #fff}:host ::ng-deep .user-chip--primary .mdc-evolution-chip__text-label,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__action,:host ::ng-deep .user-chip--primary .mdc-evolution-chip__cell,:host ::ng-deep .user-chip--primary .mat-mdc-chip-action-label,:host ::ng-deep .user-chip--primary *{color:#fff!important}.box{padding:.5rem;border:1px solid rgb(174,174,13);background-color:#ececaf}\n"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -4280,6 +4470,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+class WsMessagingComponent {
+    constructor() {
+        this.destroy$ = new Subject();
+        this.fb = inject(FormBuilder);
+        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
+        // Filter out private stateManager channels (channels starting with "WS-")
+        this.channels$ = this.stateRequestServiceDemo.channels$.pipe(map$1(channels => channels?.filter(channel => !channel.startsWith('WS-')) || []));
+        this.user$ = this.stateRequestServiceDemo.user$;
+        this.data$ = this.stateRequestServiceDemo.data$;
+        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
+        this.messages = this.fb.group({
+            channels: this.fb.control(null, Validators.required),
+            content: this.fb.control(null, Validators.required),
+        });
+        this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
+        this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
+        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
+            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
+            if (!obj.user)
+                return EMPTY;
+            const mainUser = '';
+            const messages = obj.messages.map((item) => {
+                // Message transformation logic
+            });
+            return { user: mainUser, messages };
+        }));
+    }
+    get channels() {
+        return this.messages.get('channels');
+    }
+    get content() {
+        return this.messages.get('content');
+    }
+    get isValid() {
+        return this.channels.valid;
+    }
+    get selectedChannels() {
+        return this.channels.value || [];
+    }
+    ngOnInit() {
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // Only trigger once when connection becomes true
+        this.connectionStatus$.pipe(filter$1(status => status === true), take$1(1), takeUntil$1(this.destroy$)).subscribe(() => {
+            // Create a public messaging channel when connected
+            this.stateRequestServiceDemo.createChannel('general');
+            this.stateRequestServiceDemo.getAllChannels();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSendMessage(user) {
+        this.messages.markAllAsTouched();
+        if (this.messages.invalid)
+            return;
+        const selectedChannels = this.channels.value;
+        const message = ChannelMessage.adapt({
+            sessionId: {
+                sessionId: user.sessionId,
+                ldap: user.ldap,
+                name: user.name,
+                email: user.email,
+            },
+            content: { message: this.messages.value.content },
+        });
+        this.stateRequestServiceDemo.sendMessage(message, selectedChannels);
+        this.content.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                @if ((channels$ | async); as channels) {\n                  <div style=\"display:flex; gap: 1rem\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  </div>\n                }\n\n                @if (selectedChannels.length > 0) {\n                  @if ((channels$ | async); as channels) {\n                    <div style=\"display:flex\">\n                      <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                        <mat-label>Send a Message</mat-label>\n                        <textarea\n                          matInput placeholder=\"Type your message...\"\n                          formControlName=\"content\"\n                          (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        ></textarea>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div style=\"display:flex; gap: .5rem;\">\n                    <div style=\"flex:1\"></div>\n                    <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                      Send Message\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n  }\n\n  @if ((channels$ | async); as channels) {\n    <div style=\"margin: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;\">\n      <strong>Available Channels:</strong> {{ channels | json }}\n    </div>\n  }\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n  @if ((user$ | async); as user) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                @if ((channels$ | async); as channels) {\n                  <div style=\"display:flex; gap: 1rem\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  </div>\n                }\n\n                @if (selectedChannels.length > 0) {\n                  @if ((channels$ | async); as channels) {\n                    <div style=\"display:flex\">\n                      <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                        <mat-label>Send a Message</mat-label>\n                        <textarea\n                          matInput placeholder=\"Type your message...\"\n                          formControlName=\"content\"\n                          (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        ></textarea>\n                      </mat-form-field>\n                    </div>\n                  }\n                  <div style=\"display:flex; gap: .5rem;\">\n                    <div style=\"flex:1\"></div>\n                    <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                      Send Message\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n  }\n\n  @if ((channels$ | async); as channels) {\n    <div style=\"margin: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;\">\n      <strong>Available Channels:</strong> {{ channels | json }}\n    </div>\n  }\n" }]
+        }], propDecorators: { server: [{
+                type: Input
+            }], wsServer: [{
+                type: Input
+            }], jwtToken: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
 class WsNotificationsComponent {
     constructor() { }
     ngOnInit() {
@@ -4375,14 +4650,15 @@ class RequestManagerWsDemoComponent {
     //   })
     // );
     ngOnInit() {
-        //   this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // Initialize WS connection and retry driver
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
     }
     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", wsChannel: "wsChannel" }, 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 {{ attempts$ | async }} - {{ nextRetry$ |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.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <!-- <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging> -->\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\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$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.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: i9.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", "wsChannel"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications" }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { 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", wsChannel: "wsChannel" }, 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 {{ attempts$ | async }} - {{ nextRetry$ |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 ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\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$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.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: i9.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", "wsChannel"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications" }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { 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 {{ attempts$ | async }} - {{ nextRetry$ |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.content.name }}</div>\n            <div>({{ userInfo.content.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <!-- <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging> -->\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\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 {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |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 ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></app-ws-notifications>\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: [{
@@ -4815,117 +5091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-store-state-manager-demo', providers: [SettingsStateService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n" }]
         }] });
 
-class WsMessagingComponent {
-    constructor() {
-        this.fb = inject(FormBuilder);
-        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
-        this.channels$ = this.stateRequestServiceDemo.channels$;
-        this.user$ = this.stateRequestServiceDemo.user$;
-        this.users$ = this.stateRequestServiceDemo.userList$;
-        this.data$ = this.stateRequestServiceDemo.data$;
-        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
-        this.messages = this.fb.group({
-            channels: this.fb.control(null, Validators.required),
-            toUsers: this.fb.control(null, Validators.required),
-            content: this.fb.control(null, Validators.required),
-        });
-        this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
-        this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
-        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
-            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
-            if (!obj.user)
-                return EMPTY;
-            // const mainUser = UserName.adapt({
-            //     id: obj.user.username,
-            //     first: obj.user?.name?.first,
-            //     last: obj.user?.name?.last,
-            // })
-            const mainUser = '';
-            const messages = obj.messages.map((item) => {
-                if (item.toUser === 'allChannels') {
-                    // item.toUser = UserName.adapt({
-                    //     id: '',
-                    //     first: 'All Users',
-                    //     last: '',
-                    // })
-                }
-                // return Message.adapt({
-                //     fromUser: {
-                //       id: item.fromUser.username,
-                //       first: item.fromUser?.name?.first,
-                //       last: item.fromUser?.name?.last,
-                //     },
-                //     toUser: {
-                //       id: item.toUser.username,
-                //       first: item.toUser?.name?.first,
-                //       last: item.toUser?.name?.last,
-                //     },
-                //     content: item.content,
-                //     date: item.issued,
-                // })
-            });
-            return { user: mainUser, messages };
-        }));
-    }
-    get channels() {
-        return this.messages.get('channels');
-    }
-    get toUsers() {
-        return this.messages.get('toUsers');
-    }
-    get content() {
-        return this.messages.get('content');
-    }
-    get isValid() {
-        return this.toUsers.valid;
-    }
-    ngOnInit() {
-        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
-        // this.stateRequestServiceDemo.getData()
-        if (this.connectionStatus$) {
-            this.connectionStatus$
-                .subscribe(status => {
-                this.stateRequestServiceDemo.getAllChannels();
-            });
-        }
-    }
-    onSendMessage(user) {
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const message = ChannelMessage.adapt({
-            message: this.messages.value.content,
-            ...user,
-            users: this.toUsers.value,
-        });
-        this.stateRequestServiceDemo.sendMessage(message);
-        this.content.reset();
-    }
-    onSendAlert() {
-        debugger;
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const message = ChannelMessage.adapt({ ...this.messages.value, type: CommunicationType.ALERT });
-        this.stateRequestServiceDemo.sendMessage(message);
-        this.content.reset();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n" }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }] } });
-
 // import { MessengerChatModule } from 'src/app/components/messenger-chat/messenger-chat.module';
 // import { StoreStateManagerModule } from "src/app/beta_components/store-state-manager/store-state-manager.module";
 class HttpRequestManagerModule {