http-request-manager 18.5.9 → 18.5.11

package/fesm2022/http-request-manager.mjs

@@ -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);
@@ -2955,9 +2934,9 @@ class HTTPManagerStateService extends ComponentStore {
                 console.warn('Database storage requires dataType to be ARRAY');
             if (!this.apiOptions.adapter)
                 console.warn('Database storage requires an adapter to define the data shape');
-            if (this.database && this.database?.table === '')
+            if (this.databaseOptions && this.databaseOptions?.table === '')
                 console.warn('Database storage requires a table name');
-        }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.database?.table), switchMap(() => {
+        }), filter(() => this.dataType === DataType.ARRAY && !!this.apiOptions.adapter && !!this.databaseOptions?.table), switchMap(() => {
             const sampleData = this.apiOptions.adapter?.({}) || {};
             const schemaKeys = Object.keys(sampleData).filter(key => sampleData[key] !== undefined);
             let schema = '++id';
@@ -2968,7 +2947,7 @@ class HTTPManagerStateService extends ComponentStore {
                 }
             }
             const tableDef = TableSchemaDef.adapt({
-                table: this.database?.table,
+                table: this.databaseOptions?.table,
                 schema: schema
             });
             return this.dbManagerService.createDatabaseTable(tableDef);
@@ -3054,11 +3033,11 @@ class HTTPManagerStateService extends ComponentStore {
                 this.setData$({});
             }
         }), concatMap(() => {
-            if (this.hasDatabase && this.database?.table) {
+            if (this.hasDatabase && this.databaseOptions?.table) {
                 const currentData = this.get()?.data;
                 const idsToDelete = Array.isArray(currentData) ? currentData.map((r) => r.id) : [];
                 if (idsToDelete.length > 0) {
-                    return this.dbManagerService.deleteTableRecords(this.database.table, idsToDelete);
+                    return this.dbManagerService.deleteTableRecords(this.databaseOptions.table, idsToDelete);
                 }
             }
             return of(null);
@@ -3074,39 +3053,39 @@ class HTTPManagerStateService extends ComponentStore {
                     data = (!data) ? (this.dataType === DataType.ARRAY) ? [] : {} : data;
                     this.setData$(data);
                 }), concatMap((data) => {
-                    if (this.hasDatabase && this.database?.table && Array.isArray(data) && data.length > 0) {
+                    if (this.hasDatabase && this.databaseOptions?.table && Array.isArray(data) && data.length > 0) {
                         this.localStorageManagerService.updateStore({
-                            name: this.database.table,
-                            data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } }
+                            name: this.databaseOptions.table,
+                            data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
                         });
-                        return this.dbManagerService.createTableRecords(this.database.table, data);
+                        return this.dbManagerService.createTableRecords(this.databaseOptions.table, data);
                     }
                     return of(data);
                 }));
             };
