http-request-manager 18.5.8 → 18.5.10

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, combineLatest, map as map$1, 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, 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';
@@ -16,7 +16,7 @@ import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angu
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$2 from '@angular/material/chips';
+import * as i3$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i11 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -35,7 +35,7 @@ import * as i10$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/material/toolbar';
+import * as i3$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i8 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
@@ -735,37 +735,22 @@ class ChannelInfo {
     }
 }
 
-var CommunicationType;
-(function (CommunicationType) {
-    CommunicationType[CommunicationType["MESSAGE"] = 0] = "MESSAGE";
-    CommunicationType[CommunicationType["ALERT"] = 1] = "ALERT";
-    CommunicationType[CommunicationType["OTHER"] = 2] = "OTHER";
-})(CommunicationType || (CommunicationType = {}));
-
-class ChannelMessage {
-    constructor(fromUser = null, toUser = null, content = null, issued = new Date(), type = CommunicationType.MESSAGE) {
-        this.fromUser = fromUser;
-        this.toUser = toUser;
+class WSUser {
+    constructor(sessionId, content) {
+        this.sessionId = sessionId;
         this.content = content;
-        this.issued = issued;
-        this.type = type;
     }
     static adapt(item) {
-        return new ChannelMessage(item?.fromUser, item?.toUser, item?.content, item?.issued, item?.type);
+        return new WSUser(item?.sessionId, item?.content);
     }
 }
 
-class UserMessage {
-    constructor(fromUser, toUser, content, issued) {
-        this.fromUser = fromUser;
-        this.toUser = toUser;
-        this.content = content;
-        this.issued = issued;
-    }
-    static adapt(item) {
-        return new UserMessage(item?.fromUser, item?.name?.toUser, item?.content, item?.name?.issued);
-    }
-}
+var CommunicationType;
+(function (CommunicationType) {
+    CommunicationType[CommunicationType["MESSAGE"] = 0] = "MESSAGE";
+    CommunicationType[CommunicationType["ALERT"] = 1] = "ALERT";
+    CommunicationType[CommunicationType["OTHER"] = 2] = "OTHER";
+})(CommunicationType || (CommunicationType = {}));
 
 class WebsocketService {
     constructor() {
@@ -889,7 +874,7 @@ class WebsocketService {
     sendMessageInChannel(channel, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'stateMangerMessage', subscribedChannel: channel, content }));
-            console.log(`💬 Send message: ${content}`);
+            console.log(`💬 Send message:`, content);
         }
         else {
             console.error('WebSocket is not open. Cannot send message.');
@@ -898,7 +883,7 @@ class WebsocketService {
     sendMessageToUser(user, content) {
         if (this.socket?.readyState === WebSocket.OPEN) {
             this.socket.send(JSON.stringify({ type: 'userMessage', subscribedChannel: user, content }));
-            console.log(`💬 Send message: ${content}`);
+            console.log(`💬 Send message:`, content);
         }
         else {
             console.error('WebSocket is not open. Cannot send message.');
@@ -1841,16 +1826,6 @@ class WSOptions {
     }
 }
 
-class WSUser {
-    constructor(id = '', adapter) {
-        this.id = id;
-        this.adapter = adapter;
-    }
-    static adapt(item) {
-        return new WSUser(item?.id, item?.adapter);
-    }
-}
-
 class ObjectMergerService {
     constructor(configOptions) {
         this.configOptions = configOptions;
@@ -2582,10 +2557,8 @@ class DbService extends Dexie {
         await this.dbReady;
         const safeTableName = this.cleanTableName(tableName);
         const safeSchema = schema.trim();
-        if (this.tableExists(safeTableName)) {
-            console.log(`Table ${safeTableName} already exists.`);
+        if (this.tableExists(safeTableName))
             return;
-        }
         const currentSchema = this.getCurrentSchema();
         console.log('Current Schema before update:', currentSchema);
         currentSchema[safeTableName] = safeSchema;
@@ -2838,6 +2811,19 @@ 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)) {
+        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);
+    }
+}
+
 const API_OPTS = new InjectionToken('API_OPTS');
 const defaultState = {
     data: [],
@@ -2887,27 +2873,20 @@ class HTTPManagerStateService extends ComponentStore {
         // WebSocket
         this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(tap((wsOptions) => {
             this.wsOptions = wsOptions;
-            if (wsOptions?.wsServer)
-                this.httpManagerService.connect(wsOptions, wsOptions.jwtToken);
         }), switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
             this.wsConnection = isConnected;
-            if (isConnected) {
-                console.log('🟢 WebSocket connection is open.');
-            }
-            else {
-                console.log('🔴 WebSocket connection is closed.');
-            }
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
                 return;
-            console.log('Received:', message.type);
+            console.log('Received:', message);
             if (message.error === 'JWT_INVALID') {
                 this.shouldRetry = false;
                 this.httpManagerService.disconnect();
             }
             if (message.type === 'success') {
                 if (message.data.sessionId !== this.user.value?.sessionId) {
-                    this.user.next(message.data);
+                    const user = WSUser.adapt(message.data);
+                    this.user.next(user);
                 }
             }
             switch (message.type) {
@@ -2923,7 +2902,7 @@ class HTTPManagerStateService extends ComponentStore {
                     break;
                 case 'stateMangerMessage':
                     ;
-                    if (message.data.sessionId !== this.user.value.sessionId) {
+                    if (message.data.sessionId !== this.user.value?.sessionId) {
                         console.log('💬 Message:', message.data);
                         this.userAction.next(message.data);
                         this.fetchRecord(RequestOptions.adapt({ path: message.data.content.path }), message.data.content.method);
@@ -3264,6 +3243,12 @@ class HTTPManagerStateService extends ComponentStore {
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
         this.hasDatabase = (this.database?.table) ? true : false;
         this.database = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
+        // Update WebSocket retry settings when options change
+        if (this.apiOptions.ws?.retry) {
+            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.next(this.retryDelay);
+        }
         if (this.database)
             this.initDBStorage();
         if (this.apiOptions.ws)
@@ -3271,7 +3256,14 @@ class HTTPManagerStateService extends ComponentStore {
     }
     // WebSocket
     setupConnectionStatus() {
-        return this.httpManagerService.connectionStatus$.pipe(distinctUntilChanged(), switchMap(status => {
+        return this.httpManagerService.connectionStatus$.pipe(distinctUntilChanged(), tap(status => {
+            if (status === true) {
+                console.log('🟢 WebSocket connection is open.');
+            }
+            else {
+                console.log('🔴 WebSocket connection is closed.');
+            }
+        }), switchMap(status => {
             if (status === true) {
                 this.shouldRetry = true;
                 this.wsRetryAttempts.next(0);
@@ -3286,7 +3278,9 @@ class HTTPManagerStateService extends ComponentStore {
                 const attempt = i + 1;
                 this.wsRetryAttempts.next(attempt);
                 countdownEnder$.next();
+                // Attempt connection on each retry
                 if (this.apiOptions.ws?.wsServer) {
+                    console.log(`🔄 Retry attempt #${attempt}/${this.maxRetries}`);
                     this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
                 }
                 if (attempt === this.maxRetries) {
@@ -3378,20 +3372,19 @@ class HTTPManagerStateService extends ComponentStore {
             this.httpManagerService.sendMessageInChannel(wsServer, { method, path, user: this.apiOptions.ws.user });
         }
     }
-    wsMessaging(message, channel) {
+    wsMessaging(message, channels) {
         const user = this.user.value || this.user.value;
         const messageInfo = ChannelMessage.adapt({ ...message, fromUser: user });
         if (this.wsConnection && this.apiOptions.ws) {
-            const wsServer = (channel) ? channel : 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);
-            }
+            const wsServer = (channels) ? channels : this.apiOptions.ws.id;
+            debugger;
+            // if(messageInfo.toUser === 'allChannels') {
+            //   this.httpManagerService.sendBroadcast(messageInfo)
+            // } else if(messageInfo.toUser === 'allInChannel') {
+            //   this.httpManagerService.sendMessageInChannel(wsServer, messageInfo)
+            // } else {
+            //   this.httpManagerService.sendMessageToUser(wsServer, messageInfo)
+            // }
         }
     }
     // --------------------------------------------------------------------------------------------------
@@ -4100,8 +4093,8 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
                 jwtToken,
                 user, // user object
                 retry: RetryOptions.adapt({
-                    times: 3,
-                    delay: 10,
+                    times: 10,
+                    delay: 5,
                 }),
             }
         });
@@ -4110,6 +4103,7 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         });
     }
     sendMessage(data) {
+        debugger;
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
@@ -4182,6 +4176,7 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.createRecord(newData, RequestOptions.adapt({ path: ['ai', 'tests'] }));
     }
     sendMessage(data) {
+        debugger;
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
@@ -4213,6 +4208,8 @@ class WsDataControlComponent {
         this.stateDataRequestService = inject(StateDataRequestService);
         this.user$ = this.stateDataRequestService.user$;
         this.users$ = this.stateDataRequestService.userList$;
+        this.userAction$ = this.stateDataRequestService.userAction$
+            .pipe(switchMap$1((action) => timer(3 * 1000).pipe(map$1(() => null), startWith$1(action))));
         this.data$ = this.stateDataRequestService.data$;
         this.isUser = (user, userItem) => {
             return user.sessionId === userItem.sessionId;
@@ -4244,11 +4241,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" }, 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-listbox>\n          @for (user of users; track user) {\n            <mat-chip-option [selected]=\"isUser(user, (user$ | async))\">\n              {{ user.content.name }}\n            </mat-chip-option>\n          }\n        </mat-chip-listbox>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\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: [""], dependencies: [{ 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: i2$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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" }, 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" }] }); }
 }
 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-listbox>\n          @for (user of users; track user) {\n            <mat-chip-option [selected]=\"isUser(user, (user$ | async))\">\n              {{ user.content.name }}\n            </mat-chip-option>\n          }\n        </mat-chip-listbox>\n      </div>\n    }\n    <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\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" }]
+            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"] }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -4259,49 +4256,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-class WsNotificationsComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", ngImport: i0, template: "<p>\n  ws-notifications works!\n</p>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<p>\n  ws-notifications works!\n</p>\n" }]
-        }], ctorParameters: () => [] });
-
-class WsAiMessagingComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging", ngImport: i0, template: "<p>\n  ws-ai-messaging works!\n</p>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-ai-messaging', standalone: false, template: "<p>\n  ws-ai-messaging works!\n</p>\n" }]
-        }], ctorParameters: () => [] });
-
-class RequestManagerWsDemoComponent {
+class WsMessagingComponent {
     constructor() {
-        this.httpManagerService = inject(HTTPManagerService);
-        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
         this.fb = inject(FormBuilder);
+        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
         this.user$ = this.stateRequestServiceDemo.user$;
         this.users$ = this.stateRequestServiceDemo.userList$;
-        this.attempts$ = this.stateRequestServiceDemo.attempts$;
-        this.nextRetry$ = this.stateRequestServiceDemo.nextRetry$;
-        this.connectionStatus$ = this.stateRequestServiceDemo.status$;
+        this.data$ = this.stateRequestServiceDemo.data$;
         this.messages = this.fb.group({
-            toUser: this.fb.control(null, Validators.required),
+            toUsers: this.fb.control(null, Validators.required),
             content: this.fb.control(null, Validators.required),
         });
-        this.data$ = this.stateRequestServiceDemo.data$;
-        this.isPending$ = this.stateRequestServiceDemo.isPending$;
-        this.fromMe = (user, fromUser) => {
-            return user === fromUser;
-        };
         this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
         this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
         this.chat$ = combineLatest([this.user$, this.communicationMessages$])
@@ -4340,27 +4305,33 @@ class RequestManagerWsDemoComponent {
             return { user: mainUser, messages };
         }));
     }
-    get toUser() {
-        return this.messages.get('toUser');
+    get toUsers() {
+        return this.messages.get('toUsers');
     }
     get content() {
         return this.messages.get('content');
     }
     get isValid() {
-        return this.toUser.valid;
+        return this.toUsers.valid;
     }
     ngOnInit() {
         this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // this.stateRequestServiceDemo.getData()
     }
-    onSendMessage() {
+    onSendMessage(user) {
         this.messages.markAllAsTouched();
         if (this.messages.invalid)
             return;
-        const message = ChannelMessage.adapt(this.messages.value);
+        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;
@@ -4368,12 +4339,123 @@ class RequestManagerWsDemoComponent {
         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: "@if ((user$ | async); as user) {\n\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n      @if ((user$ | async); as userInfo) {\n        <div>\n          @if ((users$ | async); as users) {\n            <div>\n              <div style=\"display: flex; gap: 1rem\">\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\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] === 'allChannels' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                        @if ((userSelect.value?.length || 0) > 1) {\n                          <span class=\"example-additional-selection\">\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                  </div>\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                  <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    }\n  </div>\n  }\n\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" }] }); }
+}
+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: "@if ((user$ | async); as user) {\n\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n      @if ((user$ | async); as userInfo) {\n        <div>\n          @if ((users$ | async); as users) {\n            <div>\n              <div style=\"display: flex; gap: 1rem\">\n                <div style=\"flex:1\" [formGroup]=\"messages\">\n                  <div style=\"display:flex\">\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] === 'allChannels' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                        @if ((userSelect.value?.length || 0) > 1) {\n                          <span class=\"example-additional-selection\">\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                  </div>\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                  <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    }\n  </div>\n  }\n\n}\n" }]
+        }], propDecorators: { server: [{
+                type: Input
+            }], wsServer: [{
+                type: Input
+            }], jwtToken: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
+class WsNotificationsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", ngImport: i0, template: "<p>\n  ws-notifications coming soon!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<p>\n  ws-notifications coming soon!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
+class WsAiMessagingComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging", ngImport: i0, template: "<p>\n  ws-ai-messaging coming soon!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsAiMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-ai-messaging', standalone: false, template: "<p>\n  ws-ai-messaging coming soon!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
+class RequestManagerWsDemoComponent {
+    constructor() {
+        this.httpManagerService = inject(HTTPManagerService);
+        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
+        this.fb = inject(FormBuilder);
+        this.user$ = this.stateRequestServiceDemo.user$;
+        // users$ = this.stateRequestServiceDemo.userList$
+        this.attempts$ = this.stateRequestServiceDemo.attempts$;
+        this.nextRetry$ = this.stateRequestServiceDemo.nextRetry$;
+        this.connectionStatus$ = this.stateRequestServiceDemo.status$;
+        // data$ = this.stateRequestServiceDemo.data$;
+        this.isPending$ = this.stateRequestServiceDemo.isPending$;
+    }
+    // messages = this.fb.group<any>({
+    //   toUser: this.fb.control<string|null>(null, Validators.required),
+    //   content: this.fb.control<string|null>(null, Validators.required),
+    // })
+    // get toUser() {
+    //   return this.messages.get('toUser') as FormControl
+    // }
+    // get content() {
+    //   return this.messages.get('content') as FormControl
+    // }
+    // get isValid() {
+    //   return this.toUser.valid
+    // }
+    // fromMe = (user: string, fromUser: string) => {
+    //   return user === fromUser
+    // }
+    // communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$
+    // latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$
+    // chat$: Observable<{ user: any, messages: any[]}|any> = combineLatest([this.user$, this.communicationMessages$])
+    // .pipe(
+    //   map(([user, messages]: any) => ({ user, messages })),
+    //   map(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: any) => {
+    //       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 }
+    //   })
+    // );
+    ngOnInit() {
+        //   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" }, 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\">\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        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\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      <app-ws-notifications></app-ws-notifications>\n      WS - Custom Messaging\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n      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$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", 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" }] }); }
+    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" }, 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\">\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        ></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"] }, { 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\">\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        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n\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      <app-ws-notifications></app-ws-notifications>\n      WS - Custom Messaging\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n      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.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\">\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        ></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: [{
@@ -4802,100 +4884,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.user$ = this.stateRequestServiceDemo.user$;
-        this.users$ = this.stateRequestServiceDemo.userList$;
-        this.data$ = this.stateRequestServiceDemo.data$;
-        this.messages = this.fb.group({
-            toUser: 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 toUser() {
-        return this.messages.get('toUser');
-    }
-    get content() {
-        return this.messages.get('content');
-    }
-    get isValid() {
-        return this.toUser.valid;
-    }
-    ngOnInit() {
-        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
-        // this.stateRequestServiceDemo.getData()
-    }
-    onSendMessage() {
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const message = ChannelMessage.adapt(this.messages.value);
-        this.stateRequestServiceDemo.sendMessage(message);
-        this.content.reset();
-    }
-    onSendAlert() {
-        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: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n    @if ((user$ | async); as userInfo) {\n      <div>\n        @if ((users$ | async); as users) {\n          <div >\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUser\">\n                      <mat-option value=\"allChannels\" #selectedUser>\n                        All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                </div>\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(); $event.preventDefault()\"\n                      [disabled]=\"!isValid\"\n                    ></textarea>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendAlert()\">\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  }\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: "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" }] }); }
-}
-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: "@if ((data$ | async); as data) {\n  <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n    @if ((user$ | async); as userInfo) {\n      <div>\n        @if ((users$ | async); as users) {\n          <div >\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n                <div style=\"display:flex\">\n                  <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUser\">\n                      <mat-option value=\"allChannels\" #selectedUser>\n                        All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.username }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n                </div>\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(); $event.preventDefault()\"\n                      [disabled]=\"!isValid\"\n                    ></textarea>\n                  </mat-form-field>\n                </div>\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendMessage()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendAlert()\">\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  }\n</div>\n}\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 {
@@ -5997,7 +5985,7 @@ class HttpRequestServicesDemoComponent {
         this.selectedService = this.requestTypes[type].value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, deps: [{ token: CONFIG_SETTINGS_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HttpRequestServicesDemoComponent, selector: "app-http-request-services-demo", inputs: { wsServer: "wsServer", jwtToken: "jwtToken", server: "server", user: "user", adapter: "adapter", mapper: "mapper" }, ngImport: i0, template: "<mat-toolbar  style=\"display:flex\">\n  <div>Http Request Manager Services</div>\n  <div style=\"flex:1\"></div>\n  <button mat-stroked-button [matMenuTriggerFor]=\"menu\">Services</button>\n  <mat-menu #menu=\"matMenu\">\n    @for (type of requestTypes; track type; let i = $index) {\n      @if (type?.divider) {\n        <div\n          style=\"margin-top: .5rem; margin-bottom: .5rem;\"\n          >\n          <mat-divider></mat-divider>\n        </div>\n      }\n      <button\n        mat-menu-item\n        (click)=\"onSelected(i)\"\n        [disabled]=\"type.disabled\"\n        >\n        {{ type.name }}\n      </button>\n    }\n\n  </mat-menu>\n</mat-toolbar>\n\n<span>\n  @switch (selectedService) {\n    @case ('http_service') {\n      <p>\n        <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n        <app-request-manager-demo\n          [server]=\"server\"\n          [adapter]=\"adapter\"\n          [mapper]=\"mapper\"\n        ></app-request-manager-demo>\n      </p>\n    }\n    <!-- <p *ngSwitchCase=\"'http_signals_service'\">\n    <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n    <app-request-signals-manager-demo></app-request-signals-manager-demo>\n  </p> -->\n  @case ('http_state_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-state-demo\n        [server]=\"server\"\n        [adapter]=\"adapter\"\n        [mapper]=\"mapper\"\n      ></app-request-manager-state-demo>\n    </p>\n  }\n  @case ('http_state_service_ws') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"HTTP_OPTIONS\"></ng-container>\n      <app-request-manager-ws-demo\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-request-manager-ws-demo>\n    </p>\n  }\n  @case ('database_service') {\n    <p>\n      <app-database-data-demo></app-database-data-demo>\n    </p>\n  }\n  @case ('local_storage_service') {\n    <p>\n      <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n      <app-local-storage-demo></app-local-storage-demo>\n    </p>\n  }\n  <!-- <p *ngSwitchCase=\"'local_storage_signals_service'\">\n  <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n  <app-local-storage-signals-demo></app-local-storage-signals-demo>\n</p> -->\n@case ('store_state_manager') {\n  <p>\n    <ng-container *ngTemplateOutlet=\"LOCAL_OPTIONS\"></ng-container>\n    <app-store-state-manager-demo></app-store-state-manager-demo>\n  </p>\n}\n@default {\n  <p>\n    Other\n  </p>\n}\n}\n</span>\n\n<ng-template #HTTP_OPTIONS>\n  @if (injectionOptions?.httpRequestOptions) {\n    <div class=\"box\">\n      <h3 style=\"font-weight: bold;\">Injection Token Detected - HTTP Options</h3>\n      {{ injectionOptions?.httpRequestOptions| json }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #LOCAL_OPTIONS>\n  @if (injectionOptions?.LocalStorageOptions) {\n    <ng-container class=\"box\">\n      <div class=\"box\">\n        <h3 style=\"font-weight: bold;\">Injection Token Detected - LocalStorage Options</h3>\n        {{ injectionOptions?.LocalStorageOptions| json }}\n      </div>\n    </ng-container>\n  }\n</ng-template>\n\n\n", styles: [".box{padding:1rem;background-color:#f5f5f5;border:thin gray solid;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: RequestManagerStateDemoComponent, selector: "app-request-manager-state-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: RequestManagerDemoComponent, selector: "app-request-manager-demo", inputs: ["server", "adapter", "mapper"] }, { kind: "component", type: LocalStorageDemoComponent, selector: "app-local-storage-demo" }, { kind: "component", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: StoreStateManagerDemoComponent, selector: "app-store-state-manager-demo" }, { kind: "component", type: DatabaseDataDemoComponent, selector: "app-database-data-demo" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HttpRequestServicesDemoComponent, decorators: [{
             type: Component,
@@ -6027,5 +6015,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelInfo, ChannelMessage, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UserMessage, UtilsService, WSOptions, WSUser, WebsocketService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
+export { ApiRequest, AppService, AsymmetricalEncryptionService, CONFIG_SETTINGS_TOKEN, ChannelInfo, CommunicationType, ConfigHTTPOptions, ConfigOptions, DataType, DatabaseDataDemoComponent, DatabaseManagerService, DatabaseStorage, DbService, ErrorDisplaySettings, GlobalStoreOptions, HTTPManagerService, HTTPManagerSignalsService, HTTPManagerStateService, HeadersService, HttpRequestManagerModule, HttpRequestServicesDemoComponent, LocalStorageDemoComponent, LocalStorageManagerService, LocalStorageOptions, LocalStorageSignalsManagerService, PathQueryService, Random, RandomNumber, RandomNumbers, RandomNumbersUnique, RandomSignature, RandomStr, RequestErrorInterceptor, RequestHeadersInterceptor, RequestManagerDemoComponent, RequestManagerStateDemoComponent, RequestOptions, RequestService, RequestSignalsService, RetryOptions, SettingOptions, StateStorageOptions, StorageData, StorageOption, StorageType, StoreStateManagerService, SymmetricalEncryptionService, TableSchemaDef, UUID, UUID_STR, UtilsService, WSOptions, WSUser, WebsocketService, WithCredentialsInterceptor, countdown, delayedRetry, requestPolling, requestStreaming };
 //# sourceMappingURL=http-request-manager.mjs.map