-            if (this.hasDatabase && this.database?.table) {
+            if (this.hasDatabase && this.databaseOptions?.table) {
                 return this.dbManagerService.databaseExists().pipe(switchMap((dbExists) => {
                     if (!dbExists) {
                         const initObs = this.initDBStorageAsync();
                         return initObs.pipe(switchMap(() => fetchFromAPI()));
                     }
-                    return this.dbManagerService.hasDatabaseTable(this.database.table).pipe(switchMap((tableExists) => {
+                    return this.dbManagerService.hasDatabaseTable(this.databaseOptions.table).pipe(switchMap((tableExists) => {
                         if (!tableExists) {
                             const initObs = this.initDBStorageAsync();
                             return initObs.pipe(switchMap(() => fetchFromAPI()));
                         }
-                        return this.localStorageManagerService.store$(this.database.table).pipe(take(1), switchMap((storeData) => {
+                        return this.localStorageManagerService.store$(this.databaseOptions.table).pipe(take(1), switchMap((storeData) => {
                             const expires = storeData?.expires || 0;
                             const hasExpired = expires > 0 && this.utils.hasExpired(expires);
                             if (hasExpired) {
-                                return this.dbManagerService.clearTable(this.database.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
+                                return this.dbManagerService.clearTable(this.databaseOptions.table).pipe(switchMap(() => fetchFromAPI()), tap(() => {
                                     this.localStorageManagerService.updateStore({
-                                        name: this.database.table,
-                                        data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } }
+                                        name: this.databaseOptions.table,
+                                        data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } }
                                     });
                                 }));
                             }
-                            return this.dbManagerService.getTableRecords(this.database.table).pipe(switchMap((dbData) => {
+                            return this.dbManagerService.getTableRecords(this.databaseOptions.table).pipe(switchMap((dbData) => {
                                 if (Array.isArray(dbData) && dbData.length > 0) {
                                     this.setData$(dbData);
                                     return of(dbData);
@@ -3134,14 +3113,14 @@ class HTTPManagerStateService extends ComponentStore {
                 if (method === 'CREATE')
                     this.addData$(data);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table) {
+                if (this.hasDatabase && this.databaseOptions?.table) {
                     const id = options.path?.length ? options.path[options.path.length - 1] : null;
                     if (method === 'DELETE' && id)
-                        return this.dbManagerService.deleteTableRecord(this.database.table, id);
+                        return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, id);
                     if (method === 'UPDATE' && data)
-                        return this.dbManagerService.updateTableRecord(this.database.table, data);
+                        return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
                     if (method === 'CREATE' && data)
-                        return this.dbManagerService.createTableRecord(this.database.table, data);
+                        return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3157,8 +3136,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('CREATE', [...options?.path || [], data.id]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.createTableRecord(this.database.table, data);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.createTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3174,8 +3153,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('UPDATE', [...options?.path || []]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.updateTableRecord(this.database.table, data);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.updateTableRecord(this.databaseOptions.table, data);
                 }
                 return of(data);
             }));
@@ -3191,8 +3170,8 @@ class HTTPManagerStateService extends ComponentStore {
                 if (this.wsConnection)
                     this.wsCommunication('DELETE', [...options?.path || []]);
             }), concatMap((data) => {
-                if (this.hasDatabase && this.database?.table && data?.id) {
-                    return this.dbManagerService.deleteTableRecord(this.database.table, data.id);
+                if (this.hasDatabase && this.databaseOptions?.table && data?.id) {
+                    return this.dbManagerService.deleteTableRecord(this.databaseOptions.table, data.id);
                 }
                 return of(data);
             }));
@@ -3242,16 +3221,17 @@ 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);
         this.wsNextRetry$ = this.wsNextRetry.asObservable();
         this.setApiRequestOptions(apiOptions, dataType, database);
         this.status$ = this.setupConnectionStatus();
-        if (this.database && this.database.table) {
+        if (this.databaseOptions && this.databaseOptions.table) {
             this.localStorageManagerService.createStore({
-                name: this.database.table,
-                data: { ...this.database, ...{ expires: this.utils.expires(this.database.expiresIn) } },
+                name: this.databaseOptions.table,
+                data: { ...this.databaseOptions, ...{ expires: this.utils.expires(this.databaseOptions.expiresIn) } },
                 options: SettingOptions.adapt({
                     storage: StorageType.GLOBAL,
                     encrypted: false,
@@ -3262,16 +3242,32 @@ class HTTPManagerStateService extends ComponentStore {
     setApiRequestOptions(apiOptions, dataType, database) {
         this.apiOptions = ApiRequest.adapt(apiOptions);
         this.dataType = (dataType) ? dataType : DataType.ARRAY;
-        this.hasDatabase = (this.database?.table) ? true : false;
-        this.database = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
-        if (this.database)
+        // Only update database options if a database parameter is explicitly provided
+        if (database !== undefined) {
+            this.hasDatabase = (database?.table) ? true : false;
+            this.databaseOptions = (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.databaseOptions)
             this.initDBStorage();
         if (this.apiOptions.ws)
             this.initWS(this.apiOptions.ws);
     }
     // 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 +3282,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) {
@@ -3352,7 +3350,7 @@ class HTTPManagerStateService extends ComponentStore {
             console.warn('Database storage requires an adapter to define the data shape');
             return of(null);
         }
-        if (!this.database?.table) {
+        if (!this.databaseOptions?.table) {
             console.warn('Database storage requires a table name');
             return of(null);
         }
@@ -3366,7 +3364,7 @@ class HTTPManagerStateService extends ComponentStore {
             }
         }
         const tableDef = TableSchemaDef.adapt({
-            table: this.database?.table,
+            table: this.databaseOptions?.table,
             schema: schema
         });
         return this.dbManagerService.createDatabaseTable(tableDef);
@@ -3378,20 +3376,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 +4097,8 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
                 jwtToken,
                 user, // user object
                 retry: RetryOptions.adapt({
-                    times: 3,
-                    delay: 10,
+                    times: 10,
+                    delay: 5,
                 }),
             }
         });
@@ -4110,6 +4107,7 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
         });
     }
     sendMessage(data) {
+        debugger;
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
@@ -4182,6 +4180,7 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.createRecord(newData, RequestOptions.adapt({ path: ['ai', 'tests'] }));
     }
     sendMessage(data) {
+        debugger;
         console.log('sendMessage', data);
         this.wsMessaging(data);
     }
@@ -4246,11 +4245,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\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: [".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.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.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\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: [".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) {\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: [{
@@ -4261,49 +4260,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$])
@@ -4342,27 +4309,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;
@@ -4370,12 +4343,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$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: 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: [{
@@ -4804,100 +4888,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 {
@@ -6029,5 +6019,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